html{box-sizing:border-box}*,:after,:before{box-sizing:inherit}body{font-family:VT323,serif;font-size:32px;background:#000;color:#fff}button,input,select,textarea{font-size:32px}.wrap{position:relative;display:flex;flex-direction:row;align-items:center;justify-content:center;height:100dvh;padding:20px;width:100%;max-width:1200px;margin:0 auto}.ctr{display:flex;flex-direction:column;border:5px solid #fff;width:100%;height:100%;max-height:100%;overflow:hidden}.ctr-title{background-color:#000;color:#fff;position:absolute;top:5px;z-index:5;padding:0 5px}.scanlines{position:relative;overflow:hidden}.scanlines:after,.scanlines:before{display:block;pointer-events:none;content:"";position:absolute}.scanlines:before{width:100%;height:2px;z-index:2147483649;background:rgba(0,0,0,.15);opacity:.75;animation:6s linear infinite scanline}.scanlines:after{top:0;right:0;bottom:0;left:0;z-index:2147483648;background:linear-gradient(to bottom,transparent 50%,rgba(0,0,0,.15) 51%);background-size:100% 4px;animation:1s steps(60) infinite scanlines}@keyframes scanline{0%{transform:translate3d(0,200000%,0)}}@keyframes scanlines{0%{background-position:0 50%}}.beat-maker{display:flex;flex-direction:column;width:100%;height:100%;padding:20px;overflow:hidden}.beat-maker-controls{display:flex;justify-content:space-between;gap:20px;flex-wrap:nowrap;align-items:center;flex-shrink:0}.mobile-bottom-controls{display:flex;gap:10px;position:relative}.beat-maker-controls button,.beat-maker-controls input[type=number],.beat-maker-controls select,.instrument-row button,.menu-button,.play-button{border:3px solid #fff;background:#000;color:#fff;padding:5px 10px;font-family:VT323,serif;cursor:pointer}.beat-maker-controls button:hover,.beat-maker-controls input[type=number]:focus,.instrument-row button:hover{background-color:#fff;color:#000}.menu-button{padding:10px;margin-top:10px}.play-button{flex:1;padding:10px;flex-shrink:0;margin-top:10px}.playing{background-color:#fff!important;color:#000!important}.controls-left,.controls-right{display:flex;gap:10px;align-items:center;flex-wrap:nowrap;min-width:0}.controls-left{flex:1}.controls-right{flex-shrink:0;display:flex;gap:10px;align-items:center;flex-wrap:nowrap;min-width:0}.about-button,.delete-button,.new-button,.save-button,.share-button{padding:5px 10px;flex-shrink:0}.saved-beats-control{display:flex;align-items:center;gap:5px;min-width:0;flex-shrink:0}.saved-beats-select{text-align:left;width:100%;min-width:0;max-width:200px}.preset-control{display:flex;align-items:center;gap:5px;min-width:0}.preset-select{text-align:left;width:100%;min-width:0;max-width:200px}.tempo-control{display:flex;align-items:center;gap:5px;position:relative;flex-shrink:0;white-space:nowrap;min-width:fit-content}.tempo-input{width:90px;text-align:right;padding:5px 8px}.bpm-label{white-space:nowrap;color:#fff}.instruments-section{margin-top:10px;padding:15px 0;flex:1;overflow-y:auto;overflow-x:hidden;min-height:0}.instruments-container{display:grid;grid-template-columns:repeat(4,1fr);gap:20px}.instrument-row{border:3px solid #fff;padding:17px 10px 10px;position:relative}.instrument-row.muted{opacity:.5}.instrument-header{position:absolute;width:auto;max-width:100%;overflow:hidden;text-overflow:ellipsis;top:-20px;left:10px;white-space:nowrap;display:flex;align-items:center;margin:0 0 30px}.instrument-header h3{background-color:#000;padding:0 5px;color:#fff}.instrument-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:10px}button.mute-instrument,button.remove-instrument{padding:3px 5px;color:#fff;font-size:20px;cursor:pointer;border-width:2px;border-color:rgba(255,255,255,.7)}.instrument-controls{margin-top:10px;display:flex;align-items:center;justify-content:space-between;gap:7px}.instrument-visualizer{display:flex;align-items:center;justify-content:center}.instrument-visualizer canvas{border:3px solid rgba(255,255,255,.7)}.add-instrument-card{padding:0;border:0;display:flex;flex-direction:column;justify-content:center;align-items:center;order:999;position:relative}button.add-instrument-toggle{background:0 0;cursor:pointer;padding:0;width:100%;height:100%;display:flex;align-items:center;justify-content:center}button.add-instrument-toggle:hover{background:#000;border-color:#fff}button.add-instrument-toggle:hover .plus-icon{color:#fff}.add-instrument-toggle .plus-icon{font-size:80px;color:rgba(255,255,255,.7);font-weight:300;line-height:1}.add-instrument-toggle:hover{background:#000}.add-instrument-toggle:hover .plus-icon{color:#fff}.add-instrument-card.form-visible .add-instrument-toggle{display:none}.add-instrument-card.form-visible{justify-content:space-between}.add-instrument-card .add-instrument-content select,.add-instrument-card .color-picker-wrapper input[type=color],.add-instrument-card button,.add-instrument-card input{border-color:rgba(255,255,255,.7)}.add-instrument-content{display:flex;flex-direction:column;gap:10px;width:100%;justify-content:center}.add-instrument-content input,.add-instrument-content select{background:#000;border:3px solid #fff;color:#fff;padding:4px 8px;font-family:VT323,serif;width:100%}.selector-preview-wrapper{display:flex;gap:5px;align-items:stretch}.instrument-selector{flex:1}.preview-button-wrapper{display:flex}.instrument-params .add-button,.preview-button-wrapper .preview-button{width:100%}.step-button{border:2px solid rgba(255,255,255,.5);background:0 0;cursor:pointer;aspect-ratio:1/1}.instrument-grid button{border-color:rgba(255,255,255,.7)}.instrument-grid button:hover{border-color:#fff!important;background:#000}.step-button.active{background-color:#fff}.step-button.active:hover{border-color:#fff!important}.step-button.current{border-color:red!important}.menu-button{display:none}button{user-select:none}.modal-overlay{position:fixed;top:0;left:0;width:100%;height:100%;background:rgba(0,0,0,.8);display:flex;align-items:center;justify-content:center;z-index:1000;font-family:VT323,serif}.modal-container{position:relative;max-width:500px;width:90%;max-height:80vh;margin:20px;display:flex;flex-direction:column}.modal-content{background:#000;border:5px solid #fff;color:#fff;position:relative;padding:30px 20px 20px;width:100%;display:flex;flex-direction:column;min-height:0}.modal-header{position:absolute;top:-20px;left:15px;background:#000;padding:0 10px;z-index:1001}.modal-header h3{margin:0;font-size:28px;color:#fff;font-family:VT323,serif}.modal-body{margin-bottom:20px;font-size:28px;line-height:1.3;overflow-y:auto;flex:1;min-height:0}.modal-body p{margin:0;white-space:pre-line}.modal-body a{color:#fff;text-decoration:underline}.modal-footer{display:flex;gap:10px;justify-content:flex-end;flex-shrink:0}.modal-button{border:3px solid #fff;background:#000;color:#fff;padding:8px 16px;font-family:VT323,serif;font-size:28px;cursor:pointer;min-width:100px}.modal-button.ok-button:hover,.modal-button:hover{background:#fff;color:#000}.prompt-input{width:100%;border:3px solid #fff;background:#000;color:#fff;padding:8px 12px;font-family:VT323,serif;font-size:32px;margin-top:10px;resize:vertical;min-height:120px;line-height:1.3}.prompt-input:focus{outline:0;background:#fff;color:#000}.export-textarea{width:100%;border:3px solid #fff;background:#000;color:#fff;padding:8px 12px;font-family:VT323,serif;font-size:32px;margin-top:10px;resize:vertical;min-height:200px;line-height:1.3}.export-textarea:focus{outline:0;background:#fff;color:#000}.copy-button{background:#000;border-color:#fff}.copy-button:hover{background:#fff;color:#000}.save-input{width:100%;border:3px solid #fff;background:#000;color:#fff;padding:8px 12px;font-family:VT323,serif;font-size:32px;margin-top:10px}.save-input:focus{outline:0;background:#fff;color:#000}.save-as-button{background:#000;border-color:#fff}.save-as-button:hover{background:#fff;color:#000}@media (max-width:768px){.modal-body,.modal-button,.modal-header h3{font-size:26px}.modal-button{min-width:80px;padding:6px 12px}.prompt-input{font-size:26px;padding:6px 10px;min-height:100px}.export-textarea{font-size:26px;padding:6px 10px;min-height:150px}.save-input{font-size:26px;padding:6px 10px}body,button,input,select,textarea{font-size:26px}.wrap{padding:10px;flex-direction:column}.ctr{border-width:3px}.ctr-title{top:0}.beat-maker{padding:20px 10px 10px}.beat-maker-controls{flex-direction:column;gap:10px;display:none}.controls-left,.controls-right{width:100%;justify-content:stretch;flex:1}.delete-button,.new-button,.save-button{flex:0 0 auto}.about-button,.share-button{flex:1}.saved-beats-control{flex:1;max-width:none}.tempo-control{flex:0 0 auto;justify-content:center}.tempo-control .tempo-input{width:70px}.preset-select,.saved-beats-select{max-width:none;width:100%}.instruments-container{gap:10px;row-gap:20px;grid-template-columns:repeat(2,1fr)}.instrument-grid{grid-template-columns:repeat(4,1fr);grid-auto-rows:1fr;gap:7px}.step-button{width:100%;height:auto}.instrument-row{padding:7px}.instrument-row.add-instrument-card{padding:0}.instruments-section{margin-top:0}.beat-maker-controls.active{display:flex;position:fixed;left:10px;right:10px;bottom:85px;z-index:10;color:#000;background:#000;padding:10px;border:3px solid #fff}.beat-maker-controls-desktop{display:none}.menu-button{display:flex}}