.music-piano{--piano-white:#fcfaf6;--piano-black:#22232d;--piano-white-ink:#302b3c;--piano-black-ink:#f7f2ff;border:1px solid var(--theme-border,#4d4359);background:var(--theme-surface,#22212b);width:100%;min-width:0;max-width:680px;color:var(--theme-text,#ece5f4);border-radius:12px;justify-self:center;padding:16px}.music-piano-heading{justify-content:space-between;align-items:center;gap:10px;margin-bottom:12px;display:flex}.music-piano-heading>span:first-child{white-space:nowrap;align-items:center;gap:8px;font:500 12px/1.4 Arial,sans-serif;display:flex}.music-piano-heading svg{color:var(--theme-accent,#c9acd9)}.music-piano-position{color:var(--theme-muted,#bfb1cc);text-align:right;overflow-wrap:anywhere;font:10px/1.5 Arial,sans-serif}.music-piano-controls{justify-content:space-between;align-items:center;gap:10px;margin-bottom:12px;display:flex}.music-piano-octaves{align-items:stretch;gap:7px;display:flex}.music-piano-controls button{border:1px solid var(--theme-border,#645371);background:var(--theme-raised,#2d2836);min-width:44px;min-height:44px;color:var(--theme-text,#f2e7fc);cursor:pointer;touch-action:manipulation;border-radius:7px;justify-content:center;align-items:center;gap:8px;padding:8px;font:12px Arial,sans-serif;display:inline-flex}.music-piano-controls button:hover:not(:disabled){background:var(--theme-accent-soft,#43324e);border-color:var(--theme-accent,#c1a3db)}.music-piano-controls button:disabled{opacity:.4;cursor:default}.music-piano-octaves output{min-width:96px;color:var(--theme-muted,#baacc9);grid-template-columns:1fr auto;align-content:center;column-gap:6px;font:10px/1.3 Arial,sans-serif;display:grid}.music-piano-octaves output>b{color:var(--theme-text,#f0e7f9);grid-row:span 2;align-self:center;font-size:23px;font-weight:400}.music-piano-octaves output>span{font-size:9px}.music-piano-delete{flex-shrink:0}.music-piano-keys{isolation:isolate;touch-action:manipulation;height:132px;position:relative}.music-piano-whites{gap:2px;height:100%;display:flex}.music-editor .music-piano-key{cursor:pointer;touch-action:manipulation;-webkit-user-select:none;user-select:none;border:1px solid #bbb4c2;border-radius:0 0 6px 6px;justify-content:center;align-items:flex-end;padding:0 1px 12px;font-family:Arial,sans-serif;transition:background 80ms,box-shadow 80ms;display:flex;position:relative}.music-editor .music-piano-key.is-white{background:linear-gradient(#fff,var(--piano-white));min-width:0;height:100%;color:var(--piano-white-ink);flex:1;box-shadow:inset 0 -4px #dbd5df}.music-editor .music-piano-key.is-black{z-index:1;background:linear-gradient(#353442,var(--piano-black));width:9.14286%;height:61%;color:var(--piano-black-ink);border-color:#101019;padding-bottom:9px;position:absolute;top:0;translate:-50%;box-shadow:inset 0 -4px #11111c,0 3px 5px #0003}.music-piano-key.is-white>span{align-items:baseline;gap:2px;display:flex}.music-piano-key b{font-size:12px;font-weight:500}.music-piano-key small{opacity:.7;font-size:9px}.music-piano-key.is-black>span{font-size:8px;font-weight:500;line-height:1.2}.music-editor .music-piano-key[data-selected]{background:var(--theme-accent,#c6a6e0);color:var(--theme-on-accent,#291a37);box-shadow:inset 0 -4px #0002}.music-editor .music-piano-key:active{background:var(--theme-accent-hover,#b58dce);color:var(--theme-on-accent,#291a37);box-shadow:inset 0 3px 8px #0004}.music-editor .music-piano-key:focus-visible{outline-offset:2px;box-shadow:inset 0 0 0 3px #74438f}.music-piano>p{color:var(--theme-muted,#baacc9);margin:10px 0 0;font:10px/1.65 Arial,sans-serif!important}@media (max-width:650px){.music-editor:has(.music-piano) .music-rhythm{position:static}.music-piano{padding:12px 9px}.music-piano-heading{align-items:flex-start;gap:6px}.music-piano-heading>span:first-child{font-size:11px}.music-piano-position{max-width:48%;font-size:9px}.music-piano-octaves output{min-width:70px}.music-piano-octaves{gap:4px}.music-piano-delete>span{display:none}.music-piano-keys{height:124px}.music-editor .music-continuous-field[data-piano-input]{height:min(280px,44svh);max-height:min(280px,44svh)}.music-editor .music-continuous-field[data-piano-input][data-music-view=both]{height:min(420px,48svh);max-height:min(420px,48svh)}}@media (prefers-reduced-motion:reduce){.music-editor .music-piano-key{transition:none}}.music-piano-actions{align-items:center;gap:6px;display:flex}.music-piano-controls .music-piano-sound{color:var(--theme-muted,#baacc9)}.music-piano-controls .music-piano-sound[aria-pressed=true]{color:var(--theme-accent,#c9acd9);border-color:var(--theme-accent,#c9acd9)}.music-editor .music-continuous-field[data-piano-input]{height:240px;max-height:240px}.music-editor .music-continuous-field[data-piano-input][data-music-view=both]{height:360px;max-height:360px}@media (max-width:650px){.music-piano-actions{gap:5px}.music-piano-sound>span{display:none}.music-piano-controls button{padding:7px}.music-piano-octaves output{min-width:57px}.music-piano-octaves output>span{font-size:8px}.music-editor .music-continuous-field[data-piano-input]{height:210px;max-height:210px}.music-editor .music-continuous-field[data-piano-input][data-music-view=both]{height:min(340px,45svh);max-height:min(340px,45svh)}}@media (max-width:350px){.music-piano-controls,.music-piano-actions{gap:4px}.music-piano-octaves{gap:3px}.music-piano-octaves output{grid-template-columns:1fr;justify-items:center;column-gap:0;min-width:28px}.music-piano-octaves output>small{font-size:8px}.music-piano-octaves output>b{grid-row:auto;font-size:20px}.music-piano-octaves output>span{display:none}}