.piano[data-v-10e452c1]{-webkit-user-select:none;user-select:none;touch-action:manipulation;border-top:4px solid var(--brass-deep);border-radius:0 0 8px 8px;height:clamp(120px,26vw,170px);display:flex}.piano[data-v-10e452c1],.w[data-v-10e452c1]{position:relative}.w[data-v-10e452c1]{cursor:pointer;background:linear-gradient(oklch(97% 0 0),oklch(93% .004 85));border:1px solid oklch(70% .01 85);border-top:0;border-radius:0 0 6px 6px;flex:1;padding:0;transition:background 80ms}.w.on[data-v-10e452c1],.w[data-v-10e452c1]:active{background:oklch(88% .06 85)}.b[data-v-10e452c1]{width:calc(100%/var(--n)*.6);cursor:pointer;z-index:2;background:linear-gradient(oklch(30% .01 85),oklch(14% .01 85));border:1px solid oklch(10% 0 0);border-top:0;border-radius:0 0 4px 4px;height:62%;padding:0;position:absolute;top:0}.b.on[data-v-10e452c1],.b[data-v-10e452c1]:active{background:oklch(45% .08 85)}.w.hl[data-v-10e452c1]{background:oklch(88% .11 85)}.b.hl[data-v-10e452c1]{background:oklch(62% .13 85)}.w.root[data-v-10e452c1]{background:oklch(80% .14 85)}.b.root[data-v-10e452c1]{background:var(--brass)}.w.ok[data-v-10e452c1]{background:oklch(86% .13 150)}.b.ok[data-v-10e452c1]{background:oklch(60% .14 150)}.w.bad[data-v-10e452c1]{background:oklch(84% .1 28)}.b.bad[data-v-10e452c1]{background:oklch(55% .16 28)}.lab[data-v-10e452c1]{text-align:center;font:700 .72rem/1 var(--body);color:var(--ink);pointer-events:none;position:absolute;bottom:6px;left:0;right:0}.b .lab[data-v-10e452c1]{color:#fff;font-size:.62rem;bottom:5px}.piano button[data-v-10e452c1]:focus-visible{outline-offset:-3px;z-index:3}