.piano-board{gap:12px;display:grid}.piano-toolbar{flex-wrap:wrap;align-items:end;gap:8px 14px;display:flex}.piano-toolbar label{gap:2px;font-size:.85rem;display:grid}.piano-toolbar select{font:inherit;color:#24382b;background:#fffdf5;border:1px solid #b9b39a;border-radius:8px;min-height:40px;padding:4px 8px;font-size:1rem}.piano-follow{color:#24382b;background:#f5f1e2;border-radius:12px;gap:6px;padding:10px 12px;display:grid}.piano-follow p{margin:0}.piano-follow b{font-size:1.15em}.piano-done{color:#2f6b45;font-weight:700}.piano-origin{opacity:.75;font-size:.8rem}.piano-progress{background:#0001;border-radius:99px;height:6px;overflow:hidden}.piano-progress i{background:#2f6b45;height:100%;transition:width .15s;display:block}.piano-follow-actions,.piano-octaves{flex-wrap:wrap;gap:8px;display:flex}.piano-board button:not(.piano-key){font:inherit;color:#24382b;cursor:pointer;background:#fffdf5;border:1px solid #b9b39a;border-radius:8px;min-height:40px;padding:4px 14px}.piano-board button[aria-pressed=true]{color:#fff;background:#2f6b45;border-color:#2f6b45}.piano-keys{touch-action:none;-webkit-user-select:none;user-select:none;-webkit-touch-callout:none;background:linear-gradient(#3a2a20,#24180f);border-radius:14px;height:clamp(170px,34vw,250px);padding:10px 10px 12px;display:flex;position:relative;box-shadow:inset 0 6px 10px #0006}.piano-key{font:inherit;cursor:pointer;-webkit-tap-highlight-color:transparent;border:0;justify-content:center;align-items:flex-end;padding:0;display:flex}.piano-key span{pointer-events:none;padding-bottom:8px;font-size:clamp(10px,1.6vw,14px);font-weight:700}.piano-key.is-white{color:#5d5a4c;background:linear-gradient(#fbfaf5,#e9e5d6);border-radius:0 0 7px 7px;flex:1 1 0;margin:0 1px;box-shadow:inset 0 -5px #d4cfbc,0 2px 2px #0005}.piano-key.is-black{z-index:1;height:60%;top:10px;left:calc(10px + (100% - 20px) * (var(--at) - .32) / var(--whites));width:calc((100% - 20px) * .64 / var(--whites));color:#ddd;background:linear-gradient(#3b3b3b,#121212);border-radius:0 0 5px 5px;position:absolute;box-shadow:inset 0 -4px #000,0 3px 3px #0007}.piano-key.is-black span{padding-bottom:6px;font-size:clamp(9px,1.3vw,12px)}.piano-key.is-next.is-white{background:linear-gradient(#fff6cf,#f3dc86)}.piano-key.is-next.is-black{background:linear-gradient(#a3832b,#6c5315)}.piano-key.is-demo.is-white{background:linear-gradient(#e2f3e4,#a9d8b2)}.piano-key.is-demo.is-black{background:linear-gradient(#3f7a4f,#1f4a2c)}.piano-key.is-down.is-white{background:linear-gradient(#d9ecdb,#9ccaa5);transform:translateY(2px);box-shadow:inset 0 -2px #7fae88,0 1px 1px #0005}.piano-key.is-down.is-black{background:linear-gradient(#2c5a3a,#10301b);box-shadow:inset 0 -1px #000}.piano-hint{opacity:.8;margin:0;font-size:.9rem}