*{-webkit-tap-highlight-color:transparent}*{margin:0;padding:0;box-sizing:border-box;outline:0}body,html{touch-action:manipulation}body{overflow:auto;user-select:none;-webkit-user-select:none;-ms-user-select:none;-moz-user-select:none;font-family:Quicksand,sans-serif;font-optical-sizing:auto;font-weight:400;font-style:normal}p{margin-bottom:1em}.flex-row{display:flex;flex-wrap:wrap;justify-content:space-evenly;gap:5px;align-items:end}.col{display:flex;flex-direction:column;align-items:center}.controls-container{padding:12px;background:var(--controls-bg,#e9e9e9);border-radius:8px;margin:0 auto 15px;box-shadow:0 2px 8px rgba(0,0,0,.1);max-width:calc(100vw - 20px);position:relative;color:#2b3035}#device-debug-label{margin:12px 0 0 0;font-size:14px;color:#888;font-family:monospace;text-align:center;visibility:hidden}.audio-init-container{display:flex;flex-direction:column}#piano-stage{display:flex;flex-direction:column;align-items:center;width:fit-content;max-width:calc(100vw - 20px);margin:0 auto}#pianoCanvas.loaded{opacity:1}#pianoCanvas.audio-disabled{filter:grayscale(.8) brightness(.6);cursor:not-allowed}#pianoCanvas.audio-ready{filter:none;cursor:pointer}.piano-loader{position:fixed;top:0;left:0;right:0;bottom:0;background:var(--audio-overlay-bg,rgba(240,240,240,.95));display:flex;flex-direction:column;justify-content:center;align-items:center;gap:20px;opacity:1;transition:opacity .5s ease-in-out;z-index:2000;backdrop-filter:blur(3px);-webkit-backdrop-filter:blur(3px)}.piano-loader.hidden{opacity:0;pointer-events:none;visibility:hidden}.loader-content{background:var(--audio-overlay-inner-bg,rgba(255,255,255,.9));padding:40px;border-radius:15px;box-shadow:var(--audio-overlay-inner-shadow,0 8px 32px rgba(0,0,0,.2));display:flex;flex-direction:column;align-items:center;gap:20px;min-width:250px;backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px)}.loader-percentage{font-size:32px;font-weight:600;color:#ff8000;margin-bottom:10px}.loader-text{color:var(--audio-init-text,#666);font-size:14px;font-weight:300;letter-spacing:1px;text-transform:uppercase}.loader-progress{width:120px;height:2px;background:#e0e0e0;border-radius:1px;overflow:hidden}.loader-progress-bar{height:100%;background:linear-gradient(90deg,#ff8000,#f60);border-radius:1px;width:0%;transition:width .3s ease}#delay-time-desktop-container,#delay-time-mobile-container,#rhythm-break-desktop-container,#rhythm-break-mobile-container,#rhythm-start-desktop-container,#rhythm-start-mobile-container,#size-desktop-container,#size-mobile-container,#tempo-desktop-container,#tempo-mobile-container,#transpose-desktop-container,#transpose-mobile-container{background-color:#4a5568;padding:5px;border-radius:5px}.controls-toggle{display:none;width:100%;padding:12px;background:#ff8000;color:#fff;border:none;border-radius:8px;font-size:14px;font-weight:600;cursor:pointer;margin-bottom:10px;box-shadow:0 2px 8px rgba(255,128,0,.3);transition:all .2s ease}.controls-toggle:hover{background:#f60;transform:translateY(-1px)}.controls-toggle.collapsed{margin-bottom:0}.tab-container{display:none}.tab-buttons{display:flex;gap:2px;overflow-x:auto;-webkit-overflow-scrolling:touch}.tab-button{flex:1;min-width:0;padding:8px 4px;border:none;border-radius:6px;font-size:15px;font-weight:600;cursor:pointer;transition:all .2s ease;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;font-family:"Sofia Sans Extra Condensed",sans-serif;font-optical-sizing:auto;font-style:normal}.tab-content{display:none}.tab-content.active{display:block}#audio-loading-overlay{position:absolute;top:0;left:0;right:0;bottom:0;background:var(--audio-overlay-bg,rgba(233,233,233,.95));display:flex;flex-direction:column;justify-content:center;align-items:center;border-radius:8px;cursor:pointer;z-index:10;transition:opacity .3s ease;min-height:200px;opacity:0;pointer-events:none;visibility:hidden}#audio-loading-overlay.ready{opacity:1;pointer-events:auto;visibility:visible}#audio-loading-overlay.hidden{opacity:0;pointer-events:none;visibility:hidden}.audio-init-button{background:#ff8000;color:#fff;border:none;padding:15px 30px;border-radius:8px;font-size:16px;font-weight:600;cursor:pointer;box-shadow:0 4px 12px rgba(255,128,0,.3);transition:all .2s ease;margin-bottom:10px;min-width:200px;text-align:center}.audio-init-button:hover{background:#f60;transform:translateY(-2px);box-shadow:0 6px 16px rgba(255,128,0,.4)}.audio-init-text{font-size:19px;color:var(--audio-init-text,#666);text-align:center;max-width:300px;line-height:1.4;font-family:'Sofia Sans Extra Condensed'}.control{display:grid;grid-template-columns:100px 1fr 45px;align-items:center;gap:10px;font-size:12px}.control label{font-size:12px;color:#555;text-align:right}.control input[type=range]{-webkit-appearance:none;appearance:none;width:100%;height:8px;background:#ddd;outline:0;border-radius:4px;transition:opacity .2s}.control input[type=range]::-webkit-slider-thumb{-webkit-appearance:none;appearance:none;width:18px;height:18px;background:#ff8000;cursor:pointer;border-radius:50%;border:2px solid #fff;box-shadow:0 2px 4px rgba(0,0,0,.2)}.control input[type=range]::-moz-range-thumb{width:18px;height:18px;background:#ff8000;cursor:pointer;border-radius:50%;border:2px solid #fff;box-shadow:0 2px 4px rgba(0,0,0,.2)}.control span{font-size:11px;font-family:monospace;color:#333;text-align:right;background:#fff;padding:3px 5px;border-radius:4px;border:1px solid #ccc}.control select{padding:5px;border-radius:4px;border:1px solid #ccc;font-size:12px;grid-column:2/span 2;background-color:#fff;-webkit-appearance:menulist;appearance:menulist}.control.control-checkbox{grid-template-columns:100px auto;align-items:center}.control.control-checkbox input[type=checkbox]{width:20px;height:20px;justify-self:start}.value-display{text-align:center;font-size:16px;color:#c8d7e1;display:flex;align-items:center;justify-content:center;padding:3px;border-radius:2px;font-weight:700;background:#121416;width:45px;height:24px}.control-group{display:flex;flex-direction:column;min-width:100px;flex-grow:1;max-width:400px;background-color:#2b3035;border-radius:13px;font-family:"Sofia Sans Extra Condensed",sans-serif;font-optical-sizing:auto;font-weight:300;font-style:normal}.control-group h4{font-size:17px;color:#4e575f;text-align:center;border-bottom:1px solid #ccc;padding:6px 0;font-weight:600;background:hsl(210 10% 83% / 1);border-radius:11px 11px 0 0}.option-selector{display:flex;flex-direction:column;gap:8px;background:#4a5568;padding:8px 6px;border-radius:6px}.option-selector .selector-options{display:flex;flex-direction:column;font-size:12px;font-weight:600;color:#9eb8cb;user-select:none;margin-left:3px}.option-selector .selector-row{display:flex;align-items:center;gap:2px;letter-spacing:.5px}.option-selector .selector-led{width:10px;height:10px;border-radius:50%;background:#212939;box-shadow:0 0 0 1px #16202a inset,0 0 2px rgba(0,0,0,.6)}.option-selector .selector-row.active .selector-led{background:#e3e7ef;box-shadow:0 0 0 1px #fff inset,0 0 6px #e3e7ef}.option-selector .selector-name{letter-spacing:.5px;padding:2px 6px;border-radius:4px;display:inline-block}.option-selector .selector-row.active .selector-name{color:#fff}.option-selector .selector-row.loaded .selector-name{color:#fff}.option-selector .selector-row.disabled .selector-name{opacity:.35}.option-selector .selector-btn{width:100%;height:31px;position:relative;display:flex;justify-content:center;align-items:center}.rhythm-start-btn{width:100%;height:31px;position:relative;display:flex;justify-content:center;align-items:center;padding:6px 12px;font-size:16px}.selector-btn.loading{opacity:.6;pointer-events:none}.selector-btn .spinner{width:16px;height:16px;border:2px solid rgba(255,255,255,.3);border-top-color:#fff;border-radius:50%;animation:spin .7s linear infinite;display:none}.selector-btn.loading .spinner{display:block}.selector-btn.loading .selector-name{display:none}.rhythm-start-btn .stop-icon{display:none}.rhythm-start-btn .play-icon{display:inline-block}.rhythm-start-btn.running .stop-icon{display:inline-block;color:#ff8000}.rhythm-start-btn.running .play-icon{display:none}.selector-btn.break-active{position:relative;box-shadow:0 0 0 2px #63b3ed inset,0 0 10px rgba(99,179,237,.6)}.selector-btn.break-active::after{content:"";position:absolute;inset:0;background:rgba(99,179,237,.15);border-radius:inherit;pointer-events:none}@keyframes spin{to{transform:rotate(360deg)}}.uniform-btn{width:45px;height:33px}@media (max-width:768px){.uniform-btn{width:45px;height:33px}}#piano-stage .octave-controls{width:100%;display:none;justify-content:space-between;align-items:center;margin-top:10px;padding:0 2px}#piano-stage .octave-controls.visible{display:flex}.octave-controls .octave-btn{background:var(--octave-btn-bg,#ddd);color:var(--octave-btn-text,#848484);border:none;border-radius:6px;padding:8px;font-weight:700;cursor:pointer;display:inline-flex;align-items:center;gap:2px;font-family:'Sofia Sans Extra Condensed';font-size:18px}.octave-controls .octave-btn:disabled{opacity:.3;cursor:not-allowed;filter:grayscale(.3);transform:none}.octave-controls .octave-btn:hover{background:var(--octave-btn-bg-hover,#cfd4d8);color:var(--octave-btn-text-hover,#4e575f)}.icon{height:18px}.octave-controls polygon{fill:currentColor!important;stroke:currentColor!important}.mapping-edit-controls{display:flex;align-items:center;gap:10px}.mapping-edit-controls .mapping-edit-actions{display:none;gap:8px}.mapping-edit-controls.editing #edit-mapping-btn{display:none}.mapping-edit-controls.editing .mapping-edit-actions{display:flex}.cancel-map-btn,.edit-map-btn,.reset-map-btn,.save-map-btn{background:#ddd;color:#4e575f;border:none;border-radius:6px;padding:6px 10px;font-weight:700;cursor:pointer}.save-map-btn{background:#63b3ed;color:#fff}.cancel-map-btn{background:#90959a;color:#fff}.reset-map-btn{background:#ff8000;color:#fff}@media (max-width:768px){.controls-toggle{display:block}.tab-container{display:block}#piano-controls{display:none}.tab-container{transition:max-height .3s ease,opacity .3s ease;overflow:hidden}.tab-container.collapsed{max-height:0!important;opacity:0;padding:0;margin:0}.tab-container:not(.collapsed){max-height:500px}.tab-buttons{margin-bottom:10px}.sub-tabs{margin-bottom:0}#audio-loading-overlay{position:fixed}#audio-loading-overlay .audio-init-container{background:var(--audio-overlay-inner-bg,rgba(255,255,255,.95));padding:30px;border-radius:15px;box-shadow:var(--audio-overlay-inner-shadow,0 8px 32px rgba(0,0,0,.2));color:var(--audio-init-text,#222);display:flex;flex-direction:column;align-items:center;gap:15px;min-width:280px;max-width:90vw;backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px)}.control{grid-template-columns:1fr auto;grid-template-rows:auto auto;gap:8px;width:100%;align-items:center}.control label{grid-column:1/-1;text-align:left;font-weight:700}.control input[type=range]{grid-column:1;width:100%;height:12px}.control span{grid-column:2;font-size:12px;font-family:monospace;color:#333;text-align:center;background:#fff;padding:4px 8px;border-radius:4px;border:1px solid #ccc;min-width:50px;white-space:nowrap}.control input[type=range]::-webkit-slider-thumb{width:28px;height:28px}.control input[type=range]::-moz-range-thumb{width:28px;height:28px}.control select{grid-column:1/-1;width:100%;padding:8px;font-size:14px;-webkit-appearance:menulist;appearance:menulist;background-color:#fff;border:1px solid #ccc;border-radius:4px;margin-top:4px}.control.control-checkbox{grid-template-columns:1fr auto;grid-template-rows:1fr;align-items:center}.control.control-checkbox label{grid-column:1;font-weight:700}.control.control-checkbox input[type=checkbox]{grid-column:2;justify-self:end;width:28px;height:28px}.loader-content{padding:30px;min-width:200px}.loader-percentage{font-size:24px}.loader-text{font-size:12px}.loader-progress{width:100px}.audio-init-button{padding:18px 30px!important;font-size:18px!important;min-width:220px!important}.audio-init-text{color:var(--audio-init-text,#666)!important;text-align:center!important;line-height:1.5!important;background:0 0!important;padding:0!important;box-shadow:none!important;backdrop-filter:none!important;-webkit-backdrop-filter:none!important;margin:0!important}#pianoCanvas{border:1px solid #333;box-shadow:3px 3px 10px rgba(0,0,0,.2);max-width:calc(100vw - 10px);max-height:calc(100vh - 10px);max-height:calc(100dvh - 10px)}.controls-container{width:calc(100% - 10px);padding:10px;margin:0 auto 10px}.rhythm-start-btn{padding:6px 12px;font-size:14px}}body.device-desktop #piano-controls{display:flex!important}body.device-desktop .controls-toggle{display:none!important}body.device-desktop .tab-container{display:none!important}body.device-mobile #piano-controls{display:none!important}body.device-mobile .controls-toggle{display:block!important}body.device-mobile .tab-container{display:block!important;transition:max-height .3s ease,opacity .3s ease;overflow:hidden}body.device-mobile .tab-container.collapsed{max-height:0!important;opacity:0;padding:0;margin:0}body.device-mobile .tab-container:not(.collapsed){max-height:500px}@media (min-width:769px) and (max-width:1366px) and (pointer:coarse){.control input[type=range]::-webkit-slider-thumb{width:22px;height:22px}.control input[type=range]::-moz-range-thumb{width:22px;height:22px}.control select{padding:8px;font-size:14px}.control.control-checkbox input[type=checkbox]{width:24px;height:24px}.audio-init-button{padding:18px 30px!important;font-size:18px!important}}@media (orientation:landscape){#pianoCanvas{max-height:calc(100vh - 40px);max-height:calc(100dvh - 40px)}}@media (max-width:768px) and (orientation:landscape){#pianoCanvas{max-height:calc(100vh - 60px);max-height:calc(100dvh - 60px);border:1px solid #333;box-shadow:none}.controls-container{position:relative;width:100%;padding:5px;border:1px solid #ccc;border-radius:5px;background:rgba(255,255,255,.95);box-shadow:none;margin:0 auto}.controls-container{position:relative;width:100%;padding:5px;border:1px solid #ccc;border-radius:5px;background:var(--controls-bg,#e9e9e9);box-shadow:none;margin:0 auto}}@media (min-width:769px) and (max-width:1024px) and (orientation:landscape){#pianoCanvas{max-height:calc(100vh - 80px);max-height:calc(100dvh - 80px)}}@media (max-width:768px) and (orientation:landscape){#pianoCanvas{max-height:calc(100vh - 60px);max-height:calc(100dvh - 60px);border:1px solid #333;box-shadow:none}}#pianoCanvas{box-shadow:5px 5px 15px rgba(0,0,0,.3);cursor:pointer;touch-action:none;-ms-touch-action:none;-webkit-user-select:none;user-select:none;max-width:calc(100vw - 20px);max-height:calc(100vh - 20px);max-height:calc(100dvh - 20px);width:auto;height:auto;object-fit:contain;padding:0 4px;border-radius:7px;opacity:0;transition:opacity .5s ease-in-out;display:flex;justify-content:center;align-items:center;background:#1a1a1a;position:relative}@supports (-webkit-touch-callout:none){@media (orientation:landscape){#pianoCanvas{max-height:calc(100vh - 100px)!important;max-height:calc(100dvh - 100px)!important}}}.effects-group{position:relative;display:flex;flex-direction:column;align-items:stretch}.effects-group h4{width:100%;writing-mode:horizontal-tb;transform:none}.effects-group .effects-inner{display:flex;flex-direction:row;width:100%;height:100%}.effects-group .fx-vert-tabs{display:flex;flex-direction:column;width:40px;min-width:40px}.effects-group .fx-tab{flex:1;display:flex;align-items:center;justify-content:center;writing-mode:vertical-rl;transform:rotate(180deg);font-size:16px;font-weight:600;user-select:none;cursor:pointer;background:#90959a;color:#2b3035;letter-spacing:.5px;transition:background .18s,color .18s,box-shadow .18s}.effects-group .fx-tab.active{background:#63b3ed;color:#2b3035}.effects-group .fx-panels{flex:1;display:flex;position:relative}.effects-group .fx-panel{display:none;flex-direction:row;gap:5px;width:100%;justify-content:space-evenly}.effects-group .fx-panel.active{display:flex}.effects-group .fx-tab[data-fx=delay]{border-top-right-radius:10px}@media (max-width:768px){body.device-mobile .effects-group{flex-direction:row}body.device-mobile .effects-group .fx-panel{flex-wrap:wrap;gap:14px}body.device-mobile .effects-group .fx-tab[data-fx=reverb]{border-bottom-right-radius:10px}}#midi-btn{padding:6px 21px;background-color:#b0bbc7;border-radius:20px;margin:-30px auto 0}#midi-btn img{width:60px;height:auto;display:block}#midi-modal{display:none;position:absolute;left:0;top:0;width:100vw;height:100vh;background:#000000bd;justify-content:center;align-items:center}.midi-modal-content{display:flex;flex-direction:column;padding:20px;background:#fff;margin:20px;border-radius:10px;gap:15px}.midi-modal-content button{padding:7px}.midi-modal-content select{padding:7px}