html{height:100%}body{color:#e0e0e0;box-sizing:border-box;background-color:#2c2c2c;flex-direction:column;min-height:100%;margin:0;padding:20px;font-family:Roboto,sans-serif;display:flex}.view{flex-grow:1;display:none}.view.active{flex-direction:column;display:flex}#app-launcher{text-align:center;justify-content:center}.launcher-content{flex-direction:column;flex-grow:1;justify-content:center;align-items:center;display:flex}.launcher-title-container{flex-direction:column;align-items:center;width:100%;max-width:600px;margin-bottom:30px;display:flex}.launcher-title-container h1{color:#4c4c4c;text-shadow:-1px -1px 1px #0006,1px 1px 1px #ffffff0d;margin:8px 0;font-family:Geologica,sans-serif;font-size:2.8em;font-weight:300}.launcher-subtitle{color:#5a5a5a;text-transform:uppercase;letter-spacing:.15em;margin:0 0 8px;font-family:Roboto Mono,monospace;font-size:.7em}#app-launcher h2{color:#bbb;font-weight:400}.logo-line{background-color:#4c4c4c;width:100%;height:1px;box-shadow:0 1px #ffffff0a}.app-choices{flex-wrap:wrap;justify-content:center;gap:20px;max-width:1100px;margin-top:30px;margin-left:auto;margin-right:auto;display:flex}.choice-button{color:#e0e0e0;cursor:pointer;text-align:center;box-sizing:border-box;background-color:#3a3a3a;border:2px solid #4caf50;border-radius:12px;flex-direction:column;justify-content:center;align-items:center;width:280px;height:180px;padding:30px 20px;transition:all .3s cubic-bezier(.4,0,.2,1);display:flex}.choice-button:hover{background-color:#4a4a4a;border-color:#5cd660;transform:translateY(-8px);box-shadow:0 10px 20px #0000004d}.choice-button h2{color:#fff;margin:0 0 10px;font-family:Geologica,sans-serif;font-size:1.5em}.choice-button p{color:#aaa;margin:0;font-size:.9em;line-height:1.4}@media (width<=900px){.choice-button{width:45%;min-width:280px}}@media (width<=600px){.app-choices{flex-direction:column;align-items:center}.choice-button{width:100%;max-width:320px;height:150px}}.app-footer{text-align:center;width:100%;margin-top:auto;padding:20px 0 0}.app-footer p{color:#4c4c4c;font-size:.9em}.back-to-menu-btn{color:#fff;cursor:pointer;background-color:#555;border:none;border-radius:5px;margin-right:15px;padding:8px 15px;font-size:14px}.back-to-menu-btn:hover{background-color:#777}@media (width<=480px){.launcher-title-container h1{visibility:hidden;font-size:0}.launcher-title-container h1:before{content:"Fragment Studio";visibility:visible;font-size:2.2rem;display:block}.launcher-title-container h1:after{content:"Suite";visibility:visible;margin-top:-10px;font-size:1.5rem;font-weight:300;display:block}}#multitrack-app .controls-container{background-color:#3a3a3a;border-radius:8px;margin-bottom:20px;padding:15px}#multitrack-app .app-header{flex-wrap:wrap;justify-content:space-between;align-items:center;gap:15px;margin-bottom:20px;display:flex}#multitrack-app .logo-container{flex-direction:column;display:flex}#multitrack-app .logo-line{background-color:#4c4c4c;width:100%;height:1px;box-shadow:0 1px #ffffff0a}#multitrack-app #appName{color:#4c4c4c;text-shadow:-1px -1px 1px #0006,1px 1px 1px #ffffff0d;margin:8px 0;font-family:Roboto,sans-serif;font-size:2.2em;font-weight:300}#multitrack-app #app-subtitle{color:#5a5a5a;text-transform:uppercase;letter-spacing:.15em;margin:0 0 8px 2px;padding:0;font-family:Roboto,monospace;font-size:.6em}#multitrack-app #projectTitle{color:#e0e0e0;text-align:right;box-sizing:border-box;background-color:#2c2c2c;border:1px solid #555;border-radius:5px;width:300px;padding:8px;font-size:1.1em}#multitrack-app .main-controls{flex-wrap:wrap;justify-content:space-between;align-items:center;gap:20px;margin-bottom:10px;display:flex}#multitrack-app .control-group{background-color:#2c2c2c;border-radius:6px;align-items:center;gap:10px;padding:8px;display:flex}#multitrack-app .master-fx-wrapper{flex-wrap:wrap;flex-grow:1;justify-content:flex-end;align-items:center;gap:20px;display:flex}#multitrack-app #timeDisplay{color:#4caf50;background-color:#222;border-radius:5px;padding:5px 10px;font-family:Roboto,monospace;font-size:1.5em;font-weight:500}#multitrack-app .track{background-color:#4a4a4a;border:2px solid #0000;border-radius:8px;flex-direction:column;gap:10px;margin-bottom:10px;padding:10px;transition:all .3s;display:flex}#multitrack-app .track.loaded{border-color:#4caf50}#multitrack-app button,#multitrack-app .load-button-label{color:#fff;cursor:pointer;background-color:#555;border:none;border-radius:5px;padding:8px 12px;font-size:14px;transition:background-color .2s;display:inline-block}#multitrack-app button:hover:not(:disabled),#multitrack-app .load-button-label:hover{background-color:#777}#multitrack-app button:disabled{opacity:.5;cursor:not-allowed}#multitrack-app .muteButton.muted{background-color:#f39c12}#multitrack-app #newSongButton{background-color:#3498db}#multitrack-app #addTrackButton{background-color:#27ae60;width:100%;margin-top:10px}#multitrack-app .deleteTrackButton{background-color:#c0392b;border-radius:50%;flex-shrink:0;width:28px;height:28px;padding:4px 8px;font-size:1.2em;font-weight:700;line-height:1}#multitrack-app .clearTrackButton{background-color:#7f8c8d}#multitrack-app .track-header{justify-content:space-between;align-items:center;display:flex}#multitrack-app .track-input-controls{flex-grow:1;align-items:center;gap:10px;margin-left:10px;display:flex}#multitrack-app .file-name-label{white-space:nowrap;text-overflow:ellipsis;max-width:150px;overflow:hidden}#multitrack-app .master-volume-container,#multitrack-app .effect-container{flex-direction:column;align-items:center;gap:5px;display:flex}#multitrack-app .effects-controls{flex-wrap:wrap;gap:20px;display:flex}#multitrack-app .eq-controls,#multitrack-app .eq-band{align-items:center;display:flex}#multitrack-app .eq-band{flex-direction:column}#multitrack-app .eq-slider{appearance:none;cursor:pointer;writing-mode:bt-lr;-webkit-appearance:slider-vertical;background-color:#555;border-radius:5px;outline:none;width:60px;height:100px}#multitrack-app .eq-slider::-webkit-slider-thumb{appearance:none;cursor:pointer;background:#a9ccee;border:none;border-radius:3px;width:12px;height:24px}#multitrack-app .timeline{cursor:pointer;background-color:#555;border-radius:6px;width:100%;height:12px;margin:10px 0;position:relative}#multitrack-app .timeline-progress{pointer-events:none;background-color:#4caf50;border-radius:6px;height:100%;position:absolute;top:0;left:0}#multitrack-app .timeline-handle{pointer-events:none;background-color:#2196f3;border-radius:3px;width:12px;height:24px;position:absolute;top:-6px}#multitrack-app .knob{cursor:ns-resize;background-color:#555;border:2px solid #333;border-radius:50%;width:35px;height:35px;position:relative;transform:rotate(0)}#multitrack-app .knob.disabled{opacity:.5;cursor:not-allowed}#multitrack-app .knob-indicator{background-color:#f39c12;border-radius:1px;width:2px;height:10px;position:absolute;top:2px;left:50%;transform:translate(-50%)}#multitrack-app .custom-slider{appearance:none;cursor:pointer;background-color:#555;border-radius:5px;outline:none;width:80px;height:10px;transition:opacity .2s}#multitrack-app .custom-slider::-webkit-slider-thumb{appearance:none;cursor:pointer;background:#a9ccee;border:none;border-radius:3px;width:12px;height:24px;margin-top:-7px}#multitrack-app #masterVolume{width:150px}#multitrack-app .track-output-controls{align-items:center;gap:15px;display:flex}#multitrack-app .pan-container{flex-direction:column;align-items:center;gap:4px;display:flex}#multitrack-app .pan-container:before{content:"Pan";color:#ccc;font-size:12px}#multitrack-app #main-display-container{background-color:#333;border-radius:6px;width:100%;height:100px;margin-top:10px;position:relative}#multitrack-app #main-display-container canvas{width:100%;height:100%;position:absolute;top:0;left:0}@media (width<=950px){#multitrack-app .app-header,#multitrack-app .main-controls{flex-direction:column;align-items:center;gap:15px}#multitrack-app #projectTitle{text-align:center;width:100%;max-width:400px}#multitrack-app .master-fx-wrapper{justify-content:center;width:100%}}#looper-app #loadingOverlay{color:#fff;z-index:1000;pointer-events:none;opacity:0;background:#000000bf;justify-content:center;align-items:center;width:100%;height:100%;font-size:1.5em;transition:opacity .3s;display:flex;position:fixed;top:0;left:0}#looper-app #loadingOverlay.visible{opacity:1;pointer-events:auto}#looper-app .container{background-color:#3a3a3a;border-radius:8px;margin-bottom:20px;padding:15px}#looper-app .app-header{flex-wrap:wrap;justify-content:space-between;align-items:flex-end;gap:15px;margin-bottom:20px;display:flex}#looper-app .logo-container{flex-direction:column;display:flex}#looper-app .logo-line{background-color:#4c4c4c;width:100%;height:1px;box-shadow:0 1px #ffffff0a}#looper-app #appName{color:#4c4c4c;text-shadow:-1px -1px 1px #0006,1px 1px 1px #ffffff0d;margin:8px 0;font-family:Geologica,sans-serif;font-size:2.2em;font-weight:300}#looper-app #app-subtitle{color:#5a5a5a;text-transform:uppercase;letter-spacing:.15em;margin:0 0 8px 2px;font-family:Roboto Mono,monospace;font-size:.6em}#looper-app .project-section{flex-direction:column;align-items:flex-end;gap:10px;display:flex}#looper-app #projectTitle{color:#e0e0e0;text-align:right;user-select:auto;background-color:#2c2c2c;border:1px solid #555;border-radius:5px;width:300px;padding:8px;font-size:1.1em}#looper-app .session-controls{gap:10px;display:flex}#looper-app .main-controls{flex-wrap:wrap;justify-content:space-between;align-items:center;gap:20px;margin-top:20px;display:flex}#looper-app .master-controls-left{align-items:center;gap:10px;display:flex}#looper-app .master-controls-left #playPauseButton,#looper-app .master-controls-left #stopButton{width:100px;padding:10px 12px;font-size:1.1em}#looper-app .master-volume-box{background-color:#2a2a2a;border:1px solid #4a4a4a;border-radius:6px;align-items:center;gap:15px;padding:10px 15px;display:flex}#looper-app .center-playback-container{flex-direction:column;align-items:center;margin-top:20px;display:flex}#looper-app .center-playback-controls{flex-direction:column;align-items:center;gap:15px;width:100%;display:flex}#looper-app .center-playback-controls .group{align-items:center;gap:15px;width:100%;display:flex}#looper-app .center-playback-controls .main-clock-group{justify-content:center}#looper-app .loop-controls-group{box-sizing:border-box;flex-wrap:nowrap;justify-content:center;align-items:center;gap:8px;width:100%;max-width:100vw;padding:0 10px;display:flex}#looper-app .loop-time-display{text-align:center;color:#4caf50;background-color:#222;border:1px solid #444;border-radius:5px;width:90px;padding:5px;font-size:1.1em}@media (width<=380px){#looper-app .loop-controls-group{gap:4px}#looper-app .loop-time-display{width:75px;font-size:.9em}#looper-app #loopButton{padding:6px 10px;font-size:.9em}}#looper-app .center-playback-controls .loop-controls-group{justify-content:space-between}#looper-app #loopButton{background-color:#f39c12;padding:8px 16px;font-size:1.1em}#looper-app #loopButton.active{background-color:#c0392b;box-shadow:0 0 10px #e74c3cb3}#looper-app .mark-button{background-color:#6c757d;padding:6px 10px;font-size:.9em}#looper-app #mainTimeDisplay{color:#4caf50;background-color:#0000;font-family:Roboto Mono,monospace;font-size:3em;font-weight:700}#looper-app .loop-time-display{text-align:center;background-color:#2a2a2a;border-radius:5px;padding:8px 12px;font-family:Roboto Mono,monospace;font-size:1.2em}#looper-app #regionStartTimeDisplay{color:#f39c12}#looper-app #regionEndTimeDisplay{color:#e74c3c}#looper-app .waveform-container{background-color:#222;border-radius:6px;position:relative}#looper-app #waveformCanvas{width:100%;height:80px}#looper-app .timeline-ruler{pointer-events:none;width:100%;height:20px;position:absolute;top:0;left:0}#looper-app .ruler-mark{color:#4caf50;opacity:.7;font-size:10px;position:absolute;top:5px;transform:translate(-50%)}#looper-app .timeline-container{position:relative}#looper-app .timeline{cursor:pointer;background-color:#555;border-radius:6px;width:100%;height:12px;margin-top:5px;position:relative}#looper-app .timeline-progress{pointer-events:none;background-color:#4caf50;border-radius:6px;height:100%;position:absolute;top:0;left:0}#looper-app .timeline-handle{pointer-events:none;background-color:#2196f3;border-radius:3px;width:12px;height:24px;position:absolute;top:-6px}#looper-app #fragmentModeContainer{background-color:#333}#looper-app .region-controls{flex-direction:column;align-items:center;gap:10px;margin-top:15px;display:flex}#looper-app .region-controls-buttons{gap:10px;display:flex}#looper-app #regionNameInput{text-align:center;color:#fff;background-color:#555;border:1px solid #777;border-radius:5px;flex-grow:1;max-width:300px;padding:8px}#looper-app .track{background-color:#4a4a4a;border:2px solid #0000;border-radius:8px;flex-direction:column;gap:10px;margin-bottom:10px;padding:10px;transition:all .3s;display:flex}#looper-app .track.loaded{border-color:#4caf50}#looper-app button,#looper-app .load-button-label{color:#fff;cursor:pointer;background-color:#555;border:none;border-radius:5px;padding:8px 12px;font-size:14px;transition:background-color .2s;display:inline-block}#looper-app button:hover:not(:disabled),#looper-app .load-button-label:hover{background-color:#777}#looper-app button:disabled{opacity:.5;cursor:not-allowed}#looper-app .muteButton.muted{background-color:#f39c12}#looper-app .track-input-controls{flex-wrap:wrap;justify-content:space-between;align-items:center;gap:10px;display:flex}#looper-app .track-controls-left,#looper-app .track-controls-right{align-items:center;gap:10px;display:flex}#looper-app .knob{cursor:pointer;background-color:#666;border-radius:50%;width:30px;height:30px;position:relative}#looper-app .knob-indicator{background-color:#fff;border-radius:2px;width:4px;height:8px;position:absolute;top:2px;left:50%;transform:translate(-50%)}#looper-app .pan-knob.disabled{opacity:.5;cursor:not-allowed}#looper-app .region-timeline{background-color:#666;border-radius:7px;width:100%;height:14px;position:relative}#looper-app .region-handle{cursor:ew-resize;z-index:10;border:none;border-radius:3px;width:12px;height:28px;position:absolute;top:-7px}#looper-app #regionHandleStart{background-color:#f39c12}#looper-app #regionHandleEnd{background-color:#e74c3c}#looper-app .region-selection-bar{pointer-events:none;z-index:1;background-color:#4caf5099;height:100%;position:absolute;top:0}#looper-app #savedRegionsList{flex-wrap:wrap;justify-content:center;gap:10px;margin-top:15px;padding:0;list-style:none;display:flex}#looper-app .region-tag{color:#fff;cursor:pointer;text-align:center;background-color:#777;border-radius:5px;justify-content:center;align-items:center;width:40px;height:40px;padding:5px;font-size:12px;transition:background-color .2s,transform .1s;display:flex}#looper-app .region-tag:hover{transform:translateY(-2px)}#looper-app .region-tag.selected{background-color:#4caf50;box-shadow:0 0 8px #4caf50b3}#looper-app .speed-control{flex-direction:column;align-items:center;gap:10px;margin-top:20px;display:flex}#looper-app .speed-buttons{flex-wrap:wrap;justify-content:center;gap:8px;display:flex}#looper-app .speed-button{padding:6px 10px}#looper-app .speed-button.active{color:#fff;background-color:#3498db;box-shadow:0 0 8px #3498dbb3}@media (width>=821px){#looper-app .center-playback-controls{flex-direction:row}#looper-app .center-playback-controls .loop-controls-group{width:auto}}@media (width<=820px){#looper-app .app-header{flex-direction:column;align-items:center}#looper-app .project-section{align-items:center;width:100%}#looper-app #projectTitle{text-align:center;width:100%}#looper-app .main-controls{flex-direction:column;gap:15px}#looper-app .master-controls-left,#looper-app .master-volume-box{justify-content:center;width:100%}#looper-app .center-playback-controls .group{flex-wrap:wrap;justify-content:center}#looper-app #mainTimeDisplay{padding:5px 10px;font-size:2.5em}#looper-app .loop-time-display{font-size:1.1em}#looper-app .track-input-controls{flex-direction:column;align-items:stretch;gap:15px}#looper-app .track-controls-left,#looper-app .track-controls-right{justify-content:space-between}#looper-app #fragmentModeContainer{padding:10px}#looper-app .region-controls,#looper-app #regionNameInput{width:100%}#looper-app .region-controls-buttons{justify-content:center;width:100%}}@media (width<=600px){#looper-app .center-playback-controls{flex-direction:column;align-items:center;gap:15px;width:100%;display:flex}#looper-app .main-clock-group{justify-content:space-between;align-items:center;width:100%;max-width:320px;display:flex}#looper-app #mainTimeDisplay{text-align:center;min-width:120px;font-size:1.8em!important}#looper-app .mark-button{flex-shrink:0;padding:8px 12px!important;font-size:.8em!important}#looper-app .loop-controls-group{justify-content:center;align-items:center;gap:5px;width:100%;display:flex}#looper-app #loopButton{flex:1;padding:10px 5px;font-size:.8em}#looper-app .loop-time-display{flex:1.2;height:35px;width:75px!important;font-size:.85em!important}}#looper-app #waveformCanvas{background-color:#222;border-radius:6px;display:block;width:100%!important;height:80px!important}#looper-app .track-waveform{background-color:#333;border-radius:4px;display:block;width:100%!important;height:50px!important}