@charset "UTF-8";
/* https://www.kalimbatabs.net/wp-content/plugins/kalimba-tuner/kalimba-tuner.css?ver=1.0.352544 */
body{font-family:'Segoe UI',sans-serif;background-color:#f4f8fb;color:#333;display:flex;flex-direction:column;align-items:center;padding:10px}.tuner-start-button{padding:10px 20px;font-size:1.2rem;font-weight:700;color:#fff;background-color:green;border:none;border-radius:8px;cursor:pointer;transition:background-color 0.2s,box-shadow 0.2s;margin-bottom:15px;width:90%;max-width:300px;box-shadow:0 4px 10px rgb(18 109 180 / .4)}.tuner-start-button:hover{background-color:#105a96}.tuner-start-button.running{background-color:#ff4757;box-shadow:0 4px 10px rgb(255 71 87 / .4)}.tuner-start-button.running:hover{background-color:#e63645}.controls{background:#fff;padding:15px;border-radius:12px;box-shadow:0 4px 10px rgb(18 109 180 / .1);margin-bottom:5px;text-align:center;width:95%;max-width:400px;border-top:5px solid #126db4}.input-group{margin-bottom:5px;display:flex;justify-content:center;align-items:center;gap:10px}.caption{font-size:.8rem;color:#555;margin-bottom:15px;display:block}.notation-chart{width:100%;border-collapse:collapse;font-size:.7rem;margin:10px 0 20px 0;background:#f8f8f8;border-radius:5px;overflow:hidden;table-layout:fixed}.notation-chart th,.notation-chart td{border:1px solid #ddd;padding:3px;text-align:center;white-space:nowrap}.notation-chart th{background-color:#126db4;color:#fff;font-weight:700}.notation-chart tr:nth-child(even){background-color:#f2f2f2}.notation-chart td:nth-child(3){font-weight:700;color:#126db4;cursor:pointer;transition:background 0.1s}.notation-chart td:nth-child(3):hover{background-color:#e0f0ff}details{margin-top:15px;margin-bottom:15px;border:1px solid #ddd;border-radius:6px;padding:10px;text-align:left;background:#fff}summary{font-weight:700;color:#126db4;cursor:pointer;list-style:none}summary::-webkit-details-marker{display:none}summary::before{content:'► ';margin-right:5px}details[open] summary::before{content:'▼ '}.checkbox-container{display:flex;align-items:center;justify-content:center;gap:8px;font-size:.9rem;cursor:pointer}input[type="checkbox"]{transform:scale(1.2);accent-color:#126db4}.manual-input-container{display:none;margin-top:5px;margin-bottom:5px;text-align:center}.manual-input-container.active{display:block}input#manualPitchInput{padding:5px;border:2px solid #126db4;border-radius:5px;width:60px;text-align:center;font-weight:700;font-size:1rem;text-transform:uppercase}.sharp-chart{width:100%;border-collapse:collapse;font-size:.8rem;margin:10px 0 20px 0;table-layout:fixed;background:#e6f0fa;border-radius:8px;overflow:hidden;box-shadow:0 2px 5px rgb(18 109 180 / .1)}.sharp-chart th{background-color:#126db4;color:#fff;padding:5px;font-size:.9rem}.sharp-chart td{border:1px solid #cce0f0;padding:6px 2px;text-align:center;font-weight:700;color:#126db4;cursor:pointer;transition:background-color 0.1s;font-size:.75rem}.sharp-chart td:hover{background-color:#cce0f0}.sharp-chart .octave-4-row{background-color:#d1e5f0}.sharp-chart .octave-5-row{background-color:#f7f7f7}.sharp-chart .octave-6-row{background-color:#f0d1d1}.tuner-container{position:relative;width:95%;max-width:400px;height:500px;background:#fff;border-radius:20px;box-shadow:0 10px 30px rgb(18 109 180 / .15);display:flex;justify-content:center;align-items:center;overflow:hidden;border:1px solid #e1eaf0;margin-bottom:20px}.tine{width:60px;height:380px;background:linear-gradient(90deg,#e0e0e0,#ffffff,#c0c0c0,#ffffff,#e0e0e0);border-radius:0 0 10px 10px;position:relative;z-index:5;box-shadow:4px 4px 15px rgb(0 0 0 / .3),inset 0 0 8px rgb(255 255 255 / .7);border:1px solid #a0a0a0;display:flex;justify-content:center;align-items:center}.tine-text{color:#333;font-weight:700;font-size:1.8rem;text-shadow:0 1px 3px rgb(0 0 0 / .2);text-align:center;display:none;transform:rotate(-90deg);white-space:nowrap}.center-line{position:absolute;top:50%;left:0;right:0;height:2px;background:rgb(18 109 180 / .2);z-index:1;display:flex;justify-content:space-between;padding:0 10px}.center-line span{font-size:10px;color:#126db4;margin-top:-15px;opacity:.7}.needle{position:absolute;left:50%;top:50%;width:240px;height:4px;background:#ff4757;transform:translate(-50%,-50%);transition:top 0.05s linear;z-index:6;border-radius:2px;opacity:.3}.needle.active{opacity:1}.needle.perfect{background:#2ed573;box-shadow:0 0 15px #2ed573;height:6px}.hammer-group{position:absolute;left:50%;transform:translateX(-50%);display:none;z-index:20;text-align:center;width:100%}.hammer-icon{font-size:40px;display:block}.tap-text{background:#c00;color:#fff;padding:6px 12px;border-radius:20px;font-size:12px;font-weight:700;white-space:nowrap;display:inline-block;box-shadow:0 2px 5px rgb(0 0 0 / .2)}.success-overlay{position:absolute;top:30px;left:50%;transform:translateX(-50%);background:rgb(18 109 180 / .9);color:#fff;padding:10px 40px;border-radius:50px;font-size:2rem;font-weight:700;z-index:30;opacity:0;transition:opacity 0.2s;pointer-events:none;box-shadow:0 4px 15px rgb(0 0 0 / .2);letter-spacing:2px;white-space:nowrap}.success-overlay.show{opacity:1}.hammer-group.top{display:block;top:30px;animation:bounceTop 0.8s infinite alternate}.hammer-group.bottom{display:block;bottom:30px;animation:bounceBottom 0.8s infinite alternate}@keyframes bounceTop{from{transform:translateX(-50%) translateY(0)}to{transform:translateX(-50%) translateY(10px)}}@keyframes bounceBottom{from{transform:translateX(-50%) translateY(0)}to{transform:translateX(-50%) translateY(-10px)}}.status-area{margin-top:10px;margin-bottom:5px;font-size:1.5rem;font-weight:800;height:40px;text-align:center;line-height:40px;width:95%;max-width:400px;border-radius:8px;color:#126db4;transition:background-color 0.2s,color 0.2s}.detector-header{font-size:1rem;font-weight:600;margin-bottom:5px;color:#555;width:95%;max-width:400px;text-align:center}.status-area.error{background-color:#ff4757;color:#fff}.status-area.perfect{background-color:#2ed573;color:#fff}.mic-instruction{color:#ff4757;font-weight:700;margin-top:5px;animation:pulse 1.5s infinite}@keyframes pulse{0%{opacity:.6}50%{opacity:1}100%{opacity:.6}}.debug-freq{font-size:.9rem;color:#888;margin-top:5px}.controls-bottom{width:95%;max-width:400px;padding:15px;margin-top:10px;background:#fff;border-radius:12px;box-shadow:0 4px 10px rgb(18 109 180 / .1)}