.tool-header[data-astro-cid-dzqkxw27]{text-align:center;margin-bottom:2rem}.tool-header[data-astro-cid-dzqkxw27] h1[data-astro-cid-dzqkxw27]{font-size:2rem;margin-bottom:.5rem}.tool-header[data-astro-cid-dzqkxw27] p[data-astro-cid-dzqkxw27]{color:var(--text-muted);max-width:600px;margin:0 auto}.piano-container[data-astro-cid-dzqkxw27]{max-width:900px;margin:0 auto 2rem}.controls-row[data-astro-cid-dzqkxw27]{display:flex;gap:1.5rem;justify-content:center;flex-wrap:wrap;margin-bottom:1.5rem;padding:1rem;background:var(--card-bg);border-radius:12px}.control-group[data-astro-cid-dzqkxw27]{display:flex;flex-direction:column;align-items:center;gap:.5rem}.control-group[data-astro-cid-dzqkxw27] label[data-astro-cid-dzqkxw27]{font-weight:600;font-size:.9rem;color:var(--text)}.octave-buttons[data-astro-cid-dzqkxw27]{display:flex;gap:.5rem}.octave-btn[data-astro-cid-dzqkxw27]{padding:.4rem .8rem;border:2px solid var(--border);border-radius:8px;background:var(--surface);color:var(--text);cursor:pointer;font-weight:600;transition:all .2s ease}.octave-btn[data-astro-cid-dzqkxw27]:hover{border-color:var(--accent)}.octave-btn[data-astro-cid-dzqkxw27].active{background:var(--accent);border-color:var(--accent);color:#fff}select[data-astro-cid-dzqkxw27]{padding:.4rem .8rem;border-radius:8px;border:2px solid var(--border);background:var(--surface);color:var(--text);font-weight:600;cursor:pointer}input[data-astro-cid-dzqkxw27][type=range]{width:100px;height:6px;border-radius:3px;background:var(--surface);outline:none;-webkit-appearance:none}input[data-astro-cid-dzqkxw27][type=range]::-webkit-slider-thumb{-webkit-appearance:none;width:18px;height:18px;border-radius:50%;background:var(--accent);cursor:pointer}.recording-row[data-astro-cid-dzqkxw27]{display:flex;gap:.75rem;justify-content:center;align-items:center;margin-bottom:1.5rem;flex-wrap:wrap}.btn-record[data-astro-cid-dzqkxw27]{padding:.6rem 1.5rem;border-radius:10px;border:none;background:#e74c3c;color:#fff;font-weight:700;cursor:pointer;transition:all .2s ease}.btn-record[data-astro-cid-dzqkxw27]:hover{opacity:.9}.btn-record[data-astro-cid-dzqkxw27].recording{background:#c0392b;animation:pulse 1s infinite}@keyframes pulse{0%,to{opacity:1}50%{opacity:.6}}.btn-secondary[data-astro-cid-dzqkxw27]{padding:.6rem 1.2rem;border-radius:10px;border:2px solid var(--border);background:var(--surface);color:var(--text);font-weight:600;cursor:pointer;transition:all .2s ease}.btn-secondary[data-astro-cid-dzqkxw27]:hover:not(:disabled){border-color:var(--accent)}.btn-secondary[data-astro-cid-dzqkxw27]:disabled{opacity:.5;cursor:not-allowed}.record-status[data-astro-cid-dzqkxw27]{font-size:.85rem;color:var(--text-muted);min-width:80px}.piano-wrapper[data-astro-cid-dzqkxw27]{background:var(--card-bg);border-radius:16px;padding:1.5rem;box-shadow:var(--shadow);margin-bottom:1.5rem;overflow-x:auto}.piano-keyboard[data-astro-cid-dzqkxw27]{position:relative;display:flex;justify-content:center;min-width:600px}.white-keys[data-astro-cid-dzqkxw27]{display:flex;gap:2px}.white-key[data-astro-cid-dzqkxw27]{width:50px;height:200px;background:linear-gradient(to bottom,#fff,#f0f0f0);border:1px solid #ccc;border-radius:0 0 6px 6px;cursor:pointer;display:flex;flex-direction:column;justify-content:flex-end;align-items:center;padding-bottom:8px;transition:all .05s ease;position:relative;z-index:1}.white-key[data-astro-cid-dzqkxw27]:hover{background:linear-gradient(to bottom,#f8f8f8,#e8e8e8)}.white-key[data-astro-cid-dzqkxw27].active{background:linear-gradient(to bottom,#ddd,#ccc);transform:translateY(2px)}.white-key[data-astro-cid-dzqkxw27] .key-label[data-astro-cid-dzqkxw27]{font-size:.7rem;color:#999;pointer-events:none}.black-keys[data-astro-cid-dzqkxw27]{position:absolute;top:0;display:flex;pointer-events:none}.black-key[data-astro-cid-dzqkxw27]{width:30px;height:120px;background:linear-gradient(to bottom,#333,#111);border-radius:0 0 4px 4px;cursor:pointer;pointer-events:auto;position:absolute;z-index:2;transition:all .05s ease}.black-key[data-astro-cid-dzqkxw27]:hover{background:linear-gradient(to bottom,#444,#222)}.black-key[data-astro-cid-dzqkxw27].active{background:linear-gradient(to bottom,#555,#333);transform:translateY(2px)}.black-key[data-astro-cid-dzqkxw27] .key-label[data-astro-cid-dzqkxw27]{position:absolute;bottom:8px;left:50%;transform:translate(-50%);font-size:.6rem;color:#888;pointer-events:none}.chords-panel[data-astro-cid-dzqkxw27],.songs-panel[data-astro-cid-dzqkxw27]{background:var(--card-bg);border-radius:12px;padding:1rem 1.5rem;margin-bottom:1rem}.chords-panel[data-astro-cid-dzqkxw27] label[data-astro-cid-dzqkxw27],.songs-panel[data-astro-cid-dzqkxw27] label[data-astro-cid-dzqkxw27]{display:block;font-weight:600;margin-bottom:.75rem;color:var(--text)}.chord-buttons[data-astro-cid-dzqkxw27],.song-buttons[data-astro-cid-dzqkxw27]{display:flex;gap:.5rem;flex-wrap:wrap}.chord-btn[data-astro-cid-dzqkxw27],.song-btn[data-astro-cid-dzqkxw27]{padding:.5rem 1rem;border:2px solid var(--border);border-radius:8px;background:var(--surface);color:var(--text);cursor:pointer;font-weight:600;transition:all .2s ease}.chord-btn[data-astro-cid-dzqkxw27]:hover,.song-btn[data-astro-cid-dzqkxw27]:hover{border-color:var(--accent)}.chord-btn[data-astro-cid-dzqkxw27]:active,.song-btn[data-astro-cid-dzqkxw27]:active{background:var(--accent);border-color:var(--accent);color:#fff}.keyboard-hint[data-astro-cid-dzqkxw27]{text-align:center;font-size:.85rem;color:var(--text-muted);margin-top:1rem}@media(max-width:768px){.white-key[data-astro-cid-dzqkxw27]{width:36px;height:150px}.black-key[data-astro-cid-dzqkxw27]{width:22px;height:90px}.piano-keyboard[data-astro-cid-dzqkxw27]{min-width:440px}}