.piano-strip__scroller[data-v-ad08db5a]{background:color-mix(in srgb,var(--color-surface-container-lowest) 70%,transparent);border:1px solid color-mix(in srgb,var(--color-outline-variant) 45%,transparent);min-width:0;max-width:100%;box-shadow:inset 0 1px 0 color-mix(in srgb,var(--color-on-surface) 6%,transparent);-webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px);cursor:grab;scrollbar-width:none;touch-action:pan-y;-webkit-user-select:none;user-select:none;border-radius:.9rem;flex:1;padding:.5rem 0;position:relative;overflow:auto hidden}.piano-strip__scroller[data-v-ad08db5a]::-webkit-scrollbar{display:none}.piano-strip__scroller[data-v-ad08db5a]:active{cursor:grabbing}.piano-strip__track[data-v-ad08db5a]{height:118px;position:relative}.piano-key[data-v-ad08db5a]{cursor:pointer;touch-action:pan-y;border:none;padding:0;transition:background-color 80ms,box-shadow 80ms;position:absolute;top:0}.piano-key[data-v-ad08db5a]:focus-visible{outline:2px solid var(--color-secondary-fixed);outline-offset:-3px;z-index:3}.piano-key--white[data-v-ad08db5a]{z-index:1;background:linear-gradient(to bottom,color-mix(in srgb,var(--color-surface-container-lowest) 90%,#fff 10%),var(--color-surface-container-lowest));width:40px;height:118px;box-shadow:inset -1px 0 0 color-mix(in srgb,var(--color-outline-variant) 60%,transparent),inset 0 -3px 6px color-mix(in srgb,var(--color-on-surface) 8%,transparent);border-radius:0 0 5px 5px;justify-content:center;align-items:flex-end;padding-bottom:6px;display:flex}.piano-key--white.piano-key--active[data-v-ad08db5a]{background:linear-gradient(to bottom,color-mix(in srgb,var(--color-secondary-fixed) 30%,var(--color-surface-container-lowest)),color-mix(in srgb,var(--color-secondary-fixed) 55%,var(--color-surface-container-lowest)))}.piano-key--black[data-v-ad08db5a]{z-index:2;background:linear-gradient(to bottom,color-mix(in srgb,var(--color-on-surface) 78%,transparent),color-mix(in srgb,var(--color-on-surface) 92%,transparent));width:24px;height:74px;box-shadow:0 2px 4px color-mix(in srgb,var(--color-on-surface) 35%,transparent),inset 0 -2px 3px color-mix(in srgb,var(--color-on-surface) 40%,transparent);border-radius:0 0 4px 4px}.piano-key--black.piano-key--active[data-v-ad08db5a]{background:linear-gradient(to bottom,color-mix(in srgb,var(--color-secondary-fixed) 70%,var(--color-on-surface)),var(--color-secondary-fixed))}.piano-key__label[data-v-ad08db5a]{font-family:var(--font-mono,ui-monospace,monospace);letter-spacing:.08em;pointer-events:none;font-size:9px}.piano-key__label[data-v-ad08db5a],.piano-strip__nav[data-v-ad08db5a]{color:var(--color-on-surface-variant)}.piano-strip__nav[data-v-ad08db5a]{border:1px solid color-mix(in srgb,var(--color-outline-variant) 50%,transparent);background:color-mix(in srgb,var(--color-surface-container-lowest) 80%,transparent);cursor:pointer;-webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px);border-radius:999px;flex:none;justify-content:center;align-items:center;width:28px;height:28px;transition:background-color .12s,color .12s;display:inline-flex}.piano-strip__nav[data-v-ad08db5a]:hover{color:var(--color-on-surface);background:var(--color-surface-container)}.piano-strip__nav[data-v-ad08db5a]:focus-visible{outline:2px solid var(--color-secondary-fixed);outline-offset:2px}