:root{--grid-size: 8;--cell-size: 40px}body{font-family:monospace;padding:1rem;min-width:0;overflow-x:auto}h1{font-size:1rem}#info-modal{width:100%;height:100%;position:fixed;top:0;left:0;background-color:#00000080;display:flex;align-items:center;justify-content:center;z-index:1000;padding:20px;box-sizing:border-box}#info-modal .modal-content{background-color:#fff;padding:2rem;font-size:1rem;max-width:700px;max-height:90dvh;overflow-y:auto;position:relative;border:2px solid #000;box-sizing:border-box}#info-modal .close-button{position:absolute;top:1rem;right:1rem;background:none;border:none;font-size:1.5rem;cursor:pointer;color:#666;font-family:monospace;padding:.25rem;line-height:1}#info-modal .close-button:hover{color:#000}#info-modal p{margin:0 0 1rem;line-height:1.5}#info-modal p:last-child{margin-bottom:0}#show-modal{position:fixed;bottom:2rem;left:2rem;width:3rem;height:3rem;background-color:#fff;border:1px solid #000;display:flex;align-items:center;justify-content:center;cursor:pointer;font-size:1.5rem;font-weight:700;z-index:999;box-shadow:0 2px 8px #0003}#show-modal:hover{background-color:#f0f0f0;transform:scale(1.05);box-shadow:0 4px 12px #0000004d}.machine-container{display:flex;flex-direction:row;gap:3rem;width:fit-content;padding-right:3rem;padding-bottom:3rem}@media (max-width: 768px){.machine-container{flex-direction:column}}.size-slider-container{grid-area:size-slider;background-color:#fff;padding:.5rem;display:flex;align-items:center;justify-content:space-between;box-sizing:border-box;border-bottom:1px solid #000}.size-slider-container input{width:70%}.control-panel{display:grid;width:320px;grid-template-areas:"size-slider size-slider size-slider size-slider size-slider size-slider" "block-toggle block-toggle block-toggle block-toggle clear-button clear-button" "bpm-input bpm-input play-mode-toggle play-mode-toggle play-mode-toggle play-mode-toggle" "synth-mode synth-mode synth-mode drum-mode drum-mode drum-mode" "play-button play-button play-button play-button play-button play-button" "share-button share-button share-button share-button share-button share-button";grid-template-columns:1fr 1fr 1fr 1fr 1fr 1fr;grid-template-rows:4rem 4rem 4rem 4rem 4rem 4rem;height:min-content;gap:1px;border:1px solid #000;padding:1px;flex:none}.clear-button,.play-button,.share-button{background-color:#fff;border:none;cursor:pointer;text-decoration:underline;font-family:monospace;font-size:.75rem;padding:.5rem;box-sizing:border-box}.clear-button:hover,.play-button:hover,.share-button:hover{text-decoration:none}.clear-button{grid-area:clear-button;border-left:1px solid #000}.play-button{grid-area:play-button;border-top:1px solid #000}.share-button{grid-area:share-button;border-top:1px solid #000;border-left:none}.play-mode-container{grid-area:play-mode-toggle;border-left:1px solid #000;border-top:1px solid #000;display:flex;align-items:center;justify-content:space-between;height:100%;padding:0 1rem}.synth-mode-container{grid-area:synth-mode;display:flex;align-items:center;justify-content:space-around;border-top:1px solid #000;border-right:1px solid #000}.drum-mode-container{grid-area:drum-mode;display:flex;align-items:center;justify-content:space-around;border-top:1px solid #000}.synth-mode-container select,.drum-mode-container select{width:70%}.grid{display:grid;grid-auto-flow:row;grid-template-rows:repeat(var(--grid-size),var(--cell-size));grid-template-columns:repeat(var(--grid-size),var(--cell-size));gap:0}.cell{height:var(--cell-size);width:var(--cell-size);border-top:1px solid #000;border-left:1px solid #000;margin:0;position:relative;box-sizing:border-box}.cell.last-in-row{border-right:1px solid #000}.cell.last-in-column{border-bottom:1px solid #000}.cell.block{background-color:#000}.cell.active{background-color:#ff6b6b}.cell.playing{background-color:red}.cell:before{content:attr(data-number);position:absolute;top:.125rem;left:.125rem;font-size:.75rem;pointer-events:none;-webkit-user-select:none;user-select:none}.cell:after{content:attr(data-text);position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);font-size:1.4em;font-family:monospace;pointer-events:none;-webkit-user-select:none;user-select:none;z-index:1}.cell.focused{outline:2px solid #2196f3;outline-offset:-2px;z-index:2}.bpm-input{grid-area:bpm-input;background-color:#fff;padding:.5rem;display:flex;flex-direction:row;align-items:center;justify-content:space-around;box-sizing:border-box;font-family:monospace;font-size:.75rem;border-top:1px solid #000}.bpm-input input{width:50%;text-align:center;border:none;background:transparent;font-family:monospace;font-size:.75rem}.bpm-input label{margin-bottom:0}.toggle-container{grid-area:block-toggle;display:flex;align-items:center;justify-content:space-between;height:100%;padding:0 1rem}.toggle-switch{-webkit-appearance:none;-moz-appearance:none;appearance:none;width:40px;height:22px;background:#ccc;border-radius:22px;position:relative;outline:none;cursor:pointer;transition:background .2s;margin-right:.5rem}.toggle-switch:checked{background:#2196f3}.toggle-switch:before{content:"";position:absolute;left:3px;top:3px;width:16px;height:16px;background:#fff;border-radius:50%;transition:transform .2s;box-shadow:0 1px 3px #0003}.toggle-switch:checked:before{transform:translate(18px)}.toggle-label{font-family:monospace;font-size:.75rem;-webkit-user-select:none;user-select:none;margin-left:.25rem;display:inline-block;text-align:center;transition:color .2s}#app{min-width:0;width:100%}