.rys-piano{--piano-bg: var(--rys-panel);--piano-border: var(--rys-border);--piano-key-white: #fafafa;--piano-key-white-active: linear-gradient(180deg, #f4e6ff 0%, #d8baff 100%);--piano-key-black: #1a1a1a;--piano-key-black-active: linear-gradient(180deg, #6b21a8 0%, #4c1d95 100%);--piano-shadow: 0 22px 60px rgba(0, 0, 0, .18);display:flex;flex-direction:column;gap:18px;max-width:1100px;margin:0 auto;padding:24px;background:var(--piano-bg);border:1px solid var(--piano-border);border-radius:28px;box-shadow:var(--piano-shadow)}.rys-piano__controls{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:14px;padding:6px 4px}.rys-piano__logo{display:flex;align-items:center;gap:10px;font-weight:700;letter-spacing:.04em;text-transform:uppercase;font-size:14px;color:var(--rys-text)}.rys-piano__dot{width:8px;height:8px;border-radius:50%;background:#ef4444;box-shadow:0 0 12px #ef44448c}.rys-piano__settings{display:flex;align-items:center;gap:16px;flex-wrap:wrap}.rys-piano__volume{display:flex;align-items:center;gap:8px;color:var(--rys-text-muted)}.rys-piano__volume input[type=range]{width:110px;accent-color:var(--rys-accent)}.rys-piano__patch{background:var(--rys-panel-2);border:1px solid var(--rys-border);border-radius:999px;padding:8px 14px;font-size:13px;font-weight:600;color:var(--rys-text);cursor:pointer}.rys-piano__keyboard{display:flex;height:220px;background:#0d0d12;border-radius:18px;padding:12px 12px 14px;gap:0;box-shadow:inset 0 0 0 1px #ffffff0a,inset 0 -10px 20px #00000080;overflow:hidden}.rys-piano__group{position:relative;flex:1;display:flex;min-width:0}.rys-piano__key{-webkit-appearance:none;-moz-appearance:none;appearance:none;border:0;cursor:pointer;font-family:inherit;position:relative;display:flex;align-items:flex-end;justify-content:center;padding:0 0 14px;-webkit-user-select:none;user-select:none;-webkit-tap-highlight-color:transparent;touch-action:manipulation;transition:background .06s ease,transform .06s ease}.rys-piano__key--white{flex:1;height:100%;background:var(--piano-key-white);border-radius:0 0 8px 8px;margin:0 1px;box-shadow:inset 0 -4px #00000014,0 1px 2px #0006;color:#00000073}.rys-piano__key--white.is-active{background:var(--piano-key-white-active);transform:translateY(2px);box-shadow:inset 0 6px 12px #6c21a840;color:#000000b3}.rys-piano__key--white:active{transform:translateY(2px)}.rys-piano__key--black{position:absolute;top:0;left:var(--key-offset, 60%);width:60%;height:60%;background:var(--piano-key-black);border-radius:0 0 6px 6px;z-index:2;color:#ffffff8c;box-shadow:inset 0 -4px #ffffff14,0 4px 6px #00000080}.rys-piano__key--black.is-active{background:var(--piano-key-black-active);transform:translateY(2px);box-shadow:0 0 24px #6c21a88c;color:#fff}.rys-piano__key--black:active{transform:translateY(2px)}.rys-piano__label{font-size:11px;font-weight:700;letter-spacing:.05em;text-transform:uppercase;pointer-events:none}.rys-piano__hint{margin:0;text-align:center;font-size:13px;color:var(--rys-text-muted)}@media(max-width:640px){.rys-piano{padding:14px;border-radius:22px}.rys-piano__keyboard{height:180px;padding:10px 8px 12px}.rys-piano__label{font-size:9px}.rys-piano__volume input[type=range]{width:84px}}