body{background-color:#333631;color:#ebf6f7;margin:0;padding:0;width:100%;height:100%;overflow-x:hidden}.container{display:flex;flex-direction:column;padding:3px;gap:8px;width:100%;max-width:100vw;height:100vh;box-sizing:border-box}.box-metronome,.box-tuner{background-color:#333631;padding:8px;flex:1 1;min-height:0;position:relative}.box-tuner{overflow:hidden}.metronome-controls{position:absolute;flex-direction:column;display:flex;top:8px;left:8px;right:8px;height:255px;font-family:arial;font-size:24px;font-weight:700;background-color:#333631;color:#ebf6f7;box-sizing:border-box}.metronome-controls *{margin:4px;display:inline-block}.metronome-play{display:flex;justify-content:space-between;align-items:center;padding:4px}.metronome-start-btn{padding:8px 16px;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:8px;width:100%}.tempo-btn,.tempo-stepper{display:flex;align-items:center}.tempo-btn{width:75px;height:75px;border:1px solid #ccc;background:#80989b;color:#fff;font-size:36px;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:75px;border:1px solid #ccc;border-right:none;border-left:none;text-align:center;font-size:30px;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:8px}.resolution-buttons{display:flex;gap:0;width:100%}.resolution-btn{flex:1 1;padding:6px 12px;border:1px solid #ccc;background:#80989b;color:#fff;font-size:15px;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:8px}.time-signature-buttons{display:flex;gap:0;width:100%}.time-signature-btn{flex:1 1;padding:6px 12px;border:1px solid #ccc;background:#80989b;color:#fff;font-size:15px;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:270px;left:8px;right:8px;height:45px;display:block}.beatCanvas svg{width:100%;height:100%;display:block}.notes-wrapper{position:absolute;top:80px;left:8px;right:8px;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:70px;padding:10px 0;text-align:center}.notes-list::-webkit-scrollbar{display:none}.note{display:inline-block;margin:0 18px;color:#7f8c8d;font-weight:700;cursor:pointer}.note.active{color:#e74c3c}.frequency{position:absolute;top:190px;left:8px;right:8px;font-size:30px;text-align:center;margin:0;color:#ebf6f7}.frequency span{font-size:50%;margin-left:.25em}.meter{position:absolute;left:50%;transform:translateX(-50%);bottom:3%;width:100%;max-width:400px;height:22%;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%}}@media (orientation:landscape) and (max-height:450px){.container{padding:2px;gap:5px}.box-metronome,.box-tuner{padding:5px;display:flex;flex-direction:column;justify-content:center}.metronome-controls{position:relative;display:flex;flex-direction:column;height:auto;width:100%;padding:0;margin:0;top:auto;left:auto;right:auto}.metronome-controls *{margin:2px}.metronome-play{padding:2px}.tempo-stepper{margin-top:5px}.tempo-btn{width:45px}.tempo-btn,.tempo-input{height:45px;font-size:22px}.resolution-btn,.time-signature-btn{padding:4px 6px;font-size:12px}.beatCanvas{height:30px;margin-top:5px}.beatCanvas,.tuner-controls{position:relative;width:100%;top:auto;left:auto;right:auto}.tuner-controls{height:auto;padding:0}.meter{transform:none;bottom:auto;height:50px;flex-shrink:0}.meter,.notes-wrapper{position:relative;left:auto;width:100%;margin-top:5px}.notes-wrapper{top:auto;right:auto}.notes-list{font-size:40px;padding:5px 0}.frequency{position:relative;top:auto;left:auto;right:auto;font-size:20px;margin-top:5px}}