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