body.is-ukulele-page{--color-bg:var(--brand-pine-900);--color-surface:var(--brand-pine-700);--color-surface-light:var(--brand-pine-500);--color-text:var(--brand-text-light);--color-text-muted:var(--brand-peach-300);--color-primary:var(--brand-orange-600);--color-primary-dark:var(--brand-orange-700);--color-danger:var(--danger);--color-on-primary:var(--on-accent);--color-success:var(--brand-pine-500);--radius:0.5rem}.uk-header{align-items:flex-end;display:flex;flex-wrap:wrap;gap:12px;justify-content:space-between;margin-bottom:24px}.uk-header>*{min-width:0}.uk-hint{color:var(--graphite);font-size:.9rem}.fretboard-editor .uk-hint{color:var(--color-text-muted)}.uk-grid{display:grid;gap:16px;grid-template-columns:repeat(auto-fill,minmax(min(100%,240px),1fr))}.uk-chord-diagram{background-color:var(--brand-pine-900);border-radius:.35rem;display:flex;justify-content:center;margin-bottom:12px;padding:10px}.uk-chord-diagram svg{height:auto;width:90px}.uk-form{max-width:480px;padding:24px}.uk-form,.uk-settings{background-color:var(--sheet);border:1px solid var(--rule);border-radius:var(--radius)}.uk-settings{margin-bottom:24px;padding:4px 20px}.uk-settings summary{align-items:center;color:var(--ink);cursor:pointer;display:flex;font-weight:700;gap:12px;justify-content:space-between;list-style:none;padding:12px 0}.uk-settings summary::-webkit-details-marker{display:none}.uk-settings .uk-settings-chevron{color:var(--graphite);flex-shrink:0;font-size:.75rem;transition:transform .2s ease}.uk-settings[open] .uk-settings-chevron{transform:rotate(180deg)}.uk-settings .uk-form{animation:uk-settings-reveal .15s ease;background:transparent;border:none;max-width:100%;padding:4px 0 16px}@keyframes uk-settings-reveal{0%{opacity:0;transform:translateY(-4px)}to{opacity:1;transform:translateY(0)}}.uk-danger-zone{background:rgba(239,68,68,.06);border:1px solid var(--color-danger);border-radius:.35rem;margin-top:40px;max-width:480px;padding:16px 20px}.uk-danger-zone-title{color:var(--color-danger);font-size:1rem;font-weight:700;margin-bottom:4px}.uk-danger-zone-text{color:var(--graphite);font-size:.85rem;margin-bottom:12px}.fretboard-error{align-items:center;background:rgba(239,68,68,.15);border:1px solid var(--color-danger);border-radius:6px;color:var(--color-danger);display:none;font-size:.85rem;gap:8px;margin-bottom:12px;padding:8px 12px}.fretboard-error.show{display:flex}.fretboard-error--info{background:rgba(47,107,84,.2);border-color:var(--color-success);color:var(--color-text)}.fretboard-editor{background:var(--color-bg);border-radius:var(--radius);color:var(--color-text);margin-top:12px;padding:12px}.fretboard-toolbar-wrapper{background:var(--color-bg);margin-bottom:20px;max-height:50vh;overflow-y:auto;padding-bottom:10px;padding-top:8px;position:sticky;top:62px;z-index:5}.fretboard-toolbar-wrapper::-webkit-scrollbar{height:6px}.fretboard-toolbar-wrapper::-webkit-scrollbar-track{background:transparent}.fretboard-toolbar-wrapper::-webkit-scrollbar-thumb{background:var(--color-surface-light);border-radius:3px}.fretboard-toolbar-wrapper::-webkit-scrollbar-thumb:hover{background:var(--color-primary)}.fretboard-toolbar-wrapper{scrollbar-color:var(--color-surface-light) transparent;scrollbar-width:thin}.fretboard-toolbar{align-items:center;display:flex;flex-wrap:wrap;gap:8px;margin-bottom:16px;row-gap:10px}.fretboard-toolbar-label{color:var(--color-text-muted);font-weight:600;margin-right:4px}.finger-btn{background:transparent;border:2px solid var(--finger-color,var(--color-surface-light));border-radius:50%;color:var(--color-text);cursor:pointer;flex-shrink:0;font-size:1rem;font-weight:700;height:44px;width:44px}.finger-btn.active{background:var(--finger-color,var(--color-primary));color:var(--color-on-primary)}.add-frame-btn,.copy-btn,.eraser-btn,.mark-btn,.paste-btn,.undo-btn{align-items:center;border-radius:6px;display:inline-flex;flex-shrink:0;gap:6px;justify-content:center;min-height:44px;padding:0 12px;white-space:nowrap;width:auto}.eraser-btn{border-color:var(--color-danger)}.eraser-btn.active{background:var(--color-danger);color:var(--color-on-primary)}.undo-btn:disabled{cursor:not-allowed;opacity:.4}.add-frame-btn{border-color:var(--color-primary);color:var(--color-primary)}.copy-btn:disabled,.paste-btn:disabled{cursor:not-allowed;opacity:.4}@keyframes mark-btn-pulse{0%,to{box-shadow:0 0 0 0 color-mix(in srgb,var(--color-primary) 55%,transparent)}50%{box-shadow:0 0 0 6px color-mix(in srgb,var(--color-primary) 0%,transparent)}}.copy-btn.next-step,.mark-btn.next-step,.paste-btn.next-step{animation:mark-btn-pulse 1.6s ease-out infinite;background-color:var(--color-primary);border-color:var(--color-primary);color:var(--color-on-primary)}.mark-btn.done{background-color:var(--color-success);border-color:var(--color-success);color:var(--brand-text-light)}.mark-btn.done:after{content:"✓";margin-left:2px}.clear-selection-btn{background:transparent;border:1px solid var(--color-surface-light);border-radius:6px;color:var(--color-text-muted);flex-shrink:0;height:44px;padding:0;width:44px}.clear-selection-btn:hover{border-color:var(--color-danger);color:var(--color-danger)}.copy-paste-status{background:var(--color-surface);border-radius:6px;color:var(--color-text-muted);font-size:.85rem;margin:-8px 0 16px;padding:6px 10px}.tab-playback-controls{margin-bottom:16px}.fretboard-svg{display:block;height:auto;max-width:900px;min-width:640px;width:100%}.fretboard-neck{fill:#3f2a1d}.fretboard-nut{stroke:#f1f5f9;stroke-width:4}.fretboard-fret{stroke:#cbd5e1;stroke-width:1.5}.fretboard-string{opacity:.8;stroke:#f1f5f9;stroke-width:1.5}.fretboard-marker{fill:#64748b}.fretboard-string-label{fill:var(--color-text-muted);font-size:13px;font-weight:700}.fretboard-hit{cursor:pointer;fill:transparent}.fretboard-hit:hover{fill:color-mix(in srgb,var(--color-primary) 25%,transparent)}.fretboard-hit:focus-visible{fill:color-mix(in srgb,var(--color-primary) 35%,transparent);outline:2px solid var(--color-primary);outline-offset:-2px}.fretboard-svg--readonly .fretboard-hit{cursor:default}.fretboard-svg--readonly .fretboard-hit:hover{fill:transparent}.fretboard-readonly-badge{align-items:center;background:var(--color-surface-light);border-radius:6px;color:var(--color-text-muted);display:inline-flex;font-size:.85rem;gap:6px;margin-bottom:12px;padding:6px 10px}.fretboard-note-label{fill:#0f172a;font-size:11px;font-weight:700;pointer-events:none}.fretboard-note{pointer-events:none}.timeline-wrapper{margin-top:20px}.frame-label{color:var(--color-text-muted);display:block;font-size:.85rem;margin-bottom:8px}.timeline{display:flex;flex-direction:column;gap:10px}.timeline-stave{align-items:center;display:flex;flex-wrap:wrap;gap:6px}.timeline-stave-label{color:var(--color-text-muted);font-size:.75rem;font-variant-numeric:tabular-nums;min-width:44px}.frame-btn{background:transparent;border:1px solid var(--color-surface-light);border-radius:6px;color:var(--color-text);cursor:pointer;flex-shrink:0;font-weight:600;height:40px;min-width:40px;padding:0 8px;position:relative}.frame-btn.active{background:var(--color-primary);border-color:var(--color-primary);color:var(--color-on-primary)}.frame-btn.selected{background:color-mix(in srgb,var(--color-primary) 25%,transparent);border-color:var(--color-primary)}.frame-btn.selection-end:after,.frame-btn.selection-start:after{background:var(--color-success);border-radius:50%;color:#fff;font-size:.6rem;height:16px;line-height:16px;position:absolute;right:-6px;text-align:center;top:-8px;width:16px}.frame-btn.selection-start:after{content:"D"}.frame-btn.selection-end:after{content:"F"}.frame-btn.selection-start.selection-end:after{border-radius:8px;content:"D+F";padding:0 4px;width:auto}.frame-btn.paste-preview{outline:2px dashed var(--color-primary);outline-offset:2px}.frame-add-btn{border-color:var(--color-primary);color:var(--color-primary)}.staff-break-btn{align-self:center;background:transparent;border:1px dashed var(--color-surface-light);border-radius:4px;color:var(--color-text-muted);cursor:pointer;font-size:.85rem;height:32px;line-height:1;padding:0;width:20px}.staff-break-btn.active{background:color-mix(in srgb,var(--color-primary) 15%,transparent);border-color:var(--color-primary);border-style:solid;color:var(--color-primary)}.rest-gap-btn{align-self:center;background:transparent;border:1px dashed var(--color-surface-light);border-radius:4px;color:var(--color-text-muted);cursor:pointer;font-family:Consolas,Courier New,monospace;font-size:.85rem;height:32px;line-height:1;min-width:20px;padding:0 4px}.rest-gap-btn.active{background:color-mix(in srgb,var(--color-primary) 15%,transparent);border-color:var(--color-primary);border-style:solid;color:var(--color-primary)}.ascii-tab{background:var(--brand-pine-900);border-radius:6px;color:var(--color-text);font-family:Consolas,Courier New,monospace;font-size:.75rem;overflow-x:auto;padding:12px}@media(max-width:640px){.uk-header{align-items:stretch;flex-direction:column}.uk-form{max-width:100%}}@media(min-width:641px){.fretboard-editor{padding:20px}.finger-btn{height:36px;width:36px}.add-frame-btn,.copy-btn,.eraser-btn,.mark-btn,.paste-btn,.undo-btn{height:auto;min-height:0;width:auto}.clear-selection-btn{height:28px;width:28px}.frame-btn{height:32px;min-width:32px}.ascii-tab{font-size:.9rem;padding:16px}.fretboard-toolbar-wrapper{max-height:none;overflow-y:visible}}.fretboard-board{overflow-x:auto;-webkit-overflow-scrolling:touch;border-radius:6px;margin:0 -4px;padding:4px 4px 12px;position:relative}.fretboard-board::-webkit-scrollbar{height:6px}.fretboard-board::-webkit-scrollbar-track{background:transparent}.fretboard-board::-webkit-scrollbar-thumb{background:var(--color-surface-light);border-radius:3px}.fretboard-board::-webkit-scrollbar-thumb:hover{background:var(--color-primary)}.fretboard-board{scrollbar-color:var(--color-surface-light) transparent;scrollbar-width:thin}.chord-picker{align-items:stretch;background:var(--brand-pine-900);border:1px solid var(--color-surface-light);border-radius:8px;display:inline-flex;overflow:hidden}.chord-select{appearance:none;-webkit-appearance:none;background:transparent;background-image:url("data:image/svg+xml;utf8,<svg xmlns=%27http://www.w3.org/2000/svg%27 width=%2710%27 height=%276%27 viewBox=%270 0 10 6%27><path d=%27M1 1l4 4 4-4%27 stroke=%27%23F6CBAE%27 stroke-width=%271.5%27 fill=%27none%27 stroke-linecap=%27round%27 stroke-linejoin=%27round%27/></svg>");background-position:right 14px center;background-repeat:no-repeat;border:none;color:var(--color-text);cursor:pointer;font-size:.95rem;font-weight:600;height:44px;padding:0 36px 0 14px}.chord-select:hover{background-color:var(--color-surface-light)}.chord-select:focus{box-shadow:inset 0 0 0 2px var(--color-primary);outline:none}.chord-select option{background:var(--brand-pine-700);color:var(--color-text)}.insert-chord-btn{background:var(--color-primary);border:none;border-left:1px solid var(--color-surface-light);color:var(--color-on-primary);cursor:pointer;font-weight:700;height:44px;padding:0 18px;transition:background .15s ease;white-space:nowrap}.insert-chord-btn:hover{background:var(--color-primary-dark)}.insert-chord-btn:active{transform:translateY(1px)}@media(max-width:640px){.chord-picker{margin-top:8px;width:100%}.chord-select{flex:1}}.key-groups{display:grid;gap:16px;grid-template-columns:repeat(auto-fill,minmax(280px,1fr))}.key-card h2{color:var(--color-primary);margin:0 0 14px}.key-card--link{display:block;text-decoration:none;transition:border-color .15s ease,transform .1s ease}.key-card--link:hover{border-color:var(--color-primary);transform:translateY(-2px)}.key-card-chip-list{display:flex;flex-wrap:wrap;gap:6px}.missing-chords-section{border-top:1px solid var(--color-surface-light);margin-top:16px;padding-top:14px}.chord-tiles{display:grid;gap:10px;grid-template-columns:repeat(auto-fill,minmax(88px,1fr))}.chord-tile{align-items:center;background:var(--color-bg);border:1px solid var(--color-surface-light);border-radius:8px;display:flex;flex-direction:column;padding:8px 6px 6px;text-decoration:none;transition:border-color .15s ease,transform .1s ease}.chord-tile:hover{border-color:var(--color-primary);transform:translateY(-2px)}.chord-diagram-svg{height:auto;width:100%}.chord-diagram-nut{stroke:#e2e8f0;stroke-width:3}.chord-diagram-fret{stroke:#475569;stroke-width:1}.chord-diagram-string{stroke:#64748b;stroke-width:1}.chord-diagram-position,.chord-diagram-string-label{fill:var(--color-text-muted);font-size:8px;font-weight:700}.chord-diagram-open{fill:none;stroke:#e2e8f0;stroke-width:1.5}.chord-diagram-finger{fill:#0f172a;font-size:8px;font-weight:700;pointer-events:none}.chord-tile-footer{align-items:center;display:flex;gap:6px;margin-top:4px}.chord-tile-name{color:var(--color-text);font-size:.9rem;font-weight:700}.chord-tile-degree{background:var(--color-surface-light);border-radius:8px;color:var(--color-text-muted);font-size:.65rem;font-weight:700;padding:1px 6px}.scale-section{border-top:1px solid var(--color-surface-light);margin-top:20px;padding-top:16px}.scale-title{color:var(--color-text-muted);font-size:.8rem;font-weight:700;letter-spacing:.05em;margin:0 0 10px;text-transform:uppercase}.scale-diagram-wrapper{overflow-x:auto;position:relative;-webkit-overflow-scrolling:touch;background:var(--brand-pine-900);border-radius:8px}.scale-diagram-wrapper::-webkit-scrollbar{height:6px}.scale-diagram-wrapper::-webkit-scrollbar-track{background:transparent}.scale-diagram-wrapper::-webkit-scrollbar-thumb{background:var(--color-surface-light);border-radius:3px}.scale-diagram-wrapper::-webkit-scrollbar-thumb:hover{background:var(--color-primary)}.scale-diagram-wrapper{scrollbar-color:var(--color-surface-light) transparent;scrollbar-width:thin}.scale-diagram-svg{display:block;height:auto;min-width:520px;width:100%}.scale-diagram-neck{fill:#3f2a1d}.scale-diagram-nut{stroke:#f1f5f9;stroke-width:4}.scale-diagram-fret{stroke:#cbd5e1;stroke-width:1.5}.scale-diagram-string{opacity:.8;stroke:#f1f5f9;stroke-width:1.5}.scale-diagram-marker{fill:#64748b}.scale-diagram-string-label{fill:var(--color-text-muted);font-size:13px;font-weight:700}.scale-diagram-note{fill:#3b82f6;filter:drop-shadow(0 1px 2px rgba(0,0,0,.4));stroke:#fff;stroke-width:1.5}.scale-diagram-root{fill:var(--color-primary);filter:drop-shadow(0 2px 3px rgba(0,0,0,.5));stroke:#fff;stroke-width:2}.scale-diagram-note-label{fill:#0f172a;font-size:11px;font-weight:700;pointer-events:none}.scale-caption{color:var(--color-text-muted);font-size:.8rem;margin:10px 0 0}.scale-caption strong{color:var(--color-text)}.pattern-preview{display:flex;flex-wrap:wrap;gap:4px;margin:8px 0}.strum-mini{align-items:center;border-radius:4px;display:inline-flex;font-size:.85rem;font-weight:700;height:22px;justify-content:center;width:22px}.strum-mini-down{background:rgba(249,115,22,.2);color:#f97316}.strum-mini-up{background:rgba(59,130,246,.2);color:#3b82f6}.strum-mini-mute{background:rgba(239,68,68,.2);color:#ef4444}.strum-mini-rest{background:var(--color-surface-light);color:var(--color-text-muted)}.strumming-player{background:var(--color-surface);border-radius:var(--radius);margin-top:12px;padding:24px}.strumming-controls{align-items:center;display:flex;flex-wrap:wrap;gap:24px;margin-bottom:24px}.strumming-play-btn{min-width:120px}.tempo-control{align-items:center;color:var(--color-text-muted);display:flex;font-size:.9rem;font-weight:600;gap:10px}.tempo-control input[type=range]{accent-color:var(--color-primary)}.strum-row{flex-wrap:wrap;gap:10px;padding:20px 0}.strum-row,.strum-symbol{display:flex;justify-content:center}.strum-symbol{align-items:center;border:2px solid var(--color-surface-light);border-radius:10px;font-size:1.6rem;font-weight:700;height:56px;transition:transform .08s ease,background .08s ease,border-color .08s ease;width:56px}.strum-symbol-down{color:#f97316}.strum-symbol-up{color:#3b82f6}.strum-symbol-mute{color:#ef4444}.strum-symbol-rest{color:var(--color-text-muted)}.strum-symbol-active{background:hsla(0,0%,100%,.08);border-color:currentColor;transform:scale(1.15)}