.hamburger{position:absolute;inset:0 0 auto auto;display:grid}.hamburger.hidden .nav-items{transform:scaleY(0);filter:opacity(0);top:-50%}.hamburger .button{display:grid;grid-template-rows:repeat(3,1fr);gap:5px;justify-self:flex-end;width:3.4rem;height:3.4rem;padding:1rem}.hamburger .button .bun{width:100%;height:100%;background:var(--color-primary);border-radius:5px}.hamburger .button .hidden-label{position:absolute;height:1px;width:1px;overflow:hidden}.hamburger .link{padding:.75rem 1rem}.hamburger .nav-items{position:relative;top:0;display:grid;border-top-left-radius:5px;border-bottom-left-radius:5px;border-bottom-right-radius:5px;background-color:var(--color-secondary);overflow:hidden;transform:scaleY(1);box-shadow:0 20px 80px 10px var(--color-background-dark);transition:transform .1s ease-out,top .1s ease-out,filter .1s ease-out}.hamburger .nav-items .nav-item{font-size:1.125rem;width:100%}@media (min-width: 1200px){.hamburger .nav-items .nav-item{font-size:1.125rem}}.hamburger .nav-items .nav-item:hover{background-color:var(--color-secondary-light)}.header{position:fixed;z-index:11;inset:0 0 auto;display:flex;background:linear-gradient(0deg,var(--color-background-dark),var(--color-background-light))}.header a{display:block;width:fit-content}.header .heading{font-size:1.125rem;font-weight:700;position:relative;padding:1rem;width:fit-content}@media (min-width: 1200px){.header .heading{font-size:1.125rem}}.track-grid-loading{font-size:1.125rem;display:flex;flex-direction:column;justify-content:center;align-items:center;place-items:center;width:100%;min-height:100svh}@media (min-width: 1200px){.track-grid-loading{font-size:1.125rem}}.track-grid-loading:has(.marble){padding-top:9.875rem}.track-grid-loading .marble{animation:marble-bouncing;animation-duration:1s;animation-iteration-count:infinite}.track-grid-fallback{display:flex;flex-direction:column;gap:2rem;margin-bottom:4rem}.track-grid-fallback>.fallback-button{display:flex;justify-content:center;padding:.5rem 1rem;border-radius:5px;font-weight:700;background-color:var(--color-accent-light);color:var(--color-background-dark);align-self:flex-start}.track-grid-fallback>.fallback-button:hover{background-color:var(--color-accent)}.track-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:.5rem;width:100%}@media (min-width: 1200px){.track-grid{grid-template-columns:repeat(3,1fr)}}.track-grid .subheading{font-size:1.125rem;font-weight:700}@media (min-width: 1200px){.track-grid .subheading{font-size:1.125rem}}.track-grid .byline{display:flex;flex-direction:column-reverse;font-size:.875rem;color:var(--color-primary-dark)}.track-grid .grid-item{display:grid;justify-content:space-between;gap:.5rem;padding:.5rem;background-color:var(--color-secondary);height:100%;border-radius:5px}.track-grid .grid-item:hover{background-color:var(--color-secondary-light)}.marble{position:relative;z-index:15;width:40px;height:40px;border-radius:50%;background-color:var(--color-accent-secondary);border:1px solid var(--color-highlight)}.track-block{position:relative;z-index:15;width:200px;height:15px;border-radius:8px;background-color:var(--color-highlight);border:1px solid var(--color-highlight)}.note-block{position:relative;z-index:15;width:100px;height:50px;border-radius:5px;background-color:var(--color-accent);border:1px solid var(--color-highlight)}.home{font-size:1.125rem;display:flex;flex-direction:column;justify-content:center;align-items:center;place-items:center;width:100%;min-height:100svh;gap:2rem;margin:0 auto;max-width:40rem;padding:1rem}@media (min-width: 1200px){.home{font-size:1.125rem}}.home:has(.marble){padding-top:9.875rem}.home .marble{animation:marble-bouncing;animation-duration:1s;animation-iteration-count:infinite}.home .marble{z-index:0;margin-bottom:-2rem}.home .heading{width:100%;border-width:3px;border-style:solid;border-image:linear-gradient(90deg,var(--color-accent),transparent);border-image-slice:0 0 1 0;font-size:1.75rem;font-weight:700;align-self:flex-start}@media (min-width: 1200px){.home .heading{font-size:2.25rem}}.home>.subheading{font-size:1.125rem;font-weight:700;align-self:flex-start;margin-top:3rem;margin-bottom:-1rem}@media (min-width: 1200px){.home>.subheading{font-size:1.125rem}}.home .description{font-size:1.125rem;align-self:flex-start}@media (min-width: 1200px){.home .description{font-size:1.125rem}}.home .track-buttons{display:flex;flex-direction:column;gap:1rem}@media (min-width: 800px){.home .track-buttons{flex-direction:row;justify-content:flex-end;width:100%}}.home .button{display:flex;justify-content:center;padding:.5rem 1rem;border-radius:5px;font-weight:700;background-color:var(--color-accent-light);color:var(--color-background-dark);width:100%}.home .button:hover{background-color:var(--color-accent)}@media (min-width: 800px){.home .button{width:fit-content}}.home .about-link{text-align:center;color:var(--color-highlight);margin-top:-1rem;text-decoration:underline;display:flex;flex-direction:column;justify-content:flex-end;flex-grow:1;padding-top:3rem}.home .about-link:hover{text-decoration:none}.login{display:flex;flex-direction:column;justify-content:center;width:100%;min-height:100svh;padding-top:5rem}.login:has(.marble){padding-top:9.875rem}.login.submitting{filter:brightness(.75)}.login.submitting .marble{animation-duration:.5s}.login .marble{z-index:0;margin:0 auto;animation:marble-bouncing;animation-duration:1s;animation-iteration-count:infinite}.login .heading{width:100%;border-width:3px;border-style:solid;border-image:linear-gradient(90deg,var(--color-accent),transparent);border-image-slice:0 0 1 0;font-size:1.75rem;font-weight:700;text-align:center;line-height:1}@media (min-width: 1200px){.login .heading{font-size:2.25rem}}.login .description{font-size:1.125rem}@media (min-width: 1200px){.login .description{font-size:1.125rem}}.login .fields{max-width:50rem;margin:0 auto;padding-left:1rem;padding-right:1rem;width:30rem;max-width:100%;padding:0 1rem;display:flex;flex-direction:column;justify-content:center;gap:2rem}.login .label{display:flex;flex-direction:column;align-items:center;gap:.25rem;width:100%;border-radius:5px;background-color:var(--color-secondary);padding:1rem}@media (min-width: 1200px){.login .label{display:grid;grid-template-columns:minmax(0,1fr) 60%;justify-items:flex-end;align-items:center;gap:.5rem}}@media (min-width: 1200px){.login .label{padding:.5rem 1rem}}.login .input{width:100%;height:2rem;border-radius:5px;padding:0 .5rem;color:var(--color-background)}.login .input.invalid{outline:3px solid var(--color-accent-dark)}.login .button{display:flex;justify-content:center;padding:.5rem 1rem;border-radius:5px;font-weight:700;background-color:var(--color-accent-light);color:var(--color-background-dark);width:10rem;margin:auto}.login .button:hover{background-color:var(--color-accent)}.login .create-account{text-align:center;color:var(--color-highlight);margin-top:-1rem;text-decoration:underline;padding-bottom:3rem}.login .create-account:hover{text-decoration:none}.registration{display:flex;flex-direction:column;justify-content:center;width:100%;min-height:100svh;padding-top:5rem}.registration:has(.marble){padding-top:9.875rem}.registration.submitting{filter:brightness(.75)}.registration.submitting .marble{animation-duration:.5s}.registration .marble{z-index:0;margin:0 auto;animation:marble-bouncing;animation-duration:1s;animation-iteration-count:infinite}.registration .heading{width:100%;border-width:3px;border-style:solid;border-image:linear-gradient(90deg,var(--color-accent),transparent);border-image-slice:0 0 1 0;font-size:1.75rem;font-weight:700;text-align:center;line-height:1}@media (min-width: 1200px){.registration .heading{font-size:2.25rem}}.registration .description{font-size:1.125rem}@media (min-width: 1200px){.registration .description{font-size:1.125rem}}.registration .fields{max-width:50rem;margin:0 auto;padding-left:1rem;padding-right:1rem;width:30rem;max-width:100%;padding:0 1rem;display:flex;flex-direction:column;justify-content:center;gap:2rem}.registration .label{display:flex;flex-direction:column;align-items:center;gap:.25rem;width:100%;border-radius:5px;background-color:var(--color-secondary);padding:1rem}@media (min-width: 1200px){.registration .label{display:grid;grid-template-columns:minmax(0,1fr) 60%;justify-items:flex-end;align-items:center;gap:.5rem}}@media (min-width: 1200px){.registration .label{padding:.5rem 1rem}}.registration .input{width:100%;height:2rem;border-radius:5px;padding:0 .5rem;color:var(--color-background)}.registration .input.invalid{outline:3px solid var(--color-accent-dark)}.registration .button{display:flex;justify-content:center;padding:.5rem 1rem;border-radius:5px;font-weight:700;background-color:var(--color-accent-light);color:var(--color-background-dark);width:10rem;margin:auto}.registration .button:hover{background-color:var(--color-accent)}.registration .create-account{text-align:center;color:var(--color-highlight);margin-top:-1rem;text-decoration:underline;padding-bottom:3rem}.registration .create-account:hover{text-decoration:none}.registration .password-byline{margin-bottom:-1.5rem}.registration .list{list-style-type:disc;padding-left:2rem}.account{max-width:50rem;margin:0 auto;padding-left:1rem;padding-right:1rem;display:flex;flex-direction:column;gap:2rem;min-height:100svh;padding-top:6rem}.account .heading{width:100%;border-width:3px;border-style:solid;border-image:linear-gradient(90deg,var(--color-accent),transparent);border-image-slice:0 0 1 0;font-size:1.75rem;font-weight:700}@media (min-width: 1200px){.account .heading{font-size:2.25rem}}.account .link{align-self:flex-end}.account .button{display:flex;justify-content:center;padding:.5rem 1rem;border-radius:5px;font-weight:700;background-color:var(--color-accent-light);color:var(--color-background-dark);margin-bottom:3rem}.account .button:hover{background-color:var(--color-accent)}.playback{position:absolute;inset:0 0 auto;display:flex;justify-content:center;gap:2rem;padding-top:3.5rem}@media (min-width: 800px){.playback{padding-top:.25rem;width:20%;margin:0 auto;z-index:11}}.playback .button{position:relative;z-index:1;display:grid;font-size:0}@media (min-width: 800px){.playback .button.trash{display:none}}.playback .button.hidden{display:none}.playback .delete-icon{width:2rem;height:2rem}#workspace{display:grid;width:100vw;height:100svh;cursor:crosshair;touch-action:none}#workspace .konva-container{width:100vw;height:100svh}#workspace .question-mark{position:fixed;inset:4rem auto 1rem 1rem;display:grid;place-items:center;padding-top:2px;width:3rem;height:3rem;list-style-type:none;background-color:var(--color-secondary-dark);border-radius:50%;font-size:1.75rem;font-weight:700;user-select:none;cursor:pointer}@media (min-width: 800px){#workspace .question-mark{inset:auto 1rem 1rem auto}}#workspace .help{position:absolute;z-index:10;background-color:var(--color-secondary-dark);border-radius:5px;border:1px solid var(--color-primary);line-height:1.4}#workspace .help[open]{inset:8rem 1rem auto;box-shadow:0 20px 80px 10px var(--color-background-dark)}@media (min-width: 800px){#workspace .help[open]{inset:7rem 3rem auto;max-width:40rem;margin:auto}}#workspace .help[open] .question-mark{background-color:var(--color-secondary-light)}#workspace .heading{font-size:1.125rem;font-weight:700;border-width:3px;border-bottom-style:solid;border-image:linear-gradient(90deg,var(--color-accent),transparent);border-image-slice:0 0 1 0;padding:.6rem 1rem .5rem}@media (min-width: 1200px){#workspace .heading{font-size:1.125rem}}#workspace .instructions{display:grid;list-style-type:disc;padding:1rem 1rem 1rem 2rem;gap:.5rem;max-height:50svh;overflow:scroll}@media (min-width: 800px){#workspace .instructions{gap:1rem}}#workspace .instructions .keyboard-shortcuts{display:none}@media (min-width: 800px){#workspace .instructions .keyboard-shortcuts{display:grid}}.draggable{position:relative;z-index:5;cursor:pointer}.draggable.is-dragging{opacity:.3}.marble-synth{position:relative;width:100%;height:100%;padding:0 1rem .5rem;background-color:var(--color-primary);color:var(--color-background)}@media (min-width: 800px){.marble-synth{width:50vw}}.marble-synth.hidden{display:none}.marble-synth .preview{display:flex;justify-content:center;padding:.5rem 1rem;border-radius:5px;font-weight:700;background-color:var(--color-accent-light);color:var(--color-background-dark);position:absolute;inset:auto 1rem 1rem auto}.marble-synth .preview:hover{background-color:var(--color-accent)}.marble-synth .legend{text-align:center;padding:.5rem 0 0}.marble-synth .label{display:grid;grid-template-columns:5rem minmax(0,1fr);align-items:center;gap:.5rem}.marble-synth .slider{width:100%}.marble-synth .dropdown{outline:2px solid var(--color-accent-secondary-light);padding:.25rem;border-radius:5px}.marble-synth .settings,.marble-synth .note-selection{display:grid;gap:1rem}@media (min-width: 800px){.marble-synth .note-selection{grid-template-columns:1fr 1fr;gap:2rem}}.marble-synth .note-selection .label{display:grid;grid-template-columns:5rem minmax(0,1fr)}.marble-synth .note-selection .label .dropdown{flex-grow:1}.toolbar{position:absolute;inset:auto 1rem 0;user-select:none;transition:opacity .1s ease-out;overflow:hidden;touch-action:none}@media (min-width: 800px){.toolbar{width:fit-content}}.toolbar.hidden{opacity:0}.toolbar.is-saving{filter:brightness(.75)}.toolbar .summary{display:grid;margin:0 1rem}@media (min-width: 800px){.toolbar .summary{display:flex;align-items:flex-end}}.toolbar .summary .tab{position:relative;top:1px;display:grid;place-items:center;border-top:1px solid var(--color-highlight);border-left:1px solid var(--color-highlight);border-right:1px solid var(--color-highlight);height:3.25rem;max-height:3.25rem;padding:0 1rem;border-top-left-radius:5px;border-top-right-radius:5px;background-color:var(--color-secondary-dark);font-weight:700;transition:padding .2s ease-out,max-height .2s ease-out}.toolbar .summary .tab.hidden{display:none}.toolbar .summary .tab.synth-tab{background:var(--color-primary);color:var(--color-background)}.toolbar .summary .tab.synth-tab.selected{background:linear-gradient(180deg,var(--color-primary-dark),var(--color-primary) 50%)}.toolbar .delete-body-button{display:flex;justify-content:center;padding:.5rem 1rem;border-radius:5px;font-weight:700;background-color:var(--color-accent-light);color:var(--color-background-dark)}.toolbar .delete-body-button:hover{background-color:var(--color-accent)}.toolbar .login-prompt a{text-align:center;color:var(--color-highlight);margin-top:-1rem;text-decoration:underline}.toolbar .login-prompt a:hover{text-decoration:none}.toolbar .checkboxes{display:grid;gap:1rem;padding:.5rem 1rem}.toolbar .checkboxes.hidden{display:none}.toolbar .checkboxes .label{display:flex;gap:.5rem}.toolbar .text-label{display:flex;flex-direction:column;align-items:center;gap:.25rem;font-weight:700}@media (min-width: 800px){.toolbar .text-label{flex-direction:row;gap:.5rem}}.toolbar .input{width:100%;height:2rem;border-radius:5px;padding:0 .5rem;color:var(--color-background)}.toolbar .input.invalid{outline:3px solid var(--color-accent-dark)}.toolbar .buttons{display:grid;align-items:center;gap:.5rem}@media (min-width: 800px){.toolbar .buttons{display:flex;flex-direction:row}}.toolbar .button{display:flex;justify-content:center;padding:.5rem 1rem;border-radius:5px;font-weight:700;background-color:var(--color-accent-light);color:var(--color-background-dark)}.toolbar .button:hover{background-color:var(--color-accent)}.toolbar .failure-message{color:var(--color-accent-light)}.toolbar .failure-message.success-message{color:var(--color-accent-secondary-light)}.toolbar .content{display:flex;flex-wrap:wrap;justify-content:center;align-content:center;align-items:center;gap:1rem;max-height:0;border-top:1px solid var(--color-highlight);border-left:1px solid var(--color-highlight);border-right:1px solid var(--color-highlight);height:20rem;padding:0 1rem;background-color:var(--color-secondary-dark);border-top-left-radius:5px;border-top-right-radius:5px;overflow:hidden;transition:max-height .2s ease-out,background-color .2s ease-out}.toolbar .content.synth{padding:0}.toolbar[open] .content{margin-bottom:-1px}.toolbar.open .content.bodies{max-height:10rem}@media (min-width: 800px){.toolbar.open .content.bodies{max-height:5rem}}.toolbar.open .content.edit{max-height:6rem}.toolbar.open .content.settings{max-height:16rem}.toolbar.open .content.settings:has(.text-label){max-height:18rem}@media (min-width: 800px){.toolbar.open .content.settings:has(.text-label){max-height:16rem}}.toolbar.open .content.settings:has(.failure-message){max-height:20rem}@media (min-width: 800px){.toolbar.open .content.settings:has(.failure-message){max-height:16rem}}.toolbar.open .content.synth{max-height:16rem}.toolbar.open .content.synth:has(.small){max-height:10rem}@media (min-width: 800px){.toolbar.open .content.synth{max-height:13rem}.toolbar.open .content.synth:has(.small){max-height:10rem}}.toolbar.open .tab:not(.selected){max-height:5px;color:transparent}@media (min-width: 800px){.toolbar.open .tab:not(.selected){max-height:2.25rem;color:inherit}.toolbar.open .tab:not(.selected).synth-tab{color:var(--color-background)}}.toolbar.open .tab.selected{background:linear-gradient(180deg,var(--color-secondary),var(--color-secondary-dark) 50%)}@media (min-width: 800px){.toolbar.open .tab.selected{max-height:2.25rem}}.workspace-loading{font-size:1.125rem;display:flex;flex-direction:column;justify-content:center;align-items:center;place-items:center;width:100%;min-height:100svh}@media (min-width: 1200px){.workspace-loading{font-size:1.125rem}}.workspace-loading:has(.marble){padding-top:9.875rem}.workspace-loading .marble{animation:marble-bouncing;animation-duration:1s;animation-iteration-count:infinite}.not-found{font-size:1.125rem;display:flex;flex-direction:column;justify-content:center;align-items:center;place-items:center;width:100%;min-height:100svh;gap:1rem}@media (min-width: 1200px){.not-found{font-size:1.125rem}}.not-found:has(.marble){padding-top:9.875rem}.not-found .marble{animation:marble-bouncing;animation-duration:1s;animation-iteration-count:infinite}.not-found .status{width:100%;border-width:3px;border-style:solid;border-image:linear-gradient(90deg,var(--color-accent),transparent);border-image-slice:0 0 1 0;font-size:1.75rem;font-weight:700}@media (min-width: 1200px){.not-found .status{font-size:2.25rem}}.not-found .subheading{font-size:1.125rem;font-weight:700}@media (min-width: 1200px){.not-found .subheading{font-size:1.125rem}}.not-found a{text-align:center;color:var(--color-highlight);margin-top:-1rem;text-decoration:underline}.not-found a:hover{text-decoration:none}.about-page{font-size:1.125rem;display:flex;flex-direction:column;justify-content:center;align-items:center;place-items:center;width:100%;min-height:100svh;max-width:50rem;margin:0 auto;padding-left:1rem;padding-right:1rem;gap:1rem;align-items:flex-start}@media (min-width: 1200px){.about-page{font-size:1.125rem}}.about-page:has(.marble){padding-top:9.875rem}.about-page .marble{animation:marble-bouncing;animation-duration:1s;animation-iteration-count:infinite}.about-page .marble{margin-bottom:-1rem}.about-page .heading{width:100%;border-width:3px;border-style:solid;border-image:linear-gradient(90deg,var(--color-accent),transparent);border-image-slice:0 0 1 0;font-size:1.75rem;font-weight:700}@media (min-width: 1200px){.about-page .heading{font-size:2.25rem}}.about-page .subheading{font-size:1.125rem;font-weight:700;padding-top:1rem}@media (min-width: 1200px){.about-page .subheading{font-size:1.125rem}}.about-page .links{list-style-type:disc;padding-left:2rem}.about-page .link{text-align:center;color:var(--color-highlight);margin-top:-1rem;text-decoration:underline}.about-page .link:hover{text-decoration:none}:root{--color-background: #252422;--color-background-dark: #121211;--color-background-light: #403e3a;--color-primary: #fffcf2;--color-primary-dark: #fbf5dd;--color-highlight: #ccc5b9;--color-highlight-light: #dad7d1;--color-highlight-dark: #bab5ae;--color-secondary: #403d39;--color-secondary-light: #4b4a48;--color-secondary-dark: #32312e;--color-accent: #ee6055;--color-accent-light: #f48a83;--color-accent-dark: #cf5249;--color-accent-secondary: #5592ee;--color-accent-secondary-light: #7faaeb;--color-accent-secondary-dark: #466fac}*,*:before,*:after{box-sizing:border-box;margin:0;padding:0}h1,h2,h3,h4,h5,h6{font-size:inherit;font-weight:inherit}ol,ul,menu{list-style:none}a{text-decoration:inherit;color:inherit}address{font-style:inherit}fieldset,button,input[type=button]{border:none}input,textarea,select,button{color:inherit;font-family:inherit;font-size:inherit;border:none}button,input[type=button]{background-color:initial;cursor:pointer;border:initial}@font-face{font-family:Montserrat;src:url(/assets/Montserrat-SemiBoldItalic-59e24644.ttf) format("truetype");font-weight:700;font-style:italic}@font-face{font-family:Montserrat;src:url(/assets/Montserrat-SemiBold-e23dc6d2.ttf) format("truetype");font-weight:700}@font-face{font-family:Montserrat;src:url(/assets/Montserrat-Italic-8b54f487.ttf) format("truetype");font-style:italic}@font-face{font-family:Montserrat;src:url(/assets/Montserrat-Regular-c3fb0280.ttf) format("truetype")}@keyframes marble-bouncing{0%{top:0;animation-timing-function:ease-out}50%{top:-5rem;animation-timing-function:ease-in}to{top:0}}body{font-family:Montserrat}#root{background-color:var(--color-background);color:var(--color-primary)}