*,:before,:after{box-sizing:border-box;border-width:0;border-style:solid;border-color:#e5e7eb}:before,:after{--tw-content: ""}html{line-height:1.5;-webkit-text-size-adjust:100%;-moz-tab-size:4;-o-tab-size:4;tab-size:4;font-family:ui-sans-serif,system-ui,-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,Helvetica Neue,Arial,Noto Sans,sans-serif,"Apple Color Emoji","Segoe UI Emoji",Segoe UI Symbol,"Noto Color Emoji"}body{margin:0;line-height:inherit}hr{height:0;color:inherit;border-top-width:1px}abbr:where([title]){-webkit-text-decoration:underline dotted;text-decoration:underline dotted}h1,h2,h3,h4,h5,h6{font-size:inherit;font-weight:inherit}a{color:inherit;text-decoration:inherit}b,strong{font-weight:bolder}code,kbd,samp,pre{font-family:ui-monospace,SFMono-Regular,Menlo,Monaco,Consolas,Liberation Mono,Courier New,monospace;font-size:1em}small{font-size:80%}sub,sup{font-size:75%;line-height:0;position:relative;vertical-align:baseline}sub{bottom:-.25em}sup{top:-.5em}table{text-indent:0;border-color:inherit;border-collapse:collapse}button,input,optgroup,select,textarea{font-family:inherit;font-size:100%;line-height:inherit;color:inherit;margin:0;padding:0}button,select{text-transform:none}button,[type=button],[type=reset],[type=submit]{-webkit-appearance:button;background-color:transparent;background-image:none}:-moz-focusring{outline:auto}:-moz-ui-invalid{box-shadow:none}progress{vertical-align:baseline}::-webkit-inner-spin-button,::-webkit-outer-spin-button{height:auto}[type=search]{-webkit-appearance:textfield;outline-offset:-2px}::-webkit-search-decoration{-webkit-appearance:none}::-webkit-file-upload-button{-webkit-appearance:button;font:inherit}summary{display:list-item}blockquote,dl,dd,h1,h2,h3,h4,h5,h6,hr,figure,p,pre{margin:0}fieldset{margin:0;padding:0}legend{padding:0}ol,ul,menu{list-style:none;margin:0;padding:0}textarea{resize:vertical}input::-moz-placeholder,textarea::-moz-placeholder{opacity:1;color:#9ca3af}input:-ms-input-placeholder,textarea:-ms-input-placeholder{opacity:1;color:#9ca3af}input::placeholder,textarea::placeholder{opacity:1;color:#9ca3af}button,[role=button]{cursor:pointer}:disabled{cursor:default}img,svg,video,canvas,audio,iframe,embed,object{display:block;vertical-align:middle}img,video{max-width:100%;height:auto}[hidden]{display:none}*,:before,:after{--tw-translate-x: 0;--tw-translate-y: 0;--tw-rotate: 0;--tw-skew-x: 0;--tw-skew-y: 0;--tw-scale-x: 1;--tw-scale-y: 1;--tw-pan-x: ;--tw-pan-y: ;--tw-pinch-zoom: ;--tw-scroll-snap-strictness: proximity;--tw-ordinal: ;--tw-slashed-zero: ;--tw-numeric-figure: ;--tw-numeric-spacing: ;--tw-numeric-fraction: ;--tw-ring-inset: ;--tw-ring-offset-width: 0px;--tw-ring-offset-color: #fff;--tw-ring-color: rgb(59 130 246 / .5);--tw-ring-offset-shadow: 0 0 #0000;--tw-ring-shadow: 0 0 #0000;--tw-shadow: 0 0 #0000;--tw-shadow-colored: 0 0 #0000;--tw-blur: ;--tw-brightness: ;--tw-contrast: ;--tw-grayscale: ;--tw-hue-rotate: ;--tw-invert: ;--tw-saturate: ;--tw-sepia: ;--tw-drop-shadow: ;--tw-backdrop-blur: ;--tw-backdrop-brightness: ;--tw-backdrop-contrast: ;--tw-backdrop-grayscale: ;--tw-backdrop-hue-rotate: ;--tw-backdrop-invert: ;--tw-backdrop-opacity: ;--tw-backdrop-saturate: ;--tw-backdrop-sepia: }.container{width:100%}.\!container{width:100%!important}@media (min-width: 640px){.container{max-width:640px}.\!container{max-width:640px!important}}@media (min-width: 768px){.container{max-width:768px}.\!container{max-width:768px!important}}@media (min-width: 1024px){.container{max-width:1024px}.\!container{max-width:1024px!important}}@media (min-width: 1280px){.container{max-width:1280px}.\!container{max-width:1280px!important}}@media (min-width: 1536px){.container{max-width:1536px}.\!container{max-width:1536px!important}}.fixed{position:fixed}.absolute{position:absolute}.relative{position:relative}.left-0{left:0px}.top-0{top:0px}.z-20{z-index:20}.row-start-3{grid-row-start:3}.row-end-7{grid-row-end:7}.float-right{float:right}.float-left{float:left}.m-auto{margin:auto}.my-6{margin-top:1.5rem;margin-bottom:1.5rem}.mx-6{margin-left:1.5rem;margin-right:1.5rem}.my-1{margin-top:.25rem;margin-bottom:.25rem}.mt-auto{margin-top:auto}.mb-2{margin-bottom:.5rem}.ml-2{margin-left:.5rem}.mr-2{margin-right:.5rem}.mb-1{margin-bottom:.25rem}.mt-0{margin-top:0}.mt-2{margin-top:.5rem}.ml-5{margin-left:1.25rem}.mt-8{margin-top:2rem}.ml-8{margin-left:2rem}.mt-1{margin-top:.25rem}.ml-0\.5{margin-left:.125rem}.ml-0{margin-left:0}.block{display:block}.flex{display:flex}.contents{display:contents}.h-60{height:15rem}.h-full{height:100%}.h-4\/5{height:80%}.h-6{height:1.5rem}.h-1\/5{height:20%}.w-fit{width:-moz-fit-content;width:fit-content}.w-full{width:100%}.w-1\/5{width:20%}.w-1\/3{width:33.333333%}.w-2\/3{width:66.666667%}.w-4\/5{width:80%}.w-96{width:24rem}.w-80{width:20rem}.w-40{width:10rem}.w-8{width:2rem}.transform{transform:translate(var(--tw-translate-x),var(--tw-translate-y)) rotate(var(--tw-rotate)) skew(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y))}.flex-row{flex-direction:row}.flex-col{flex-direction:column}.flex-wrap{flex-wrap:wrap}.items-start{align-items:flex-start}.items-end{align-items:flex-end}.items-center{align-items:center}.justify-start{justify-content:flex-start}.justify-end{justify-content:flex-end}.justify-center{justify-content:center}.justify-between{justify-content:space-between}.justify-evenly{justify-content:space-evenly}.gap-3{gap:.75rem}.gap-0{gap:0px}.gap-2{gap:.5rem}.gap-1{gap:.25rem}.overflow-y-auto{overflow-y:auto}.overflow-y-scroll{overflow-y:scroll}.rounded-sm{border-radius:.125rem}.rounded{border-radius:.25rem}.border{border-width:1px}.border-2{border-width:2px}.border-solid{border-style:solid}.border-black{--tw-border-opacity: 1;border-color:rgb(0 0 0 / var(--tw-border-opacity))}.bg-black{--tw-bg-opacity: 1;background-color:rgb(0 0 0 / var(--tw-bg-opacity))}.py-4{padding-top:1rem;padding-bottom:1rem}.px-8{padding-left:2rem;padding-right:2rem}.pt-10{padding-top:2.5rem}.pl-8{padding-left:2rem}.pt-1{padding-top:.25rem}.pl-2{padding-left:.5rem}.pr-4{padding-right:1rem}.pl-4{padding-left:1rem}.pl-16{padding-left:4rem}.pl-24{padding-left:6rem}.text-left{text-align:left}.text-center{text-align:center}.text-xl{font-size:1.25rem;line-height:1.75rem}.text-2xl{font-size:1.5rem;line-height:2rem}.font-bold{font-weight:700}.text-white{--tw-text-opacity: 1;color:rgb(255 255 255 / var(--tw-text-opacity))}.text-fuchsia-500{--tw-text-opacity: 1;color:rgb(217 70 239 / var(--tw-text-opacity))}.text-blue-500{--tw-text-opacity: 1;color:rgb(59 130 246 / var(--tw-text-opacity))}.text-\[\#33D8AC\]{--tw-text-opacity: 1;color:rgb(51 216 172 / var(--tw-text-opacity))}.underline{-webkit-text-decoration-line:underline;text-decoration-line:underline}.filter{filter:var(--tw-blur) var(--tw-brightness) var(--tw-contrast) var(--tw-grayscale) var(--tw-hue-rotate) var(--tw-invert) var(--tw-saturate) var(--tw-sepia) var(--tw-drop-shadow)}body{margin:0;font-family:-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,Oxygen,Ubuntu,Cantarell,Fira Sans,Droid Sans,Helvetica Neue,sans-serif;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale}code{font-family:source-code-pro,Menlo,Monaco,Consolas,Courier New,monospace}#app-container{font-family:Helvetica;color:#8234ff;background-color:#000;height:100vh;font-weight:400}.homepage-grid{height:100vh;display:grid;grid-template-columns:25% 50% 25%;grid-template-rows:15% 60% 25%}.homepage2-grid{height:100vh;display:grid;grid-template-columns:25% 50% 25%;grid-template-rows:55px 60% 25%}.body-onboard{grid-template-columns:235px min-content auto;grid-column:1/4;grid-row:2/2;grid-template-rows:95% 5%;display:grid;height:100vh;height:calc(var(--vh, vh) * 100)}.header,.header-1{grid-column:1/4;grid-row:1/2;width:100%}.body-1{grid-row:2/3;grid-column:2/3}.header-text{font-size:28px;width:200px}.body{grid-column:1/4;grid-row:2/3;display:flex;flex-direction:column;justify-content:center;align-items:center}.footer{grid-column:2/3;grid-row:3/3}.button{border:3px solid #482acc;padding:5px 10px;border-radius:5px;background-color:transparent;width:300px;height:39px;display:flex;justify-content:center;align-items:center}.menu_text{font-size:24px;font-weight:400}.button:hover{border:3px solid #8900ff}.get-started{margin:14px 0;background-color:#482acc;color:#fff;font-weight:700}.starting-page-text{font-size:20px;width:450px;text-align:center}.signin{margin-top:30px!important}.form_input{margin:10px auto}.signin_input{font-size:20px;text-align:center;border:3px solid #482acc;padding:5px 10px;border-radius:5px;background-color:#482acc;width:290px;height:49px;display:flex;justify-content:center;align-items:center}red-text{color:red}.chord_both_arpeggio{width:-moz-fit-content;width:fit-content;height:37px;display:flex;justify-content:center;align-items:center;border-radius:30px;background-color:#482acc;gap:0}.chord_btn_inversion_label{align-items:center;font-size:small;align-content:flex-end;text-align:center}.chord_btn_progression_chord_container{flex-direction:row;display:flex;gap:.3em;background-color:inherit;border-top-left-radius:inherit;border-top-right-radius:inherit}.chord_btn_inner_container{flex-direction:column;display:flex;background-color:inherit;border-top-left-radius:inherit;border-top-right-radius:inherit;width:6em}.chord_btn_inner{border-top-left-radius:inherit;border-top-right-radius:inherit;background-color:#000;text-align:center;width:100%;padding:2px}.chord_btn_container{overflow:auto;width:65%}.chord_btn{min-width:115px;height:54px;font-size:18px;color:#dfbfff!important;background-color:#8234ff;border:5px solid transparent;border-radius:5px;display:flex;flex-direction:column;justify-content:center;align-items:center}.chord_btn:hover{border:3px solid #482acc}.pink-btn{flex:1;height:100%;border-radius:30px;background-color:transparent;display:flex;justify-content:center;align-items:center;color:#fff;font-size:20px;padding-left:10px;padding-right:10px}.pink-btn-no-flex{height:100%;border-radius:30px;background-color:transparent;display:flex;justify-content:center;align-items:center;color:#fff;font-size:20px}.selected-btn{background-color:#a953ff}.select-chord{border:3px solid transparent;font-size:26px}.select-chord:hover{border:3px solid #482acc;border-radius:30px}.setting_menu{font-weight:700;font-size:20px;display:flex;width:80px}.setting-option{width:20%;display:flex;justify-content:flex-start;align-items:center;font-size:20px;font-weight:400}.setting-option span:first-child{width:65%}.modal_menu_header{position:relative;width:20%;display:flex;flex-direction:row;justify-content:center}.mode_level{display:flex;flex-direction:column;justify-content:flex-start;align-items:center;margin:0 50px}.mode_level div:first-child{font-size:24px;font-weight:700}.mode_level div:last-child{font-size:20px;font-weight:700}.chord_text_container div:first-child{font-weight:700;font-size:18px}.chord_text_container div:last-child{font-weight:700;font-size:18px}.play-btn-group img:nth-child(1){width:70px;margin-right:-10px}.play-btn-group img:nth-child(3){width:70px;margin-left:-10px}.play-btn-group img:nth-child(2){width:90px}.scale_note{width:36px}.test_text{width:160%;margin-bottom:20px;text-align:center;font-size:18px;font-weight:700}.test_container{display:flex;flex-direction:column;justify-content:flex-start;align-items:center}.chord_btn_text_unselected{background-color:#222}.chord_btn_unselected{background-color:#9d82c9!important}.correct{background-color:#008b05}.wrong{background-color:#a80000}@media only screen and (max-width: 450px){.mode_level{margin:0 10px!important}.setting_menu{font-size:20px;width:60px}.chord_btn{min-width:79px!important;height:46px!important;font-size:16px!important}.chord_btn_container{width:350px!important}.test_text{display:none}.setting-option{width:80%}.body{overflow:overlay}.mode_level div:first-child,.chord_text_container div:first-child,.chord_text_container div:last-child{font-size:18px}.mode_level div:last-child{font-size:18px}.play-btn-group img:nth-child(1),.play-btn-group img:nth-child(3),.play-btn-group img:nth-child(2){width:75px}.chord_both_arpeggio{width:230px;height:32px}.scale_note{width:32px}}@media only screen and (max-width: 416px) and (min-width: 300px){.starting-page-text{font-size:14px;width:350px;text-align:center}.body-1{grid-row:1/3;grid-column:2/3}.header-text{font-size:28px;width:200px;margin-top:2%}}@media only screen and (max-width: 1366px) and (min-width: 450px){.setting_menu{font-size:20px}.mode_level div:first-child,.chord_text_container div:first-child,.chord_text_container div:last-child{font-size:18px}.mode_level div:last-child{font-size:18px}.play-btn-group img:nth-child(1),.play-btn-group img:nth-child(3),.play-btn-group img:nth-child(2){width:75px}.chord_both_arpeggio{width:230px;height:32px}.scale_note{width:32px}.test_text{font-size:18px;font-weight:700}.body{overflow:auto}.setting-option{width:40%}}.current{fill:#00c4ff}.unplay_note{opacity:0}.unplay_select_note{fill:#1e004d}.play-button-container-addon{margin:auto auto 0}@keyframes rotating{0%{-webkit-transform:rotate(0deg)}to{-webkit-transform:rotate(360deg)}}.loop-disabled{pointer-events:none;color:gray}.loop-enabled{color:green}.white-border{outline:3px solid;outline-color:#fff}@media (min-width: 768px){.md\:w-1\/2{width:50%}}@media (min-width: 1024px){.lg\:w-1\/3{width:33.333333%}}.spinning-refresh{animation:rotating 2s linear infinite;-webkit-animation:rotating 2s linear infinite}.filter-grey{filter:grayscale(100%)}.guitarString-container{width:250px;height:250px}.melody-container{height:100%;overflow-x:overlay}.melody-banner{max-width:125px;min-width:85px;min-height:350px}.melody-banner:first-child{margin-left:auto}.melody-banner:last-child{margin-right:auto}.melody-svg{width:100%;height:92%;display:block}.qu-container button{border:3px solid #482acc;min-width:115px;background-color:#8234ff;padding:10px;color:#fff;height:-moz-fit-content;height:fit-content;border-radius:5px;display:flex;flex-direction:column}.qu-container button.chordNamePage{padding:5px 5px 0}.inversion-label{font-size:medium}.flex-column{flex-direction:column;display:flex}.flex_row{gap:1em;display:flex;align-items:center;justify-content:center;width:100%}.qu-container span.chordOrSound{background-color:#000;padding:10px;color:#fff;height:-moz-fit-content;height:fit-content;border-top-left-radius:inherit;border-top-right-radius:inherit}.qu-container button.wrong{background-color:#a80000}.qu-container button.correct{background-color:#008b05}.qu-container button.play{background-color:#00008b}.chordTypeLabel{font-size:small;margin-top:3px}html{background-color:#000;overflow:hidden}.game-container{bottom:238px;position:relative;display:flex;justify-content:center;margin:0 auto;height:420px;width:190px;overflow-y:hidden;border:dashed red 1px}.lines{height:22px;width:4px;background-color:#fff;margin-bottom:20px}.center-divider{animation:movingLine .6s linear normal infinite}@keyframes movingLine{0%{transform:translateY(-22%)}to{transform:translateY(10%)}}.photo{z-index:auto;position:relative;height:18%;width:20%}.userpos{bottom:-286px;left:-24px}.cpupos{bottom:-286px;right:-26px}.frame-style{margin:auto;position:relative;bottom:-29.1%;height:420px;z-index:1}.button-background{z-index:3;position:relative;bottom:-23.1%;left:48%;height:25px;width:24px;background-color:#000}.buttons{position:relative;height:18px;width:40px}.l-button{z-index:4;left:39%;top:20.8%}.r-button{z-index:5;right:-55%;top:18.9`%}.top-cover{position:relative;height:28px;width:18px;background-color:#000;left:48%;top:-15.84%;z-index:5}@media (width <= 482px) and (height <= 736px){.container{position:relative;top:-44px;height:100%;width:100%}.game-container{bottom:484px;height:420px;width:190px;border:1px dashed lime}.frame-style{bottom:-26px}.photo{height:18%;width:20%}.button-background{background-color:#000;left:46%;bottom:8.4%}.top-cover{position:relative;background-color:#000;left:47%;top:-111.2%}.l-button{left:300px}.r-button{right:200px}}.column2{overflow:hidden;color:#f0f8ff;grid-column:2/3}.lecture-container{background-color:#212121;overflow-y:auto;height:100vh;height:calc(var(--vh, 1vh) * 100)}.lecture-border:last-child{margin-bottom:8%}.lecture-border{border-color:#9b9b9b;background-color:#101010}.locked-button{color:#303030;background-color:#100f0f}h1{font-size:22px}.image{display:block;margin-left:auto;margin-right:auto;padding-top:5px;padding-bottom:1rem}.selected-button:focus{border-width:.15rem;border-color:#212121!important;border-radius:5px 0 0 5px!important;background-color:#212121!important;width:230px!important;color:#3dfffe!important}.selected-button:hover{border-color:#0090ff!important}.course-focus{border-width:.15rem;border-color:#212121!important;border-radius:5px 0 0 5px!important;background-color:#212121!important;width:230px!important;color:#3dfffe!important}.exercise-focus{color:#3dfffe!important}.exercise-focus-parent{border:1px solid #3dfffe}.tts-icon{width:60%;max-width:250px;height:28px;border:2px solid black;position:relative;margin-left:auto;margin-right:auto}.exercise_button{border-radius:4px;margin-bottom:4px;margin-top:4px;padding-left:1.5rem;padding-right:1.5rem;width:218px}.exercise_button_enabled{background-color:#3c3c3c}::-webkit-scrollbar{width:0px;background:transparent}.dropdown-content{display:none;position:absolute;background-color:#000;min-width:-moz-max-content;min-width:max-content;max-height:300px;overflow:auto;box-shadow:0 8px 16px #0003;border:1px solid #482acc}.modeButtons{cursor:pointer}.dropbtn{background-color:#000;color:#8234ff;font-size:20px;border:none}.dropdown-content span{color:#8234ff;padding:6px 16px;text-decoration:none;display:block;cursor:pointer}.dropdown-content span:hover{background-color:gray}.dropdown-content span:first-child{width:100%!important}.dropdown:hover .dropbtn{background-color:#000}.dropdown{position:relative;display:inline-block}.show{display:block}.popup-box{position:fixed;left:50%;top:65%;transform:translate(-50%,-50%);background:#00000050;width:400px;height:99vh}.box{background:#000000;border-radius:4px;padding:10px 10px 60px;border:1px solid #482acc;border-width:2px;overflow:auto}.close-icon{display:flex;justify-content:flex-end;padding-right:10px;padding-bottom:10px;content:"x";cursor:pointer;font-size:20px}.modeButtons{align-items:center;border:3px solid #482acc;border-radius:5px;display:flex;justify-content:center;text-align:center;padding:5px 10px;width:287px;margin:auto}@media (max-width: 445px){.popup-box{width:350px}}@media (max-width: 380px){.popup-box{width:300px}.box{padding:10px 10px 50px}.modeButtons{width:240px}}@media (max-width: 324px){.popup-box{width:250px;height:101vh}.modeButtons{width:215px}}.loader{opacity:.6;position:absolute;z-index:999;height:100%;width:100%}.spinner{border:16px solid #f3f3f3;border-radius:50%;border-top:16px solid #8900ff;border-bottom:16px solid #8900ff;width:120px;height:120px;position:relative;left:30%;top:10%;animation:spinner 2s linear infinite}@keyframes spinner{0%{transform:rotate(0)}to{transform:rotate(360deg)}}