.options-section[data-v-0dfadee5]{background:#ffffff0d;backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px);border:1px solid rgba(255,255,255,.1);padding:1.5rem;border-radius:20px;margin-bottom:2rem;box-shadow:0 8px 32px #00000080}.options-section h3[data-v-0dfadee5]{margin-top:1rem;margin-bottom:1rem;color:#fff;font-size:1.2rem;text-shadow:0 2px 4px rgba(0,0,0,.2)}.options-section h3[data-v-0dfadee5]:first-child{margin-top:0}.octave-selector[data-v-0dfadee5]{display:flex;gap:.5rem;flex-wrap:wrap;justify-content:center;margin-bottom:1rem}.octave-btn[data-v-0dfadee5]{padding:.75rem 1.5rem;background:#ffffff26;color:#fff;border:1px solid rgba(255,255,255,.3);border-radius:12px;cursor:pointer;transition:all .3s;font-size:1rem;font-weight:500}.octave-btn[data-v-0dfadee5]:hover{background:#ffffff26;transform:translateY(-2px);box-shadow:0 4px 12px #0006}.octave-btn.selected[data-v-0dfadee5]{background:#42b883cc;border-color:#42b883;box-shadow:0 4px 16px #42b88366}.note-selector[data-v-0dfadee5]{display:flex;gap:.5rem;flex-wrap:wrap;justify-content:center;margin-bottom:1rem}.note-btn[data-v-0dfadee5]{padding:.75rem 1.5rem;border:1px solid rgba(255,255,255,.3);border-radius:12px;cursor:pointer;transition:all .3s;font-size:1rem;font-weight:700}.note-btn.white-note[data-v-0dfadee5]{background:#fff3;color:#fff}.note-btn.black-note[data-v-0dfadee5]{background:#0009;color:#fff}.note-btn[data-v-0dfadee5]:hover{transform:translateY(-2px);box-shadow:0 4px 12px #0003}.note-btn.selected[data-v-0dfadee5]{border-color:#42b883;border-width:2px;box-shadow:0 0 20px #42b88399}.reset-buttons[data-v-0dfadee5]{display:flex;gap:.5rem;justify-content:center}.reset-btn[data-v-0dfadee5]{padding:.5rem 1rem;background:#ffffff26;backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px);color:#fff;border:1px solid rgba(255,255,255,.3);border-radius:12px;cursor:pointer;transition:all .3s;font-weight:500}.reset-btn[data-v-0dfadee5]:hover{background:#ffffff26;transform:translateY(-2px)}.score-board[data-v-d7dfb838]{position:fixed;top:1rem;right:1rem;background:#ffffff08;-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);border:1px solid rgba(255,255,255,.05);padding:.5rem 1rem;border-radius:12px;box-shadow:0 4px 16px #0000004d;z-index:100}.score[data-v-d7dfb838]{font-size:.875rem;font-weight:500;color:#fff9;text-shadow:0 1px 2px rgba(0,0,0,.2)}.controls[data-v-d9ae3b57]{margin-bottom:2rem}.play-btn[data-v-d9ae3b57]{font-size:1.2rem;padding:1rem 2rem;background:#42b883cc;color:#fff;border:1px solid rgba(66,184,131,1);border-radius:16px;cursor:pointer;transition:all .3s;font-weight:600;box-shadow:0 8px 24px #42b8834d}.play-btn[data-v-d9ae3b57]:hover{background:#42b883;transform:translateY(-2px);box-shadow:0 12px 32px #42b88366}.feedback[data-v-d9ae3b57]{margin-top:1rem;font-size:1.3rem;font-weight:700;padding:1rem;border-radius:16px;-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);border:1px solid rgba(255,255,255,.2)}.feedback.correct[data-v-d9ae3b57]{background:#28a7454d;color:#fff;box-shadow:0 4px 16px #28a7454d}.feedback.wrong[data-v-d9ae3b57]{background:#dc35454d;color:#fff;box-shadow:0 4px 16px #dc35454d}.piano-container[data-v-e33ee931]{display:flex;flex-direction:column;gap:2rem;margin-top:2rem}.octave-group[data-v-e33ee931]{display:flex;flex-direction:column;align-items:center;gap:.5rem;background:#ffffff0d;border:1px solid rgba(255,255,255,.1);padding:1.5rem;border-radius:20px;box-shadow:0 8px 32px #00000080}.octave-label[data-v-e33ee931]{font-weight:700;font-size:1rem;color:#fff;text-shadow:0 2px 4px rgba(0,0,0,.2)}.piano-keys[data-v-e33ee931]{display:flex;gap:4px;flex-wrap:wrap;justify-content:center}.piano-key[data-v-e33ee931]{padding:1rem;border:2px solid rgba(255,255,255,.2);cursor:pointer;font-size:.9rem;font-weight:700;transition:all .2s;min-width:60px;border-radius:12px;-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px)}.white-key[data-v-e33ee931]{background:#ffffff26;color:#fff}.black-key[data-v-e33ee931]{background:#0009;color:#fff}.piano-key[data-v-e33ee931]:hover:not(:disabled){transform:translateY(-4px);box-shadow:0 8px 16px #0000004d}.piano-key[data-v-e33ee931]:disabled{cursor:not-allowed;opacity:.5}.correct-key[data-v-e33ee931]{background:#28a745e6!important;color:#fff!important;box-shadow:0 0 20px #28a74599!important}.wrong-key[data-v-e33ee931]{background:#dc3545e6!important;color:#fff!important;box-shadow:0 0 20px #dc354599!important}body{font-family:sans-serif;margin:0;padding:0;overflow-x:hidden}.container[data-v-03afed6b]{min-height:100vh;background:linear-gradient(135deg,#0f0c29,#302b63,#24243e);padding:2rem;text-align:center;margin:0;box-sizing:border-box}h1[data-v-03afed6b]{margin-bottom:2rem;color:#fff;text-shadow:0 2px 10px rgba(0,0,0,.2);font-size:2.5rem}.options-wrapper[data-v-03afed6b]{position:relative;margin-bottom:2rem}.toggle-icon-btn[data-v-03afed6b]{position:absolute;top:1rem;right:1rem;width:32px;height:32px;background:#ffffff1a;-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);color:#fff;border:1px solid rgba(255,255,255,.2);border-radius:8px;cursor:pointer;transition:all .3s;font-size:1.5rem;line-height:1;display:flex;align-items:center;justify-content:center;z-index:10}.toggle-icon-btn[data-v-03afed6b]:hover{background:#fff3;transform:scale(1.1)}.border-top[data-v-03afed6b],.border-right[data-v-03afed6b],.border-bottom[data-v-03afed6b],.border-left[data-v-03afed6b]{position:fixed;animation:colorShift-03afed6b .2s ease infinite;z-index:1000}.border-top[data-v-03afed6b]{top:0;left:0;right:0;height:8px}.border-right[data-v-03afed6b]{top:0;right:0;bottom:0;width:8px}.border-bottom[data-v-03afed6b]{bottom:0;left:0;right:0;height:8px}.border-left[data-v-03afed6b]{top:0;left:0;bottom:0;width:8px}@keyframes colorShift-03afed6b{0%{background:#ff0080}16.66%{background:#7928ca}33.33%{background:#0070f3}50%{background:#00d4ff}66.66%{background:#0f8}83.33%{background:#fd0}to{background:#ff0080}}