body{font-family:Roboto,sans-serif}.header{max-width:900px;margin:40px auto;padding:10px 20px;background-color:#f8f9fa;border-radius:12px;box-shadow:0 4px 12px #0000001a;text-align:justify;line-height:1.6;font-family:Segoe UI,Tahoma,Geneva,Verdana,sans-serif}.header h1{font-size:2.5rem;margin:5px 5px 20px;font-weight:600;text-align:center;color:#222}.header p{font-size:1.1rem;color:#333;text-align:justify}.tabSVG{background-color:var(--tab-div-color);margin:auto;-webkit-user-select:none;-ms-user-select:none;user-select:none}.modal-overlay{position:fixed;top:0;left:0;width:100%;height:100%;background-color:#00000080;display:flex;justify-content:center;align-items:center}.modal-container{display:flex;flex-direction:column;background-color:#fff;padding:20px;border-radius:5px;position:relative}.modal-content{display:flex;flex-direction:row;background-color:#fff;border-radius:5px;position:relative}.close-button{position:absolute;top:10px;right:10px;font-size:24px;font-weight:700;cursor:pointer}.bend-type-list{list-style:none;padding:0;margin:0 10px 0 0;display:flex;flex-direction:column;gap:10px}.bend-type-list li{cursor:pointer;padding:5px 10px;border:1px solid #ccc;border-radius:5px}.bend-type-list li:hover{background-color:#eee}.bend-type-list li.selected{background-color:#ddd;font-weight:500}.top-controls{display:flex;justify-content:center;align-items:center;gap:20px;margin:10px auto}.play-controls{display:flex;justify-content:center;align-items:center;gap:10px;padding:9px 12px;border:1px solid #000000;border-radius:8px;background-color:#fff;width:fit-content}.play-controls img{cursor:pointer;width:24px;height:24px;border-radius:4px}.play-controls img:hover{background-color:#eee}.main-container{display:flex;flex-direction:row;gap:10px;align-items:flex-start}.side-controls{position:sticky;top:10px;display:flex;flex-direction:column;gap:10px;padding:10px;border:1px solid #ccc;border-radius:5px;width:180px}.side-controls .control-group{display:flex;flex-direction:row;flex-wrap:wrap;gap:10px}.control-group img{cursor:pointer;width:32px;height:32px;border-radius:4px}.control-group img:hover{background-color:#eee}.separator{width:100%;border:1px solid #ccc}#input-modal .modal-container{background-color:#fff;border-radius:8px;box-shadow:0 4px 6px #0000001a;width:400px;border:1px solid #000000}#input-modal .modal-content{flex-direction:column;gap:16px;padding:24px}#input-modal-title{font-size:20px;font-weight:600;color:#000;margin:0;padding:0}#input-modal-inputs{display:flex;flex-direction:column;gap:12px}#input-modal-inputs .input-row{display:grid;grid-template-columns:100px 1fr;align-items:center;gap:10px}#input-modal-inputs label{font-size:14px;color:#000}#input-modal-inputs input{width:100%;padding:8px 12px;border:1px solid #000000;border-radius:4px;font-size:14px;transition:border-color .15s ease-in-out,box-shadow .15s ease-in-out}#input-modal-inputs input:focus{border-color:#000;outline:0;box-shadow:0 0 0 2px #00000040}.modal-buttons{display:flex;justify-content:flex-end;gap:8px;padding-top:16px}.modal-buttons button{padding:8px 16px;border:1px solid #000000;border-radius:4px;font-size:14px;font-weight:600;cursor:pointer;transition:background-color .2s ease-in-out}#input-modal-confirm{background-color:#000;color:#fff}#input-modal-confirm:hover{background-color:#333}#input-modal-cancel{background-color:#eee;color:#000}#input-modal-cancel:hover{background-color:#ddd}.loop-icon:hover{background-color:#eee}.loop-icon.active,.loop-icon-active{background-color:#ddd}.loop-icon-active:hover{background-color:#ccc}.track-selector-container{display:flex;align-items:center;gap:10px;padding:8px 12px;background-color:#fff;border:1px solid #000000;border-radius:8px}.track-selector-container label{font-size:14px;font-weight:600;color:#000}#track-selector{-webkit-appearance:none;-moz-appearance:none;appearance:none;background-color:#fff;border:1px solid #000000;border-radius:4px;padding:6px 30px 6px 12px;font-size:14px;cursor:pointer;background-image:url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3e%3cpath fill='none' stroke='%23000000' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='M2 5l6 6 6-6'/%3e%3c/svg%3e");background-repeat:no-repeat;background-position:right .5rem center;background-size:16px 12px}#track-selector:focus{border-color:#000;outline:0;box-shadow:0 0 0 2px #00000040}.pitch-label{-webkit-user-select:none;-ms-user-select:none;user-select:none}