@import"https://fonts.googleapis.com/css2?family=Fraunces:opsz,wght@9..144,500;9..144,700;9..144,900&family=Nunito:wght@400;600;700;800&family=Caveat:wght@600&display=swap";.controls{background:#fff;border-top:1px solid #f0eeec;padding:0 20px 16px;-webkit-user-select:none;user-select:none}.progress-track{height:3px;background:#f0eeec;border-radius:2px;margin-bottom:12px;overflow:hidden}.progress-fill{height:100%;background:linear-gradient(90deg,#ea580c,#f97316);border-radius:2px;transition:width .2s ease}.selectors-row{display:flex;gap:8px;margin-bottom:10px}.selector{flex:1;font-size:12px;font-weight:500;padding:6px 24px 6px 10px;border-radius:8px;border:1px solid #e7e5e4;background:#fafaf9;color:#44403c;cursor:pointer;font-family:inherit;appearance:none;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='6'%3E%3Cpath d='M0 0l5 6 5-6z' fill='%2378716c'/%3E%3C/svg%3E");background-repeat:no-repeat;background-position:right 8px center}.selector:hover{border-color:#d6d3d1}.selector:focus{outline:none;border-color:#ea580c;box-shadow:0 0 0 2px #ea580c1a}.controls-row{display:flex;align-items:center;justify-content:space-between}.counter{font-size:13px;font-weight:600;color:#78716c;min-width:70px;font-variant-numeric:tabular-nums;font-family:SF Mono,Fira Code,monospace}.counter-sep{color:#d6d3d1;margin:0 1px}.transport{display:flex;align-items:center;gap:8px}.transport-btn{width:36px;height:36px;border-radius:50%;border:none;background:transparent;color:#78716c;cursor:pointer;display:flex;align-items:center;justify-content:center;transition:all .15s ease}.transport-btn:hover{background:#f5f5f4;color:#1c1917}.transport-btn:disabled{opacity:.3;cursor:default}.transport-btn:disabled:hover{background:transparent}.play-btn{width:48px;height:48px;border-radius:50%;border:none;background:#1c1917;color:#fff;cursor:pointer;display:flex;align-items:center;justify-content:center;transition:all .15s ease;box-shadow:0 2px 8px #1c191733}.play-btn:hover{background:#292524;transform:scale(1.05);box-shadow:0 4px 12px #1c19174d}.play-btn:active{transform:scale(.97)}.speed-chips{display:flex;gap:4px}.speed-chip{font-size:11px;font-weight:600;padding:4px 10px;border-radius:14px;cursor:pointer;border:1px solid #e7e5e4;background:#fff;color:#a8a29e;transition:all .15s ease;font-family:inherit}.speed-chip:hover{border-color:#d6d3d1;color:#78716c}.speed-chip.active{background:#1c1917;color:#fff;border-color:#1c1917}@keyframes string-pluck-1{0%{transform:translateY(0)}25%{transform:translateY(-2.4px)}50%{transform:translateY(1.6px)}75%{transform:translateY(-.8px)}to{transform:translateY(0)}}@keyframes string-pluck-thick{0%{transform:translateY(0)}25%{transform:translateY(-3.4px)}50%{transform:translateY(2.4px)}75%{transform:translateY(-1.2px)}to{transform:translateY(0)}}.gibson-string{transform-origin:center;transform-box:fill-box;pointer-events:none}.gibson-string.is-plucking-thin{animation:string-pluck-1 .18s ease-out}.gibson-string.is-plucking-thick{animation:string-pluck-thick .22s ease-out}@keyframes fret-flash{0%{opacity:0;transform:scale(.7)}18%{opacity:1;transform:scale(1.05)}to{opacity:0;transform:scale(1.2)}}.fret-flash-circle{transform-origin:center;transform-box:fill-box;animation:fret-flash .32s ease-out forwards}@keyframes hint-pulse{0%{opacity:.55;transform:scale(1)}50%{opacity:.95;transform:scale(1.12)}to{opacity:.55;transform:scale(1)}}.hint-ring{transform-origin:center;transform-box:fill-box;animation:hint-pulse 1.2s ease-in-out infinite}@keyframes match-pulse{0%{opacity:.4;transform:scale(.95)}50%{opacity:.95;transform:scale(1.15)}to{opacity:.4;transform:scale(.95)}}.match-ring{transform-origin:center;transform-box:fill-box;animation:match-pulse 1.4s ease-in-out infinite}@keyframes mic-blink{0%,to{opacity:1}50%{opacity:.3}}.fretboard-cell{cursor:pointer;transition:filter .12s ease}.fretboard-cell:hover .cell-hover-glow{opacity:1}.cell-hover-glow{opacity:0;transition:opacity .12s ease;pointer-events:none}.note-pill{pointer-events:none;-webkit-user-select:none;user-select:none}.tuner-peg{cursor:pointer;transition:transform .2s ease}.tuner-peg:hover{transform:rotate(-12deg);transform-origin:center;transform-box:fill-box}@keyframes open-string-glow{0%{opacity:0}30%{opacity:1}to{opacity:0}}.open-string-flash{animation:open-string-glow .5s ease-out forwards;pointer-events:none}:root{--paper-50: #fdf6e3;--paper-100: #f7ecd0;--paper-200: #ede0c0;--paper-300: #ddcfa6;--ink-900: #2b1d10;--ink-700: #4a3624;--ink-500: #76624a;--ink-300: #b39e7e;--sea-100: #c9e4f0;--sea-300: #6fb3d4;--sea-500: #2f7fa8;--sea-700: #1f3a5f;--sun-100: #fde6a8;--sun-300: #f5c84a;--sun-500: #e09a1f;--sun-700: #9a5e15;--leaf-100: #d8e9b5;--leaf-300: #8cb858;--leaf-500: #4f8a35;--leaf-700: #2d5a1d;--coral-100: #fbd5c2;--coral-300: #e98a63;--coral-500: #c34a2c;--coral-700: #7a2a13;--plum-300: #b07ab0;--plum-500: #6e3d7a;--bg-page: var(--paper-50);--bg-surface: var(--paper-100);--bg-sunken: var(--paper-200);--bg-overlay: rgba(43, 29, 16, .55);--fg-1: var(--ink-900);--fg-2: var(--ink-700);--fg-3: var(--ink-500);--fg-disabled: var(--ink-300);--fg-on-dark: var(--paper-50);--fg-on-color: var(--paper-50);--accent: var(--sea-500);--accent-hover: var(--sea-700);--accent-soft: var(--sea-100);--success: var(--leaf-500);--success-soft: var(--leaf-100);--warning: var(--sun-500);--warning-soft: var(--sun-100);--danger: var(--coral-500);--danger-soft: var(--coral-100);--border-soft: var(--paper-300);--border-strong: var(--ink-900);--font-display: "Fraunces", "Iowan Old Style", Georgia, serif;--font-body: "Nunito", ui-rounded, "SF Pro Rounded", system-ui, sans-serif;--font-hand: "Caveat", "Bradley Hand", cursive;--font-mono: ui-monospace, "SF Mono", Menlo, monospace;--fs-xs: .75rem;--fs-sm: .875rem;--fs-md: 1rem;--fs-lg: 1.125rem;--fs-xl: 1.375rem;--fs-2xl: 1.75rem;--fs-3xl: 2.25rem;--fs-4xl: 3rem;--fs-5xl: 4rem;--lh-tight: 1.1;--lh-snug: 1.25;--lh-normal: 1.5;--lh-relaxed: 1.65;--space-1: 4px;--space-2: 8px;--space-3: 12px;--space-4: 16px;--space-5: 24px;--space-6: 32px;--space-7: 48px;--space-8: 64px;--radius-sm: 6px;--radius-md: 12px;--radius-lg: 18px;--radius-xl: 24px;--radius-pill: 999px;--shadow-soft: 0 6px 16px -6px rgba(74, 54, 36, .25);--shadow-lift: 0 12px 28px -10px rgba(74, 54, 36, .3);--shadow-shelf: 0 4px 0 0 var(--ink-900);--shadow-shelf-sm: 0 2px 0 0 var(--ink-900);--shadow-inset: inset 0 2px 4px rgba(74, 54, 36, .18);--border-width: 2px;--border-width-bold: 3px;--ease-bounce: cubic-bezier(.34, 1.56, .64, 1);--ease-out: cubic-bezier(.22, .61, .36, 1);--dur-fast: .14s;--dur-med: .24s;--dur-slow: .42s}html,body{background:var(--bg-page);color:var(--fg-1);font-family:var(--font-body);font-size:var(--fs-md);line-height:var(--lh-normal);-webkit-font-smoothing:antialiased}h1,.h1{font-family:var(--font-display);font-weight:900;font-size:var(--fs-4xl);line-height:var(--lh-tight);letter-spacing:-.02em;color:var(--fg-1);margin:0}h2,.h2{font-family:var(--font-display);font-weight:700;font-size:var(--fs-3xl);line-height:var(--lh-snug);letter-spacing:-.01em;color:var(--fg-1);margin:0}h3,.h3{font-family:var(--font-display);font-weight:700;font-size:var(--fs-2xl);line-height:var(--lh-snug);color:var(--fg-1);margin:0}h4,.h4{font-family:var(--font-body);font-weight:800;font-size:var(--fs-xl);line-height:var(--lh-snug);color:var(--fg-1);margin:0}p,.body{font-family:var(--font-body);font-weight:400;font-size:var(--fs-md);line-height:var(--lh-relaxed);color:var(--fg-2);margin:0;text-wrap:pretty}.lede{font-family:var(--font-display);font-weight:500;font-size:var(--fs-xl);line-height:var(--lh-snug);color:var(--fg-2);font-style:italic}.label,label{font-family:var(--font-body);font-weight:700;font-size:var(--fs-sm);letter-spacing:.04em;text-transform:uppercase;color:var(--fg-2)}.caption{font-family:var(--font-body);font-size:var(--fs-xs);color:var(--fg-3)}.hand{font-family:var(--font-hand);font-size:var(--fs-2xl);color:var(--fg-2);transform:rotate(-2deg);display:inline-block}code,.mono{font-family:var(--font-mono);font-size:.92em;background:var(--paper-200);padding:.1em .35em;border-radius:var(--radius-sm);color:var(--ink-900)}a{color:var(--accent);text-decoration-thickness:2px;text-underline-offset:3px;transition:color var(--dur-fast) var(--ease-out)}a:hover{color:var(--accent-hover)}::selection{background:var(--sun-100);color:var(--ink-900)}