:root{font-family:Inter,system-ui,Avenir,Helvetica,Arial,sans-serif;line-height:1.5;font-weight:400;color-scheme:light dark;color:#ffffffde;background-color:#242424;font-synthesis:none;text-rendering:optimizeLegibility;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;-webkit-text-size-adjust:100%}*{margin:0;padding:0;box-sizing:border-box}body{margin:0;min-width:320px;min-height:100vh;background:linear-gradient(135deg,#667eea,#764ba2);overflow:hidden}#root{width:100%;height:100vh;display:flex;justify-content:center;align-items:flex-start;overflow:hidden}.container{width:100%;height:100vh;padding:2rem;text-align:center;display:flex;flex-direction:column;justify-content:flex-start}.card{background:#ffffff1a;-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);border-radius:20px;padding:2rem;box-shadow:0 8px 32px #0000001a;border:1px solid rgba(255,255,255,.2)}.title{font-size:2.5rem;font-weight:700;margin-bottom:1rem;background:linear-gradient(45deg,#ff6b6b,#4ecdc4);-webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text}.subtitle{font-size:1.2rem;margin-bottom:2rem;opacity:.8}.settings{display:flex;flex-direction:column;gap:1.5rem;margin-bottom:2rem}.range-selector{display:flex;justify-content:center;align-items:center;gap:1rem;flex-wrap:wrap}.range-selector select{padding:.5rem 1rem;border:none;border-radius:10px;background:#fff3;color:#fff;font-size:1rem;cursor:pointer;transition:all .3s ease}.range-selector select:hover{background:#ffffff4d}.range-selector select:focus{outline:none;box-shadow:0 0 0 2px #ffffff80}.btn{padding:1rem 2rem;border:none;border-radius:15px;font-size:1.1rem;font-weight:600;cursor:pointer;transition:all .3s ease;text-transform:uppercase;letter-spacing:1px}.btn-primary{background:linear-gradient(45deg,#ff6b6b,#4ecdc4);color:#fff}.btn-primary:hover{transform:translateY(-2px);box-shadow:0 10px 20px #0003}.btn-secondary{background:#fff3;color:#fff;border:1px solid rgba(255,255,255,.3)}.btn-secondary:hover{background:#ffffff4d;transform:translateY(-2px)}.game-container{display:flex;flex-direction:column;align-items:center;gap:2rem}.fullscreen-layout{align-items:stretch!important;gap:0!important;flex-direction:row!important;overflow:hidden!important}.current-note{font-size:2.5rem;font-weight:700;color:#4ecdc4;text-shadow:0 0 20px rgba(78,205,196,.5);margin-bottom:.5rem}.pitch-display{width:90vw;max-width:1400px;height:120px;background:#0000004d;border-radius:15px;position:relative;overflow:hidden;border:2px solid rgba(255,255,255,.2)}.fullscreen-pitch{width:100%!important;max-width:none!important;height:100%!important;overflow:hidden!important;min-height:0!important}.pitch-indicator{position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);width:4px;height:100px;background:linear-gradient(to bottom,#ff6b6b,#4ecdc4);border-radius:2px;transition:left .3s ease-out;box-shadow:0 0 10px #ff6b6b80;z-index:10}.pitch-center-line{position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);width:100%;height:2px;background:#ffffff80;z-index:5}.note-scale{position:absolute;bottom:10px;left:0;right:0;display:flex;justify-content:space-between;padding:0 20px;font-size:.7rem;opacity:.8;z-index:5}.note-marker{position:absolute;top:50%;transform:translateY(-50%);width:1px;height:60px;background:#ffffff4d;z-index:1}.note-marker.target{background:#4ecdc4;width:4px;height:100px;box-shadow:0 0 8px #4ecdc499}.volume-bar{width:90vw;max-width:1400px;height:20px;background:#0000004d;border-radius:10px;margin-top:20px;position:relative;overflow:hidden;border:1px solid rgba(255,255,255,.2)}.volume-fill{height:100%;background:linear-gradient(90deg,#4ecdc4,#ff6b6b);border-radius:10px;transition:width .1s ease-out;min-width:2px}.instructions{background:#ffffff1a;padding:1rem;border-radius:10px;margin-top:1rem;font-size:.9rem;opacity:.8}.instructions ul{list-style:none;text-align:left}.instructions li{margin:.5rem 0;padding-left:1rem;position:relative}.instructions li:before{content:"•";position:absolute;left:0;color:#4ecdc4}.accuracy{font-size:1.5rem;font-weight:600;margin-top:1rem}.accuracy.good{color:#4ecdc4}.accuracy.close{color:#ffa726}.accuracy.far{color:#ff6b6b}@media (max-width: 768px){.container{padding:1rem}.title{font-size:2rem}.current-note{font-size:3rem}.pitch-display{width:95vw;height:100px}.volume-bar{width:95vw;height:16px}}@keyframes pulse{0%{opacity:.5}50%{opacity:1}to{opacity:.5}}