@import url('https://fonts.googleapis.com/css2?family=Orbitron:wght@500;700&family=Poppins:wght@300;400;600&display=swap');:root{--bg-color:#2E2E2E;--container-bg:#3a3a3a;--border-color:#555555;--primary-color:#1E88E5;--secondary-color:coral;--text-color:#f0f0f0;--text-muted:#aaaaaa;--indicator-inactive:#555555;--white:#ffffff;--black:#000000;--gauge-red:#E53935;--gauge-yellow:#FDD835;--gauge-green:#53bf9d}#tuner-container{background:var(--container-bg);border-radius:20px;padding:30px 20px 20px 20px;box-shadow:0 10px 30px rgba(0,0,0,0.7),0 0 0 1px rgba(0,0,0,0.5);text-align:center;width:100%;max-width:400px;margin:40px auto;border:1px solid #505050;box-sizing:border-box;font-family:'Poppins',sans-serif;color:var(--text-color);user-select:none}#tuner-container h1{font-family:'Orbitron',sans-serif;color:var(--white);margin-top:15px;margin-bottom:20px;font-weight:700;font-size:1.6em;letter-spacing:1px;text-shadow:0 0 5px var(--primary-color)}#tuner-container #start-button{background-color:var(--primary-color);color:var(--white);border:none;padding:12px 30px;border-radius:50px;font-size:1em;cursor:pointer;transition:all 0.3s ease;margin-bottom:25px;font-weight:600;box-shadow:0 4px 10px rgba(0,0,0,0.5)}#tuner-container #start-button:hover{background-color:#1565c0;transform:translateY(-2px);box-shadow:0 6px 15px rgba(0,0,0,0.6)}#tuner-container #start-button.active{background-color:var(--secondary-color);box-shadow:0 4px 10px rgba(255,127,80,0.3)}#tuner-container #start-button.active:hover{background-color:#ff6347;box-shadow:0 6px 15px rgba(255,127,80,0.4)}#tuner-container #indicators{display:flex;justify-content:space-between;font-size:2.5em;font-weight:bold;margin-bottom:5px;padding:0 20px}#tuner-container .indicator{color:var(--indicator-inactive);transition:color 0.2s ease,text-shadow 0.2s ease}#tuner-container #flat-indicator.active{color:var(--secondary-color);text-shadow:0 0 10px var(--secondary-color)}#tuner-container #sharp-indicator.active{color:var(--primary-color);text-shadow:0 0 10px var(--primary-color)}#tuner-container #note-display{font-family:'Orbitron',sans-serif;font-size:6em;font-weight:700;color:var(--white);margin:0;min-height:1.2em;transition:color 0.2s ease,text-shadow 0.3s ease;line-height:1;text-shadow:0 0 5px rgba(0,0,0,0.5)}#tuner-container #frequency-display{font-size:1.4em;color:var(--text-muted);min-height:1.2em;margin-bottom:25px;font-weight:300}#tuner-container #gauge-wrapper{position:relative;height:50px;margin-bottom:20px}#tuner-container #gauge-container{width:100%;height:20px;background:linear-gradient(to right,var(--gauge-red) 0%,var(--gauge-yellow) 30%,var(--gauge-green) 45%,var(--gauge-green) 55%,var(--gauge-yellow) 70%,var(--gauge-red) 100%);border-radius:15px;position:absolute;bottom:0;left:0;border:1px solid var(--black);box-shadow:0 1px 3px rgba(0,0,0,0.8) inset;overflow:hidden}#tuner-container #tick-marks{position:absolute;top:0;left:0;width:100%;height:20px;display:flex;justify-content:space-between;padding:0 2px;box-sizing:border-box}#tuner-container .tick{width:2px;height:8px;background-color:var(--text-muted);position:relative}#tuner-container .tick.center{height:18px;background-color:var(--white)}#tuner-container .tick:nth-child(3),#tuner-container .tick:nth-child(9){height:12px}#tuner-container #needle{width:3px;height:120%;background-color:var(--white);border:1px solid var(--black);border-radius:2px;position:absolute;left:50%;bottom:-10%;transform:translateX(-50%);transition:left 0.08s linear;box-shadow:0 0 8px rgba(0,0,0,0.7);z-index:10}#tuner-container #status{margin-top:15px;font-size:0.9em;color:#666;min-height:1.1em;font-style:italic}#tuner-container .correct-note{color:var(--gauge-green) !important;text-shadow:0 0 20px var(--gauge-green),0 0 8px var(--white)}@media (max-width:768px){#tuner-container{margin:20px auto;padding:25px 15px;max-width:350px}}@media (max-width:480px){#tuner-container{margin:15px auto;padding:20px 15px;max-width:320px}#tuner-container h1{font-size:1.3em;margin-bottom:15px;margin-top:10px}#tuner-container #note-display{font-size:4.5em}#tuner-container #indicators{font-size:2em}#tuner-container #frequency-display{font-size:1.1em;margin-bottom:15px}#tuner-container #start-button{padding:10px 25px;font-size:1em;margin-bottom:20px}}