@import"https://fonts.googleapis.com/css2?family=Anton&family=Roboto:wght@400;700&display=swap";*{margin:0;padding:0;box-sizing:border-box}body{font-family:Roboto,sans-serif;font-stretch:75%;background-color:#fffef0;display:flex;justify-content:center;align-items:flex-start;min-height:100vh;padding:2vw;overflow-y:auto;position:relative}body:before{content:"";position:fixed;top:0;left:0;width:100%;height:100%;background-image:url(/img/bg01.png);background-repeat:repeat;background-size:auto;opacity:.2;pointer-events:none;z-index:-2}.sequencer-container{background-color:#fffef0;border:.5vw solid #000;padding:2.5vw;box-shadow:.8vw .8vw #000;width:95vw;min-height:90vh;max-width:none;display:flex;flex-direction:column;justify-content:flex-start;align-items:center;gap:2vh;position:relative}@media (max-width: 768px) and (orientation: portrait){.sequencer-container{width:98vw;min-height:95vh;padding:1.5vw}.logo{top:.5vh;left:.5vw;max-width:25vw}.logo img{height:2vh}}@media (max-width: 1024px) and (orientation: landscape){body{padding:.2vh;min-height:100vh}.sequencer-container{width:99.5vw;min-height:99vh;padding:.2vh .3vw;gap:.3vh;border:.1vw solid #000;box-shadow:.2vw .2vw #000}.logo{top:.1vh;left:.2vw;max-width:20vw}.logo img{height:2vh}}.halftone-bg{position:absolute;top:0;left:0;right:0;bottom:0;opacity:.1;pointer-events:none;background-image:radial-gradient(circle,#000 20%,transparent 20%);background-size:10px 10px;z-index:-1}.logo{position:absolute;top:1vw;left:1vw;z-index:10;max-width:30vw}.logo img{height:6vh;width:auto;max-width:100%;object-fit:contain}.sequencer-section{display:flex;flex-direction:column;gap:1vh}.header-controls-row{display:flex;align-items:center;gap:1.5vw;justify-content:flex-start;width:calc(100% - 32vw);flex-shrink:0;margin-bottom:1vh;margin-left:32vw;overflow:visible}@media (min-width: 1025px){.header-controls-row .master-volume-control{display:flex}}@media (min-width: 1400px){.header-controls-row{gap:2vw;margin-left:30vw;width:calc(100% - 30vw)}.controls{gap:2vw}.master-volume-control{width:9vw}.logo{top:1.5vw;left:1.5vw;max-width:28vw}.logo img{height:8vh}}.controls{display:flex;gap:1.5vw;flex-wrap:nowrap;align-items:flex-end;flex-shrink:0}@media (max-width: 1024px) and (orientation: landscape){.header-controls-row{gap:1vw;margin-bottom:.5vh;margin-left:22vw;width:78vw}.controls{gap:.8vw;margin:0}.control-group{min-height:3vh}.control-label{font-size:clamp(.6rem,1.2vw,.9rem)}button{padding:.4vh .8vw;font-size:clamp(.6rem,1.2vw,.9rem);min-height:2.5vh;border:.1vw solid #000}.play-stop-btn{font-size:clamp(.7rem,1.3vw,1rem);padding:.4vh .8vw;min-width:4vw}.tempo-control{gap:.3vw;margin-bottom:.5vh}.tempo-slider{width:8vw}.tempo-label{font-size:clamp(.6rem,1.2vw,.9rem)}.tempo-value{font-size:clamp(.6rem,1.2vw,.9rem);min-width:5vw}}.control-group{display:flex;flex-direction:column;align-items:center;gap:.3vh;min-height:6vh;justify-content:flex-end}.control-label{font-size:clamp(.7rem,1vw,1rem);text-transform:uppercase;color:#000;font-weight:700}button{padding:.6vh 1.2vw;font-family:Roboto,sans-serif;font-stretch:75%;font-weight:700;font-size:clamp(.7rem,1vw,1rem);text-transform:uppercase;background-color:gold;color:#000;border:.15vw solid #000;cursor:pointer;position:relative;transition:all .1s;min-height:3vh}.play-stop-btn{font-size:clamp(1rem,1.5vw,1.5rem);padding:.5vh 1vw;min-width:3vw;display:flex;align-items:center;justify-content:center}button:hover{transform:translate(-.2vw,-.2vh);box-shadow:.3vw .3vh #000}button:active{transform:translate(0);box-shadow:none}button.active{background-color:red;color:#fff}input[type=range]{height:.6vh;background:gold;outline:none;border:.1vw solid #000;-webkit-appearance:none}input[type=range]::-webkit-slider-thumb{-webkit-appearance:none;width:1.2vw;height:1.2vw;background:#00f;border:.1vw solid #000;cursor:pointer;border-radius:50%}input[type=range]::-moz-range-thumb{width:1.2vw;height:1.2vw;background:#00f;border:.1vw solid #000;cursor:pointer;border-radius:50%;border:none}.tempo-control{display:flex;align-items:center;gap:.5vw;white-space:nowrap;margin-bottom:1vh}.tempo-label{font-size:clamp(.7rem,1vw,1rem);font-weight:700;color:#000;text-transform:uppercase}.tempo-slider{width:5vw;min-width:60px;margin:0 .3vw}.tempo-value{font-size:clamp(.7rem,1vw,1rem);font-weight:700;color:#000;min-width:4vw}.volume-controls-container{display:flex;flex-direction:column;align-items:center;position:relative}.master-volume-control{width:8vw;min-width:120px;display:flex;flex-direction:column;align-items:flex-start;gap:.3vh;white-space:nowrap;flex-shrink:0}@media (max-width: 1024px){.header-controls-row .master-volume-control{display:none}}@media (max-width: 1024px) and (orientation: landscape){.master-volume-control{width:12vw}.master-volume-label{font-size:clamp(.5rem,1vw,.8rem)}.master-volume-slider{width:10vw;height:.4vh;border:.1vw solid #000}.master-mute-button{padding:.2vh .5vw;font-size:clamp(.5rem,1.2vw,.8rem);border:.1vw solid #000}.master-volume-slider::-webkit-slider-thumb{width:1vw;height:1vw;border:.1vw solid #000}.master-volume-slider::-moz-range-thumb{width:1vw;height:1vw;border:.1vw solid #000}}.master-volume-label{font-size:clamp(.6rem,.9vw,.9rem);text-transform:uppercase;color:red;font-weight:700}.master-volume-row{display:flex;align-items:center;gap:.5vw;width:100%}.master-volume-slider{background:#ff6b6b!important;width:6vw;min-width:80px;height:.6vh;outline:none;border:.1vw solid #000;-webkit-appearance:none;-moz-appearance:none;appearance:none;flex-shrink:0}.master-mute-button{padding:.3vh .8vw;font-size:clamp(.6rem,1vw,1rem);background-color:#ff6b6b;border:.15vw solid #000;flex-shrink:0;font-family:Roboto,sans-serif;font-stretch:75%;font-weight:700;cursor:pointer;transition:all .1s;color:#000}.master-mute-button:hover{transform:translate(-.2vw,-.2vh);box-shadow:.3vw .3vh #000}.master-mute-button:active{transform:translate(0);box-shadow:none}.master-mute-button.muted{background-color:red;color:#fff}.master-volume-slider::-webkit-slider-thumb{-webkit-appearance:none;width:1.2vw;height:1.2vw;background:red;border:.1vw solid #000;cursor:pointer;border-radius:50%}.master-volume-slider::-moz-range-thumb{width:1.2vw;height:1.2vw;background:red;border:.1vw solid #000;cursor:pointer;border-radius:50%;border:none}.grid-container{display:flex;flex-direction:column;justify-content:center;align-items:center;width:100%}.track-labels{display:flex;flex-direction:column;gap:.3vh;flex-shrink:0}@media (max-width: 768px) and (orientation: portrait){.track-labels{flex-direction:row;gap:.5vw;width:100%;justify-content:space-between}}.sequencer-row .track-label{width:8vw}@media (max-width: 1024px) and (orientation: landscape){.sequencer-row .track-label{width:12vw}}.sequencer-grid{display:flex;flex-direction:column;gap:.3vh;border:.3vw solid #000;padding:.8vw;background-color:#fff;position:relative}@media (max-width: 1024px) and (orientation: landscape){.sequencer-grid{border:.2vw solid #000;padding:.3vw;gap:.2vh}}.sequencer-grid:before{content:"";position:absolute;top:0;right:4vw;width:12vw;height:0;pointer-events:none}.sequencer-row{display:flex;align-items:center;gap:1vw;height:4vh}@media (max-width: 768px) and (orientation: portrait){.sequencer-row{height:3vh;gap:.5vw}}@media (max-width: 1024px) and (orientation: landscape){.sequencer-row{height:4.5vh;gap:.3vw}}.step-button{width:4vw;height:4vh}@media (max-width: 768px) and (orientation: portrait){.step-button{width:5vw;height:2.5vh}}@media (max-width: 1024px) and (orientation: landscape){.step-button{width:4.8vw;height:3.5vh}}.volume-controls{display:flex;flex-direction:column;gap:.3vh;flex-shrink:0}@media (max-width: 768px) and (orientation: portrait){.volume-controls{width:100%;flex-direction:row;gap:.5vw;justify-content:space-between}}.sequencer-row .volume-slider{height:100%;display:flex;align-items:center;gap:.5vw;padding:0 .5vw;flex-shrink:0}@media (max-width: 768px) and (orientation: portrait){.sequencer-row .volume-slider{gap:.3vw;padding:0 .3vw}}@media (max-width: 1024px) and (orientation: landscape){.sequencer-row .volume-slider{gap:.2vw;padding:0 .2vw}.sequencer-row .volume-slider input{width:10vw;height:.4vh;border:.1vw solid #000}.sequencer-row .volume-slider input::-webkit-slider-thumb{width:1vw;height:1vw;border:.1vw solid #000}.sequencer-row .volume-slider input::-moz-range-thumb{width:1vw;height:1vw;border:.1vw solid #000}}.sequencer-row .volume-slider input{width:8vw;flex-shrink:0}@media (max-width: 768px) and (orientation: portrait){.sequencer-row .volume-slider input{width:6vw}}.button{border:.15vw solid #000;cursor:pointer;font-family:Anton,sans-serif;font-weight:700;text-transform:uppercase;transition:all .1s ease;box-shadow:.2vw .2vh #000;border-radius:0;outline:none;display:inline-flex;align-items:center;justify-content:center;text-decoration:none;-webkit-user-select:none;user-select:none}.button:hover:not(.button-disabled){transform:translate(-.1vw,-.1vh);box-shadow:.3vw .3vh #000}.button:active:not(.button-disabled){transform:translate(0);box-shadow:none}.button-disabled{opacity:.6;cursor:not-allowed}.button-loading{cursor:wait}.button-small{padding:.8vh 1.5vw;font-size:clamp(.6rem,.8vw,.8rem)}.button-medium{padding:1vh 2vw;font-size:clamp(.7rem,.9vw,.9rem)}.button-large{padding:1.2vh 2.5vw;font-size:clamp(.8rem,1vw,1rem)}.button-default{background:#fffef0;color:#000}.button-default:hover:not(.button-disabled){background:gold}.button-primary{background:#00f;color:#fff}.button-primary:hover:not(.button-disabled){background:#22f}.button-secondary{background:#88f;color:#fff}.button-secondary:hover:not(.button-disabled){background:#7c7cfa}.button-danger{background:red;color:#fff}.button-danger:hover:not(.button-disabled){background:#c00}.button-success{background:#0f0;color:#000}.button-success:hover:not(.button-disabled){background:#3f3}.button-warning{background:gold;color:#000}.button-warning:hover:not(.button-disabled){background:#ffed4e}.button-yellow{background:gold;color:#000}.button-yellow:hover:not(.button-disabled){background:#ffed4e}.button-yellow.active,.button-red{background:red;color:#fff}.button-red:hover:not(.button-disabled){background:#c00}.button-pink{background:#ff6b6b;color:#000}.button-pink:hover:not(.button-disabled){background:#ff8a8a}.button-pink.muted{background:red;color:#fff}@media (max-width: 768px) and (orientation: portrait){.button{border:.2vw solid #000}.button-small{padding:1vh 3vw;font-size:clamp(.8rem,3vw,1.2rem)}.button-medium{padding:1.5vh 4vw;font-size:clamp(.9rem,3.5vw,1.4rem)}.button-large{padding:2vh 5vw;font-size:clamp(1rem,4vw,1.6rem)}}@media (max-width: 1024px) and (orientation: landscape){.button{border:.1vw solid #000}.button-small{padding:.8vh 1.5vw;font-size:clamp(.6rem,1.2vw,.9rem)}.button-medium{padding:1vh 2vw;font-size:clamp(.7rem,1.3vw,1rem)}.button-large{padding:1.2vh 2.5vw;font-size:clamp(.8rem,1.5vw,1.2rem)}}.modal-overlay{position:fixed;top:0;left:0;right:0;bottom:0;background:#000c;display:flex;align-items:center;justify-content:center;z-index:1000}.modal-content{background:#fffef0;border:.5vw solid #000;border-radius:0;padding:0;max-height:90vh;overflow-y:auto;box-shadow:.8vw .8vw #000;display:flex;flex-direction:column}.modal-small{width:90%;max-width:400px}.modal-medium{width:90%;max-width:600px}.modal-large{width:90%;max-width:800px}.modal-header{background:#fffef0;padding:2vh 2vw;border-bottom:.2vw solid #000;position:relative;flex-shrink:0}.modal-header h2{margin:0 3vw .5vh 0;color:red;font-size:clamp(1rem,1.5vw,1.5rem);font-family:Anton,sans-serif;font-weight:700;text-transform:uppercase;-webkit-text-stroke:1px #000;paint-order:stroke fill}.modal-header h3{margin:0 3vw 0 0;color:#000;font-size:clamp(.8rem,1.2vw,1.2rem);font-family:Anton,sans-serif;font-weight:400;text-transform:uppercase}.modal-close-button{position:absolute;top:2vh;right:2vw;background:red;border:.15vw solid #000;color:#fff;font-size:clamp(1rem,1.5vw,1.5rem);cursor:pointer;padding:0;width:3vw;height:3vh;min-width:30px;min-height:25px;display:flex;align-items:center;justify-content:center;font-family:Anton,sans-serif;font-weight:700;transition:all .1s ease;box-shadow:.2vw .2vh #000}.modal-close-button:hover{background:#c00;transform:translate(-.1vw,-.1vh);box-shadow:.3vw .3vh #000}.modal-close-button:active{transform:translate(0);box-shadow:none}.modal-body{padding:2vh 2vw;flex:1;overflow-y:auto;font-family:Roboto,sans-serif;font-stretch:75%}.modal-footer{background:#fffef0;padding:1.5vh 2vw;border-top:.2vw solid #000;display:flex;justify-content:space-between;align-items:center;gap:1vw;flex-shrink:0}@media (max-width: 768px) and (orientation: portrait){.modal-content{width:95%;max-height:85vh;border:.3vw solid #000;box-shadow:.5vw .5vw #000}.modal-header{padding:2vh 4vw;border-bottom:.2vw solid #000}.modal-header h2{font-size:clamp(1.2rem,4vw,2rem);margin-right:8vw}.modal-header h3{font-size:clamp(1rem,3vw,1.5rem);margin-right:8vw}.modal-close-button{width:8vw;height:6vh;min-width:35px;min-height:30px;font-size:clamp(1.2rem,3vw,1.5rem);top:2vh;right:4vw;border:.2vw solid #000}.modal-body{padding:2vh 4vw}.modal-footer{padding:2vh 4vw;border-top:.2vw solid #000;flex-direction:column;gap:2vh;align-items:stretch}}@media (max-width: 1024px) and (orientation: landscape){.modal-content{width:90%;max-height:85vh;border:.2vw solid #000;box-shadow:.4vw .4vw #000}.modal-header{padding:1vh 2vw;border-bottom:.1vw solid #000}.modal-header h2{font-size:clamp(.8rem,1.8vw,1.2rem);margin-right:4vw}.modal-header h3{font-size:clamp(.7rem,1.5vw,1rem);margin-right:4vw}.modal-close-button{width:3vw;height:3vh;min-width:25px;min-height:20px;font-size:clamp(.8rem,1.5vw,1.2rem);top:1vh;right:2vw;border:.1vw solid #000}.modal-body{padding:1vh 2vw}.modal-footer{padding:1vh 2vw;border-top:.1vw solid #000;gap:.5vw}}.sound-generation-overlay{position:fixed;top:0;left:0;right:0;bottom:0;background-color:#000c;display:flex;align-items:center;justify-content:center;z-index:1000}.sound-generation-modal{background:#fffef0;border:.5vw solid #000;border-radius:0;box-shadow:.8vw .8vw #000;width:90%;max-width:500px;max-height:90vh;overflow-y:auto;font-family:Roboto,sans-serif;font-stretch:75%;display:flex;flex-direction:column}.sound-generation-header{display:flex;justify-content:space-between;align-items:center;padding:2vh 2vw;border-bottom:.2vw solid #000;background-color:#fffef0;flex-shrink:0}.sound-generation-header h2{margin:0 3vw 0 0;color:red;font-size:clamp(1rem,1.5vw,1.5rem);font-family:Anton,sans-serif;font-weight:700;text-transform:uppercase;-webkit-text-stroke:1px #000;paint-order:stroke fill}.close-button{background:red;border:.15vw solid #000;color:#fff;font-size:clamp(1rem,1.5vw,1.5rem);cursor:pointer;padding:0;width:3vw;height:3vh;min-width:30px;min-height:25px;display:flex;align-items:center;justify-content:center;font-family:Anton,sans-serif;font-weight:700;transition:all .1s ease;box-shadow:.2vw .2vh #000}.sound-generation-error{margin:1rem 2vw;padding:1rem;background-color:#ff6b6b;border:.15vw solid #000;color:#000;font-family:Roboto,sans-serif;font-stretch:75%;font-weight:700;text-transform:uppercase}.sound-generation-modal .sound-generation-form{padding:2vh 2vw;flex:1}.sound-generation-modal .form-group{margin-bottom:1.5vh}.sound-generation-modal .form-group label{display:block;margin-bottom:.5vh;font-weight:600;color:#000;font-family:Roboto,sans-serif;font-stretch:75%;text-transform:uppercase;font-size:clamp(.8rem,1vw,.9rem);letter-spacing:.5px}.form-group input,.form-group textarea{width:100%;padding:.75rem;border:.15vw solid #000;border-radius:0;background:#fff;font-size:clamp(.8rem,1vw,1rem);font-family:Roboto,sans-serif;font-stretch:75%;transition:all .1s;box-sizing:border-box}.form-group select{width:100%;padding:.5vh 1vw;border:.15vw solid #000;border-radius:0;background:gold;color:#000;font-family:Anton,sans-serif;font-weight:700;text-transform:uppercase;font-size:clamp(.7rem,1vw,1rem);transition:all .1s;box-sizing:border-box;cursor:pointer}.form-group input:focus,.form-group textarea:focus{outline:none;background-color:gold;transform:translate(-.1vw,-.1vh);box-shadow:.2vw .2vh #000}.form-group select:focus{outline:none;background-color:#ffed4e;transform:translate(-.1vw,-.1vh);box-shadow:.2vw .2vh #000}.sound-generation-modal .sound-generation-preview{padding:2vh 2vw;border-top:.2vw solid #000;background:#fffef0;flex-shrink:0}.sound-generation-modal .sound-generation-preview h3{margin:0 0 1vh;color:#000;font-family:Anton,sans-serif;font-weight:400;text-transform:uppercase;font-size:clamp(.9rem,1.1vw,1.1rem)}.sound-details,.audio-preview-container{background-color:#e8e8e8;padding:1rem;border:.15vw solid #000;border-radius:0;margin-bottom:1.5vh}.audio-preview-label{display:block;margin-bottom:1vh;font-weight:700;color:#000;font-family:Anton,sans-serif;text-transform:uppercase;font-size:clamp(.8rem,1vw,1rem)}.audio-preview-error{padding:.8rem;background-color:#ff6b6b;border:.15vw solid #000;color:#000;margin-bottom:1vh;font-family:Anton,sans-serif;font-weight:700;text-transform:uppercase;font-size:clamp(.7rem,.9vw,.9rem)}.audio-preview-controls{display:flex;justify-content:center;margin-top:1vh}.play-button{background-color:#00f;border:.15vw solid #000;color:#fff;padding:1vh 2vw;font-family:Anton,sans-serif;font-weight:700;font-size:clamp(.8rem,1vw,1rem);text-transform:uppercase;cursor:pointer;transition:all .1s ease;box-shadow:.2vw .2vh #000;border-radius:0}.play-button:hover{background-color:#22f;transform:translate(-.1vw,-.1vh);box-shadow:.3vw .3vh #000}.play-button:active{transform:translate(0);box-shadow:none}.play-button.loading{background-color:#6b7280;cursor:not-allowed}.accept-reject-controls{display:flex;gap:1vw;justify-content:space-between;margin-top:1.5vh}.accept-reject-controls button{flex:1;padding:1vh 1.5vw;font-family:Anton,sans-serif;font-weight:700;font-size:clamp(.7rem,.9vw,.9rem);text-transform:uppercase;cursor:pointer;transition:all .1s ease;border:.15vw solid #000;box-shadow:.2vw .2vh #000;border-radius:0}.reject-button{background-color:gold;color:#000}.reject-button:hover{background-color:#ffed4e;transform:translate(-.1vw,-.1vh);box-shadow:.3vw .3vh #000}.cancel-button{background-color:#fffef0;color:#000}.cancel-button:hover{background-color:#f0f0f0;transform:translate(-.1vw,-.1vh);box-shadow:.3vw .3vh #000}.accept-button{background-color:#0f0;color:#000}.accept-button:hover{background-color:#3f3;transform:translate(-.1vw,-.1vh);box-shadow:.3vw .3vh #000}.accept-reject-controls button:active{transform:translate(0);box-shadow:none}.sound-details p{margin:.4rem 0;color:#444;font-family:Roboto,sans-serif;font-stretch:75%;font-weight:400;font-size:clamp(.8rem,.9vw,.9rem)}.sound-details strong{color:#000;font-weight:600;text-transform:none;font-family:Roboto,sans-serif;font-stretch:75%}@media (max-width: 768px) and (orientation: portrait){.sound-generation-modal{width:95%;max-height:85vh;border:.3vw solid #000;box-shadow:.5vw .5vw #000}.sound-generation-header{padding:2vh 4vw;border-bottom:.2vw solid #000}.sound-generation-header h2{font-size:clamp(1.2rem,4vw,2rem);margin-right:8vw}.close-button{width:8vw;height:6vh;min-width:35px;min-height:30px;font-size:clamp(1.2rem,3vw,1.5rem);border:.2vw solid #000}.sound-generation-form,.sound-generation-preview{padding:2vh 4vw}.sound-generation-error{margin:1rem 4vw;border:.2vw solid #000}.form-group input,.form-group select,.form-group textarea,.sound-details{border:.2vw solid #000}}@media (max-width: 1024px) and (orientation: landscape){.sound-generation-modal{width:90%;max-height:85vh;border:.2vw solid #000;box-shadow:.4vw .4vw #000}.sound-generation-header{padding:1vh 2vw;border-bottom:.1vw solid #000}.sound-generation-header h2{font-size:clamp(.8rem,1.8vw,1.2rem);margin-right:4vw}.close-button{width:3vw;height:3vh;min-width:25px;min-height:20px;font-size:clamp(.8rem,1.5vw,1.2rem);border:.1vw solid #000}.sound-generation-form,.sound-generation-preview{padding:1vh 2vw}.sound-generation-preview{border-top:.1vw solid #000}.form-group label{font-size:clamp(.6rem,1.2vw,.8rem)}.form-group input,.form-group select,.form-group textarea{font-size:clamp(.7rem,1.2vw,.9rem);border:.1vw solid #000}.sound-generation-error{margin:.5rem 2vw;border:.1vw solid #000}.sound-details{border:.1vw solid #000}}.sound-selector-overlay{position:fixed;top:0;left:0;right:0;bottom:0;background:#000c;display:flex;align-items:center;justify-content:center;z-index:1000}.sound-selector-modal{max-width:1000px!important}@media (min-width: 1025px){.sound-selector-modal{width:85%!important;max-width:1200px!important}}.sound-selector-header{display:flex;justify-content:space-between;align-items:center;padding:2vh 2vw;border-bottom:.2vw solid #000}.sound-selector-header h2{margin:0;color:red;font-family:Anton,sans-serif;font-weight:700;font-size:clamp(1rem,1.5vw,1.5rem);text-transform:uppercase;letter-spacing:1px;-webkit-text-stroke:1px #000;paint-order:stroke fill}.close-button{background:gold;border:.15vw solid #000;color:#000;font-size:clamp(1rem,1.2vw,1.2rem);cursor:pointer;padding:0;width:2.5vw;height:2.5vw;min-width:25px;min-height:25px;display:flex;align-items:center;justify-content:center;font-family:Anton,sans-serif;font-weight:700;transition:all .1s ease}.close-button:hover{transform:translate(-.1vw,-.1vh);box-shadow:.2vw .2vh #000}.sound-selector-modal .sound-selector-actions{padding:1vh 0;border-bottom:.2vw solid #000;background:#8888ff1a;margin-bottom:1vh}.sound-selector-modal .sound-selector-filters{padding:1vh 0;border-bottom:.2vw solid #000;display:flex;align-items:center;gap:1.5vw;flex-wrap:wrap;margin-bottom:1vh}.sound-selector-modal .search-group{flex:1;min-width:250px}.sound-selector-modal .search-input{width:100%;padding:.5vh 1vw;border:.15vw solid #000;background:#fff;font-family:Roboto,sans-serif;font-stretch:75%;font-size:clamp(.8rem,1vw,1rem);border-radius:0}.sound-selector-modal .search-input:focus{outline:none;background:gold;box-shadow:.1vw .1vh #000}.sound-selector-modal .filter-group{display:flex;align-items:center;gap:.5vw}.sound-selector-modal .filter-group:not(.search-group){white-space:nowrap}.sound-selector-modal .sound-selector-filters label{font-family:Roboto,sans-serif;font-stretch:75%;font-weight:500;text-transform:none;font-size:clamp(.7rem,.9vw,.9rem);color:#333}.sound-selector-filters select{background:gold;color:#000;border:.15vw solid #000;border-radius:0;padding:.5vh 1vw;font-family:Anton,sans-serif;font-weight:700;text-transform:uppercase;font-size:clamp(.7rem,1vw,1rem)}.sound-selector-filters input[type=checkbox]{width:1rem;height:1rem;margin-right:.5vw}.sound-selector-modal .sound-selector-content{flex:1;overflow-y:auto;padding:0;font-family:Roboto,sans-serif;font-stretch:75%}.loading,.error,.no-sounds{text-align:center;padding:4vh 2vw;font-family:Anton,sans-serif;font-weight:700;text-transform:uppercase;font-size:clamp(.8rem,1.2vw,1.2rem)}.error{color:red}.sound-selector-modal .sounds-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(140px,1fr));gap:.8vw}@media (min-width: 1025px){.sound-selector-modal .sounds-grid{grid-template-columns:repeat(auto-fill,minmax(160px,1fr));gap:1vw}}.sound-selector-modal .sound-item{background:#ffffffe6;border:.15vw solid #000;border-radius:0;padding:.8vh .8vw;cursor:pointer;transition:all .1s ease;position:relative;min-height:80px;display:flex;flex-direction:column;justify-content:space-between;overflow:hidden}.sound-selector-modal .sound-progress-bar{position:absolute;top:0;left:0;height:100%;background:gold;opacity:.6;z-index:1;transition:width .1s ease;pointer-events:none}.sound-selector-modal .sound-item .sound-name,.sound-selector-modal .sound-item .sound-details,.sound-selector-modal .sound-item .sound-preview-unavailable{position:relative;z-index:2}.sound-selector-modal .sound-preview-unavailable{font-size:clamp(.4rem,.5vw,.5rem);color:#888;font-family:Roboto,sans-serif;font-stretch:75%;font-style:italic;margin-top:.2vh}.sound-item:hover{transform:translate(-.1vw,-.1vh);box-shadow:.2vw .2vh #000}.sound-selector-modal .sound-name{font-family:Roboto,sans-serif;font-stretch:75%;font-weight:700;font-size:clamp(.7rem,.85vw,.85rem);margin-bottom:.3vh;color:#000;text-transform:none;letter-spacing:0;line-height:1.2;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.sound-selector-modal .sound-details{display:flex;justify-content:space-between;align-items:center;gap:.5vw}.sound-selector-modal .sound-type{font-family:Roboto,sans-serif;font-stretch:75%;font-size:clamp(.5rem,.6vw,.6rem);color:#fff;text-transform:uppercase;font-weight:600;background:#00f;padding:.2vh .5vw;border:.1vw solid #000;box-shadow:.1vw .1vh #000;letter-spacing:.5px;white-space:nowrap}.sound-selector-modal .sound-meta{font-size:clamp(.5rem,.6vw,.6rem);font-family:Roboto,sans-serif;font-stretch:75%;font-weight:600;text-transform:uppercase;letter-spacing:.3px;white-space:nowrap;padding:.2vh .5vw;border:.1vw solid #000;box-shadow:.1vw .1vh #000}.sound-selector-modal .sound-meta[data-type=ai]{background:#88f;color:#fff}.sound-selector-modal .sound-meta[data-type=sample]{background:gold;color:#000}.sound-selector-modal .sound-meta[data-type=synth]{background:#ff6b6b;color:#fff}@media (max-width: 768px) and (orientation: portrait){.sound-selector-modal{width:95%;max-height:85vh;border-width:.3vw;box-shadow:.5vw .5vw #000}.sound-selector-header{padding:3vh 4vw}.sound-selector-header h2{font-size:clamp(1.2rem,4vw,2rem)}.close-button{width:8vw;height:8vw;font-size:clamp(1.2rem,3vw,1.5rem)}.sound-selector-actions{padding:2vh 4vw}.create-sound-button{padding:1.5vh 3vw;font-size:clamp(.9rem,3vw,1.2rem)}.sound-selector-filters{padding:2vh 4vw;flex-direction:column;align-items:flex-start;gap:1vh}}@media (max-width: 1024px) and (orientation: landscape){.sound-selector-modal{width:90%;max-width:700px;max-height:85vh;border:.2vw solid #000;box-shadow:.4vw .4vw #000}.sound-selector-header{padding:1.5vh 2vw}.sound-selector-header h2{font-size:clamp(1rem,2vw,1.3rem)}.close-button{width:3vw;height:3vh;min-width:30px;min-height:25px;font-size:clamp(.8rem,1.5vw,1.2rem);border:.1vw solid #000}.sound-selector-actions{padding:1vh 2vw}.create-sound-button{padding:.8vh 1.5vw;font-size:clamp(.7rem,1.3vw,1rem);border:.1vw solid #000}.sound-selector-filters{padding:1vh 2vw;gap:.5vh}.sound-selector-body{padding:1vh 2vw}.sound-item{padding:1vh 1.5vw;border:.1vw solid #000}.sound-name{font-size:clamp(.7rem,1.4vw,1rem)}.sound-meta{font-size:clamp(.5rem,1vw,.7rem);gap:.3vw}.filter-group{width:100%;justify-content:space-between}.sound-selector-filters label{font-size:clamp(.8rem,3vw,1.2rem)}.sound-selector-filters select{padding:1vh 2vw;font-size:clamp(.8rem,3vw,1.2rem);width:100%}.sound-selector-content{padding:2vh 4vw}.sounds-grid{grid-template-columns:repeat(auto-fill,minmax(140px,1fr));gap:2vw}.sound-item{padding:2vh 2vw}.sound-name{font-size:clamp(.9rem,3vw,1.2rem)}.sound-type{font-size:clamp(.7rem,2.5vw,1rem)}.sound-meta{font-size:clamp(.6rem,2vw,.8rem)}}.modal-overlay{position:fixed;top:0;left:0;right:0;bottom:0;background-color:#000c;display:flex;align-items:center;justify-content:center;z-index:1000}.modal-content{background:#fffef0;border:.5vw solid #000;border-radius:0;padding:0;width:90%;max-width:500px;max-height:90vh;overflow-y:auto;box-shadow:.8vw .8vw #000}.modal-header{background:#fffef0;padding:2vh 2vw;border-bottom:.2vw solid #000;position:relative}.modal-header h2{margin:0 0 5px;color:red;font-size:clamp(1rem,1.5vw,1.5rem);font-family:Anton,sans-serif;font-weight:700;text-transform:uppercase}.modal-header h3{margin:0;color:#000;font-size:clamp(.8rem,1.2vw,1.2rem);font-family:Anton,sans-serif;font-weight:400;text-transform:uppercase}.close-button{position:absolute;top:2vh;right:2vw;background:red;border:.15vw solid #000;color:#fff;font-size:clamp(1rem,1.5vw,1.5rem);cursor:pointer;padding:0;width:3vw;height:3vw;min-width:30px;min-height:30px;display:flex;align-items:center;justify-content:center;font-family:Anton,sans-serif;font-weight:700;transition:all .1s ease;box-shadow:.2vw .2vh #000}.close-button:hover{background:#c00;transform:translate(-.1vw,-.1vh);box-shadow:.3vw .3vh #000}.close-button:active{transform:translate(0);box-shadow:none}.modal-body{padding:2vh 3vw}.track-settings-modal .setting-group{margin-bottom:2vh;width:100%}.track-settings-modal .setting-group label{display:flex;justify-content:space-between;align-items:center;color:#333;font-family:Roboto,sans-serif;font-stretch:75%;font-weight:500;margin-bottom:.8vh;font-size:clamp(.8rem,1vw,.95rem);text-transform:none}.track-settings-modal .setting-value{color:#00f;font-family:Roboto,sans-serif;font-stretch:75%;font-size:clamp(.75rem,.9vw,.85rem);font-weight:600}.track-settings-modal .setting-slider{width:100%;height:.8vh;background:gold;border:.1vw solid #000;outline:none;-webkit-appearance:none;-moz-appearance:none;appearance:none;margin-bottom:.8vh;box-sizing:border-box}.setting-slider::-webkit-slider-thumb{-webkit-appearance:none;-moz-appearance:none;appearance:none;width:1.2vw;height:1.2vw;min-width:15px;min-height:15px;background:#00f;border:.1vw solid #000;border-radius:50%;cursor:pointer;transition:all .1s ease}.setting-slider::-webkit-slider-thumb:hover{background:#22f;transform:scale(1.1)}.setting-slider::-moz-range-thumb{width:1.2vw;height:1.2vw;min-width:15px;min-height:15px;background:#00f;border:.1vw solid #000;border-radius:50%;cursor:pointer;transition:all .1s ease;box-sizing:border-box}.setting-slider::-moz-range-thumb:hover{background:#22f;transform:scale(1.1)}.setting-slider::-moz-range-track{width:100%;height:.8vh;background:gold;border:.1vw solid #000}.track-settings-modal .range-labels{display:flex;justify-content:space-between;font-size:clamp(.6rem,.7vw,.7rem);color:#666;font-family:Roboto,sans-serif;font-stretch:75%;font-weight:400;margin-top:.3vh}.track-settings-modal .effects-section{margin-bottom:3vh;padding-bottom:2vh;border-bottom:.2vw solid #ddd}.track-settings-modal .effects-section:last-child{border-bottom:none;margin-bottom:0;padding-bottom:0}.track-settings-modal .section-title{margin:0 0 1.5vh;color:red;font-family:Anton,sans-serif;font-size:clamp(.9rem,1.2vw,1.1rem);font-weight:700;text-transform:uppercase;letter-spacing:.5px}.track-settings-modal .setting-select{width:100%;padding:.5vh 1vw;border:.1vw solid #000;background:#fffef0;color:#333;font-family:Roboto,sans-serif;font-stretch:75%;font-size:clamp(.8rem,1vw,.95rem);font-weight:500;border-radius:0;outline:none;cursor:pointer;transition:all .1s ease}.track-settings-modal .setting-select:hover{background:gold}.track-settings-modal .setting-select:focus{background:gold;border-color:#00f}.modal-footer{background:#fffef0;padding:2vh 2vw;border-top:.2vw solid #000;display:flex;justify-content:space-between;align-items:center}.reset-button{background:#fffef0;border:.15vw solid #000;color:#000;padding:1vh 1.5vw;cursor:pointer;font-family:Anton,sans-serif;font-weight:700;font-size:clamp(.7rem,.9vw,.9rem);text-transform:uppercase;transition:all .1s ease;box-shadow:.2vw .2vh #000}.reset-button:hover{background:gold;transform:translate(-.1vw,-.1vh);box-shadow:.3vw .3vh #000}.reset-button:active{transform:translate(0);box-shadow:none}.action-buttons{display:flex;gap:1vw}.cancel-button{background:#fffef0;border:.15vw solid #000;color:#000;padding:1vh 2vw;cursor:pointer;font-family:Anton,sans-serif;font-weight:700;font-size:clamp(.7rem,.9vw,.9rem);text-transform:uppercase;transition:all .1s ease;box-shadow:.2vw .2vh #000}.cancel-button:hover{background:gold;transform:translate(-.1vw,-.1vh);box-shadow:.3vw .3vh #000}.cancel-button:active{transform:translate(0);box-shadow:none}.save-button{background:#00f;border:.15vw solid #000;color:#fff;padding:1vh 2vw;cursor:pointer;font-family:Anton,sans-serif;font-weight:700;font-size:clamp(.7rem,.9vw,.9rem);text-transform:uppercase;transition:all .1s ease;box-shadow:.2vw .2vh #000}.save-button:hover{background:#22f;transform:translate(-.1vw,-.1vh);box-shadow:.3vw .3vh #000}.save-button:active{transform:translate(0);box-shadow:none}@media (max-width: 600px){.modal-content{width:95%;margin:1vh}.modal-header,.modal-body{padding:1.5vh 3vw}.modal-footer{padding:1.5vh 3vw;flex-direction:column;gap:2vh;align-items:stretch}.action-buttons{justify-content:center;gap:3vw}.close-button{width:6vw;height:6vw;min-width:35px;min-height:35px;top:1.5vh;right:3vw}.setting-slider::-webkit-slider-thumb{width:2.5vw;height:2.5vw;min-width:20px;min-height:20px}.setting-slider::-moz-range-thumb{width:2.5vw;height:2.5vw;min-width:20px;min-height:20px}}.step-button{border:.15vw solid #000;background-color:#fffef0;cursor:pointer;position:relative;transition:all .1s;flex-shrink:0}.step-button:hover{background-color:gold;transform:scale(1.1)}.step-button.active{background-color:red;box-shadow:inset .2vw .2vh #000}.step-button.playing{background-color:#0f0!important;animation:pulse .2s}.step-button:nth-child(4n+1){border-left:.2vw solid #000}@keyframes pulse{0%{transform:scale(1)}50%{transform:scale(1.2)}to{transform:scale(1)}}.step-row{display:flex;gap:.3vw;flex:1;justify-content:center}.volume-slider{height:.6vh;background:gold;outline:none;border:.1vw solid #000;-webkit-appearance:none;flex-shrink:0}.volume-slider::-webkit-slider-thumb{-webkit-appearance:none;width:1.2vw;height:1.2vw;background:#00f;border:.1vw solid #000;cursor:pointer;border-radius:50%}.volume-slider::-moz-range-thumb{width:1.2vw;height:1.2vw;background:#00f;border:.1vw solid #000;cursor:pointer;border-radius:50%;border:none}.mute-button{padding:.3vh .8vw;font-size:clamp(.6rem,1vw,1rem);background-color:#fffef0;border:.15vw solid #000;flex-shrink:0;font-family:Roboto,sans-serif;font-stretch:75%;font-weight:700;cursor:pointer;transition:all .1s;color:#000}.mute-button:hover{transform:translate(-.2vw,-.2vh);box-shadow:.3vw .3vh #000}.mute-button:active{transform:translate(0);box-shadow:none}.mute-button.muted{background-color:red;color:#fff}.track-label{display:flex;align-items:center;justify-content:center;background-color:#e8e8e8;color:#2c3e50;border:.2vw solid #000;font-family:Roboto,sans-serif;font-stretch:75%;font-weight:700;font-size:clamp(.6rem,1vw,1rem);text-transform:uppercase;flex-shrink:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;height:100%}@media (max-width: 768px) and (orientation: portrait){.step-row{gap:.2vw}.step-button{width:5vw;height:2.5vh}.track-label{width:auto;padding:0 1vw;min-width:8vw;font-size:clamp(.5rem,2vw,.8rem)}.volume-slider{width:6vw}.mute-button{padding:.2vh .5vw;font-size:clamp(.5rem,1.5vw,.8rem)}}@media (max-width: 1024px) and (orientation: landscape){.step-row{gap:.15vw;flex:1;justify-content:center;align-items:center}.step-button{border:.1vw solid #000;max-width:45px;min-width:35px}.step-button:nth-child(4n+1){border-left:.1vw solid #000}.track-label{font-size:clamp(.5rem,1.3vw,.8rem);border:.1vw solid #000}.volume-slider{height:.4vh;border:.1vw solid #000}.volume-slider::-webkit-slider-thumb{width:1vw;height:1vw;border:.1vw solid #000}.volume-slider::-moz-range-thumb{width:1vw;height:1vw;border:.1vw solid #000}.mute-button{padding:.2vh .4vw;font-size:clamp(.5rem,1.2vw,.7rem);border:.1vw solid #000}}.track-manager{width:100%;display:flex;flex-direction:column;gap:.3vh;border:.3vw solid #000;padding:.8vw;background-color:#fff;position:relative}.tracks-container{display:flex;flex-direction:column;gap:.3vh}.track-row{display:flex;align-items:center;gap:1vw;height:4vh}.track-info{display:flex;align-items:center;gap:0}.track-label{width:8vw}.track-label.clickable{cursor:pointer;transition:all .1s ease}.track-label.clickable:hover{background-color:#22f;transform:translate(-.1vw,-.1vh);box-shadow:.2vw .2vh #000}.remove-track-button{width:1.5vw;height:1.5vw;min-width:15px;min-height:15px;background-color:red;color:#fff;border:.1vw solid #000;font-size:clamp(.5rem,.7vw,.7rem);font-family:Anton,sans-serif;font-weight:700;cursor:pointer;display:flex;align-items:center;justify-content:center;transition:all .1s;box-shadow:.1vw .1vh #000;margin-left:.3vw}.remove-track-button:hover{background-color:#c00;transform:translate(-.1vw,-.1vh);box-shadow:.2vw .2vh #000}.remove-track-button:active{transform:translate(0);box-shadow:none}.step-button{width:3.5vw;height:3.5vh}.track-controls{height:100%;display:flex;align-items:center;gap:.5vw;padding:0 .5vw;flex-shrink:0}.volume-slider{width:8vw}.add-track-row{display:flex;align-items:center;justify-content:center;padding:2vh 0;margin-top:1vh;gap:1vw}.add-track-button{background:gold;border:.15vw solid #000;color:#000;border-radius:0;padding:.6vh 1.2vw;font-family:Anton,sans-serif;font-weight:700;font-size:clamp(.7rem,1vw,1rem);text-transform:uppercase;cursor:pointer;transition:all .1s ease;position:relative;min-height:3vh}.add-track-button:hover{transform:translate(-.2vw,-.2vh);box-shadow:.3vw .3vh #000}.add-track-button:active{transform:translate(0);box-shadow:none}.track-count{font-family:Anton,sans-serif;font-size:clamp(.6rem,.8vw,.8rem);color:#000;text-transform:uppercase;font-weight:700}@media (max-width: 768px) and (orientation: portrait){.track-manager{width:98vw;height:95vh;padding:1.5vw}.track-row{height:3vh;gap:.5vw}.step-button{width:5vw;height:2.5vh}.track-controls{gap:.3vw;padding:0 .3vw}.volume-slider{width:6vw}}@media (max-width: 1024px) and (orientation: landscape){.track-manager{width:100%;padding:.2vw;border:.1vw solid #000;max-height:75vh;overflow-y:auto}.track-row{height:3.5vh;gap:.15vw}.track-label{width:10vw;padding:0 .3vw}.remove-track-button{width:1.2vw;height:1.2vw;min-width:12px;min-height:12px;font-size:clamp(.4rem,.6vw,.6rem);border:.05vw solid #000;box-shadow:.05vw .05vh #000;margin-left:.2vw}.step-button{width:4.5vw;height:2.8vh;max-width:40px;min-width:30px}.track-controls{gap:.2vw;padding:0 .2vw}.volume-slider{width:8vw}.add-track-row{padding:.5vh 0;margin-top:.2vh}.add-track-button{padding:.4vh .8vw;font-size:clamp(.6rem,1.2vw,.8rem);border:.1vw solid #000;min-height:2.5vh}.track-count{font-size:clamp(.5rem,1vw,.7rem)}}.orientation-prompt-overlay{position:fixed;top:0;left:0;right:0;bottom:0;background-color:#000000e6;display:flex;align-items:center;justify-content:center;z-index:9999;-webkit-backdrop-filter:blur(5px);backdrop-filter:blur(5px)}.orientation-prompt{background:#fffef0;border:.5vw solid #000;box-shadow:.8vw .8vw #000;padding:2rem;text-align:center;max-width:300px;margin:1rem}.rotate-icon{font-size:3rem;margin-bottom:1rem;display:block}.orientation-prompt h2{font-family:Anton,sans-serif;font-size:1.5rem;color:red;text-transform:uppercase;margin:0 0 1rem;-webkit-text-stroke:1px #000;paint-order:stroke fill}.orientation-prompt p{font-family:Roboto,sans-serif;font-stretch:75%;font-weight:700;color:#000;margin:0;line-height:1.4}