.gmp-piano,.gmp-piano *,.gmp-piano *::before,.gmp-piano *::after{box-sizing:border-box}.gmp-piano{--gmp-yellow:#ffdf00;--gmp-text:#171717;--gmp-focus:#0756a3;--gmp-white-key-width:min(70px, calc(100% / 8));width:min(100%, 760px);margin:24px auto;padding:clamp(16px, 4vw, 30px);border:1px solid rgb(0 0 0 / .14);border-radius:14px;background:var(--gmp-yellow);box-shadow:0 8px 30px rgb(0 0 0 / .12);color:var(--gmp-text);outline:none;contain:layout paint}.gmp-piano:focus-visible{outline:3px solid var(--gmp-focus);outline-offset:3px}.gmp-piano__header{display:flex;align-items:flex-start;justify-content:space-between;gap:18px;margin-bottom:20px}.gmp-piano__intro{min-width:0}.gmp-piano__title{margin:0 0 5px;color:var(--gmp-text);font-size:clamp(1.15rem, 3vw, 1.6rem);line-height:1.25}.gmp-piano__description{max-width:46rem;margin:0;color:#303030;font-size:.95rem;line-height:1.45}.gmp-piano__controls{display:grid;gap:10px;min-width:min(100%, 190px)}.gmp-piano__control{display:grid;gap:4px;margin:0;color:#202020;font-size:.85rem;font-weight:600}.gmp-piano__control label{margin:0;color:inherit;font:inherit;cursor:pointer}.gmp-piano__control--checkbox{display:flex;align-items:center;gap:8px}.gmp-piano__volume{width:100%;min-height:24px;margin:0;accent-color:#111;cursor:pointer}.gmp-piano__labels-toggle{flex:0 0 auto;width:18px;height:18px;margin:0;accent-color:#111;cursor:pointer}.gmp-piano__keys{display:flex;width:100%;max-width:560px;margin:0 auto;justify-content:center;align-items:flex-start;touch-action:none;isolation:isolate}.gmp-piano__key{appearance:none;-webkit-appearance:none;position:relative;flex:0 0 auto;margin:0;padding:0;border:0;border-radius:0;cursor:pointer;font:inherit;line-height:1;text-transform:uppercase;user-select:none;-webkit-user-select:none;-webkit-tap-highlight-color:#fff0;transition:box-shadow 80ms ease,transform 80ms ease,background 80ms ease}.gmp-piano__key span{position:absolute;inset-inline:0;top:10px;display:block;text-align:center;font-size:clamp(0.72rem, 2.4vw, 1rem);font-weight:700;pointer-events:none}.gmp-piano__key--white{z-index:1;width:var(--gmp-white-key-width);height:clamp(140px, 31vw, 230px);border:1px solid #111;border-radius:0 0 8px 8px;background:linear-gradient(to bottom,#ffffff 0%,#ffffff 94%,#e8e8e8 100%);color:#292929}.gmp-piano__key--black{z-index:2;width:calc(var(--gmp-white-key-width) * 0.63);height:clamp(86px, 19vw, 140px);margin-inline:calc(var(--gmp-white-key-width) * -0.315);border:1px solid #000;border-radius:0 0 5px 5px;background:linear-gradient(to bottom,#333333,#050505);color:#fff}.gmp-piano__key.is-active.gmp-piano__key--white{background:linear-gradient(to bottom,#e9e9e9,#ffffff);box-shadow:inset 0 5px 14px rgb(0 0 0 / .28);transform:translateY(2px)}.gmp-piano__key.is-active.gmp-piano__key--black{background:linear-gradient(to bottom,#000000,#444444);box-shadow:inset 0 5px 10px rgb(255 255 255 / .18);transform:translateY(2px)}.gmp-piano__key:focus-visible,.gmp-piano__volume:focus-visible,.gmp-piano__labels-toggle:focus-visible{outline:3px solid var(--gmp-focus);outline-offset:2px}.gmp-piano__key:focus-visible{outline-offset:-4px}.gmp-piano--hide-labels .gmp-piano__key span{display:none}.gmp-piano__status{min-height:1.35em;margin:10px 0 0;color:#701500;font-size:.875rem;font-weight:700;line-height:1.35;text-align:center}@media (max-width:640px){.gmp-piano{margin-block:16px;padding:14px 10px 16px;border-radius:10px}.gmp-piano__header{display:grid;gap:12px;margin-bottom:14px}.gmp-piano__controls{grid-template-columns:minmax(145px,1fr) auto;align-items:end;width:100%;min-width:0}.gmp-piano__control--checkbox{padding-bottom:2px}}@media (max-width:380px){.gmp-piano__controls{grid-template-columns:1fr;align-items:start}}@media (prefers-reduced-motion:reduce){.gmp-piano__key{transition:none}}