.overlay{position:fixed;top:0;left:0;width:100%;height:100%;background-color:#fffffffa;display:flex;justify-content:center;align-items:center;z-index:1000}.overlay-content{text-align:center;padding:40px}.overlay-title{font-size:2.5rem;margin-bottom:20px;color:#333}.overlay-description{font-size:1.2rem;margin-bottom:30px;color:#666}.begin-button{background-color:#4caf50;color:#fff;border:none;padding:15px 40px;font-size:1.2rem;border-radius:8px;cursor:pointer;transition:background-color .3s;font-weight:600}.begin-button:hover{background-color:#45a049}.begin-button:active{transform:scale(.98)}.loop-controls{position:fixed;top:0;right:0;width:600px;height:100vh;background-color:#fff;z-index:999;transform:translate(100%);transition:transform .3s ease-out;display:flex;flex-direction:column;box-shadow:-2px 0 8px #0003}.loop-controls.open{transform:translate(0)}.loop-controls-content{flex:1;padding:40px 20px 20px;overflow-y:auto;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:20px}@media (max-width: 768px){.loop-controls-content{padding:40px 15px 15px;gap:18px}}.control-group .slider-container{flex-direction:row!important}.orientation-control-group{position:relative;z-index:1001;pointer-events:auto}.control-label{color:#333;font-size:1rem;font-weight:600;text-transform:uppercase;letter-spacing:1px;pointer-events:auto}.control-label input[type=checkbox]{pointer-events:auto;cursor:pointer}.orientation-label-text{font-size:1rem;font-weight:600;text-transform:uppercase;letter-spacing:1px;color:#333;-webkit-user-select:none;user-select:none;pointer-events:none}.orientation-label-text{font-size:1rem;font-weight:600;text-transform:uppercase;letter-spacing:1px;color:#333;-webkit-user-select:none;user-select:none}.midnight-start-field{font-family:Courier New,Courier,monospace;font-size:1rem;padding:8px 12px;border:1px solid #ddd;border-radius:4px;background-color:#f9f9f9;color:#333;text-align:center;width:120px;-webkit-user-select:all;user-select:all}.slider-container{width:100%;display:flex;flex-direction:row;align-items:center;justify-content:center;gap:10px;margin-bottom:10px;flex-wrap:nowrap}.volume-slider{width:70%!important;flex:0 0 70%;height:6px!important;border-radius:3px;background:#757575;outline:none;-webkit-appearance:none;-moz-appearance:none;appearance:none;margin:0;padding:0}.mute-button{width:auto;flex:0 0 auto;flex-shrink:0;background:none;border:2px solid #757575;border-radius:8px;padding:8px 12px;font-size:1.2rem;cursor:pointer;transition:all .2s;user-select:none;-webkit-user-select:none;touch-action:manipulation;min-width:50px;display:inline-flex;align-items:center;justify-content:center;margin:0;vertical-align:middle}.mute-button:hover{background-color:#f5f5f5;border-color:#4caf50}.mute-button:active{transform:scale(.95)}.mute-button.muted{background-color:#f44336;border-color:#f44336;color:#fff}.mute-button.muted:hover{background-color:#d32f2f;border-color:#d32f2f}.volume-slider::-webkit-slider-thumb{-webkit-appearance:none;-moz-appearance:none;appearance:none;width:20px;height:20px;border-radius:50%;background:#4caf50;cursor:pointer;box-shadow:0 2px 4px #0003}.volume-slider::-moz-range-thumb{width:20px;height:20px;border-radius:50%;background:#4caf50;cursor:pointer;border:none;box-shadow:0 2px 4px #0003}.volume-value{color:#333;font-size:1.2rem;font-weight:600;min-width:50px;text-align:center}.timestamp-field{width:100%;display:flex;justify-content:center}.timestamp-input{width:80%;padding:12px 16px;font-size:1rem;font-family:Courier New,monospace;text-align:center;border:2px solid #757575;border-radius:8px;background-color:#f5f5f5;color:#333;font-weight:600;letter-spacing:1px}.keypad-container{width:100%;display:flex;flex-direction:column;gap:10px}.keypad-row{display:flex;gap:10px;justify-content:center;width:100%}.keypad-button{flex:1;padding:20px;font-size:1.5rem;font-weight:600;border:2px solid #757575;border-radius:8px;background-color:#fff;color:#333;cursor:pointer;transition:all .2s;user-select:none;-webkit-user-select:none;touch-action:manipulation;min-width:60px}.keypad-button:hover:not(:disabled){background-color:#f5f5f5;border-color:#4caf50}.keypad-button:active:not(:disabled){background-color:#4caf50;color:#fff;border-color:#4caf50;transform:scale(.95)}.keypad-button:disabled{opacity:.5;cursor:not-allowed;background-color:#e0e0e0}.keypad-clear{background-color:#ff9800;color:#fff;border-color:#ff9800}.keypad-clear:hover{background-color:#f57c00}.keypad-enter{background-color:#4caf50;color:#fff;border-color:#4caf50}.keypad-enter:hover:not(:disabled){background-color:#45a049}.sync-message{padding:15px;background-color:#ff9800;color:#fff;border-radius:8px;font-weight:600;text-align:center;font-size:1.1rem}.sync-disabled-message{color:#999;font-size:.9rem;text-align:center;margin:10px 0}.speed-buttons{display:flex;gap:0;justify-content:center;width:100%}.speed-button{flex:1;max-width:200px;padding:30px 20px;font-size:3rem;font-weight:600;border:3px solid #757575;background-color:#fff;color:#3333334d;cursor:pointer;transition:all .2s;user-select:none;-webkit-user-select:none;touch-action:manipulation;position:relative;overflow:hidden;opacity:1}.speed-button:hover{border-color:#4caf50;background-color:#f5f5f5}.speed-button:active{transform:scale(.98)}.speed-minus{background:linear-gradient(to right,#d32f2f,#ff6f00,#ffc107);color:#fff;border-color:#ff5722;border-right:none;border-radius:12px 0 0 12px;box-shadow:inset 0 0 20px #0003}.speed-plus{background:linear-gradient(to left,#2e7d32,#66bb6a,#c8e6c9);color:#fff;border-color:#4caf50;border-left:none;border-radius:0 12px 12px 0;box-shadow:inset 0 0 20px #0003}.pitch-slider-container{width:100%;display:flex;flex-direction:column;align-items:center;gap:10px;margin-top:15px;margin-bottom:15px}.pitch-slider{width:100%;height:8px;-webkit-appearance:none;-moz-appearance:none;appearance:none;background-color:#f5f5f5;background-image:repeating-linear-gradient(to right,#666 0,#666 1px,transparent 1px,transparent 16px),repeating-linear-gradient(to right,#666 0,#666 1px,transparent 1px,transparent 4px);background-size:50% 100%,50% 100%;background-position:left center,right center;background-repeat:no-repeat;border-radius:4px;outline:none;cursor:pointer;position:relative}.pitch-slider:before{content:"";position:absolute;left:50%;top:0;bottom:0;width:2px;background-color:#757575;transform:translate(-50%);pointer-events:none}.pitch-slider::-webkit-slider-thumb{-webkit-appearance:none;-moz-appearance:none;appearance:none;width:48px;height:48px;border-radius:50%;background:#2196f3;cursor:pointer;border:3px solid #FFFFFF;box-shadow:0 2px 4px #0003;transition:all .1s}.pitch-slider::-webkit-slider-thumb:active{transform:scale(1.2);box-shadow:0 3px 6px #0000004d}.pitch-slider::-moz-range-thumb{width:48px;height:48px;border-radius:50%;background:#2196f3;cursor:pointer;border:3px solid #FFFFFF;box-shadow:0 2px 4px #0003;transition:all .1s}.pitch-slider::-moz-range-thumb:active{transform:scale(1.2);box-shadow:0 3px 6px #0000004d}.pitch-slider-value{color:#333;font-size:1.2rem;font-weight:600;font-family:Courier New,monospace;min-width:80px;text-align:center;margin-top:10px}.speed-minus:hover{border-color:#e64a19;background:linear-gradient(to right,#c62828,#f57c00,#ffb300)}.speed-plus:hover{border-color:#45a049;background:linear-gradient(to left,#1b5e20,#4caf50,#a5d6a7)}.sine-wave-indicator{width:100%;margin-top:5px;display:flex;align-items:center;justify-content:center}.sine-wave-slider{width:100%;height:23px;-webkit-appearance:none;-moz-appearance:none;appearance:none;background:transparent;cursor:default;pointer-events:none}.sine-wave-slider::-webkit-slider-track{width:100%;height:4px;background:#0000001a;border-radius:2px}.sine-wave-slider::-webkit-slider-thumb{-webkit-appearance:none;-moz-appearance:none;appearance:none;width:23px;height:23px;background-color:#9e9e9e;border-radius:50%;border:none;cursor:default;margin-top:-9.5px}.sine-wave-slider::-moz-range-track{width:100%;height:4px;background:#0000001a;border-radius:2px}.sine-wave-slider::-moz-range-thumb{width:23px;height:23px;background-color:#9e9e9e;border-radius:50%;border:none;cursor:default}.sine-circle-indicator{width:80px;height:80px;border-radius:50%;background-color:#dedede;margin:8px auto 0;transition:background-color .1s}.sine-circle-indicator.blink-blue{background-color:#2196f3}.beat-shift-container{display:flex;flex-direction:column;align-items:center;margin-top:5px}.beat-shift-label{font-size:.9rem;font-weight:600;color:#333;margin-bottom:10px;text-transform:uppercase;letter-spacing:1px}.jump-buttons{display:flex;gap:15px;justify-content:center;align-items:center}.jump-button{width:100px;height:100px;border-radius:50%;border:2px solid #757575;background-color:#fff;color:#333;font-size:3rem;font-weight:600;cursor:pointer;display:flex;align-items:center;justify-content:center;transition:all .2s;user-select:none;-webkit-user-select:none;touch-action:manipulation;-webkit-tap-highlight-color:transparent}.jump-button:hover{background-color:#f5f5f5;border-color:#4caf50}.jump-button:active{background-color:#4caf50;color:#fff;border-color:#4caf50;transform:scale(.95)}.rhythm-clock{width:100%;display:flex;justify-content:center;align-items:center;margin-top:20px}.clock-face{width:75%;aspect-ratio:1;position:relative}.clock-top-indicator{position:absolute;top:0;left:50%;width:8px;height:8px;background-color:#666;border-radius:50%;transform:translate(-50%);z-index:5}.restart-button{flex:1;padding:20px 15px;font-size:1rem;font-weight:600;letter-spacing:1px;text-transform:uppercase;border:2px solid #757575;border-radius:8px;background-color:#fff;color:#333;cursor:pointer;transition:all .2s;user-select:none;-webkit-user-select:none;touch-action:manipulation;margin:0}.restart-button:hover{background-color:#f5f5f5;border-color:#4caf50}.restart-button:active{background-color:#4caf50;color:#fff;border-color:#4caf50;transform:scale(.98)}.reset-button{flex:1;padding:20px 15px;font-size:1.1rem;font-weight:600;border:2px solid #F44336;border-radius:8px;background-color:#fff;color:#f44336;cursor:pointer;transition:all .2s;text-transform:uppercase;letter-spacing:1px;user-select:none;-webkit-user-select:none;touch-action:manipulation}.reset-button:hover{background-color:#f44336;color:#fff}.reset-button:active{transform:scale(.98)}.close-button{position:absolute;top:15px;right:15px;background:none;border:none;font-size:2rem;color:#666;cursor:pointer;width:40px;height:40px;display:flex;align-items:center;justify-content:center;border-radius:50%;transition:background-color .2s;z-index:1000;pointer-events:auto}@media (max-width: 768px){.loop-controls{width:100vw;max-width:none}.speed-button{padding:20px 15px;font-size:2.5rem}}.controls-overlay{position:fixed;top:0;left:0;width:100%;height:100%;background-color:#0000004d;z-index:998;animation:fadeIn .3s ease-out}@keyframes fadeIn{0%{opacity:0}to{opacity:1}}.sample-controls{position:fixed;top:0;left:0;width:600px;height:100vh;background-color:#fff;z-index:999;transform:translate(-100%);transition:transform .3s ease-out;display:flex;flex-direction:column;box-shadow:2px 0 8px #0003}.sample-controls.open{transform:translate(0)}.sample-controls-content{flex:1;padding:60px 20px 20px;overflow-y:auto;display:flex;flex-direction:column;align-items:center;justify-content:flex-start;gap:30px}@media (max-width: 768px){.sample-controls-content{padding:50px 15px 15px;gap:25px}}.control-group{width:100%;display:flex;flex-direction:column;align-items:center;gap:15px}.control-label{color:#333;font-size:1rem;font-weight:600;text-transform:uppercase;letter-spacing:1px}.orientation-checkbox-label{display:flex;align-items:center;gap:15px;justify-content:center;cursor:pointer;-webkit-tap-highlight-color:transparent;touch-action:manipulation;-webkit-user-select:none;user-select:none;-webkit-touch-callout:none;padding:15px;pointer-events:auto!important;width:100%;position:relative;z-index:1002}.orientation-checkbox{width:28px;height:28px;cursor:pointer;-webkit-tap-highlight-color:transparent;touch-action:manipulation;pointer-events:auto!important;margin:0;flex-shrink:0;accent-color:#4CAF50;position:relative;z-index:1003;border:2px solid #4CAF50;border-radius:4px}.orientation-label-text{font-size:1rem;font-weight:600;color:#333;text-transform:uppercase;letter-spacing:1px}.slider-container{width:100%;display:flex;flex-direction:column;align-items:center;gap:10px}.volume-slider{width:80%;height:6px;border-radius:3px;background:#757575;outline:none;-webkit-appearance:none;-moz-appearance:none;appearance:none}.volume-slider::-webkit-slider-thumb{-webkit-appearance:none;-moz-appearance:none;appearance:none;width:20px;height:20px;border-radius:50%;background:#4caf50;cursor:pointer}.volume-slider::-moz-range-thumb{width:20px;height:20px;border-radius:50%;background:#4caf50;cursor:pointer;border:none}.volume-value{font-size:1.2rem;font-weight:600;color:#333}.close-button{position:absolute;top:15px;right:15px;background:none;border:none;font-size:2rem;color:#666;cursor:pointer;width:40px;height:40px;display:flex;align-items:center;justify-content:center;border-radius:50%;transition:background-color .2s;z-index:1000}.close-button:hover{background-color:#0000001a}.close-button:active{transform:scale(.95)}@media (max-width: 768px){.sample-controls{width:100vw;max-width:none}}.loops-container{width:100%;display:flex;flex-direction:column;align-items:center;margin-top:40px}.section-title{color:#4caf50;font-size:1.5rem;font-weight:600;margin-bottom:30px;text-align:center;letter-spacing:2px}.loops-grid{display:flex;gap:20px;justify-content:center;align-items:center;flex-wrap:wrap;width:100%}.loop-button{background:none;border:none;padding:0;cursor:pointer;position:relative;transition:transform .2s;touch-action:manipulation;-webkit-tap-highlight-color:transparent;user-select:none;-webkit-user-select:none}.loop-button:active{transform:scale(.95)}.loop-circle{width:100px;height:100px;border-radius:50%;background-color:#2196f3;position:relative;display:flex;align-items:center;justify-content:center;box-shadow:0 4px 8px #0003}.loop-highlight{position:absolute;top:10px;left:50%;transform:translate(-50%);width:60px;height:30px;border-radius:50% 50% 0 0;background-color:#ffffff4d;pointer-events:none}.loop-button.active .loop-circle{background-color:#1976d2;box-shadow:0 6px 12px #2196f366}.controls-toggle-button{position:fixed;right:0;top:0;transform:rotate(-90deg);transform-origin:right bottom;padding:15px 25px;background-color:#9e9e9e;color:#fff;border:none;border-top-left-radius:8px;border-top-right-radius:8px;font-size:.9rem;font-weight:600;letter-spacing:1px;cursor:pointer;transition:all .2s;z-index:997;white-space:nowrap;box-shadow:-2px 0 4px #0003;touch-action:manipulation;-webkit-tap-highlight-color:transparent;user-select:none;-webkit-user-select:none;margin:0}.controls-toggle-button:hover{background-color:#757575}.controls-toggle-button:active{transform:rotate(-90deg) scale(.98);transform-origin:right bottom;background-color:#616161}@media (max-width: 768px){.controls-toggle-button{padding:18px 20px;font-size:.85rem}}.samples-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:15px;width:100%;max-width:400px;margin-top:40px}@media (max-width: 768px){.samples-grid{gap:10px;max-width:100%;padding:0 5px}}.sample-button{aspect-ratio:1;border:2px solid #757575;border-radius:8px;background-color:#fff;cursor:pointer;transition:all .2s;user-select:none;-webkit-user-select:none;touch-action:manipulation;-webkit-tap-highlight-color:transparent;padding:0}.sample-button:hover{background-color:#f5f5f5;border-color:#4caf50}.sample-button:active{background-color:#4caf50;border-color:#4caf50;transform:scale(.95)}.sample-button.highlighted{background-color:#4caf50;border-color:#4caf50;box-shadow:0 0 15px #4caf5099}.sample-button.selected{background-color:#e8f5e9;border-color:#81c784}.sample-button.pulse-beat-active{position:relative}.sample-button.pulse-beat-active:after{content:"";position:absolute;left:0;right:0;bottom:0;top:50%;background-color:#eeeeee4d;pointer-events:none;z-index:0}.sample-button-divider{position:absolute;left:0;right:0;top:50%;height:1px;background-color:#bdbdbd;transform:translateY(-50%);pointer-events:none;z-index:1}.sample-controls-toggle-button{position:fixed;left:0;top:0;transform:rotate(90deg);transform-origin:left bottom;padding:15px 25px;background-color:#9e9e9e;color:#fff;border:none;border-top-left-radius:8px;border-top-right-radius:8px;font-size:.9rem;font-weight:600;letter-spacing:1px;cursor:pointer;transition:all .2s;z-index:997;white-space:nowrap;box-shadow:2px 0 4px #0003;touch-action:manipulation;-webkit-tap-highlight-color:transparent;user-select:none;-webkit-user-select:none;margin:0}.sample-controls-toggle-button:hover{background-color:#757575}.sample-controls-toggle-button:active{transform:rotate(90deg) scale(.98);transform-origin:left bottom;background-color:#616161}@media (max-width: 768px){.sample-controls-toggle-button{padding:18px 20px;font-size:.85rem}}@media (max-width: 768px){.loop-circle{width:80px;height:80px}.loop-highlight{width:3px;height:25px;top:8px}.loops-grid{gap:15px}}.orientation-toggle-container{position:fixed;bottom:20px;left:50%;transform:translate(-50%);display:flex;flex-direction:column;align-items:center;gap:10px;z-index:100;pointer-events:auto}.orientation-dropdown{padding:12px 40px 12px 20px;background:#fffffff2;border:2px solid #4CAF50;border-radius:8px;box-shadow:0 2px 8px #00000026;font-size:.9rem;font-weight:600;color:#333;cursor:pointer;-webkit-tap-highlight-color:transparent;touch-action:manipulation;pointer-events:auto;min-width:180px;text-align:center;appearance:none;-webkit-appearance:none;-moz-appearance:none;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 12 12'%3E%3Cpath fill='%23333' d='M6 9L1 4h10z'/%3E%3C/svg%3E");background-repeat:no-repeat;background-position:right 15px center}.orientation-dropdown:focus{outline:none;border-color:#45a049;box-shadow:0 0 0 3px #4caf5033}.orientation-heading-display{font-size:.85rem;color:#666;background:#ffffffe6;padding:8px 16px;border-radius:6px;box-shadow:0 2px 8px #00000026}.countdown-overlay{position:fixed;top:0;left:0;right:0;bottom:0;background:#000000b3;display:flex;align-items:center;justify-content:center;z-index:9999;pointer-events:none}.countdown-text{font-size:3rem;font-weight:700;color:#2196f3;text-shadow:0 2px 10px rgba(33,150,243,.5);font-family:monospace}.app{width:100%;max-width:100%;height:100vh;max-height:100vh;overflow:hidden;display:flex;flex-direction:column;align-items:center;justify-content:flex-start;padding:20px;touch-action:none;overscroll-behavior:none;-webkit-overscroll-behavior:none}@media (max-width: 768px){.app{padding:10px}}@media (min-width: 769px){.app{max-width:500px;margin:0 auto}}*{margin:0;padding:0;box-sizing:border-box}html,body{height:100%;width:100%;overflow:hidden;position:fixed;touch-action:none;-webkit-overflow-scrolling:none}body{font-family:-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,Oxygen,Ubuntu,Cantarell,Fira Sans,Droid Sans,Helvetica Neue,sans-serif;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;background-color:#fff;overscroll-behavior:none;-webkit-overscroll-behavior:none}#root{width:100%;height:100vh;max-height:100vh;overflow:hidden;display:flex;justify-content:center;align-items:center;position:fixed;top:0;left:0;touch-action:none;overscroll-behavior:none;-webkit-overscroll-behavior:none}