@font-face{font-family:M PLUS Code Latin;src:url(/assets/MPLUSCodeLatin-60be5cde.ttf) format("Truetype")}@font-face{font-family:Kalam;src:url(/assets/Kalam-Light-49c6264e.ttf) format("Truetype");font-weight:300}*,*:after,*:before{margin:0;padding:0;box-sizing:border-box}html,body,div,span,applet,object,iframe,h1,h2,h3,h4,h5,h6,p,blockquote,pre,a,abbr,acronym,address,big,cite,code,del,dfn,em,img,ins,kbd,q,s,samp,small,strike,strong,sub,sup,tt,var,b,u,i,center,dl,dt,dd,ol,ul,li,fieldset,form,label,legend,table,caption,tbody,tfoot,thead,tr,th,td,article,aside,canvas,details,embed,figure,figcaption,footer,header,hgroup,menu,nav,output,ruby,section,summary,time,mark,audio,video{margin:0;padding:0;border:0;font-size:100%;font:inherit;vertical-align:baseline}article,aside,details,figcaption,figure,footer,header,hgroup,menu,nav,section{display:block}body{line-height:1}ol,ul{list-style:none}blockquote,q{quotes:none}blockquote:before,blockquote:after,q:before,q:after{content:"";content:none}table{border-collapse:collapse;border-spacing:0}input:focus{outline:none}:root{--p-font: "M PLUS Code Latin";--title-font: "Kalam";--h1-size: 3rem;--h2-size: 4rem;--p-size: 1rem}h1{font-size:var(--h1-size)}h2{font-family:var(--title-font),cursive;font-size:var(--h2-size);text-align:center}body{font-family:var(--p-font),sans-serif;font-size:var(--p-size);color:var(--text-color);transition:color .3s ease}input,button{font-family:inherit;font-size:inherit}span{font-family:var(--p-font),sans-serif;font-weight:800;font-size:8rem}:root{--dark-purple: #800080;--dark-blue: #2F2FE1;--dark-red: #B42424;--dark-green: #1DAA62;--medium-blue: #69A1CD;--light-blue: #0D98BA;--light-green: #9ACD32;--light-orange: #FFA500;--dark-pink: #C71585;--light-red: #FF5349;--black: #000000;--dark-gray: #5c5c5c;--medium-gray: #AAAAAA;--light-gray: #d2d2d2;--lighter-gray: #e3e3e3;--white: #ffffff;--purple-100: #b8b9ff;--purple-200: #8d8ed1;--purple-300: #7e80cb;--purple-400: #626397;--purple-500: #8e8fb3;--purple-600: #5c5c7f;--text-color: var(--black);--border-radius-sm: .3em;--border-thickness: 2px;--background-color: var(--purple-300);--welcome-background-color: var(--medium-blue);--slider: var(--purple-100);--slider-btn-primary: var(--light-red);--slider-btn-secondary: var(--light-blue);--info-tab: var(--purple-100);--info-tab-btn: var(--light-orange);--waveform-btn: var(--light-green);--synth-row1: var(--light-blue);--synth-row2: var(--light-red);--synth-row3: var(--dark-pink);--synth-row4: var(--light-orange);--synth-row5: var(--light-green);--synth-row6: var(--light-blue);--drum-row1: var(--dark-green);--drum-row2: var(--dark-red);--drum-row3: var(--dark-purple);--drum-row4: var(--dark-blue);--btn-primary: var(--light-red);--btn-primary-hover: var(--dark-red);--btn-secondary: transparent;--btn-secondary-hover: var(--light-orange);--btn-special: var(--purple-100);--btn-special-hover: var(--dark-pink);--play-btn: var(--purple-300);--play-btn-hover: var(--purple-100);--border-radius: var(--border-radius-sm);--border-color: var(--black);--focus-color: var(--white);--modal-bkgd-color: var(--purple-100)}:root body.pro{--text-color: var(--lighter-gray);--background-color: var(--purple-600);--slider: var(--purple-500);--info-tab: var(--purple-500);--waveform-btn: var(--dark-green);--border-color: var(--lighter-gray);--focus-color: var(--black);--modal-bkgd-color: var(--purple-500)}@media (prefers-reduced-motion: no-preference){#note-one{animation:moveUp1 2s linear infinite}#note-two{animation:moveUp2 2s 1s linear infinite}#note-three{animation:moveUp3 2s .5s linear infinite}@keyframes moveUp1{0%{transform:translateY(20px) translate(10px)}to{transform:translateY(-50px)}}@keyframes moveUp2{to{transform:translateY(-50px) translate(10px)}}@keyframes moveUp3{to{transform:translateY(-50px)}}}.lines-group{position:relative;width:100%}.lines-group .line-left,.lines-group .line-right{position:absolute;width:52%;height:2px;background-color:#000;transform:rotate(-15deg) translate(-13px)}.lines-group .line-right{right:0;transform:rotate(15deg) translate(13px)}button{border:var(--border-thickness) solid var(--black);padding:.5rem 2rem;border-radius:var(--border-radius);background-color:var(--btn-primary);transition:box-shadow ease .3s,transform ease .3s,background-color ease .3s,border-color ease .3s,color ease .3s;cursor:pointer;text-transform:uppercase;color:var(--black)}button:hover{background-color:var(--btn-primary-hover);box-shadow:3px 3px #000;transform:translate(-3px,-3px);color:var(--white)}button:focus{box-shadow:0 0 0 3px var(--white)}button:active{box-shadow:none;transform:none}.undo-redo{display:flex;justify-content:space-between;gap:5em}.undo-redo .undo,.undo-redo .redo{padding:.3em .5em}#close{padding:.1rem .7rem;font-size:1.5em}button.secondary{border:var(--border-thickness) solid var(--border-color);background-color:var(--btn-secondary);color:var(--text-color)}button.secondary:hover{background-color:var(--btn-secondary-hover);color:var(--black)}button.secondary:focus{box-shadow:0 0 0 3px var(--focus-color)}button.special{position:absolute;top:0;right:0;margin-block-start:5rem;margin-inline-end:1em;background-color:var(--btn-special);color:var(--black)}button.special:hover{background-color:var(--btn-special-hover)}.play-pause-button{display:flex;padding:0;margin-block:2rem 1rem;background-color:transparent;border:none;border-radius:50%}.play-pause-button:hover{background-color:transparent;box-shadow:none;transform:none}button:hover .play-path,button:hover .pause-path{fill:var(--play-btn-hover)}#synth-ctrl{width:115%;display:flex;flex-direction:column;align-items:flex-end;background-color:var(--info-tab);border-radius:var(--border-radius);border:var(--border-thickness) solid black;padding:.5em;transition:background-color .3s ease}#synth-ctrl .radio-control{background-color:var(--waveform-btn);display:grid;grid-template-columns:1em auto;width:6rem;border-radius:var(--border-radius);margin:.2em;border:1px solid black;justify-items:flex-end;cursor:pointer;transition:background-color .3s ease}#synth-ctrl .radio-control--input{appearance:none;margin:0;width:3em;height:3em;box-shadow:inset 4em 4em var(--light-gray);border:1px solid black;border-radius:50%;position:relative;left:.5em;display:grid;place-content:center;transition:box-shadow .15s ease-in-out;cursor:pointer}#synth-ctrl .radio-control--input:focus{box-shadow:inset 4em 4em var(--light-orange)}#synth-ctrl .radio-control--input:before{content:"";width:1.5em;height:1.5em;border-radius:50%;border:1px solid var(--black);transition:box-shadow .15s ease-in-out;box-shadow:inset 2em 2em var(--light-gray)}#synth-ctrl .radio-control--input:checked:before{box-shadow:inset 2em 2em var(--black)}#synth-ctrl .radio-control svg{align-self:center;margin-inline-end:.5em;fill:none}.sequencer,.drum-seq{margin-block-end:4.2rem;display:flex;gap:.3rem}.sequencer__column,.drum-seq__column{display:flex;flex-direction:column;gap:.35em}.sequencer .cell,.drum-seq .cell{appearance:none;position:absolute}.sequencer .cell+label,.drum-seq .cell+label{cursor:pointer;height:40px;width:40px;background-color:var(--light-gray);border:1px solid var(--black);border-radius:var(--border-radius);transition:box-shadow ease .22s,transform ease .22s,background-color ease .22s}.sequencer .cell+label:hover,.drum-seq .cell+label:hover{background-color:#b3b3b3;box-shadow:3px 3px #000;transform:translate(-3px,-3px)}.sequencer .cell:focus+label,.drum-seq .cell:focus+label{box-shadow:0 0 0 2px var(--white)}.sequencer .cell.my-turn+label,.drum-seq .cell.my-turn+label{outline:2px solid var(--black)}.sequencer .cell:checked+label,.drum-seq .cell:checked+label{border:var(--border-thickness) solid var(--black)}.sequencer .cell1:hover+label,.drum-seq .cell1:hover+label{background:var(--synth-row1)}.sequencer .cell1:checked+label,.drum-seq .cell1:checked+label{background:var(--synth-row1)}.sequencer .cell2:hover+label,.drum-seq .cell2:hover+label{background:var(--synth-row2)}.sequencer .cell2:checked+label,.drum-seq .cell2:checked+label{background:var(--synth-row2)}.sequencer .cell3:hover+label,.drum-seq .cell3:hover+label{background:var(--synth-row3)}.sequencer .cell3:checked+label,.drum-seq .cell3:checked+label{background:var(--synth-row3)}.sequencer .cell4:hover+label,.drum-seq .cell4:hover+label{background:var(--synth-row4)}.sequencer .cell4:checked+label,.drum-seq .cell4:checked+label{background:var(--synth-row4)}.sequencer .cell5:hover+label,.drum-seq .cell5:hover+label{background:var(--synth-row5)}.sequencer .cell5:checked+label,.drum-seq .cell5:checked+label{background:var(--synth-row5)}.sequencer .cell6:hover+label,.drum-seq .cell6:hover+label{background:var(--synth-row6)}.sequencer .cell6:checked+label,.drum-seq .cell6:checked+label{background:var(--synth-row6)}.sequencer .drum-seq__column .cell1:hover+label,.drum-seq .drum-seq__column .cell1:hover+label{background:var(--drum-row1)}.sequencer .drum-seq__column .cell1:checked+label,.drum-seq .drum-seq__column .cell1:checked+label{background:var(--drum-row1)}.sequencer .drum-seq__column .cell2:hover+label,.drum-seq .drum-seq__column .cell2:hover+label{background:var(--drum-row2)}.sequencer .drum-seq__column .cell2:checked+label,.drum-seq .drum-seq__column .cell2:checked+label{background:var(--drum-row2)}.sequencer .drum-seq__column .cell3:hover+label,.drum-seq .drum-seq__column .cell3:hover+label{background:var(--drum-row3)}.sequencer .drum-seq__column .cell3:checked+label,.drum-seq .drum-seq__column .cell3:checked+label{background:var(--drum-row3)}.sequencer .drum-seq__column .cell4:hover+label,.drum-seq .drum-seq__column .cell4:hover+label{background:var(--drum-row4)}.sequencer .drum-seq__column .cell4:checked+label,.drum-seq .drum-seq__column .cell4:checked+label{background:var(--drum-row4)}.medium-gray .cell+label{background-color:var(--medium-gray)}.light-gray .cell+label{background-color:var(--light-gray)}#vol-ctrl,#tempo-ctrl{display:flex;align-items:center}input[type=range]{-webkit-appearance:none;appearance:none;width:15rem;background:transparent;margin-inline-start:.3rem;cursor:pointer}input[type=range]:focus{outline:none}input[type=range]::-webkit-slider-runnable-track{height:1rem;border-radius:.75rem;background-color:var(--slider);border:var(--border-thickness) solid;transition:background-color .3s ease}input[type=range]::-moz-range-track{height:.8rem;border-radius:.75rem;background-color:var(--light-gray);border:var(--border-thickness) solid;transition:background-color .3s ease}input[type=range]::-moz-range-progress{background-color:var(--slider);height:.8rem;border-radius:.75rem;border:var(--border-thickness) solid;transition:background-color .3s ease}.slider::-webkit-slider-thumb{-webkit-appearance:none;height:2.3rem;width:2.3rem;background:var(--slider-btn-primary);border:var(--border-thickness) solid;border-radius:var(--border-radius);margin-top:-14px;transition:box-shadow .2s ease}.secondary::-webkit-slider-thumb{background:var(--slider-btn-secondary)}.slider::-moz-range-thumb{-webkit-appearance:none;appearance:none;height:2rem;width:2rem;background:var(--slider-btn-primary);border:var(--border-thickness) solid;border-radius:var(--border-radius);margin-top:0}.secondary::-moz-range-thumb{background:var(--slider-btn-secondary)}.slider:focus::-webkit-slider-thumb{outline:2px solid var(--white);box-shadow:inset 0 0 0 50px var(--light-orange)}input[type=range]:focus::-moz-range-thumb{outline:2px solid var(--white);background-color:var(--light-orange)}.overlay{background:var(--welcome-background-color);position:fixed;top:0;left:0;width:100%;height:100%;z-index:1;display:grid;place-items:center;opacity:1;transition:opacity .5s ease}.overlay__group{height:50vh;display:flex;flex-direction:column;align-items:center;justify-content:space-around}.overlay__group--button{margin-block:2em}.overlay__group--logo{width:max-content;height:max-content}.hide{opacity:0}.info-tab-btn{background-color:var(--info-tab);border:var(--border-thickness) solid black;border-radius:var(--border-radius) var(--border-radius) 20px 20px;min-width:3em;height:fit-content;padding-inline:.2em;padding-block:.5em;margin-block:-2em 2em;position:absolute;display:flex;flex-direction:column;justify-content:flex-start;align-items:center;gap:.5em;overflow:hidden;text-transform:lowercase}.info-tab-btn.drum{top:36rem}@media (min-width: 1100px){.info-tab-btn.drum{top:34rem}}.info-tab-btn .notes,.info-tab-btn .drum-names{transform:scaley(0);grid-gap:1.5em;transform-origin:top;transition:transform .2s ease,margin-bottom .2s ease}.info-tab-btn .notes{margin-bottom:-125px}.info-tab-btn .drum-names{margin-bottom:-85px}.info-tab-btn .notes.show,.info-tab-btn .drum-names.show{display:grid;height:auto;transform:scaley(1);margin-bottom:0}.info-tab-btn .arrow{transition:transform .2s ease}.info-tab-btn .notes.show~.arrow,.info-tab-btn .drum-names.show~.arrow{transform:rotate(180deg)}.info-tab-btn .drum-names{grid-row:2}.info-tab-btn:hover{background-color:var(--info-tab-btn);box-shadow:none;transform:none;color:#000}[role=dialog]{position:fixed;top:0;bottom:0;left:0;right:0;margin:auto;height:fit-content;max-width:50vw;display:none}[role=dialog][open]{display:grid;background-color:var(--modal-bkgd-color);color:var(--black);border-radius:var(--border-radius);border:var(--border-thickness) solid black;z-index:2}.dialog-container{display:grid;place-items:center;height:fit-content;padding:2em}.dialog-container #title{font-size:var(--h1-size);text-transform:uppercase}.dialog-container #description{display:grid;grid-template-columns:repeat(2,1fr);grid-template-rows:auto;margin-block:2em;gap:1em}.dialog-container #close{position:absolute;right:0;top:0;margin:.5em}.bold{font-weight:700}#cover{background:var(--purple-400);opacity:.75;position:fixed;top:0;bottom:0;left:0;right:0;display:none;z-index:1}#trigger{position:absolute;top:0;right:0;margin:1em}@media (pointer: coarse){#trigger{display:none}}.pro-controls{margin-block-start:2em;visibility:hidden;border:var(--border-thickness) solid var(--black);border-radius:var(--border-radius)}.pro-controls fieldset{display:flex;flex-direction:column;gap:1em;padding:1em}.pro-controls .cnt{display:flex;flex-direction:row;flex-wrap:nowrap;align-items:center;gap:2rem;margin-block-end:1em}.pro-controls .cnt legend{font-size:1.3rem;margin:.8rem .5rem;padding:.5rem;border-radius:var(--border-radius);background-color:#23a093;color:var(--black)}.pro-controls .scale-container{display:flex;width:100%;gap:.3em}.pro-controls input{appearance:none}.pro-controls label,.pro-controls button{padding:.7em 1em;border:var(--border-thickness) solid var(--black);border-radius:var(--border-radius);cursor:pointer;box-shadow:none;transform:none;transition:box-shadow .3s ease}.pro-controls label:hover,.pro-controls button:hover{background-color:var(--light-orange);color:var(--black)}.pro-controls .octave button{padding:.2em;margin-inline-end:.4em}.pro-controls .octave button:focus{box-shadow:0 0 0 3px var(--lighter-gray)}.pro-controls input:checked+label{background-color:#5651fe}.pro-controls input:focus+label{box-shadow:0 0 0 3px var(--lighter-gray)}body.pro .pro-controls{visibility:visible}.keyboard-cnt{position:relative;width:500px;margin:auto;margin-block:-1em 1em}.keyboard-cnt img{width:500px}.keyboard-cnt .highlight{position:absolute;width:71px;height:40px;background-color:#5651fe;z-index:-1;margin-inline-start:5px;transform:translate(140px);transition:transform .3s ease}.top-ui{grid-area:topui;width:100%;display:flex;flex-direction:column;margin-block-end:3em}.top-ui button{align-self:center}.top-ui .sliders{display:flex;width:100%;justify-content:space-between}.left-ui{height:520px;display:grid;grid-template-columns:1fr;grid-template-rows:3.5fr 2fr;min-width:3rem;grid-area:leftui;justify-self:flex-end;margin-inline-end:1em}.seq-container{grid-area:seq}.right-ui{grid-area:rightui;justify-self:flex-start;margin-inline-start:1em}.bottom-ui{grid-area:bottomui;display:flex;flex-direction:column;gap:1em}.pro-controls{grid-row:5/6;grid-column:1/5}.main-container{position:relative;display:grid;justify-items:center;grid-template-columns:1fr auto auto 1fr;grid-template-rows:auto;grid-template-areas:". topui topui ." "leftui seq seq rightui" "leftui seq seq rightui" "bottomui bottomui bottomui bottomui"}@media (max-width: 1100px){.main-container{grid-template-columns:1fr auto auto 1fr;grid-template-rows:1fr auto auto 1fr;grid-template-areas:". topui topui ." "leftui seq seq ." "leftui seq seq ." ". bottomui rightui . " ". . . ."}.bottom-ui{justify-self:flex-end;margin-inline-end:-7.5rem}.right-ui{position:relative;justify-self:flex-end}.pro-controls{grid-row:5/6}.footer{position:relative;grid-row:7}}body{display:flex;flex-direction:column;justify-content:space-between;background-color:var(--background-color);margin:0;width:100%;height:100vh;transition:background-color .3s ease}header{display:flex;align-items:center}header img{margin-block-start:.5em;margin-inline:.5em}footer{width:100%;text-align:center;padding-block:1em}