.piano-keyboard-wrapper{--piano-white-key-width: clamp(36px, 3.5vw, 52px);--piano-white-key-height: clamp(140px, 16vw, 200px);--piano-black-key-width: calc(var(--piano-white-key-width) * .6);--piano-black-key-height: calc(var(--piano-white-key-height) * .65);--piano-color-accent: #cbb7fb;display:flex;flex-direction:column;align-items:center;gap:.75rem;-webkit-user-select:none;user-select:none;width:100%;max-width:100vw;overflow-x:auto}.piano-octave-controls{display:flex;align-items:center;gap:1rem}.piano-octave-controls button{padding:.25rem .75rem;border:1px solid rgba(203,183,251,.3);border-radius:6px;background:#cbb7fb14;color:#cbb7fb;cursor:pointer;font-size:1rem;font-family:Inter,system-ui,sans-serif;transition:background .15s,border-color .15s}.piano-octave-controls button:hover{background:#cbb7fb2e;border-color:#cbb7fb80}.piano-octave-label{font-size:.9rem;color:#9c92b8;min-width:80px;text-align:center;font-family:Inter,system-ui,sans-serif}.piano-keys{position:relative;display:flex;height:var(--piano-white-key-height)}.piano-key{position:relative;border:none;cursor:pointer;padding:0 0 4px;display:flex;flex-direction:column;justify-content:flex-end;align-items:center;transition:background .06s,box-shadow .06s}.piano-key--white{width:var(--piano-white-key-width);height:var(--piano-white-key-height);background:#f5f0eb;border:1px solid #c8bfb0;border-top:none;border-radius:0 0 5px 5px;z-index:1;box-shadow:inset 0 -4px 8px #0000001f}.piano-key--white:hover{background:#ede5ff;box-shadow:inset 0 -4px 8px #cbb7fb26,0 0 8px #cbb7fb26}.piano-key--white.piano-key--active{background:#cbb7fb;box-shadow:inset 0 -4px 8px #643cc84d,0 0 16px #cbb7fb80,0 0 32px #cbb7fb33}.piano-key--black{width:var(--piano-black-key-width);height:var(--piano-black-key-height);background:#1a1040;border-radius:0 0 4px 4px;z-index:2;margin-left:calc(var(--piano-black-key-width) / -2);margin-right:calc(var(--piano-black-key-width) / -2);border:1px solid #0d0820;box-shadow:inset 0 -3px 6px #00000080,0 4px 8px #0009}.piano-key--black:hover{background:#2d1f6e;box-shadow:inset 0 -3px 6px #0006,0 0 10px #cbb7fb4d,0 4px 8px #00000080}.piano-key--black.piano-key--active{background:#9b7ef8;box-shadow:inset 0 -3px 6px #3c148c66,0 0 16px #cbb7fb99,0 0 32px #cbb7fb40}.piano-key__labels{display:flex;flex-direction:column;align-items:center;gap:2px;pointer-events:none}.piano-key__shortcut{font-size:8px;color:#9c92b8;font-family:Inter,monospace}.piano-key--black .piano-key__shortcut{color:#7a6fa0}.piano-key--white.piano-key--active .piano-key__shortcut,.piano-key--white.piano-key--active .piano-key__note{color:#2d1b6e}.piano-key__note{font-size:9px;color:#8a8090;font-family:Inter,system-ui,sans-serif}@media (max-width: 600px){.piano-keyboard-wrapper{--piano-white-key-width: clamp(18px, 4.5vw, 28px);--piano-white-key-height: clamp(90px, 20vw, 130px)}}.audio-controls{display:flex;gap:1rem;align-items:center;padding:.5rem;border:1px solid rgba(203,183,251,.3);border-radius:6px;background:#cbb7fb14;color:#cbb7fb}.audio-controls__group{display:flex;align-items:center;gap:.5rem}.audio-controls__label{font-family:Inter,system-ui,sans-serif;color:#cbb7fb;font-size:.9rem}.audio-controls__slider{width:180px;height:2px;background:#cbb7fb;-webkit-appearance:none;-moz-appearance:none;appearance:none}.audio-controls__slider::-webkit-slider-thumb{-webkit-appearance:none;width:14px;height:14px;border-radius:50%;background:#cbb7fb;border:2px solid #5b4e88;cursor:pointer}.audio-controls__select{background:#1e164a;color:#cbb7fb;border:1px solid rgba(203,183,251,.3);border-radius:6px;padding:4px 8px;font-family:Inter,system-ui,sans-serif}:root{--color-bg: #0d0d1a;--color-bg-end: #1a1040;--color-text: #e8e4f0;--color-muted: #9c92b8;--color-accent: #cbb7fb;--radius-md: 8px}*{box-sizing:border-box}body{background:linear-gradient(135deg,var(--color-bg) 0%,var(--color-bg-end) 100%);background-attachment:fixed;color:var(--color-text);font-family:Inter,system-ui,Arial,sans-serif;min-height:100vh;margin:0}.app{font-family:Inter,system-ui,Arial,sans-serif;padding:2rem;min-height:100vh;background:linear-gradient(135deg,#0d0d1a,#1a1040);display:flex;flex-direction:column;align-items:center;justify-content:center}.piano{margin-top:1rem;padding:2rem 2.5rem;border:1px solid rgba(203,183,251,.15);border-radius:16px;background:#1a104099;-webkit-backdrop-filter:blur(12px);backdrop-filter:blur(12px);box-shadow:0 0 0 1px #cbb7fb14,0 8px 40px #0009,0 0 80px #cbb7fb0a;color:var(--color-muted)}