:root{--animation-color: rgb(144, 249, 227);--background-color: rgb(200, 210, 220);--background-color-hover1: rgb(144, 249, 227);--background-color-hover2: rgba(144, 249, 227, .8);--box-shadow-color1: rgb(190, 200, 210);--box-shadow-color2: rgb(200, 210, 220);--note-color: rgb(88, 153, 144);--sidebar-width: 400px;--sidebar-background: rgba(25, 30, 40, .8);--sidebar-hover: rgba(35, 42, 56, .85);--sidebar-border: rgba(50, 58, 72, .6);--text-color: #e0e0e0;--dialog-background-color: rgba(35, 40, 55, .98);--dialog-shadow-color1: rgb(60, 67, 83);--dialog-shadow-color2: rgb(57, 62, 82);--input-color: #ede5d8;--background-text1: #d3bc8e;--background-text2: rgb(236,229,216);--foreground-text: #3b4255;--selection-color: rgb(172,157,127)}.key{border:0px;min-width:5vw;min-height:5vw;border-radius:999px;background-color:var(--background-color);box-shadow:0 0 .1vw .4vw var(--box-shadow-color1),0 0 .1vw .7vw var(--box-shadow-color2)}.close-orientation-warning{position:absolute;top:59%;right:20%;background:transparent;border:none;color:green;font-size:6.5vw;font-family:genshin impact,Fallback,sans-serif;cursor:pointer;width:55vw;height:6vw;display:flex;align-items:center;justify-content:center;margin:10px}.text{font-size:1.2vw;margin-top:3.2vw;display:inline-block;color:#969478;font-family:genshin impact,Fallback,sans-serif}.triangle{padding:1vw 2vw;position:relative}.triangle:before,.triangle:after,.triangleTop,.triangleBottom{width:0;height:0;content:"";display:inherit;position:absolute;border-style:solid}.triangle:before{top:calc(50% - 1vw);right:calc(100% - 2.2vw);border-width:.5vw .5vw .5vw 0;border-color:transparent var(--background-color) transparent transparent}.triangle:after{top:calc(50% - 1vw);left:calc(100% - 2.2vw);border-width:.5vw 0 .5vw .5vw;border-color:transparent transparent transparent var(--background-color)}.triangleTop{left:calc(50% - .5vw);bottom:calc(100% - 2.7vw);border-width:0 .5vw .5vw .5vw;border-color:transparent transparent var(--background-color) transparent}.triangleBottom{left:calc(50% - .5vw);top:calc(100% - 2.7vw);border-width:.5vw .5vw 0 .5vw;border-color:var(--background-color) transparent transparent transparent}.triangle:active .key,.key-press .key{background-color:var(--background-color-hover1);box-shadow:0 0 .1vw .5vw var(--background-color-hover2)}.triangle:active .text,.key-press .text,.triangle:active .note1,.key-press .note1,.triangle:active .note2,.key-press .note2,.triangle:active .note3,.key-press .note3,.triangle:active .note4,.key-press .note4,.triangle:active .note5,.key-press .note5,.triangle:active .note6,.key-press .note6,.triangle:active .note7,.key-press .note7,.triangle:active .note8,.key-press .note8,.triangle:active .note9,.key-press .note9{color:#fffc}.triangle:active:after,.key-press:after{border-color:transparent transparent transparent var(--background-color-hover1)}.triangle:active:before,.key-press:before{border-color:transparent var(--background-color-hover1) transparent transparent}.triangle:active .triangleTop,.key-press .triangleTop{border-color:transparent transparent var(--background-color-hover1) transparent}.triangle:active .triangleBottom,.key-press .triangleBottom{border-color:var(--background-color-hover1) transparent transparent transparent}.IDspread{top:1.75vw;left:1.78vw;min-width:5vw;min-height:5vw;position:absolute;border-radius:100%;pointer-events:none}#spread1{animation:animation1 .5s ease-out 0s 1 normal}#spread2{animation:animation2 .5s ease-out 0s 1 normal}#keyboard{bottom:5vh;position:fixed;width:min-content;left:50%;transform:translate(-50%)}.location{display:flex;justify-content:center}.clef,.clef0{font-size:5vw;min-width:5vw;min-height:5vw;text-align:center;display:inline-block;color:#ffffffb3}.clef{margin:1vw}.clef0{margin:.2vw 1vw 1.8vw}.line1-1,.line1-2,.line1-3,.line1-4,.line1-5,.line2-1,.line2-2,.line2-3,.line2-4,.line2-5,.line3-1,.line3-2,.line3-3,.line3-4,.line3-5{left:7vw;z-index:-1;width:64.2vw;height:.05vw;position:absolute;display:inline-block;border-color:#0000;background-color:#ffffff1a}.line1-1{bottom:calc(100% - 3.2vw)}.line1-2{bottom:calc(100% - 4vw)}.line1-3{bottom:calc(100% - 4.8vw)}.line1-4{bottom:calc(100% - 5.6vw)}.line1-5{bottom:calc(100% - 6.4vw)}.line2-1{bottom:calc(66.6% - 3.2vw)}.line2-2{bottom:calc(66.6% - 4vw)}.line2-3{bottom:calc(66.6% - 4.8vw)}.line2-4{bottom:calc(66.6% - 5.6vw)}.line2-5{bottom:calc(66.6% - 6.4vw)}.line3-1{bottom:calc(33.3% - 3.2vw)}.line3-2{bottom:calc(33.3% - 4vw)}.line3-3{bottom:calc(33.3% - 4.8vw)}.line3-4{bottom:calc(33.3% - 5.6vw)}.line3-5{bottom:calc(33.3% - 6.4vw)}.note1,.note2,.note3,.note4,.note5,.note6,.note7,.note8,.note9{position:absolute;pointer-events:none;display:inline-block;transform:scaleY(1.2);text-shadow:0 0 .1vw,0 0 .1vw}.note1,.note2,.note3,.note5,.note6,.note7,.note8{left:3.1vw;font-size:3.4vw;font-weight:900}.note4,.note9{left:3.2vw;font-size:6vw}.note1{top:.85vw}.note2{top:1.65vw}.note3{top:2.45vw}.note4{top:-2.05vw}.note5{top:.6vw}.note6{top:1.4vw}.note7{top:2.2vw}.note8{top:2.75vw}.note9{top:-2.3vw}#loadDiv{width:100vw;height:100vh;background-color:var(--dialog-background-color);color:var(--background-text1);font-family:genshin impact,Fallback,sans-serif;font-size:3vw;text-align:center;line-height:100vh;position:absolute;top:0;left:0;z-index:999}.orientation-warning{display:none;position:fixed;top:0;left:0;width:100vw;height:100vh;background-color:#000000e6;z-index:1000;justify-content:center;align-items:center}.orientation-warning-content{text-align:center;color:#fff;font-family:genshin impact,Fallback,sans-serif;font-size:5vw;padding:2vw}.orientation-warning-content p{margin:0;margin-top:3vw}.rotate-icon{display:flex;justify-content:center;align-items:center}.rotate-icon img{width:15vw;height:15vw;animation:rotateAnimation 2s ease-in-out infinite}@keyframes rotateAnimation{0%{transform:rotate(230deg)}50%{transform:rotate(140deg)}to{transform:rotate(230deg)}}.volume-control{position:relative;z-index:99;top:8vh;left:50%;width:300px;transform:translate(-50%);display:flex;flex-direction:column;align-items:center;gap:.8vw;z-index:9981;padding:0vw}.toolbar{z-index:100!important}.volume-label{font-size:1.8vw;color:#969478;font-family:genshin impact,Fallback,sans-serif;margin-right:.5vw}.volume-slider{-webkit-appearance:none;-moz-appearance:none;appearance:none;width:20vw;height:.4vw;background:#90f9e34d;border-radius:.5vw;outline:none;opacity:.9;transition:all .3s ease}.volume-slider:hover{opacity:1}.volume-slider::-webkit-slider-thumb{-webkit-appearance:none;-moz-appearance:none;appearance:none;width:1.6vw;height:1.6vw;background:#90f9e3;cursor:pointer;border-radius:50%;box-shadow:0 0 .5vw #90f9e380}.volume-slider::-moz-range-thumb{width:1.2vw;height:1.2vw;background:var(--note-color);cursor:pointer;border-radius:50%;border:none}.icp-info{font-size:14px;font-family:genshin impact,Fallback,sans-serif;text-align:center;color:#bbb}.footer{position:fixed;bottom:0;left:0;right:0;width:100%;min-width:100%;background-color:#0003;padding:5px 0;z-index:998;box-sizing:border-box}.sidebar{position:fixed;top:0;left:calc(var(--sidebar-width) * -1);width:var(--sidebar-width);height:100vh;background-color:var(--sidebar-background);border-right:1px solid var(--sidebar-border);transition:left .3s ease;z-index:999;padding:20px;box-sizing:border-box;overflow-y:auto}.sidebar::-webkit-scrollbar{width:8px}.sidebar::-webkit-scrollbar-track{background:transparent}.sidebar::-webkit-scrollbar-thumb{background-color:#4caf50;border-radius:4px;opacity:.8}.sidebar::-webkit-scrollbar-thumb:hover{background-color:#45a049;opacity:1}.sidebar{scrollbar-width:thin;scrollbar-color:#4CAF50 transparent}.sidebar.open{left:0}.sidebar-header{display:flex;justify-content:space-between;align-items:center;margin-bottom:30px;padding-bottom:20px;border-bottom:1px solid var(--sidebar-border)}.sidebar-header h1{margin:0;font-size:14pt;font-weight:600;color:var(--text-color)}.sidebar-close{background:none;border:none;color:var(--text-color);font-size:24px;cursor:pointer;padding:0;width:24px;height:24px;display:flex;align-items:center;justify-content:center;z-index:1000}.sidebar-close:hover{color:var(--background-color-hover1)}.sidebar-content{display:flex;flex-direction:column;gap:20px}.sidebar-section{margin-bottom:20px;padding:15px;background-color:#1e1e1e99;border-radius:8px;border:1px solid var(--sidebar-border);transition:all .3s ease}div#sidebar>div.sidebar-content>div.sidebar-section:nth-child(6){width:60px;height:60px;display:flex;align-items:center;justify-content:center;padding:0}div#sidebar>div.sidebar-content>div.sidebar-section:nth-child(6)>a.sidebar-link{width:50px;height:50px;padding:2px;display:flex;align-items:center;justify-content:center}.sidebar-section:hover{background-color:#282828cc;box-shadow:0 2px 8px #0000004d}.sidebar-section h3{margin:0 0 15px;font-size:13pt;font-weight:600;color:var(--text-color);text-transform:uppercase;letter-spacing:1px;padding-bottom:8px;border-bottom:1px solid var(--sidebar-border)}.sidebar-section{font-size:10pt}.top-controls{position:fixed;top:20px;right:20px;z-index:998;display:flex;gap:10px}.control-button{background-color:var(--sidebar-background);color:var(--text-color);border:1px solid var(--sidebar-border);border-radius:5px;padding:8px 16px;cursor:pointer;font-size:.9rem;display:flex;align-items:center;gap:8px;transition:all .2s ease;box-shadow:0 2px 5px #0000004d;font-family:genshin impact,Fallback,sans-serif}.play-button{background-color:#3e4556;border-color:#4a5568;color:#e2e8f0;width:50px;height:50px;border-radius:50%;padding:0;display:flex;align-items:center;justify-content:center;transition:all .2s ease}.play-button:hover{background-color:#4a5568;border-color:#718096;color:#fff;transform:translateY(-2px) scale(1.05);box-shadow:0 4px 12px #00000080}.play-button svg{fill:var(--background-color-hover1);width:24px;height:24px;transition:all .2s ease}.play-button:hover svg{fill:var(--animation-color);transform:scale(1.1);transition:all .2s ease}.control-button:hover{background-color:var(--sidebar-hover);transform:translateY(-2px);box-shadow:0 4px 8px #0006}.menu-toggle{position:fixed;top:20px;left:20px;width:40px;height:40px;background-color:var(--sidebar-background);color:var(--text-color);border:1px solid var(--sidebar-border);border-radius:8px;font-size:1.2rem;cursor:pointer;z-index:998;display:flex;align-items:center;justify-content:center;box-shadow:0 2px 8px #0000004d;transition:all .3s ease}.menu-toggle:hover{background-color:var(--sidebar-hover);transform:translateY(-2px);box-shadow:0 4px 12px #0006}.menu-toggle:active{transform:translateY(0);box-shadow:0 2px 5px #0000004d}.sidebar-volume{margin-top:10px}.sidebar-volume .volume-slider,.combo-box.full-width{width:100%}@media (max-width: 768px){.main-content{margin-left:0}}.control-group{display:flex;align-items:center;gap:10px;margin-top:10px}.control-slider{flex:1;-webkit-appearance:none;-moz-appearance:none;appearance:none;width:100%;height:4px;background:#fff3;border-radius:2px;outline:none;opacity:.7;transition:all .3s ease}.control-slider:hover{opacity:1;background:#ffffff4d}.control-slider::-webkit-slider-thumb{-webkit-appearance:none;-moz-appearance:none;appearance:none;width:14px;height:14px;background:var(--text-color);cursor:pointer;border-radius:50%;box-shadow:0 0 3px #0000004d;transition:all .2s ease}.control-slider::-webkit-slider-thumb:hover{background:var(--background-color-hover1);transform:scale(1.1);box-shadow:0 0 6px #90f9e380}.control-slider::-moz-range-thumb{width:12px;height:12px;background:var(--text-color);cursor:pointer;border-radius:50%;border:none;transition:all .2s ease}.control-slider::-moz-range-thumb:hover{background:var(--background-color-hover1);transform:scale(1.1);box-shadow:0 0 6px #90f9e380}.control-button{width:30px;height:30px;padding:0;display:flex;align-items:center;justify-content:center;font-size:1.2rem;font-weight:700}.transpose-control{margin-top:10px}.transpose-control label{display:block;margin-bottom:5px;font-size:.9rem;color:var(--text-color)}.transpose-input{width:100%;padding:8px;background-color:var(--sidebar-hover);color:var(--text-color);border:1px solid var(--sidebar-border);border-radius:5px;font-size:.9rem;font-family:genshin impact,Fallback,sans-serif}.input{width:70vw;max-width:800px;min-height:40vh;max-height:80vh;z-index:9999;position:fixed;top:50%;left:50%;transform:translate(-50%,-50%);background-color:var(--dialog-background-color);backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px);font-family:genshin impact,Fallback,sans-serif;border-radius:12px;box-shadow:0 8px 32px #0006,0 0 0 1px #ffffff1a;visibility:hidden;padding:25px;box-sizing:border-box;position:relative;display:flex;flex-direction:column}.input-header{display:flex;align-items:center;justify-content:space-between;margin-bottom:15px;width:100%}.input-header .bpmText{margin-bottom:0;flex:1}.input-header .bpm{flex:0 0 120px;margin:0 15px}@keyframes fadeIn{0%{opacity:0}to{opacity:1}}@keyframes fadeOut{0%{opacity:1}to{opacity:0}}.bpmText{display:flex;align-items:center;justify-content:flex-start;margin-bottom:15px}.settingsText{font-size:1rem;font-weight:600;color:var(--text-color);margin-right:10px}.bpm{width:120px;padding:10px 12px;background-color:#2a3040cc;color:var(--text-color);border:1px solid var(--sidebar-border);border-radius:6px;font-size:1rem;font-family:genshin impact,Fallback,sans-serif;text-align:left;transition:all .2s ease}.bpm:focus{outline:none;border-color:var(--note-color);box-shadow:0 0 0 2px #58999033}.closeMusic{position:absolute;top:12px;right:12px;width:32px;height:32px;cursor:pointer;color:var(--text-color);display:flex;align-items:center;justify-content:center;z-index:1000;font-size:20px;font-weight:700;border-radius:6px;transition:all .2s ease;opacity:.7}.closeMusic:hover{color:var(--background-color-hover1);background-color:#ffffff1a;opacity:1}.input hr{border:none;height:1px;background:linear-gradient(to right,transparent,var(--sidebar-border),transparent);margin:15px 0;opacity:.5}.textareaInput{width:100%;flex:1;min-height:120px;padding:12px 15px;background-color:#2a304099;color:var(--text-color);border:1px solid var(--sidebar-border);border-radius:8px;font-size:.95rem;resize:vertical;margin:15px 0;font-family:genshin impact,Fallback,sans-serif;box-sizing:border-box;transition:all .2s ease}.textareaInput:focus{outline:none;border-color:var(--note-color);box-shadow:0 0 0 2px #58999026;background-color:#2a3040cc}.buttonGroup{display:flex;gap:12px;justify-content:center;margin-top:auto;padding-top:15px;width:100%}.buttonGroup button{padding:10px 24px;background-color:#2a3040cc;color:var(--text-color);border:1px solid var(--sidebar-border);border-radius:8px;cursor:pointer;font-size:.95rem;font-weight:500;transition:all .2s ease;font-family:genshin impact,Fallback,sans-serif;min-width:90px;display:flex;align-items:center;justify-content:center;text-align:center}.buttonGroup button:hover{background-color:var(--sidebar-hover);border-color:var(--note-color);transform:translateY(-2px);box-shadow:0 4px 12px #0000004d}.buttonGroup button:active{transform:translateY(0)}.combo-box{position:relative;display:inline-block;cursor:pointer;-webkit-user-select:none;user-select:none}.combo-box span{display:block;padding:10px;background-color:#2a3040cc;border:1px solid var(--sidebar-border);border-radius:5px;font-size:10pt;color:var(--text-color);transition:all .2s ease}.combo-items p,.transpose-input,.bpm,.textareaInput,.control-button{font-size:10pt}.combo-box:hover span{background-color:#323848e6}.combo-items:not(.combo-dropup){position:absolute;top:100%;left:0;right:0;background-color:#1e232dfa;backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px);border:1px solid var(--sidebar-border);border-radius:5px;margin-top:5px;box-shadow:0 4px 12px #0006;display:none;z-index:9999}.combo-items.combo-dropup{position:absolute;bottom:100%;left:0;right:0;background-color:#1e232dfa;backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px);border:1px solid var(--sidebar-border);border-radius:5px;margin-bottom:5px;box-shadow:0 -4px 12px #0006;display:none;z-index:9999}.combo-items p{margin:0;padding:10px;color:var(--text-color);transition:all .2s ease;cursor:pointer}.combo-items p:hover{background-color:#2a3040cc;padding-left:15px}.sidebar-link{display:flex;align-items:center;gap:10px;color:var(--text-color);text-decoration:none;transition:all .2s ease;padding:10px;border-radius:5px}.sidebar-link:hover{background-color:var(--sidebar-hover);transform:translate(5px)}.github-icon{width:6.67px;height:6.67px;fill:var(--text-color);transition:fill .2s ease;vertical-align:bottom}.sidebar-link:hover .github-icon{fill:var(--background-color-hover1)}.main-content{margin-left:0;padding:20px;min-height:100vh;transition:margin-left .3s ease}.sidebar.open+.main-content{margin-left:var(--sidebar-width)}h1{font-size:2rem;font-weight:600;color:var(--text-color);text-align:center;margin-bottom:40px}footer{text-align:center;padding:20px;color:var(--text-color);font-size:.9rem;margin-top:40px}@media (max-width: 1024px){.sidebar{width:70vw;left:-70vw}.sidebar.open+.main-content{margin-left:0}.top-controls{top:10px;right:10px}.menu-toggle{bottom:10px;left:10px}}@media (min-width: 1025px){.sidebar{width:var(--sidebar-width);left:calc(var(--sidebar-width) * -1)}.sidebar.open+.main-content{margin-left:var(--sidebar-width)}}@keyframes animation1{0%{transform:scale(1.2);border:.3vw solid var(--animation-color);opacity:.8}to{transform:scale(2);border:0 solid var(--animation-color);opacity:0}}@keyframes animation2{0%{transform:scale(1.2);border:.3vw solid var(--animation-color);opacity:.8}to{transform:scale(2);border:0 solid var(--animation-color);opacity:0}}@keyframes fadeIn{0%{opacity:0;visibility:hidden;transform:scale(.95)}to{opacity:1;visibility:visible;transform:scale(1)}}@keyframes fadeOut{0%{opacity:1;visibility:visible;transform:scale(1)}to{opacity:0;visibility:hidden;transform:scale(.95)}}@keyframes press{0%{transform:scale(1)}20%{transform:scale(.9)}to{transform:scale(1)}}:root{--input-color: #ede5d8;--background-text1: #d3bc8e;--background-text2: rgb(236,229,216);--foreground-text: #3b4255;--dialog-background-color: #3e4556;--dialog-shadow-color1: rgb(60, 67, 83);--dialog-shadow-color2: rgb(57, 62, 82);--selection-color: rgb(172,157,127)}.content{display:flex;flex-direction:column;margin:.6vw 0 0 2.5vw}.toolbar{top:2vw;right:2vw;width:max-content;height:max-content;position:fixed;display:flex}.window-title{font-size:1.5vw;margin:.5vw;display:inline-block;color:var(--background-text1);font-family:genshin impact,Fallback,sans-serif}.music{width:2vw;height:2vw;border-radius:999px;background-color:var(--background-color);box-shadow:0 0 .1vw .4vw var(--box-shadow-color1),0 0 .1vw .6vw var(--box-shadow-color2);margin-left:2vw;position:relative;display:flex;align-items:center;justify-content:center;overflow:hidden}.music:hover{background-color:#a1a194;box-shadow:0 0 .1vw .6vw #acac98cc}.music:active{background-color:var(--background-color-hover1);box-shadow:0 0 .1vw .6vw var(--background-color-hover2)}.musicClef{width:2vw;height:2vw;top:-.4vw;font-size:2vw;font-weight:900;text-align:center;position:absolute;display:inline-block}.musicClef:active{color:#fffc}.input{width:36vw;height:22vw;z-index:999;position:fixed;top:calc(50% - 11vw);right:calc(50% - 18vw);background-color:var(--dialog-background-color);font-family:genshin impact,Fallback,sans-serif;box-shadow:0 0 0 .1vw #4b4f59,0 0 .1vw .3vw var(--dialog-shadow-color1),0 0 .1vw .6vw var(--dialog-shadow-color2),0 0 0 100vw #00000080;visibility:hidden}.input-active{animation:fadeIn .16s ease-in-out 0s;visibility:visible}.input-inactive{animation:fadeOut .16s ease-in-out 0s;visibility:hidden}.textareaInput{border:0;resize:none;z-index:999;width:30.8vw;height:12.1vw;font-size:1vw;padding:.6vw;margin:.8vw 2vw;word-break:break-all;color:var(--background-text2);background-color:#353d4f;outline:.15vw solid rgb(93,93,95);font-family:genshin impact,Fallback,sans-serif}.textareaInput::-webkit-scrollbar{width:.5vw}.textareaInput::-webkit-scrollbar-corner,.textareaInput::-webkit-scrollbar-track{opacity:0}.textareaInput::-webkit-scrollbar-thumb{border-radius:.5vw;background:#0000004d}.textareaInput:hover::-webkit-scrollbar-thumb{background:#ebe5d8}.textareaInput::-webkit-scrollbar-thumb:hover{background:#c2c3bf}.textareaInput::-webkit-scrollbar-track:hover{border-radius:.5vw;background:#0000001a}.textareaInput::-webkit-input-placeholder{font-size:1.4vw;text-align:center;line-height:12.1vw;color:#5e6c7c}.textareaInput:focus{outline:.15vw solid rgb(93,93,95)}.textareaInput::selection{background-color:var(--selection-color)}.bpm:focus{outline:none}.bpmText{width:3vw;height:2vw;font-size:1vw;display:inline;margin:.6vw 0 0 2.5vw;color:var(--background-text1)}.settingsField{display:flex;align-items:center;font-size:1vw;color:var(--background-text1)}.bpm{border:0;width:6vw;height:2vw;font-size:1vw;padding:0 .5vw;border-radius:1vw;margin:.6vw .5vw;color:var(--foreground-text);background-color:var(--input-color);font-family:genshin impact,Fallback,sans-serif}.choice{width:18vw;height:3.2vw;font-size:1vw;display:inline-flex;justify-content:space-around}.musicalInstrument{width:2vw;height:2vw;display:inline-block;position:relative;top:.6vw;border-radius:50%;background-size:cover;border:none;background-color:#ede5d8}.musicalInstrument:hover{filter:drop-shadow(0 0 .4vw #ede5d8)}.musicalInstrument:active{box-shadow:0 0 1vw .1vw #ede5d8 inset}.checked{background-color:#ede5d8}.closeMusic{width:2vw;height:2vw;float:right;display:block;font-size:2vw;font-weight:900;border-radius:1vw;text-align:center;margin:.2vw 1vw 0 0;color:#ae9f80;transform:rotate(45deg) scaleX(1.6);font-family:genshin impact,Fallback,sans-serif}.closeMusic:hover{color:#d1c39d}.closeMusic:active{color:#51545d}.closeMusic:after{left:.1vw;top:-2.7vw;display:block;content:"⌌";text-align:center;position:relative;transform:rotate(90deg) scale(1.6,.625)}.buttonGroup{display:flex;justify-content:space-evenly}.start,.pause,.clear{border:0;padding:0;width:10vw;height:2vw;font-size:1vw;margin:.6vw 0;line-height:2vw;border-radius:1vw;background-color:var(--input-color);color:var(--foreground-text);font-family:genshin impact,Fallback,sans-serif;transition-property:color;transition-duration:.15s;cursor:pointer}.start:hover{color:#ffcb32}.start:active{color:#fffc;background-color:#ffcb32}.pause:hover{color:#71b0fd}.pause:active{color:#fffc;background-color:#71b0fd}.clear:hover{color:#cd7d74}.clear:active{color:#fffc;background-color:#cd7d74}.start:before,.pause:before,.clear:before{float:left;width:1.4vw;height:1.4vw;border-radius:100%;margin:.3vw 0 0 .4vw;background-color:#313131}.start:before{content:"";box-shadow:0 0 0 .35vw #313131 inset,0 0 0 .45vw #ffcb32 inset,0 0 0 .7vw #313131 inset}.pause:before{content:"✖";line-height:1.55vw;color:#38a1e4}.clear:before{content:"□";font-weight:900;line-height:1.55vw;color:#cd7d74}.line0-1,.line0-2{border:0;margin:.1vw 2vw;box-shadow:0 0 0 .06vw #51545d}.music-color{color:var(--note-color)}.instrumentSelection{top:2vw;left:2vw;position:absolute}.themeSelection{top:6vw;left:2vw;position:absolute}.modeSelection{display:inline}.github-icon{width:80%;height:80%;fill:currentColor}.combo-box{padding:5px 12px;border-radius:999px;color:var(--foreground-text);min-width:8vw;background-color:var(--background-color);font-family:genshin impact,Fallback,sans-serif}.combo-items{display:none;background-color:#191e28f2;backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px);color:var(--text-color);border-radius:8px;min-width:8vw;position:absolute;padding:4px;border:1px solid rgba(50,58,72,.6);box-shadow:0 4px 12px #0006}.combo-box:hover .combo-items{display:block}.combo-box p{margin:2px;padding:8px 16px;border-radius:999px;transition:all .2s ease}.combo-box p:hover{background-color:#2a3040cc}.settingsText{display:inline}@font-face{font-family:genshin impact;src:url(../assets/fonts/zh-cn.woff2) format("truetype")}body{background:url(../assets/img/bg.jpg) no-repeat center fixed;background-color:#1a2f51;-webkit-user-select:none;user-select:none;background-size:cover}:root{--sidebar-width: 250px;--main-content-width: calc(100% - var(--sidebar-width));--primary-color: #4CAF50;--secondary-color: #2196F3;--background-color: #1e1e1e;--text-color: #e0e0e0;--card-background: #2d2d2d;--border-color: #404040;--hover-color: #3a3a3a}*{margin:0;padding:0;box-sizing:border-box}body{font-family:genshin impact,Fallback,sans-serif;background-color:var(--background-color);color:var(--text-color);line-height:1.6}.theme-container{display:flex;height:100vh;overflow:hidden}.sidebar{width:var(--sidebar-width);background-color:var(--card-background);border-right:1px solid var(--border-color);padding:20px;overflow-y:auto}.sidebar-header{margin-bottom:30px;padding-bottom:20px;border-bottom:1px solid var(--border-color)}.sidebar-header h1{font-size:1.5rem;color:var(--primary-color);margin-bottom:10px}.sidebar-header p{font-size:.9rem;color:#999}.sidebar-nav{list-style:none}.sidebar-nav li{margin-bottom:10px}.sidebar-nav a{display:block;padding:10px 15px;color:var(--text-color);text-decoration:none;border-radius:5px;transition:background-color .3s ease}.sidebar-nav a:hover{background-color:var(--hover-color)}.sidebar-nav a.active{background-color:var(--primary-color);color:#fff}.main-content{width:var(--main-content-width);padding:30px;overflow-y:auto}.page-header{margin-bottom:30px}.page-header h2{font-size:2rem;color:var(--primary-color);margin-bottom:10px}.page-header p{font-size:1rem;color:#999}.theme-card{background-color:var(--card-background);border-radius:10px;padding:20px;margin-bottom:20px;border:1px solid var(--border-color);transition:transform .3s ease,box-shadow .3s ease}.theme-card:hover{transform:translateY(-5px);box-shadow:0 10px 20px #0000004d}.theme-card h3{font-size:1.2rem;color:var(--primary-color);margin-bottom:15px}.theme-colors{display:grid;grid-template-columns:repeat(auto-fit,minmax(150px,1fr));gap:15px;margin-bottom:20px}.color-item{display:flex;flex-direction:column;align-items:center}.color-preview{width:100%;height:80px;border-radius:5px;margin-bottom:10px;border:2px solid var(--border-color)}.color-name{font-size:.9rem;color:#999;margin-bottom:5px}.color-value{font-size:.8rem;color:var(--text-color);background-color:var(--hover-color);padding:3px 8px;border-radius:3px;cursor:pointer}.color-value:hover{background-color:var(--border-color)}.btn{display:inline-block;padding:10px 20px;border:none;border-radius:5px;font-size:1rem;font-family:genshin impact,Fallback,sans-serif;cursor:pointer;transition:background-color .3s ease;text-decoration:none;text-align:center}.btn-primary{background-color:var(--primary-color);color:#fff}.btn-primary:hover{background-color:#45a049}.btn-secondary{background-color:var(--secondary-color);color:#fff}.btn-secondary:hover{background-color:#1976d2}.btn-outline{background-color:transparent;color:var(--primary-color);border:1px solid var(--primary-color)}.btn-outline:hover{background-color:var(--primary-color);color:#fff}.form-group{margin-bottom:20px}.form-group label{display:block;margin-bottom:8px;font-size:1rem;color:var(--text-color)}.form-group input{width:100%;padding:10px;border:1px solid var(--border-color);border-radius:5px;background-color:var(--hover-color);color:var(--text-color);font-size:1rem;font-family:genshin impact,Fallback,sans-serif}.form-group input:focus{outline:none;border-color:var(--primary-color)}@media (max-width: 768px){.theme-container{flex-direction:column}.sidebar{width:100%;height:auto;border-right:none;border-bottom:1px solid var(--border-color)}.main-content{width:100%;height:calc(100vh - 200px)}}