.piano-container{display:flex;justify-content:center;padding:2rem 0}.piano{position:relative;display:flex;width:560px;height:220px;border-radius:0 0 8px 8px;overflow:visible;box-shadow:0 8px 32px #0006}.white-key{flex:1;background:linear-gradient(to bottom,#f8f8f8,#e8e8e8);border:1px solid #bbb;border-radius:0 0 6px 6px;cursor:pointer;position:relative;z-index:1;display:flex;align-items:flex-end;justify-content:center;padding-bottom:12px;transition:background .12s ease,box-shadow .12s ease}.white-key:hover{background:linear-gradient(to bottom,#fff,#f0f0f0)}.white-key.in-scale{background:#fff;border-color:#ccc}.white-key.in-scale .key-label{color:#555}.white-key.active{background:linear-gradient(to bottom,#4ecdc4,#26a69a)!important;border-color:#00897b!important;box-shadow:0 0 20px #4ecdc499,inset 0 0 10px #ffffff4d;transform:scaleY(.98);transform-origin:top}.white-key .key-label{font-size:.85rem;font-weight:600;color:#666;-webkit-user-select:none;user-select:none}.white-key.active .key-label{color:#fff;text-shadow:0 1px 4px rgba(0,0,0,.3)}.black-key{position:absolute;width:9%;height:60%;background:linear-gradient(to bottom,#333,#111);border:1px solid #000;border-radius:0 0 5px 5px;z-index:2;cursor:pointer;display:flex;align-items:flex-end;justify-content:center;padding-bottom:8px;transition:background .12s ease,box-shadow .12s ease;top:0}.black-key:hover{background:linear-gradient(to bottom,#444,#222)}.black-key.in-scale{background:#4a4a4a;border-color:#888}.black-key.in-scale .key-label{color:#e8e8e8}.black-key.active{background:linear-gradient(to bottom,#4ecdc4,#00897b)!important;border-color:#00695c!important;box-shadow:0 0 20px #4ecdc499,inset 0 0 8px #fff3;transform:scaleY(.97);transform-origin:top}.black-key .key-label{font-size:.65rem;font-weight:600;color:#999;-webkit-user-select:none;user-select:none}.black-key.active .key-label{color:#fff;text-shadow:0 1px 4px rgba(0,0,0,.5)}.listening-tab{padding:1.5rem 0}.tab-instructions{text-align:center;color:#888;margin-bottom:1.25rem;font-size:.95rem}.tab-instructions strong{color:#4ecdc4}.reverse-toggle{display:flex;align-items:center;justify-content:center;gap:.5rem;margin-bottom:1rem;font-size:.9rem;color:#aaa;cursor:pointer;-webkit-user-select:none;user-select:none}.reverse-toggle input{width:1rem;height:1rem;cursor:pointer}.mode-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(150px,1fr));gap:.75rem;max-width:700px;margin:0 auto}.mode-btn{position:relative;display:flex;flex-direction:column;align-items:center;gap:.25rem;padding:1rem .75rem;background:#1a1a2e;border:2px solid #2a2a44;border-radius:12px;color:#c0c0d0;cursor:pointer;font-family:inherit;transition:all .2s ease;overflow:hidden}.mode-btn:hover:not(:disabled){border-color:#6c5ce7;background:#22223a;transform:translateY(-2px);box-shadow:0 4px 16px #6c5ce733}.mode-btn:disabled{opacity:.5;cursor:not-allowed}.mode-btn.playing{border-color:#4ecdc4!important;background:#4ecdc41f!important;box-shadow:0 0 20px #4ecdc433}.mode-name{font-weight:600;font-size:1rem}.mode-number{font-size:.75rem;color:#666}.playing-indicator{position:absolute;bottom:0;left:0;height:3px;background:#4ecdc4;animation:progress 2s linear infinite}@keyframes progress{0%{width:0}to{width:100%}}.guessing-tab{padding:1.5rem 0;text-align:center}.guess-controls{display:flex;flex-wrap:wrap;justify-content:center;align-items:center;gap:.75rem;margin-bottom:1.25rem}.reverse-toggle-inline{margin-bottom:0;width:100%;justify-content:center}.guess-btn{font-family:inherit;font-size:1rem;font-weight:600;border:none;border-radius:10px;padding:.7rem 1.6rem;cursor:pointer;transition:all .2s ease}.guess-btn:disabled{opacity:.5;cursor:not-allowed}.guess-btn-primary{background:linear-gradient(135deg,#6c5ce7,#a855f7);color:#fff;box-shadow:0 2px 12px #6c5ce74d}.guess-btn-primary:hover:not(:disabled){box-shadow:0 4px 20px #6c5ce780;transform:translateY(-1px)}.guess-btn-secondary{background:#2a2a3e;color:#c0c0d0;border:1px solid #444466}.guess-btn-secondary:hover:not(:disabled){background:#3a3a4e;border-color:#6c5ce7}.result-banner{font-size:3rem;font-weight:800;letter-spacing:.1em;margin:1rem 0;animation:popIn .25s ease-out}.result-banner.yes{color:#55efc4;text-shadow:0 0 30px rgba(85,239,196,.5)}.result-banner.no{color:#ff6b6b;text-shadow:0 0 30px rgba(255,107,107,.5)}@keyframes popIn{0%{transform:scale(.5);opacity:0}to{transform:scale(1);opacity:1}}.guess-prompt{color:#888;margin-bottom:1rem;font-size:1rem}.guess-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(130px,1fr));gap:.65rem;max-width:650px;margin:0 auto}.guess-option{font-family:inherit;font-size:.95rem;font-weight:600;padding:.8rem .5rem;border:2px solid #2a2a44;border-radius:10px;background:#1a1a2e;color:#c0c0d0;cursor:pointer;transition:all .2s ease}.guess-option:hover:not(:disabled):not(.wrong){border-color:#6c5ce7;background:#22223a;transform:translateY(-2px);box-shadow:0 4px 16px #6c5ce733;color:#fff}.guess-option:disabled{cursor:default}.guess-option.correct{border-color:#00b894!important;background:#00b89426!important;color:#55efc4!important;box-shadow:0 0 20px #00b89440;transform:scale(1.05)}.guess-option.wrong{border-color:#d63031;background:#d630311a;color:#666;opacity:.5;text-decoration:line-through;cursor:not-allowed;pointer-events:none}.guide-tone-panel{margin:0 0 .5rem;padding:1rem;border:1px solid #2a2a44;border-radius:8px;background:#16162699}.guide-tone-heading{font-size:.95rem;margin-bottom:.35rem;color:#e0e0f0}.guide-tone-hint{font-size:.75rem;color:#8a8aa8;margin-bottom:.75rem;line-height:1.35}.guide-tone-label{display:flex;flex-direction:column;gap:.25rem;font-size:.8rem;color:#a8a8c8;margin-bottom:.75rem}.guide-tone-select{max-width:240px;padding:.35rem .5rem;border-radius:6px;border:1px solid #3a3a58;background:#16162a;color:#e0e0f0}.guide-tone-actions{display:flex;flex-wrap:wrap;gap:.5rem}.guide-tone-btn{padding:.4rem .65rem;font-size:.8rem;border-radius:6px;border:1px solid #4a4a68;background:linear-gradient(135deg,#3d3566,#2a2844);color:#e8e8f8;cursor:pointer}.guide-tone-btn:disabled{opacity:.45;cursor:not-allowed}.guide-tone-btn.danger{border-color:#6b3a4a;background:linear-gradient(135deg,#553044,#2a2230)}.guide-tone-btn.secondary{background:#1e1e32}.guide-tone-btn:not(:disabled):hover{filter:brightness(1.08)}*,*:before,*:after{box-sizing:border-box;margin:0;padding:0}body{font-family:Inter,-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,sans-serif;background:#0f0f1a;color:#e0e0f0;min-height:100vh}.app{max-width:900px;margin:0 auto;padding:1.5rem 1.5rem 1.25rem;min-height:100vh;position:relative;display:flex;flex-direction:column}.app-body{flex:1 1 auto;display:flex;flex-direction:column;min-height:0}.guide-tone-panel-anchor{flex-shrink:0;width:100%;margin-top:auto;padding-top:1rem;border-top:1px solid #2a2a44}.guess-stats-hud{position:fixed;top:.75rem;left:.75rem;z-index:50;display:flex;align-items:baseline;flex-wrap:wrap;gap:.25rem .4rem;font-size:.8rem;color:#a8a8c8;background:#0f0f1aeb;border:1px solid #2a2a44;border-radius:8px;padding:.4rem .65rem}.guess-stats-label{font-weight:600;text-transform:uppercase;letter-spacing:.04em;font-size:.65rem;color:#6c6c8a}.guess-stats-value{font-weight:700;font-variant-numeric:tabular-nums;color:#e0e0f0}.guess-stats-sep{color:#4a4a68;font-weight:600;margin:0 .1rem}.guess-reset-btn{margin-left:.5rem;padding:.2rem .45rem;font-size:.65rem;font-weight:600;text-transform:uppercase;letter-spacing:.03em;border-radius:6px;border:1px solid #4a4a68;background:#1e1e32;color:#c8c8e8;cursor:pointer}.guess-reset-btn:hover{border-color:#6c5ce7;color:#fff}.app-header{text-align:center;padding-bottom:1.25rem}.app-header h1{font-size:1.8rem;font-weight:700;background:linear-gradient(135deg,#6c5ce7,#4ecdc4);-webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text;letter-spacing:-.02em}.key-picker{display:flex;align-items:center;justify-content:center;gap:.75rem;padding:.75rem 0 1rem;border-bottom:1px solid #1e1e30}.key-picker-label{font-weight:600;font-size:1rem;color:#888;white-space:nowrap}.key-buttons{display:flex;gap:.35rem;flex-wrap:wrap;justify-content:center}.key-btn{font-family:inherit;font-size:.85rem;font-weight:600;padding:.45rem .7rem;min-width:42px;background:#1a1a2e;color:#999;border:2px solid #2a2a44;border-radius:8px;cursor:pointer;transition:all .15s ease}.key-btn:hover{border-color:#6c5ce7;color:#ddd;background:#22223a}.key-btn.selected{background:linear-gradient(135deg,#6c5ce7,#a855f7);color:#fff;border-color:transparent;box-shadow:0 2px 12px #6c5ce759}.loading-msg{text-align:center;color:#6c5ce7;font-size:.9rem;padding:.5rem 0;animation:pulse 1.2s ease-in-out infinite}@keyframes pulse{0%,to{opacity:.5}50%{opacity:1}}.main-tab-bar{display:flex;justify-content:center;gap:0;margin-top:.5rem;border-bottom:2px solid #2a2a44;flex-wrap:wrap}.main-tab{font-family:inherit;font-size:1.05rem;font-weight:700;padding:.8rem 1.75rem;background:none;border:none;border-bottom:3px solid transparent;color:#555;cursor:pointer;transition:all .2s ease;margin-bottom:-2px}.main-tab:hover{color:#aaa}.main-tab.active{color:#6c5ce7;border-bottom-color:#6c5ce7}.tab-bar{display:flex;justify-content:center;gap:0;margin-top:.5rem;border-bottom:2px solid #1e1e30}.tab{font-family:inherit;font-size:1rem;font-weight:600;padding:.75rem 2.5rem;background:none;border:none;border-bottom:3px solid transparent;color:#666;cursor:pointer;transition:all .2s ease;margin-bottom:-2px}.tab:hover{color:#aaa}.tab.active{color:#4ecdc4;border-bottom-color:#4ecdc4}.tab-content{min-height:300px}