body{background-color:#333631;color:#ebf6f7;margin:0;padding:0;width:100%;height:100%;overflow-x:hidden}.container{display:flex;flex-direction:column;padding:5px;gap:10px;width:100%;max-width:100vw;height:100vh;box-sizing:border-box}.box-metronome,.box-tuner{background-color:#333631;padding:10px;flex:1 1;min-height:0;position:relative}.box-tuner{overflow:hidden}.metronome-controls{position:absolute;flex-direction:column;display:flex;top:10px;left:10px;right:20px;height:270px;font-family:arial;font-size:24px;font-weight:700;background-color:#333631;color:#ebf6f7;box-sizing:border-box}.metronome-controls *{margin:5px;display:inline-block}.metronome-play{display:flex;justify-content:space-between;align-items:center;padding:5px}.metronome-start-btn{padding:10px 20px;font-size:16px;background-color:#68be8d;color:#fff;border:none;border-radius:5px;cursor:pointer;margin:0}.metronome-start-btn:hover{background-color:#6d8285}.metronome-start-btn.active{background-color:#f44336}.metronome-start-btn.active:hover{background-color:#d32f2f}.metronome-tempoBox{display:flex;flex-direction:column;align-items:center}.metronome-showTempo{display:inline-block;width:45px}.tempo-stepper{gap:0;margin-top:10px;width:100%}.tempo-btn,.tempo-stepper{display:flex;align-items:center}.tempo-btn{width:80px;height:80px;border:1px solid #ccc;background:#80989b;color:#fff;font-size:40px;font-weight:700;cursor:pointer;justify-content:center;-webkit-user-select:none;-moz-user-select:none;user-select:none}.tempo-btn:first-child{border-radius:8px 0 0 8px}.tempo-btn:last-child{border-radius:0 8px 8px 0}.tempo-btn:hover{background:#6d8285}.tempo-btn:active{background:#5a6f72}.tempo-input{flex:1 1;height:80px;border:1px solid #ccc;border-right:none;border-left:none;text-align:center;font-size:32px;font-weight:700;outline:none}.tempo-input:focus{border-color:#007aff;box-shadow:0 0 0 1px #007aff}.resolution-controls{display:flex;align-items:center;gap:10px}.resolution-buttons{display:flex;gap:0;width:100%}.resolution-btn{flex:1 1;padding:8px 16px;border:1px solid #ccc;background:#80989b;color:#fff;font-size:16px;font-weight:700;cursor:pointer;-webkit-user-select:none;-moz-user-select:none;user-select:none}.resolution-btn:first-child{border-radius:8px 0 0 8px}.resolution-btn:last-child{border-radius:0 8px 8px 0}.resolution-btn:hover{background:#6d8285}.resolution-btn.active{background:#007aff;color:#fff;border-color:#007aff}.time-signature-controls{display:flex;align-items:center;gap:10px}.time-signature-buttons{display:flex;gap:0;width:100%}.time-signature-btn{flex:1 1;padding:8px 16px;border:1px solid #ccc;background:#80989b;color:#fff;font-size:16px;font-weight:700;cursor:pointer;-webkit-user-select:none;-moz-user-select:none;user-select:none}.time-signature-btn:first-child{border-radius:8px 0 0 8px}.time-signature-btn:last-child{border-radius:0 8px 8px 0}.time-signature-btn:hover{background:#6d8285}.time-signature-btn.active{background:#007aff;color:#fff;border-color:#007aff}.beatCanvas{background-color:#333631;position:absolute;top:320px;left:20px;right:20px;height:50px;display:block}.beatCanvas canvas{width:100%;height:100%;display:block}.notes-wrapper{position:absolute;top:100px;left:20px;right:20px;width:auto;max-width:none;margin:0;overflow-x:auto;mask-image:linear-gradient(90deg,transparent,#000 20%,#000 80%,transparent);-webkit-mask-image:linear-gradient(90deg,transparent,#000 20%,#000 80%,transparent);flex-direction:row}.notes-wrapper::-webkit-scrollbar{display:none}.notes-list{display:inline-block;white-space:nowrap;min-width:max-content;font-family:sans-serif;font-size:80px;padding:20px 0;text-align:center}.notes-list::-webkit-scrollbar{display:none}.note{display:inline-block;margin:0 20px;color:#7f8c8d;font-weight:700;cursor:pointer}.note.active{color:#e74c3c}.frequency{position:absolute;top:220px;left:20px;right:20px;font-size:32px;text-align:center;margin:0;color:#ebf6f7}.frequency span{font-size:50%;margin-left:.25em}.meter{position:absolute;left:50%;transform:translateX(-50%);bottom:5%;width:100%;max-width:400px;height:25%;margin:0 auto}.meter-pointer{width:2px;height:100%;transform:rotate(45deg);transform-origin:bottom;transition:transform .5s}.meter-dot,.meter-pointer{background:#ebf6f7;position:absolute;right:50%}.meter-dot{width:10px;height:10px;border-radius:50%;bottom:-5px;margin-right:-4px}.meter-scale{width:1px;height:100%;transform-origin:bottom;transition:transform .2s;box-sizing:border-box;border-top:10px solid;position:absolute;right:50%}.meter-scale-strong{width:2px;border-top-width:20px}.tuner-controls .a4{position:static;margin:0}.a4 span{color:#e74c3c;cursor:pointer}.tuner-controls .auto{position:static;margin:0}.sound{font-size:16px;font-weight:400;display:flex;align-items:center;gap:8px;margin:0;color:#ebf6f7}.sound input[type=checkbox]{width:18px;height:18px;margin:0}.tuner-controls{position:absolute;top:10px;left:10px;right:10px;height:60px;background-color:#333631;color:#ebf6f7;padding:10px;box-sizing:border-box;font-family:arial;font-size:18px;font-weight:700}.tuner-controls,.tuner-play{display:flex;justify-content:space-between;align-items:center}.tuner-play{width:100%}.tuner-start-btn{padding:10px 20px;font-size:16px;background-color:#68be8d;color:#fff;border:none;border-radius:5px;cursor:pointer;margin:0}.tuner-start-btn:hover{background-color:#6d8285}.tuner-start-btn.active{background-color:#f44336}.tuner-start-btn.active:hover{background-color:#d32f2f}.a4-controls{display:flex;align-items:center;gap:5px;font-size:18px;color:#ebf6f7}.a4-stepper{display:flex;gap:0}.a4-btn{width:30px;height:30px;border:1px solid #ccc;background:#80989b;color:#fff;font-size:16px;font-weight:700;cursor:pointer;display:flex;align-items:center;justify-content:center;-webkit-user-select:none;-moz-user-select:none;user-select:none}.a4-btn:first-child{border-radius:4px 0 0 4px}.a4-btn:last-child{border-radius:0 4px 4px 0}.a4-btn:hover{background:#6d8285}.a4-btn:active{background:#5a6f72}.a4-input{width:50px;height:30px;border:1px solid #ccc;border-right:none;border-left:none;text-align:center;font-size:14px;font-weight:700;outline:none}.a4-input:focus{border-color:#007aff;box-shadow:0 0 0 1px #007aff}@media (orientation:landscape){.container{flex-direction:row}}@media (min-width:769px){.container{flex-direction:row}}.footer{position:fixed;bottom:0;left:0;right:0;text-align:center;font-size:12px;color:#7f8c8d;padding:5px;background-color:rgba(51,54,49,.8);z-index:1000}@media (max-width:768px){.meter{width:100%}}