@import"https://fonts.googleapis.com/css2?family=Spectral:ital,wght@0,300;0,400;0,500;0,600;1,400&family=Atkinson+Hyperlegible:ital,wght@0,400;0,700;1,400;1,700&display=swap";:root{--surface-base: oklch(97.8% .004 255);--surface-raised: oklch(96% .005 255);--surface-sunken: oklch(93.8% .006 255);--surface-key-white: oklch(99% .003 255);--surface-key-black: oklch(22% .012 255);--hairline: oklch(88% .007 255);--hairline-strong: oklch(78% .009 255);--ink-primary: oklch(20% .014 255);--ink-secondary: oklch(42% .011 255);--ink-tertiary: oklch(52% .01 255);--ink-ghost: oklch(58% .008 255);--ink-on-dark: oklch(96% .004 255);--hand-left: oklch(45% .075 215);--hand-left-soft: oklch(45% .075 215 / .18);--hand-left-ink: oklch(98% .005 215);--hand-right: oklch(68% .115 55);--hand-right-soft: oklch(68% .115 55 / .2);--hand-right-ink: oklch(18% .02 55);--now-emphasis: 1;--next-emphasis: .32;--pulse: oklch(78% .07 90);--pulse-soft: oklch(78% .07 90 / .35);--font-display: "Spectral", "Iowan Old Style", Georgia, serif;--font-text: "Atkinson Hyperlegible", "Lucida Grande", Tahoma, sans-serif;--t-display-xl: clamp(56px, 7vw, 84px);--t-display-lg: 44px;--t-display-md: 32px;--t-display-sm: 22px;--t-text-lg: 19px;--t-text-md: 15px;--t-text-sm: 13px;--t-text-xs: 11px;--t-mono-lg: 20px;--t-mono-md: 14px;--t-mono-sm: 11px;--lh-tight: 1.05;--lh-snug: 1.25;--lh-normal: 1.45;--lh-loose: 1.65;--tracking-display: -.012em;--tracking-text: 0em;--tracking-label: .06em;--space-1: 4px;--space-2: 8px;--space-3: 12px;--space-4: 16px;--space-5: 24px;--space-6: 32px;--space-7: 48px;--space-8: 64px;--space-9: 96px;--space-10: 128px;--radius-0: 0;--radius-1: 2px;--radius-2: 3px;--radius-full: 999px;--border-hairline: 1px solid var(--hairline);--border-strong: 1px solid var(--hairline-strong);--border-ink: 1px solid var(--ink-primary);--shadow-flat: none;--shadow-soft: 0 1px 0 oklch(0% 0 0 / .04), 0 8px 24px -8px oklch(0% 0 0 / .08);--shadow-key: inset 0 -2px 0 oklch(0% 0 0 / .05);--shadow-key-on: inset 0 0 0 1.5px var(--ink-primary);--ease-out: cubic-bezier(.22, .61, .36, 1);--ease-inout: cubic-bezier(.65, 0, .35, 1);--dur-chord: .24s;--dur-toggle: .18s;--dur-pulse: .8s;--dur-instant: 80ms}[data-theme=dark]{--surface-base: oklch(16% .01 260);--surface-raised: oklch(20% .012 260);--surface-sunken: oklch(13% .01 260);--surface-key-white: oklch(92% .006 80);--surface-key-black: oklch(8% .008 260);--hairline: oklch(28% .012 260);--hairline-strong: oklch(38% .014 260);--ink-primary: oklch(96% .005 85);--ink-secondary: oklch(72% .008 85);--ink-tertiary: oklch(60% .01 85);--ink-ghost: oklch(50% .012 85);--ink-on-dark: oklch(96% .005 85);--hand-left: oklch(62% .09 215);--hand-left-soft: oklch(62% .09 215 / .22);--hand-left-ink: oklch(12% .01 215);--hand-right: oklch(78% .125 55);--hand-right-soft: oklch(78% .125 55 / .22);--hand-right-ink: oklch(18% .02 55);--pulse: oklch(82% .075 90);--pulse-soft: oklch(82% .075 90 / .3);--shadow-soft: 0 1px 0 oklch(0% 0 0 / .6), 0 12px 32px -8px oklch(0% 0 0 / .5);--shadow-key: inset 0 -2px 0 oklch(0% 0 0 / .3)}html,body{background:var(--surface-base);color:var(--ink-primary);font-family:var(--font-text);font-size:var(--t-text-md);line-height:var(--lh-normal);-webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility}.t-display-xl,.t-display-lg,.t-display-md,.t-display-sm{font-family:var(--font-display);font-weight:400;letter-spacing:var(--tracking-display);line-height:var(--lh-snug);font-optical-sizing:auto}.t-display-xl{font-size:var(--t-display-xl);line-height:var(--lh-tight);font-weight:400}.t-display-lg{font-size:var(--t-display-lg)}.t-display-md{font-size:var(--t-display-md)}.t-display-sm{font-size:var(--t-display-sm)}.t-text-lg{font-size:var(--t-text-lg)}.t-text-md{font-size:var(--t-text-md)}.t-text-sm{font-size:var(--t-text-sm)}.t-text-xs{font-size:var(--t-text-xs);letter-spacing:var(--tracking-label)}.t-mono{font-family:var(--font-text);font-variant-numeric:tabular-nums;letter-spacing:.01em}.t-label-caps{font-family:var(--font-text);font-size:var(--t-text-xs);letter-spacing:var(--tracking-label);text-transform:uppercase;color:var(--ink-tertiary)}h1{font-family:var(--font-display);font-size:var(--t-display-lg);font-weight:400;letter-spacing:var(--tracking-display);line-height:var(--lh-snug);color:var(--ink-primary);margin:0}h2{font-family:var(--font-display);font-size:var(--t-display-md);font-weight:400;letter-spacing:var(--tracking-display);line-height:var(--lh-snug);color:var(--ink-primary);margin:0}h3{font-family:var(--font-display);font-size:var(--t-display-sm);font-weight:500;letter-spacing:var(--tracking-display);line-height:var(--lh-snug);color:var(--ink-primary);margin:0}p{color:var(--ink-secondary);margin:0}@media(prefers-reduced-motion:reduce){*,*:before,*:after{animation-duration:.001ms!important;animation-iteration-count:1!important;transition-duration:.001ms!important;scroll-behavior:auto!important}}.pck-keyboard{--pck-white-w: 44px;--pck-white-h: 200px;--pck-black-w: 26px;--pck-black-h: 124px;--pck-marker: 10px;position:relative;display:inline-flex;align-items:flex-start;background:transparent;-webkit-user-select:none;user-select:none}.pck-keyboard.pck-xs{--pck-white-w: 12px;--pck-white-h: 48px;--pck-black-w: 8px;--pck-black-h: 30px;--pck-marker: 4px}.pck-keyboard.pck-sm{--pck-white-w: 26px;--pck-white-h: 110px;--pck-black-w: 16px;--pck-black-h: 70px;--pck-marker: 7px}.pck-xs .pck-note,.pck-xs .pck-finger,.pck-xs .pck-marker{display:none}.pck-keyboard.pck-md{--pck-white-w: 34px;--pck-white-h: 160px;--pck-black-w: 20px;--pck-black-h: 96px;--pck-marker: 8px}.pck-whites{display:flex;position:relative;z-index:1}.pck-key{box-sizing:border-box;position:relative;font-family:var(--font-text);font-variant-numeric:tabular-nums;transition:background-color var(--dur-chord) var(--ease-out),color var(--dur-chord) var(--ease-out),border-color var(--dur-chord) var(--ease-out)}.pck-white{width:var(--pck-white-w);height:var(--pck-white-h);background:var(--surface-key-white);border:1px solid var(--hairline-strong);border-right-width:0;box-shadow:var(--shadow-key);display:flex;flex-direction:column;align-items:center;justify-content:flex-end;padding-bottom:10px;color:var(--ink-tertiary)}.pck-white:last-child{border-right-width:1px}.pck-black{position:absolute;z-index:2;top:0;width:var(--pck-black-w);height:var(--pck-black-h);background:var(--surface-key-black);border:1px solid var(--surface-key-black);display:flex;flex-direction:column;align-items:center;justify-content:flex-end;padding-bottom:8px;color:var(--ink-on-dark);left:var(--offset);transform:translate(-50%)}.pck-note{font-size:15px;font-weight:700;opacity:0;transition:opacity var(--dur-chord) var(--ease-out)}.pck-finger{font-size:13px;opacity:0;margin-top:2px;transition:opacity var(--dur-chord) var(--ease-out)}.pck-sm .pck-note{font-size:12px}.pck-sm .pck-finger{font-size:11px}.pck-md .pck-note{font-size:14px}.pck-md .pck-finger{font-size:12px}.pck-marker{position:absolute;top:8px;left:50%;transform:translate(-50%);width:var(--pck-marker);height:var(--pck-marker);opacity:0;transition:opacity var(--dur-chord) var(--ease-out)}.pck-marker svg{width:100%;height:100%;display:block}.pck-key.is-left.is-now{background:var(--hand-left);border-color:var(--hand-left);color:var(--hand-left-ink)}.pck-key.is-left.is-now.pck-black{border-color:var(--hand-left)}.pck-key.is-left.is-now .pck-marker{opacity:1;color:var(--hand-left-ink)}.pck-key.is-left.is-now .pck-note,.pck-key.is-left.is-now .pck-finger{opacity:1}.pck-key.is-right.is-now{background:var(--hand-right);border-color:var(--hand-right);color:var(--hand-right-ink)}.pck-key.is-right.is-now.pck-black{border-color:var(--hand-right)}.pck-key.is-right.is-now .pck-marker{opacity:1;color:var(--hand-right-ink)}.pck-key.is-right.is-now .pck-note,.pck-key.is-right.is-now .pck-finger{opacity:1}.pck-key.is-left.is-next{background:var(--hand-left-soft);border-color:color-mix(in oklch,var(--hand-left) 40%,transparent);color:var(--hand-left)}.pck-key.is-left.is-next .pck-marker{opacity:.65;color:var(--hand-left)}.pck-key.is-left.is-next .pck-marker .fill{display:none}.pck-key.is-left.is-next .pck-marker .outline{display:block}.pck-key.is-left.is-next .pck-note{opacity:.7}.pck-key.is-left.is-next .pck-finger{opacity:.5}.pck-key.is-right.is-next{background:var(--hand-right-soft);border-color:color-mix(in oklch,var(--hand-right) 40%,transparent);color:var(--hand-right)}.pck-key.is-right.is-next .pck-marker{opacity:.7;color:var(--hand-right)}.pck-key.is-right.is-next .pck-marker .fill{display:none}.pck-key.is-right.is-next .pck-marker .outline{display:block}.pck-key.is-right.is-next .pck-note{opacity:.75}.pck-key.is-right.is-next .pck-finger{opacity:.55}.pck-marker .outline{display:none}.pck-chord-now{display:flex;flex-direction:column;gap:4px}.pck-chord-now .name{font-family:var(--font-display);font-size:var(--t-display-xl);font-weight:400;letter-spacing:-.012em;line-height:1;color:var(--ink-primary)}.pck-chord-now .inversion{font-family:var(--font-text);font-size:13px;letter-spacing:.06em;text-transform:uppercase;color:var(--ink-tertiary)}.pck-chord-next{display:flex;align-items:baseline;gap:8px;color:var(--ink-ghost)}.pck-chord-next .label-caps{font-family:var(--font-text);font-size:11px;letter-spacing:.06em;text-transform:uppercase;color:var(--ink-tertiary)}.pck-chord-next .name{font-family:var(--font-display);font-size:26px;font-weight:400;letter-spacing:-.012em;color:var(--ink-ghost)}.pck-transport{display:inline-flex;align-items:center;gap:4px;border:1px solid var(--hairline);background:var(--surface-raised);border-radius:var(--radius-1);padding:4px}.pck-transport button{-webkit-appearance:none;-moz-appearance:none;appearance:none;background:transparent;border:0;padding:8px 12px;cursor:pointer;color:var(--ink-secondary);border-radius:var(--radius-1);display:inline-flex;align-items:center;justify-content:center;transition:background-color var(--dur-toggle) var(--ease-out),color var(--dur-toggle) var(--ease-out)}.pck-transport button:hover{color:var(--ink-primary);background:var(--surface-sunken)}.pck-transport button:active{background:color-mix(in oklch,var(--ink-primary) 8%,transparent)}.pck-transport button:focus-visible{outline:2px solid var(--ink-primary);outline-offset:2px}.pck-transport button.primary{background:var(--ink-primary);color:var(--surface-base);padding:8px 14px}.pck-transport button.primary:hover{background:color-mix(in oklch,var(--ink-primary) 88%,white)}.pck-transport button svg{width:18px;height:18px}.pck-transport button:disabled{opacity:.4;cursor:not-allowed}.pck-transport button.primary:disabled:hover{background:var(--ink-primary)}.pck-transport button.primary.is-blocked{opacity:.45}.pck-transport button.primary.is-blocked:hover{background:var(--ink-primary)}.pck-segmented{display:inline-flex;border:1px solid var(--hairline);border-radius:var(--radius-1);background:var(--surface-raised);padding:2px;gap:0}.pck-segmented button{-webkit-appearance:none;-moz-appearance:none;appearance:none;background:transparent;border:0;padding:6px 12px;font-family:var(--font-text);font-size:13px;color:var(--ink-tertiary);border-radius:0;cursor:pointer;transition:background-color var(--dur-toggle) var(--ease-out),color var(--dur-toggle) var(--ease-out)}.pck-segmented button[aria-pressed=true]{background:var(--ink-primary);color:var(--surface-base)}.pck-segmented button:hover:not([aria-pressed=true]):not(:disabled){color:var(--ink-primary)}.pck-segmented button:disabled{opacity:.35;cursor:not-allowed}.pck-volume{width:104px;height:28px;cursor:pointer;accent-color:var(--ink-primary)}.pck-switch{display:inline-flex;align-items:center;gap:8px;font-family:var(--font-text);font-size:13px;color:var(--ink-secondary);cursor:pointer}.pck-switch input{position:absolute;opacity:0;pointer-events:none}.pck-switch .track{width:30px;height:16px;background:var(--hairline-strong);border-radius:999px;position:relative;transition:background-color var(--dur-toggle) var(--ease-out)}.pck-switch .track:after{content:"";position:absolute;top:2px;left:2px;width:12px;height:12px;border-radius:999px;background:var(--surface-base);transition:transform var(--dur-toggle) var(--ease-out)}.pck-switch input:checked+.track{background:var(--ink-primary)}.pck-switch input:checked+.track:after{transform:translate(14px)}.pck-hand-badge{display:inline-flex;align-items:center;gap:6px;font-family:var(--font-text);font-size:12px;letter-spacing:.04em;text-transform:uppercase;color:var(--ink-secondary)}.pck-hand-badge .swatch{width:12px;height:12px;display:inline-block}.pck-hand-badge.left .swatch{background:var(--hand-left)}.pck-hand-badge.right .swatch{background:transparent;width:12px;height:11px;clip-path:polygon(50% 100%,0 0,100% 0);background:var(--hand-right)}.pck-song-row{display:grid;grid-template-columns:1fr auto auto;align-items:baseline;gap:16px;padding:14px 16px;border-bottom:1px solid var(--hairline);cursor:pointer;transition:background-color var(--dur-toggle) var(--ease-out)}.pck-song-row:hover{background:var(--surface-sunken)}.pck-song-row .title{font-family:var(--font-text);font-size:17px;color:var(--ink-primary)}.pck-song-row .artist{font-family:var(--font-text);font-size:13px;color:var(--ink-tertiary)}.pck-song-row .key{font-family:var(--font-display);font-size:18px;color:var(--ink-secondary)}html,body{height:100%;margin:0}.play-page{min-height:100vh;display:grid;grid-template-rows:auto 1fr auto;max-width:1280px;margin:0 auto;padding:0 48px;box-sizing:border-box}.topbar{display:flex;align-items:center;justify-content:space-between;padding:28px 0 0;gap:32px}.topbar-left{display:flex;align-items:baseline;gap:24px;color:var(--ink-primary);min-width:0}.topbar-left .wordmark{color:var(--ink-primary);display:inline-flex;align-items:center;gap:10px;text-decoration:none}.topbar-left .wordmark-mark{display:block;height:26px;width:auto}.topbar-left .wordmark-name{font-family:var(--font-display);font-size:19px;font-weight:400;letter-spacing:-.012em;color:var(--ink-primary);line-height:1;white-space:nowrap}.topbar-left .song-meta{font-family:var(--font-text);font-size:13px;color:var(--ink-tertiary);display:flex;align-items:baseline;gap:10px;letter-spacing:.01em}.topbar-left .song-meta .song-title{color:var(--ink-secondary)}.topbar-left .song-meta .sep{color:var(--ink-ghost)}.topbar-right{display:flex;align-items:center;gap:4px}.icon-btn{-webkit-appearance:none;-moz-appearance:none;appearance:none;background:transparent;border:0;padding:8px;color:var(--ink-tertiary);cursor:pointer;border-radius:var(--radius-1);display:inline-flex;align-items:center;justify-content:center;transition:color var(--dur-toggle) var(--ease-out),background-color var(--dur-toggle) var(--ease-out)}.icon-btn:hover{color:var(--ink-primary);background:var(--surface-sunken)}.icon-btn:focus-visible{outline:2px solid var(--ink-primary);outline-offset:2px}.icon-btn svg{width:18px;height:18px}.play-stage{display:flex;flex-direction:column;justify-content:center;padding:40px 0 24px;gap:32px;min-width:0}.transport-row{display:flex;flex-direction:column;align-items:center;gap:10px}.transport-hint{color:var(--ink-tertiary);white-space:nowrap}.chord-row{display:flex;align-items:flex-end;justify-content:space-between;gap:48px}.chord-label .pck-chord-now .name{font-size:clamp(64px,7.5vw,104px)}.chord-label .pck-chord-now .inversion{margin-top:8px}.chord-label-side{display:flex;flex-direction:column;align-items:flex-end;gap:6px;min-width:0}.chord-label-side .capo{font-family:var(--font-text);font-size:12px;color:var(--ink-tertiary);max-width:240px;text-align:right;line-height:1.4}.chord-label-side .pck-chord-next{align-items:baseline}.keyboards{display:flex;align-items:flex-end;gap:56px;justify-content:center}.hand-block{display:flex;flex-direction:column;gap:14px}.hand-header{display:flex;align-items:center;gap:10px;font-family:var(--font-text);font-size:12px;letter-spacing:.08em;text-transform:uppercase;color:var(--ink-tertiary)}.hand-header .marker{width:11px;height:11px;display:inline-block}.hand-header.left .marker{color:var(--hand-left)}.hand-header.right .marker{color:var(--hand-right)}.hand-header .marker svg{width:100%;height:100%;display:block}.play-footer{display:flex;align-items:center;justify-content:center;gap:32px;padding:24px 0 32px;border-top:1px solid var(--hairline);margin-top:8px}.footer-controls{display:flex;align-items:flex-end;gap:32px;flex-wrap:wrap;justify-content:center}.ctl-block{display:flex;flex-direction:column;gap:8px}.ctl-block .t-label-caps{color:var(--ink-tertiary)}.lyrics-panel{--lyric-line-h: 38px;height:calc(var(--lyric-line-h) * 3);overflow:hidden;position:relative;-webkit-mask-image:linear-gradient(to bottom,transparent,#000 32%,#000 68%,transparent);mask-image:linear-gradient(to bottom,transparent,#000 32%,#000 68%,transparent)}.lyrics-reel{display:flex;flex-direction:column;transform:translateY(calc((1 - var(--active)) * var(--lyric-line-h)));transition:transform var(--dur-chord) var(--ease-out);will-change:transform}.lyric-line{height:var(--lyric-line-h);line-height:var(--lyric-line-h);margin:0;padding:0;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;font-family:var(--font-text);font-size:18px;font-weight:400;color:var(--ink-ghost);opacity:.6;transition:color var(--dur-chord) var(--ease-out),opacity var(--dur-chord) var(--ease-out)}.lyric-line.is-past{opacity:.32}.lyric-line.is-active{color:var(--ink-secondary);font-weight:500;opacity:1}.lands-in{display:flex;flex-direction:column;align-items:flex-end;gap:5px;width:150px}.lands-bar{width:100%;height:3px;background:var(--hairline);border-radius:999px;overflow:hidden}.lands-bar>span{display:block;height:100%;width:100%;background:var(--pulse);transform-origin:left center;transform:scaleX(0)}.lands-text{color:var(--ink-tertiary)}.tempo-controls{display:inline-flex;align-items:center;gap:12px}.tap-btn,.restart-btn{-webkit-appearance:none;-moz-appearance:none;appearance:none;background:var(--surface-raised);border:1px solid var(--hairline);border-radius:var(--radius-1);padding:6px 12px;font-family:var(--font-text);font-size:13px;color:var(--ink-secondary);cursor:pointer;transition:background-color var(--dur-toggle) var(--ease-out),color var(--dur-toggle) var(--ease-out)}.tap-btn:hover,.restart-btn:hover{color:var(--ink-primary);background:var(--surface-sunken)}.tap-btn:active{background:color-mix(in oklch,var(--ink-primary) 10%,transparent)}@keyframes tap-pulse{0%,to{box-shadow:0 0 0 0 transparent}50%{box-shadow:0 0 0 3px var(--pulse-soft)}}.tap-btn.is-pulsing{border-color:color-mix(in oklch,var(--pulse) 60%,var(--hairline));color:var(--ink-primary);animation:tap-pulse .7s var(--ease-out) 0s 3}.tap-btn:focus-visible,.restart-btn:focus-visible{outline:2px solid var(--ink-primary);outline-offset:2px}.bpm-readout{font-size:13px;color:var(--ink-tertiary);min-width:60px;text-align:center}.chord-label .name-row{display:flex;align-items:baseline;gap:16px;flex-wrap:wrap}.chord-position{font-size:15px;color:var(--ink-tertiary);letter-spacing:.04em;white-space:nowrap}.chord-strip{display:flex;min-width:0;max-width:100%}.chord-strip.is-strip{flex-direction:row;gap:12px;overflow-x:auto;overflow-y:hidden;padding:4px 2px 12px;scroll-padding-inline:24px}.chord-strip.is-grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:16px;overflow-y:auto;max-height:max(160px,calc(100vh - 320px));padding:4px 2px 8px}.mini-chord{-webkit-appearance:none;-moz-appearance:none;appearance:none;background:var(--surface-raised);border:1px solid var(--hairline);border-radius:var(--radius-1);padding:10px 10px 8px;cursor:pointer;display:flex;flex-direction:column;align-items:center;gap:8px;flex:0 0 auto;transition:border-color var(--dur-toggle) var(--ease-out),background-color var(--dur-toggle) var(--ease-out),box-shadow var(--dur-toggle) var(--ease-out)}.chord-strip.is-grid .mini-chord{flex:1 1 auto}.mini-chord:hover{background:var(--surface-sunken);border-color:var(--hairline-strong)}.mini-chord:focus-visible{outline:2px solid var(--ink-primary);outline-offset:2px}.mini-chord.is-active{border-color:var(--ink-primary);box-shadow:inset 0 0 0 1px var(--ink-primary)}.mini-chord.in-loop{background:var(--pulse-soft);border-color:color-mix(in oklch,var(--pulse) 50%,var(--hairline))}.mini-chord-head{display:flex;align-items:baseline;gap:6px;min-height:18px}.mini-chord-name{font-family:var(--font-display);font-size:18px;font-weight:400;color:var(--ink-primary);letter-spacing:-.01em}.chord-tag{font-family:var(--font-text);font-size:9px;letter-spacing:.08em;text-transform:uppercase;padding:1px 4px;border-radius:var(--radius-1)}.chord-tag.is-start{background:var(--hand-left);color:var(--hand-left-ink)}.chord-tag.is-end{background:var(--hand-right);color:var(--hand-right-ink)}.mini-chord-lyric{font-family:var(--font-text);font-size:11px;line-height:1.3;color:var(--ink-tertiary);max-width:150px;text-align:center;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;min-height:14px}.mini-chord-hands{display:flex;align-items:flex-end;gap:6px}.grid-heading{display:flex;align-items:baseline;justify-content:space-between;gap:16px;padding-bottom:6px;border-bottom:1px solid var(--hairline)}.grid-heading-title{font-family:var(--font-display);font-size:var(--t-display-sm);color:var(--ink-primary)}.count-in{position:fixed;top:0;right:0;bottom:0;left:0;display:flex;align-items:center;justify-content:center;background:color-mix(in oklch,var(--surface-base) 70%,transparent);z-index:20;pointer-events:none}.count-in-num{font-family:var(--font-display);font-size:clamp(120px,22vw,260px);font-weight:400;color:var(--ink-primary);line-height:1}.transpose-ctl,.loop-ctl{display:inline-flex;align-items:center;gap:6px}.transpose-ctl button,.loop-ctl button,.easy-key-btn{-webkit-appearance:none;-moz-appearance:none;appearance:none;background:var(--surface-raised);border:1px solid var(--hairline);border-radius:var(--radius-1);padding:6px 10px;font-family:var(--font-text);font-size:13px;color:var(--ink-secondary);cursor:pointer;transition:background-color var(--dur-toggle) var(--ease-out),color var(--dur-toggle) var(--ease-out)}.transpose-ctl button:hover,.loop-ctl button:hover,.easy-key-btn:hover{color:var(--ink-primary);background:var(--surface-sunken)}.transpose-ctl button:focus-visible,.loop-ctl button:focus-visible,.easy-key-btn:focus-visible{outline:2px solid var(--ink-primary);outline-offset:2px}.loop-ctl button:disabled{opacity:.4;cursor:not-allowed}.key-readout{min-width:34px;text-align:center;font-size:15px;color:var(--ink-primary)}.ctl-block.toggles{flex-direction:row;flex-wrap:wrap;align-items:center;gap:16px}@media(max-width:1100px){.play-page{padding:0 24px}.keyboards{gap:32px;flex-wrap:wrap}.chord-label .pck-chord-now .name{font-size:72px}.chord-strip.is-grid{grid-template-columns:repeat(2,minmax(0,1fr))}}@media(max-width:640px){.play-page{padding:0 16px}.keyboards{flex-direction:column;align-items:center;gap:20px}.hand-block{align-items:center}.chord-row{flex-direction:column;align-items:flex-start;gap:12px}.chord-label .pck-chord-now .name{font-size:clamp(48px,15vw,72px)}.chord-label-side{align-items:flex-start;width:100%}.chord-label-side .capo{max-width:100%;text-align:left}.lands-in{width:100%;align-items:flex-start}.play-footer{padding:16px 0 24px}.footer-controls{flex-direction:column;align-items:stretch;gap:20px;width:100%}.footer-controls .pck-segmented{width:100%}.footer-controls .pck-segmented button{flex:1;min-height:44px}.transpose-ctl,.loop-ctl{flex-wrap:wrap}.transpose-ctl button,.loop-ctl button,.easy-key-btn,.tap-btn,.restart-btn{min-height:44px}.pck-transport button{min-height:44px;min-width:44px}.ctl-block.toggles{gap:20px 16px}.pck-switch{min-height:44px}.chord-strip.is-grid{grid-template-columns:1fr;max-height:max(160px,calc(100vh - 280px))}}.load-page{min-height:100vh;display:grid;grid-template-rows:auto 1fr;max-width:1280px;margin:0 auto;padding:0 48px;box-sizing:border-box}.load-stage{display:grid;grid-template-columns:minmax(0,1.3fr) minmax(300px,1fr);gap:56px;align-items:start;padding:48px 0 80px}@media(max-width:980px){.load-stage{grid-template-columns:1fr;gap:48px}.paste-column{border-left:0;border-top:1px solid var(--hairline);padding-left:0;padding-top:32px}}@media(max-width:1100px){.load-page{padding:0 24px}}@media(max-width:640px){.load-page,.gate-page{padding:0 16px}.load-stage{padding:32px 0 64px}.load-stage .heading h1{font-size:34px}.analyze-field{flex-direction:column;align-items:stretch}.analyze-field input{min-height:44px}.analyze-field .btn-primary{width:100%;min-height:44px}.gate-form{flex-direction:column;align-items:stretch;width:100%;max-width:320px}.gate-form input{width:100%;min-height:44px;box-sizing:border-box}.gate-form .btn-primary{width:100%;min-height:44px}.paste-actions{flex-direction:column;align-items:stretch}.paste-actions .btn-primary{width:100%;min-height:44px}.yt-result{grid-template-columns:88px 1fr}.yt-result img,.yt-thumb-fallback{width:88px;height:50px}}.load-stage .heading{display:flex;flex-direction:column;gap:8px;margin-bottom:24px}.load-stage .heading h1{font-family:var(--font-display);font-size:44px;font-weight:400;letter-spacing:-.012em;color:var(--ink-primary);line-height:1.05}.load-stage .heading .sub{font-family:var(--font-text);font-size:14px;color:var(--ink-tertiary)}.load-stage .heading .demo-link{align-self:flex-start;-webkit-appearance:none;-moz-appearance:none;appearance:none;background:none;border:0;padding:0;margin-top:4px;font-family:var(--font-text);font-size:13px;color:var(--hand-right);cursor:pointer;border-bottom:1px solid color-mix(in oklch,var(--hand-right) 40%,transparent)}.load-stage .heading .demo-link:hover{color:var(--ink-primary)}.load-stage .heading .demo-link:focus-visible{outline:2px solid var(--ink-primary);outline-offset:2px}.song-library{display:flex;flex-direction:column;gap:6px;margin-bottom:28px}.song-library-label{color:var(--ink-tertiary)}.song-library-list{display:flex;flex-direction:column;max-height:340px;overflow-y:auto;border-top:1px solid var(--hairline)}.song-library-list .pck-song-row{-webkit-appearance:none;-moz-appearance:none;appearance:none;width:100%;font:inherit;text-align:left;background:transparent;border:0;border-bottom:1px solid var(--hairline)}.song-library-list .pck-song-row:hover{background:var(--surface-sunken)}.song-library-list .pck-song-row:focus-visible{outline:2px solid var(--ink-primary);outline-offset:-2px}.song-library-note{font-family:var(--font-text);font-size:12px;color:var(--ink-tertiary);margin-top:6px}.load-divider{height:1px;background:var(--hairline);margin:32px 0 24px}.analyze-block{display:flex;flex-direction:column;gap:12px}.analyze-block .t-label-caps{color:var(--ink-tertiary)}.analyze-field{display:flex;gap:10px;align-items:stretch}.analyze-field input{flex:1;min-width:0;background:var(--surface-sunken);border:1px solid var(--hairline);border-radius:var(--radius-1);padding:10px 14px;font-family:var(--font-text);font-size:15px;color:var(--ink-primary)}.analyze-field input::placeholder{color:var(--ink-tertiary)}.analyze-field input:focus-visible{outline:2px solid var(--ink-primary);outline-offset:1px}.analyze-field .btn-primary{white-space:nowrap}.analyze-sub{font-family:var(--font-text);font-size:13px;color:var(--ink-tertiary);line-height:1.5}.analyze-progress{display:inline-flex;align-items:center;gap:10px;color:var(--ink-secondary)}.link-btn{-webkit-appearance:none;-moz-appearance:none;appearance:none;background:none;border:0;padding:0;font:inherit;color:var(--hand-right);cursor:pointer;text-decoration:underline}.link-btn:hover{color:var(--ink-primary)}.link-btn:disabled{opacity:.5;cursor:default}.yt-search{display:flex;flex-direction:column;gap:12px;margin-bottom:28px}.yt-results{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;max-height:320px;overflow-y:auto}.yt-results li{margin:0}.yt-result{-webkit-appearance:none;-moz-appearance:none;appearance:none;width:100%;text-align:left;font:inherit;background:transparent;border:0;border-bottom:1px solid var(--hairline);display:grid;grid-template-columns:120px 1fr;gap:12px;align-items:center;padding:8px 4px;cursor:pointer;transition:background-color var(--dur-toggle) var(--ease-out)}.yt-result:hover{background:var(--surface-sunken)}.yt-result:focus-visible{outline:2px solid var(--ink-primary);outline-offset:-2px}.yt-result img,.yt-thumb-fallback{width:120px;height:68px;object-fit:cover;border-radius:var(--radius-1);display:block;background:var(--surface-sunken)}.yt-result-text{display:flex;flex-direction:column;gap:4px;min-width:0}.yt-result-title{font-family:var(--font-text);font-size:14px;color:var(--ink-primary);line-height:1.3;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}.yt-result-channel{font-family:var(--font-text);font-size:12px;color:var(--ink-tertiary)}.yt-preview{display:flex;flex-direction:column;gap:12px}.yt-embed{position:relative;width:100%;aspect-ratio:16 / 9;background:var(--surface-key-black);border-radius:var(--radius-1);overflow:hidden}.yt-embed iframe{position:absolute;top:0;right:0;bottom:0;left:0;width:100%;height:100%;border:0}.yt-preview-title{font-family:var(--font-text);font-size:14px;color:var(--ink-primary);line-height:1.3}.yt-preview-actions{display:flex;align-items:center;gap:16px}.gate-page{min-height:100vh;display:flex;flex-direction:column;max-width:1280px;margin:0 auto;padding:0 48px;box-sizing:border-box}.gate-topbar{display:flex;justify-content:flex-end;padding:28px 0 0}.gate-stage{flex:1;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:28px;padding-bottom:64px}.gate-stage .wordmark{display:inline-flex;align-items:center;gap:12px;color:var(--ink-primary)}.gate-stage .wordmark-mark{display:block;height:34px;width:auto}.gate-stage .wordmark-name{font-family:var(--font-display);font-size:28px;font-weight:400;letter-spacing:-.012em;line-height:1}.gate-intro{display:flex;flex-direction:column;align-items:center;gap:8px;margin-top:-8px}.gate-tagline{font-family:var(--font-display);font-size:var(--t-display-sm);font-weight:400;color:var(--ink-secondary);text-align:center;max-width:30ch;line-height:var(--lh-snug)}.gate-note{font-family:var(--font-text);font-size:13px;color:var(--ink-tertiary);text-align:center;max-width:44ch}.gate-form{display:flex;gap:10px}.gate-form input{width:220px;background:var(--surface-sunken);border:1px solid var(--hairline);border-radius:var(--radius-1);padding:10px 14px;font-family:var(--font-text);font-size:15px;color:var(--ink-primary)}.gate-form input:focus-visible{outline:2px solid var(--ink-primary);outline-offset:1px}.gate-form input[aria-invalid=true]{border-color:var(--hand-right)}.gate-error{font-family:var(--font-text);font-size:13px;color:var(--hand-right)}.search-field{display:flex;align-items:center;gap:14px;background:var(--surface-sunken);border:1px solid var(--hairline);border-radius:var(--radius-1);padding:18px 20px;transition:border-color var(--dur-toggle) var(--ease-out)}.search-field:focus-within{border-color:var(--ink-primary)}.search-field button.search-icon{-webkit-appearance:none;-moz-appearance:none;appearance:none;background:transparent;border:0;padding:0;margin:0;display:inline-flex;color:var(--ink-tertiary);cursor:pointer;flex-shrink:0}.search-field button.search-icon:focus-visible{outline:2px solid var(--ink-primary);outline-offset:3px}.search-field svg{width:20px;height:20px;flex-shrink:0}.search-field input{-webkit-appearance:none;-moz-appearance:none;appearance:none;background:transparent;border:0;outline:0;width:100%;font-family:var(--font-text);font-size:18px;color:var(--ink-primary);caret-color:var(--ink-primary)}.search-field input::placeholder{color:var(--ink-tertiary)}.load-status{display:flex;align-items:center;gap:10px;margin:28px 0 8px;font-family:var(--font-text);font-size:14px;color:var(--ink-tertiary)}.load-status .spinner{width:13px;height:13px;border-radius:999px;border:1.5px solid var(--hairline-strong);border-top-color:var(--ink-secondary);animation:load-spin .7s linear infinite}@keyframes load-spin{to{transform:rotate(360deg)}}.best-match-label{margin:28px 0 8px;display:block}.match-card{display:grid;grid-template-columns:1fr auto;align-items:center;gap:16px;padding:20px 22px;border:1px solid var(--ink-primary);border-radius:var(--radius-1);background:var(--surface-base);cursor:pointer;text-align:left;width:100%;font:inherit;transition:background-color var(--dur-toggle) var(--ease-out)}.match-card:hover{background:var(--surface-sunken)}.match-card:focus-visible{outline:2px solid var(--ink-primary);outline-offset:2px}.match-card.is-soft{border-color:var(--hairline-strong);cursor:default}.match-card .title{font-family:var(--font-display);font-size:24px;letter-spacing:-.012em;color:var(--ink-primary);line-height:1.1}.match-card .artist{font-family:var(--font-text);font-size:14px;color:var(--ink-tertiary);margin-top:4px}.match-card .key-tag{font-family:var(--font-display);font-size:22px;color:var(--ink-primary);padding:4px 12px;border:1px solid var(--hairline-strong);border-radius:var(--radius-2);line-height:1}.alts-label{margin:24px 0 4px;display:block}.alts-list{display:flex;flex-direction:column}.alt-row{display:grid;grid-template-columns:1fr auto;gap:14px;align-items:center;padding:14px 4px;border:0;border-bottom:1px solid var(--hairline);background:transparent;text-align:left;width:100%;font:inherit;cursor:pointer;transition:background-color var(--dur-toggle) var(--ease-out),padding var(--dur-toggle) var(--ease-out)}.alt-row:last-child{border-bottom:0}.alt-row:hover{padding-left:8px;padding-right:8px;background:var(--surface-sunken)}.alt-row:focus-visible{outline:2px solid var(--ink-primary);outline-offset:-2px}.alt-row .label-left{display:flex;align-items:baseline;gap:10px}.alt-row .v-label{font-family:var(--font-text);font-size:14px;color:var(--ink-secondary)}.alt-row .v-detail{font-family:var(--font-text);font-size:12px;color:var(--ink-tertiary)}.alt-row .key-tag{font-family:var(--font-display);font-size:16px;color:var(--ink-secondary)}.paste-column{border-left:1px solid var(--hairline);padding-left:40px;align-self:stretch;display:flex;flex-direction:column;gap:12px}.paste-column .head{display:flex;flex-direction:column;gap:6px;margin-bottom:16px}.paste-column h2{font-family:var(--font-display);font-size:24px;font-weight:400;letter-spacing:-.012em;color:var(--ink-primary)}.paste-column .sub{font-size:13px;color:var(--ink-tertiary)}.paste-area{background:var(--surface-sunken);border:1px solid var(--hairline);border-radius:var(--radius-1);padding:14px 16px;font-family:var(--font-text);font-variant-numeric:tabular-nums;font-size:14px;color:var(--ink-primary);line-height:1.7;letter-spacing:.01em;min-height:240px;resize:vertical;outline:0;transition:border-color var(--dur-toggle) var(--ease-out);white-space:pre}.paste-area:focus{border-color:var(--ink-primary)}.paste-area::placeholder{color:var(--ink-tertiary)}.paste-actions{display:flex;align-items:center;justify-content:space-between;gap:12px;margin-top:8px}.btn-primary{-webkit-appearance:none;-moz-appearance:none;appearance:none;box-sizing:border-box;background:var(--ink-primary);color:var(--surface-base);border:0;border-radius:var(--radius-1);padding:12px 18px;font-family:var(--font-text);font-size:14px;cursor:pointer;transition:background-color var(--dur-toggle) var(--ease-out)}.btn-primary:hover{background:color-mix(in oklch,var(--ink-primary) 88%,white)}.btn-primary:disabled{background:var(--hairline-strong);cursor:not-allowed;color:var(--ink-tertiary)}.btn-primary:focus-visible{outline:2px solid var(--ink-primary);outline-offset:2px}.paste-hint{font-family:var(--font-text);font-size:12px;color:var(--ink-tertiary)}.paste-error{font-family:var(--font-text);font-size:13px;color:var(--ink-secondary);margin-top:4px}.fetch-banner{display:flex;align-items:center;gap:12px;padding:10px 14px;margin-bottom:24px;border:1px solid var(--hairline);border-radius:var(--radius-1);background:var(--surface-raised);font-family:var(--font-text);font-size:13px;color:var(--ink-secondary)}.fetch-banner .dot{width:6px;height:6px;background:var(--ink-secondary);border-radius:999px;flex-shrink:0}