:root{--paper: #e9e4d2;--paper-raised: #ddd6bd;--paper-sunken: #d4cbac;--paper-overlay: rgba(34, 40, 32, .06);--ink: #222820;--ink-soft: #525a47;--ink-mute: #8a907d;--on-accent: #f3efde;--accent: #3f5a3a;--accent-soft: #5a7a52;--accent-wash: rgba(63, 90, 58, .08);--gold: #bb8a3e;--gold-soft: rgba(187, 138, 62, .18);--danger: #a64528;--success: #5a7a52;--note-color-1: #c24f3d;--note-color-2: #b66a24;--note-color-3: #a28722;--note-color-4: #6f8f35;--note-color-5: #2f8a61;--note-color-6: #23827f;--note-color-7: #2d76a3;--note-color-8: #536ec0;--note-color-9: #7a5ab3;--note-color-10: #9a4e91;--note-color-11: #b14874;--note-color-12: #9b5b45;--border-soft: rgba(34, 40, 32, .18);--border-strong: rgba(34, 40, 32, .42);--border-dashed: rgba(82, 90, 71, .35);--shadow-1: 0 1px 2px rgba(34,40,32,.06), 0 4px 18px rgba(34,40,32,.1);--shadow-2: 0 2px 4px rgba(34,40,32,.08), 0 12px 32px rgba(34,40,32,.14);--shadow-inset: inset 0 0 60px rgba(187, 138, 62, .05);--shadow-pressed: inset 0 1px 2px rgba(34,40,32,.18);--surface-page: var(--paper);--surface-raised: var(--paper-raised);--surface-overlay: var(--paper-overlay);--font-display: "Spectral", Georgia, "Times New Roman", serif;--font-mono: "IBM Plex Mono", "SF Mono", Menlo, Consolas, monospace;--text-2xs: 10px;--text-xs: 11px;--text-sm: 13px;--text-md: 15px;--text-lg: 18px;--text-xl: 24px;--text-2xl: clamp(22px, 5vw, 32px);--text-3xl: clamp(44px, 12vw, 76px);--leading-tight: 1.05;--leading-base: 1.4;--leading-loose: 1.55;--tracking-tight: -.03em;--tracking-snug: -.01em;--tracking-base: 0;--tracking-wide: .12em;--tracking-wider: .18em;--tracking-widest: .24em;--space-1: 4px;--space-2: 8px;--space-3: 12px;--space-4: 16px;--space-5: 20px;--space-6: 28px;--space-7: 40px;--space-8: 56px;--radius-xs: 2px;--radius-sm: 4px;--radius-md: 8px;--radius-pill: 999px;--duration-fast: .14s;--duration-base: .22s;--duration-slow: .36s;--ease-default: cubic-bezier(.2, 0, 0, 1);--ease-spring: cubic-bezier(.5, 1.6, .4, 1);--tap-target: 44px;--paper-grain: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='200' height='200'%3E%3Cfilter id='n'%3E%3CfeTurbulence baseFrequency='0.85' numOctaves='2' seed='4'/%3E%3CfeColorMatrix values='0 0 0 0 0.13 0 0 0 0 0.16 0 0 0 0 0.12 0 0 0 0.06 0'/%3E%3C/filter%3E%3Crect width='200' height='200' filter='url(%23n)'/%3E%3C/svg%3E")}[data-theme=stage]{--paper: #161914;--paper-raised: #1f231c;--paper-sunken: #11130f;--paper-overlay: rgba(227, 224, 200, .05);--ink: #e3e0c8;--ink-soft: #a0a386;--ink-mute: #6c7060;--on-accent: #161914;--accent: #7ea073;--accent-soft: #9bb78f;--accent-wash: rgba(126, 160, 115, .1);--gold: #d6a958;--gold-soft: rgba(214, 169, 88, .2);--danger: #d97757;--success: #9bb78f;--note-color-1: #e06d58;--note-color-2: #d78a37;--note-color-3: #c8ad42;--note-color-4: #9cbd5a;--note-color-5: #63bd8f;--note-color-6: #4eb8b4;--note-color-7: #5da7d3;--note-color-8: #8396e0;--note-color-9: #a688d5;--note-color-10: #c47bb9;--note-color-11: #d8789d;--note-color-12: #c98970;--border-soft: rgba(227, 224, 200, .12);--border-strong: rgba(227, 224, 200, .32);--border-dashed: rgba(160, 163, 134, .3);--shadow-1: 0 1px 2px rgba(0,0,0,.4), 0 4px 18px rgba(0,0,0,.4);--shadow-2: 0 2px 4px rgba(0,0,0,.5), 0 12px 32px rgba(0,0,0,.55);--shadow-inset: inset 0 0 60px rgba(214, 169, 88, .04)}*{margin:0;padding:0;box-sizing:border-box}*,*:before,*:after{-webkit-tap-highlight-color:transparent}button,[role=button],.root-tile,.toggle-switch{-webkit-tap-highlight-color:transparent;-webkit-touch-callout:none;user-select:none}html,body,#app{background:var(--paper);color:var(--ink);font-family:var(--font-display);height:100vh;height:100svh;height:100dvh;text-rendering:optimizeLegibility;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;overflow:hidden}body{background-image:radial-gradient(circle at 18% 22%,var(--gold-soft) 0%,transparent 55%),radial-gradient(circle at 82% 78%,var(--accent-wash) 0%,transparent 60%),var(--paper-grain);background-attachment:fixed}button,input,select{font:inherit;color:inherit}button{cursor:pointer;background:none;border:none}button:focus-visible,[role=button]:focus-visible{outline:2px solid var(--accent);outline-offset:2px;border-radius:var(--radius-xs)}@supports (padding: max(0px)){body{padding-left:max(0px,env(safe-area-inset-left));padding-right:max(0px,env(safe-area-inset-right))}}.btn{display:inline-flex;align-items:center;justify-content:center;gap:var(--space-2);border:1px solid currentColor;border-radius:var(--radius-xs);font-family:var(--font-display);font-weight:600;font-size:var(--text-md);line-height:1;padding:var(--space-3) var(--space-5);min-height:var(--tap-target);transition:background var(--duration-fast) var(--ease-default),color var(--duration-fast) var(--ease-default),border-color var(--duration-fast) var(--ease-default),transform var(--duration-fast) var(--ease-default)}.btn:active:not(:disabled){transform:translateY(1px)}.btn:disabled{opacity:.4;cursor:not-allowed}.btn--primary{background:var(--accent);color:var(--on-accent);border-color:var(--accent)}.btn--primary:hover:not(:disabled){background:var(--accent-soft);border-color:var(--accent-soft)}.btn--ghost{background:transparent;color:var(--ink);border-color:var(--ink)}.btn--ghost:hover:not(:disabled){background:var(--ink);color:var(--on-accent)}.btn--pill{display:inline-flex;align-items:center;justify-content:center;font-family:var(--font-mono);font-weight:500;font-size:var(--text-xs);letter-spacing:var(--tracking-wide);text-transform:uppercase;padding:6px 10px;min-height:28px;background:transparent;color:var(--ink-soft);border:1px solid var(--ink-soft);border-radius:var(--radius-pill);transition:all var(--duration-fast) var(--ease-default)}.btn--pill:hover:not(:disabled){color:var(--ink);border-color:var(--ink)}.btn--pill.btn--active{background:var(--accent);color:var(--on-accent);border-color:var(--accent)}.btn--pill.btn--highlight{box-shadow:0 0 0 2px var(--gold-soft)}.btn--icon{background:transparent;border-color:transparent;color:var(--ink-soft);width:var(--tap-target);height:var(--tap-target);min-height:var(--tap-target);padding:0;border-radius:var(--radius-sm);font:600 var(--text-md) / 1 var(--font-mono)}.btn--icon:hover:not(:disabled){background:var(--paper-overlay);color:var(--ink)}.toggle-switch{position:relative;display:inline-block;flex-shrink:0;width:40px;height:22px;border-radius:var(--radius-pill);background:var(--paper-sunken);border:1px solid var(--ink-soft);cursor:pointer;transition:background var(--duration-base),border-color var(--duration-base)}.toggle-switch:after{content:"";position:absolute;top:2px;left:2px;width:16px;height:16px;border-radius:50%;background:var(--ink-soft);transition:left var(--duration-base) var(--ease-spring),background var(--duration-base)}.toggle-switch--on{background:var(--accent);border-color:var(--accent)}.toggle-switch--on:after{left:20px;background:var(--on-accent)}.app-shell{max-width:720px;margin:0 auto;padding:max(var(--space-3),env(safe-area-inset-top)) 0 max(var(--space-3),env(safe-area-inset-bottom));height:100%;display:flex;flex-direction:column}.app-shell__topbar{display:flex;justify-content:space-between;align-items:center;padding:0 var(--space-5);margin-bottom:var(--space-3);gap:var(--space-3);flex-wrap:wrap}.app-shell__nav{display:flex;gap:var(--space-2);justify-content:center;padding:0 var(--space-5);margin-bottom:var(--space-3)}.app-shell__toolbar{display:flex;align-items:center;justify-content:center;gap:var(--space-3);padding:0 var(--space-5);margin-bottom:var(--space-3)}.app-shell__content{flex:1;display:flex;flex-direction:column;min-height:0;padding:0 var(--space-5);overflow:clip}.stage{position:relative;background:var(--paper-raised);border:1px solid var(--ink-soft);border-radius:var(--radius-sm);padding:var(--space-5);box-shadow:var(--shadow-1),var(--shadow-inset);flex:1;display:flex;flex-direction:column;min-height:0}.stage:before{content:"";position:absolute;inset:6px;border:1px dashed var(--border-dashed);border-radius:var(--radius-xs);pointer-events:none}.stage__body{position:relative;flex:1;display:flex;flex-direction:column;min-height:0}.topbar{display:contents}.topbar__title{font-family:var(--font-display);font-weight:700;font-size:var(--text-2xl);line-height:1;letter-spacing:var(--tracking-tight);flex-shrink:0}.topbar__title em{font-style:italic;color:var(--accent);font-weight:500}.topbar__cluster{display:inline-flex;align-items:center;gap:var(--space-2);flex-wrap:wrap;justify-content:flex-end}.topbar__theme{width:34px;height:34px;min-height:34px;font-family:var(--font-mono);font-size:var(--text-lg);line-height:1;color:var(--ink-soft);border-radius:var(--radius-xs)}.topbar__theme[aria-pressed=true]{color:var(--gold)}.set-switch{display:inline-flex;align-items:center;gap:2px;padding:3px;background:var(--paper-overlay);border-radius:var(--radius-xs)}.set-switch .btn--pill{border-color:transparent;border-radius:var(--radius-xs);padding:4px 8px;min-height:28px;font-size:var(--text-2xs);letter-spacing:var(--tracking-wider)}.set-switch .btn--pill.btn--active{background:var(--paper);color:var(--ink);border-color:transparent;box-shadow:var(--shadow-1)}.set-switch .btn--pill:hover:not(:disabled){background:var(--paper-overlay);color:var(--ink)}.topbar__select{height:34px;min-width:58px;padding:4px 26px 4px 10px;border:1px solid transparent;border-radius:var(--radius-xs);background:linear-gradient(45deg,transparent 50%,var(--ink-soft) 50%) right 12px center / 5px 5px no-repeat,linear-gradient(135deg,var(--ink-soft) 50%,transparent 50%) right 7px center / 5px 5px no-repeat,var(--paper-overlay);color:var(--ink);font-family:var(--font-mono);font-size:var(--text-2xs);font-weight:500;line-height:1;letter-spacing:var(--tracking-wider);text-transform:uppercase;appearance:none}.topbar__select:hover{background-color:var(--paper-raised)}.topbar__select:focus-visible{outline:2px solid var(--accent);outline-offset:2px}.tabbar{display:flex;gap:var(--space-2);width:100%}.tabbar__tab{flex:1}.tabbar .btn{min-width:0;padding:var(--space-3) var(--space-2);font-size:var(--text-sm);line-height:1.1;white-space:normal}.tabbar .btn--ghost.btn--active{background:var(--ink);color:var(--on-accent);border-color:var(--ink)}.chord-card{display:flex;flex-direction:column;flex:1;min-height:0;gap:var(--space-3)}.chord-card__header{flex-shrink:0;display:flex;flex-direction:column;align-items:center;justify-content:center;min-height:calc(var(--text-3xl) * var(--leading-tight) + var(--text-xs) * 1.4 + var(--space-1))}.chord-card__title{display:flex;align-items:center;justify-content:center;gap:var(--space-2);max-width:100%}.chord-card__name{font-family:var(--font-display);font-weight:700;font-size:var(--text-3xl);line-height:var(--leading-tight);letter-spacing:var(--tracking-tight);text-align:center;margin:0;min-width:0}.chord-card__name em{font-style:italic;color:var(--accent);font-weight:600;font-size:.92em}.chord-card__name .chord-card__sharp{font-style:italic;color:var(--accent);font-weight:600;font-size:.78em;vertical-align:.06em;padding-right:.02em}.chord-card__favorite{flex:0 0 var(--tap-target);color:var(--ink-soft);font-size:var(--text-xl)}.chord-card__favorite[hidden]{display:none}.chord-card__favorite--active{color:var(--gold)}.chord-card__meta{font-family:var(--font-mono);font-size:var(--text-xs);line-height:1.4;letter-spacing:var(--tracking-wider);color:var(--ink-soft);text-transform:uppercase;text-align:center;max-height:0;margin-top:0;opacity:0;overflow:hidden;transform:translateY(-4px);transition:max-height var(--duration-base) var(--ease-default),margin-top var(--duration-base) var(--ease-default),opacity var(--duration-fast) ease-out,transform var(--duration-base) var(--ease-default)}.chord-card__meta--shown{max-height:2em;margin-top:var(--space-1);opacity:1;transform:translateY(0)}.chord-card__row{display:flex;gap:var(--space-2);justify-content:safe center;align-items:center;flex-wrap:nowrap;overflow-x:auto;overflow-y:visible;padding:2px 0;scrollbar-width:none;min-height:32px;-webkit-mask-image:linear-gradient(to right,transparent,#000 20px,#000 calc(100% - 20px),transparent);mask-image:linear-gradient(to right,transparent,#000 20px,#000 calc(100% - 20px),transparent)}.chord-card__row::-webkit-scrollbar{display:none}.chord-card__row>*{flex-shrink:0}.chord-card__row-btns{display:flex;gap:var(--space-2);flex-wrap:nowrap;min-width:max-content}.chord-card__diagram-settings{flex-shrink:0;display:inline-flex;align-items:center;justify-content:center;gap:var(--space-2);min-height:30px;font-family:var(--font-mono);font-size:var(--text-xs);line-height:1;letter-spacing:var(--tracking-wide);color:var(--ink-soft);text-transform:uppercase}.chord-card__diagram-settings[hidden]{display:none}.chord-card__diagram-settings-label{white-space:nowrap}.chord-card__diagram{flex:1;display:flex;justify-content:center;align-items:center;margin:var(--space-2) 0;min-height:0;position:relative;overflow:hidden}.chord-card__diagram-content{width:100%;height:100%;display:flex;align-items:center;justify-content:center;min-height:0;transform-origin:center}.chord-card__diagram-content--enter{animation:chord-card-diagram-enter var(--duration-base) var(--ease-default) both}.chord-card__diagram-content--exit{animation:chord-card-diagram-exit .16s var(--ease-default) forwards}@keyframes chord-card-diagram-enter{0%{opacity:0;transform:scale(.94)}to{opacity:1;transform:scale(1)}}@keyframes chord-card-diagram-exit{0%{opacity:1;transform:scale(1)}to{opacity:0;transform:scale(.94)}}.chord-card__diagram .fretboard-diagram{display:block;width:100%;height:auto;max-width:240px;max-height:100%;aspect-ratio:5 / 6}.chord-card__diagram--interactive{cursor:pointer;border-radius:var(--radius-sm);transition:transform 80ms ease,background .12s ease;-webkit-tap-highlight-color:transparent}.chord-card__diagram--interactive:hover{background:var(--paper-raised)}.chord-card__diagram--interactive:active{transform:scale(.98)}.chord-card__diagram--interactive:focus-visible{outline:2px solid var(--accent);outline-offset:2px}.root-tile{background:var(--paper-raised);border:1px solid var(--border-strong);border-radius:var(--radius-sm);padding:var(--space-4) var(--space-2);text-align:center;cursor:pointer;display:flex;flex-direction:column;gap:var(--space-1);align-items:center;justify-content:center;min-height:var(--tap-target);transition:border-color var(--duration-base),background var(--duration-base),transform var(--duration-fast)}.root-tile:hover{border-color:var(--accent)}.root-tile:active{transform:scale(.98)}.root-tile--active{border-color:var(--accent);background:var(--accent-wash)}.root-tile__name{font-family:var(--font-display);font-weight:700;font-size:var(--text-xl);line-height:1;letter-spacing:var(--tracking-tight)}.root-tile__name em{font-style:italic;color:var(--accent);font-weight:600}.reveal-overlay{width:100%;max-width:240px;aspect-ratio:5 / 6;max-height:100%;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:var(--space-3);border:2px dashed var(--ink-soft);border-radius:var(--radius-sm);background:var(--accent-wash);color:var(--ink-soft);cursor:pointer;padding:var(--space-5);font-family:inherit;transition:all var(--duration-base) var(--ease-default)}.reveal-overlay:hover{border-color:var(--accent);color:var(--accent);background:var(--paper-overlay)}.reveal-overlay__icon{width:36px;height:36px;border-radius:50%;border:1.5px solid currentColor;display:flex;align-items:center;justify-content:center;font-family:var(--font-mono);font-size:16px}.reveal-overlay__text{font-family:var(--font-mono);font-size:var(--text-xs);letter-spacing:var(--tracking-wider);color:inherit;text-transform:uppercase;text-align:center}.quiz-toolbar{display:flex;align-items:center;justify-content:space-between;gap:var(--space-3);flex-wrap:wrap;margin-bottom:var(--space-4);font-family:var(--font-mono);font-size:var(--text-xs);letter-spacing:var(--tracking-wide);color:var(--ink-soft);text-transform:uppercase}.quiz-toolbar__group{display:inline-flex;align-items:center;justify-content:center;gap:var(--space-2);min-width:0}.quiz-toolbar__group:first-child{flex:1 1 100%;flex-wrap:wrap}.quiz-toolbar__caption{flex-shrink:0}.quiz-controls{display:flex;gap:var(--space-3);justify-content:stretch;flex-shrink:0;margin:var(--space-3) calc(-1 * var(--space-5)) 0;padding:0 var(--space-5)}.quiz-controls>.btn--lg{flex:1}.quiz-empty{flex:1;display:flex;align-items:center;justify-content:center;text-align:center;padding:var(--space-5);color:var(--ink-soft);font-family:var(--font-mono);font-size:var(--text-xs);letter-spacing:var(--tracking-wider);text-transform:uppercase;line-height:var(--leading-base)}.btn--lg{height:88px;min-height:88px;font-size:var(--text-lg);letter-spacing:var(--tracking-wide);border-radius:var(--radius-sm)}.loops{display:flex;flex-direction:column;gap:var(--space-3);flex:1;min-height:0}.loops__rail{display:flex;gap:var(--space-3);overflow-x:auto;overflow-y:visible;-webkit-overflow-scrolling:touch;scrollbar-width:none;margin:0 calc(-1 * var(--space-5));padding:var(--space-1) var(--space-5) var(--space-2);flex-shrink:0;scroll-snap-type:x mandatory;-webkit-mask-image:linear-gradient(to right,transparent,#000 28px,#000 calc(100% - 28px),transparent);mask-image:linear-gradient(to right,transparent,#000 28px,#000 calc(100% - 28px),transparent)}.loops__rail::-webkit-scrollbar{display:none}.loops__loop-tab{flex:0 0 150px;width:150px;min-height:66px;scroll-snap-align:center;display:flex;flex-direction:column;align-items:flex-start;justify-content:center;gap:var(--space-1);padding:var(--space-3);background:var(--paper-raised);border:1px solid var(--border-soft);border-radius:var(--radius-sm);box-shadow:var(--shadow-1);text-align:left;transition:border-color var(--duration-fast) var(--ease-default),background var(--duration-fast) var(--ease-default),transform var(--duration-fast) var(--ease-default)}.loops__loop-tab:hover{border-color:var(--accent)}.loops__loop-tab:active{transform:scale(.98)}.loops__loop-tab[aria-selected=true]{background:var(--accent-wash);border-color:var(--accent)}.loops__loop-title{max-width:100%;font-family:var(--font-display);font-size:var(--text-md);font-weight:700;line-height:var(--leading-tight);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.loops__loop-chords{max-width:100%;font-family:var(--font-mono);font-size:var(--text-2xs);line-height:var(--leading-base);letter-spacing:var(--tracking-wide);color:var(--ink-soft);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.loops__stage{flex:1;min-height:0;display:flex;flex-direction:column}.loops__header{display:flex;align-items:center;gap:var(--space-2);flex-shrink:0;min-height:28px}.loops__tag,.loops__round{display:inline-flex;align-items:center;justify-content:center;min-height:24px;padding:4px 8px;border-radius:var(--radius-xs);font-family:var(--font-mono);font-size:var(--text-2xs);line-height:1;letter-spacing:var(--tracking-wider);text-transform:uppercase;white-space:nowrap}.loops__tag{background:var(--ink);color:var(--on-accent)}.loops__tag--soft{background:var(--paper-overlay);color:var(--ink-soft)}.loops__round{margin-left:auto;color:var(--ink-soft);border:1px solid var(--border-soft)}.loops__change-board{flex:1;min-height:0;display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:var(--space-3);margin:var(--space-3) 0}.loops__current{min-width:0;min-height:214px;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:var(--space-3);padding:var(--space-3);border-radius:var(--radius-sm);background:var(--accent-wash);border:1px solid var(--accent);box-shadow:var(--shadow-inset);transition:background var(--duration-fast) var(--ease-default),border-color var(--duration-fast) var(--ease-default),transform var(--duration-fast) var(--ease-default)}.loops__current:hover{background:var(--paper-overlay)}.loops__current:active{transform:scale(.99)}.loops__current-info{min-width:0;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:var(--space-2)}.loops__current-name{display:block;max-width:100%;font-family:var(--font-display);font-weight:700;font-size:54px;line-height:var(--leading-tight);text-align:center;overflow-wrap:anywhere}.loops__current-sub{font-family:var(--font-mono);font-size:var(--text-xs);line-height:1;letter-spacing:var(--tracking-widest);color:var(--ink-soft)}.loops__beats{display:flex;justify-content:center;gap:var(--space-2);flex-shrink:0;min-height:12px}.loops__beat{width:9px;height:9px;border-radius:50%;background:var(--paper-sunken);border:1px solid var(--border-soft)}.loops__beat--active{background:var(--gold);border-color:var(--gold)}.loops__next{min-width:0;min-height:214px;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:var(--space-3);padding:var(--space-3);border:1px solid var(--border-soft);border-radius:var(--radius-sm);background:var(--paper-overlay);box-shadow:inset 0 0 0 1px #22282005}.loops__next-info{min-width:0;display:flex;flex-direction:column;align-items:center;gap:var(--space-1)}.loops__next-label{font-family:var(--font-mono);font-size:var(--text-2xs);line-height:1;letter-spacing:var(--tracking-wider);text-transform:uppercase;color:var(--ink-soft)}.loops__next-name{font-family:var(--font-display);font-weight:700;font-size:34px;line-height:1;text-align:center;overflow-wrap:anywhere}.loops__diagram{flex-shrink:0;display:flex;align-items:center;justify-content:center;aspect-ratio:5 / 6;border:0;border-radius:0;background:transparent;overflow:hidden}.loops__diagram .fretboard-diagram{display:block;width:100%;height:auto;max-height:100%;filter:drop-shadow(0 1px 0 rgba(34,40,32,.08))}.loops__diagram--current,.loops__diagram--next{width:min(100%,136px);padding:0}.loops__current--swap{animation:loops-current-card-swap .48s var(--ease-default) both}.loops__current--swap .loops__current-info{animation:loops-current-copy-swap .44s var(--ease-default) both}.loops__current--swap .loops__diagram{animation:loops-current-diagram-swap .52s var(--ease-default) both}.loops__next--swap{animation:loops-next-card-swap .48s var(--ease-default) both}.loops__next--swap .loops__next-info{animation:loops-next-copy-swap .44s var(--ease-default) both}.loops__next--swap .loops__diagram{animation:loops-next-diagram-swap .52s var(--ease-default) both}@keyframes loops-current-card-swap{0%{background:var(--paper-overlay);border-color:var(--gold)}to{background:var(--accent-wash);border-color:var(--accent)}}@keyframes loops-current-copy-swap{0%{opacity:.72;transform:translateY(6px)}to{opacity:1;transform:translateY(0)}}@keyframes loops-current-diagram-swap{0%{opacity:.82;transform:translateY(8px) scale(.96)}60%{opacity:1;transform:translateY(-1px) scale(1.015)}to{opacity:1;transform:translateY(0) scale(1)}}@keyframes loops-next-card-swap{0%{border-color:var(--gold-soft);background:var(--paper-raised)}to{border-color:var(--border-soft);background:var(--paper-overlay)}}@keyframes loops-next-copy-swap{0%{opacity:.68;transform:translateY(4px)}to{opacity:1;transform:translateY(0)}}@keyframes loops-next-diagram-swap{0%{opacity:.7;transform:translate(7px) scale(.97)}to{opacity:1;transform:translate(0) scale(1)}}@media (prefers-reduced-motion: reduce){.loops__current--swap,.loops__current--swap .loops__current-info,.loops__current--swap .loops__diagram,.loops__next--swap,.loops__next--swap .loops__next-info,.loops__next--swap .loops__diagram{animation:none}}@media (max-width: 380px){.loops__current-name{font-size:44px}.loops__next-name{font-size:30px}}.loops__sequence{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:var(--space-2);flex-shrink:0;margin-top:var(--space-2)}.loops__sequence-chord{min-width:0;min-height:42px;padding:var(--space-2);border:1px solid var(--border-soft);border-radius:var(--radius-xs);background:var(--paper-raised);font-family:var(--font-mono);font-size:var(--text-sm);line-height:1;overflow-wrap:anywhere;transition:background var(--duration-fast) var(--ease-default),border-color var(--duration-fast) var(--ease-default),color var(--duration-fast) var(--ease-default)}.loops__sequence-chord--active{background:var(--accent);border-color:var(--accent);color:var(--on-accent)}.loops__controls{flex-shrink:0;display:grid;grid-template-columns:1fr;gap:var(--space-3)}.loops__play{width:100%;min-height:64px;font-size:var(--text-lg);letter-spacing:var(--tracking-wide)}.loops__tempo,.loops__beat-options{display:flex;align-items:center;justify-content:center;gap:var(--space-2)}.loops__tempo{min-height:var(--tap-target)}.loops__stepper{width:var(--tap-target);min-width:var(--tap-target);padding:0;font-family:var(--font-mono);font-size:var(--text-lg)}.loops__tempo-readout{min-width:98px;min-height:var(--tap-target);display:flex;align-items:center;justify-content:center;gap:var(--space-1);border:1px solid var(--border-soft);border-radius:var(--radius-xs);background:var(--paper-overlay);font-family:var(--font-mono)}.loops__tempo-readout strong{font-size:var(--text-lg);line-height:1}.loops__tempo-readout span{font-size:var(--text-2xs);line-height:1;letter-spacing:var(--tracking-wider);color:var(--ink-soft)}.loops__beat-options .btn--pill{flex:1;max-width:112px}.browse{display:flex;flex-direction:column;gap:var(--space-3);flex:1;min-height:0}.browse-toolbar{flex-shrink:0;display:flex;align-items:center;justify-content:center;gap:var(--space-2);flex-wrap:wrap;font-family:var(--font-mono);font-size:var(--text-xs);letter-spacing:var(--tracking-wide);color:var(--ink-soft);text-transform:uppercase}.browse__stage{flex:1;display:flex;flex-direction:column;min-height:0}.browse__empty{flex:1;display:flex;align-items:center;justify-content:center;text-align:center;padding:var(--space-5);color:var(--ink-soft);font-family:var(--font-mono);font-size:var(--text-xs);letter-spacing:var(--tracking-wider);text-transform:uppercase}.root-rail{display:flex;gap:var(--space-3);overflow-x:auto;overflow-y:visible;-webkit-overflow-scrolling:touch;scrollbar-width:none;margin:0 calc(-1 * var(--space-5));padding:var(--space-2) var(--space-5) var(--space-3);flex-shrink:0;scroll-snap-type:x mandatory;-webkit-mask-image:linear-gradient(to right,transparent,#000 28px,#000 calc(100% - 28px),transparent);mask-image:linear-gradient(to right,transparent,#000 28px,#000 calc(100% - 28px),transparent)}.root-rail::-webkit-scrollbar{display:none}.root-rail .root-tile{flex:0 0 84px;width:84px;height:88px;scroll-snap-align:center;padding:var(--space-2);min-height:0}.scales{display:flex;flex-direction:column;gap:var(--space-3);flex:1;min-height:0}.scales__scale-rail{display:flex;gap:var(--space-2);overflow-x:auto;overflow-y:visible;-webkit-overflow-scrolling:touch;scrollbar-width:none;margin:0 calc(-1 * var(--space-5));padding:var(--space-1) var(--space-5) var(--space-2);flex-shrink:0;-webkit-mask-image:linear-gradient(to right,transparent,#000 24px,#000 calc(100% - 24px),transparent);mask-image:linear-gradient(to right,transparent,#000 24px,#000 calc(100% - 24px),transparent)}.scales__scale-rail::-webkit-scrollbar{display:none}.scales__scale-rail .btn--pill{flex:0 0 auto;min-width:92px;min-height:32px;border-color:var(--border-soft);background:var(--paper-overlay)}.scales__scale-rail .btn--pill.btn--active{box-shadow:var(--shadow-1)}.scales__stage{flex:1;min-height:0;display:flex;flex-direction:column}.scales__header{flex-shrink:0;display:flex;align-items:flex-start;justify-content:space-between;gap:var(--space-3);margin-bottom:var(--space-3)}.scales__title{min-width:0;font-family:var(--font-display);font-size:var(--text-xl);font-weight:700;line-height:var(--leading-tight);letter-spacing:0;overflow-wrap:anywhere}.scales__meta{flex:0 0 auto;max-width:42%;padding-top:3px;font-family:var(--font-mono);font-size:var(--text-xs);line-height:var(--leading-base);letter-spacing:var(--tracking-wide);color:var(--ink-soft);text-align:right}.scales__fretboard-scroll{flex:1;min-height:0;overflow-x:auto;overflow-y:hidden;-webkit-overflow-scrolling:touch;scrollbar-width:thin;margin:0 calc(-1 * var(--space-3));padding:var(--space-2) var(--space-3);border:1px solid var(--border-soft);border-radius:var(--radius-sm);background:linear-gradient(90deg,rgba(34,40,32,.04),transparent 24px),var(--paper-overlay);--scale-fretboard-row-height: clamp(30px, 7.2vh, 46px);--scale-fretboard-header-height: clamp(18px, 4.2vh, 26px)}.scale-fretboard{display:grid;grid-template-columns:40px repeat(var(--scale-fret-count),minmax(46px,1fr));grid-template-rows:var(--scale-fretboard-header-height) repeat(6,var(--scale-fretboard-row-height));width:100%;min-width:var(--scale-fret-min-width);height:calc(var(--scale-fretboard-header-height) + var(--scale-fretboard-row-height) * 6);align-items:stretch;font-family:var(--font-mono)}.scale-fretboard__corner,.scale-fretboard__fret,.scale-fretboard__string{display:flex;align-items:center;justify-content:center;color:var(--ink-soft);font-size:var(--text-2xs);line-height:1;letter-spacing:var(--tracking-wide)}.scale-fretboard__fret--marker{color:var(--ink);font-weight:700}.scale-fretboard__string{background:color-mix(in srgb,var(--paper-sunken) 34%,transparent);font-weight:700}.scale-fretboard__cell{position:relative;display:flex;align-items:center;justify-content:center;min-width:46px;min-height:var(--scale-fretboard-row-height);border-right:1px solid var(--border-soft)}.scale-fretboard__cell--nut{border-left:3px solid var(--ink)}.scale-fretboard__cell--nut:before{opacity:.32}.scale-fretboard__cell:before{content:"";position:absolute;left:0;right:0;top:50%;height:1px;background:var(--ink-soft);opacity:.62}.scale-fretboard__cell--marker:after{content:"";position:absolute;left:50%;bottom:4px;width:5px;height:5px;border-radius:50%;background:var(--gold);opacity:.42;transform:translate(-50%)}.scale-fretboard__note{position:relative;z-index:1;width:clamp(28px,calc(var(--scale-fretboard-row-height) - 8px),36px);height:clamp(28px,calc(var(--scale-fretboard-row-height) - 8px),36px);border:1px solid var(--border-strong);border-radius:50%;background:var(--paper-raised);color:var(--ink);display:flex;flex-direction:column;align-items:center;justify-content:center;gap:1px;box-shadow:var(--shadow-1);transition:transform var(--duration-fast) var(--ease-default),background var(--duration-fast) var(--ease-default),border-color var(--duration-fast) var(--ease-default),box-shadow var(--duration-fast) var(--ease-default)}.scale-fretboard__note:hover{border-color:var(--accent)}.scale-fretboard__note:active{transform:scale(.94)}.scale-fretboard__note--root{background:var(--accent);color:var(--on-accent);border-color:var(--accent);box-shadow:0 0 0 3px var(--accent-wash),var(--shadow-1)}.scale-fretboard__note--active{background:var(--gold);color:var(--ink);border-color:var(--gold);box-shadow:0 0 0 4px var(--gold-soft),var(--shadow-1);transform:scale(1.08)}.scale-fretboard__note-name{font-size:var(--text-xs);font-weight:700;line-height:1}.scale-fretboard__degree{font-size:8px;font-weight:600;line-height:1;opacity:.78}.scales__sequence{flex-shrink:0;display:flex;gap:var(--space-2);overflow-x:auto;overflow-y:visible;-webkit-overflow-scrolling:touch;scrollbar-width:none;margin:var(--space-3) calc(-1 * var(--space-3)) 0;padding:2px var(--space-3) 4px;-webkit-mask-image:linear-gradient(to right,transparent,#000 16px,#000 calc(100% - 16px),transparent);mask-image:linear-gradient(to right,transparent,#000 16px,#000 calc(100% - 16px),transparent)}.scales__sequence::-webkit-scrollbar{display:none}.scales__sequence-step{flex:0 0 48px;width:48px;min-height:50px;display:grid;grid-template:"idx note" 1fr "idx degree" 1fr / 14px 1fr;align-items:center;column-gap:4px;padding:5px 6px;border:1px solid var(--border-soft);border-radius:var(--radius-xs);background:var(--paper-raised);box-shadow:var(--shadow-1);transition:background var(--duration-fast) var(--ease-default),border-color var(--duration-fast) var(--ease-default),color var(--duration-fast) var(--ease-default),transform var(--duration-fast) var(--ease-default)}.scales__sequence-step:hover{border-color:var(--accent)}.scales__sequence-step:active{transform:scale(.97)}.scales__sequence-step--root{border-color:var(--accent);background:var(--accent-wash)}.scales__sequence-step--active{background:var(--gold);border-color:var(--gold);color:var(--ink);box-shadow:0 0 0 3px var(--gold-soft),var(--shadow-1)}.scales__sequence-index{grid-area:idx;font-family:var(--font-mono);font-size:9px;line-height:1;color:var(--ink-soft)}.scales__sequence-note{grid-area:note;font-family:var(--font-display);font-size:var(--text-sm);font-weight:700;line-height:1}.scales__sequence-degree{grid-area:degree;font-family:var(--font-mono);font-size:8px;font-weight:600;line-height:1;color:var(--ink-soft)}.scales__sequence-step--active .scales__sequence-index,.scales__sequence-step--active .scales__sequence-degree{color:#222820b8}.scales__readout{flex-shrink:0;min-height:42px;margin-top:var(--space-2);display:flex;align-items:center;justify-content:center;gap:var(--space-2);font-family:var(--font-mono);font-size:var(--text-xs);line-height:var(--leading-base);letter-spacing:var(--tracking-wide);color:var(--ink-soft);text-align:center;text-transform:uppercase}.scales__readout-note{font-family:var(--font-display);font-size:var(--text-xl);line-height:1;letter-spacing:0;color:var(--ink)}.scales__readout-degree{min-width:32px;min-height:26px;display:inline-flex;align-items:center;justify-content:center;padding:3px 8px;border-radius:var(--radius-pill);background:var(--accent);color:var(--on-accent);font-weight:700}.scales__readout-position,.scales__readout-summary{min-width:0;overflow-wrap:anywhere}.scales__controls{flex-shrink:0;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:var(--space-2)}.scales__controls .btn{min-width:0;min-height:52px;padding:var(--space-2);font-size:var(--text-sm);letter-spacing:var(--tracking-wide);text-transform:uppercase;white-space:normal}.scales__controls .btn--ghost.scales__control--active{background:var(--ink);color:var(--on-accent);border-color:var(--ink)}.scales__root-rail{padding-top:var(--space-1);padding-bottom:var(--space-1)}.scales__root-rail .root-tile{flex-basis:68px;width:68px;height:60px}.scales__root-rail .root-tile__name{font-size:var(--text-lg);letter-spacing:0}.note-finder{display:flex;flex-direction:column;gap:var(--space-3);flex:1;min-height:0}.note-finder__selector{flex-shrink:0;display:grid;grid-template-columns:repeat(6,minmax(0,1fr));gap:var(--space-2)}.note-finder__note-toggle{min-width:0;min-height:34px;display:inline-flex;align-items:center;justify-content:center;padding:var(--space-2) var(--space-1);border:1px solid var(--border-soft);border-radius:var(--radius-xs);background:var(--paper-overlay);color:var(--ink);font-family:var(--font-mono);font-size:var(--text-sm);font-weight:700;line-height:1;letter-spacing:0;box-shadow:none;transition:transform var(--duration-fast) var(--ease-default),background var(--duration-fast) var(--ease-default),border-color var(--duration-fast) var(--ease-default),color var(--duration-fast) var(--ease-default)}.note-finder__note-toggle:hover{border-color:var(--note-color)}.note-finder__note-toggle:active{transform:scale(.96)}.note-finder__note-toggle:focus-visible{outline:2px solid var(--note-color);outline-offset:2px}.note-finder__note-toggle--active{background:var(--note-color);border-color:var(--note-color);color:#fff8e8;box-shadow:0 0 0 2px color-mix(in srgb,var(--note-color) 24%,transparent),var(--shadow-1)}.note-finder__stage{flex:0 0 auto;min-height:0;display:flex;flex-direction:column}.note-finder__stage .stage{flex:0 0 auto}.note-finder__header{flex-shrink:0;display:flex;align-items:center;margin-bottom:var(--space-2)}.note-finder__title{font-family:var(--font-display);font-size:var(--text-xl);font-weight:700;line-height:var(--leading-tight);letter-spacing:0}.note-finder__fretboard-scroll{--note-finder-row-height: clamp(30px, 7.1vh, 42px);--note-finder-header-height: clamp(18px, 4.2vh, 24px);flex:0 0 auto;min-height:0;overflow-x:auto;overflow-y:hidden;-webkit-overflow-scrolling:touch;scrollbar-width:thin;margin:0 calc(-1 * var(--space-3));padding:var(--space-2) var(--space-3);border:1px solid var(--border-soft);border-radius:var(--radius-sm);background:linear-gradient(90deg,rgba(34,40,32,.04),transparent 24px),var(--paper-overlay)}.note-finder-fretboard{display:grid;grid-template-columns:36px repeat(var(--note-finder-fret-count),minmax(42px,1fr));grid-template-rows:var(--note-finder-header-height) repeat(6,var(--note-finder-row-height)) var(--note-finder-header-height);width:100%;min-width:var(--note-finder-fret-min-width);height:calc(var(--note-finder-header-height) * 2 + var(--note-finder-row-height) * 6);align-items:stretch;font-family:var(--font-mono)}.note-finder-fretboard__corner,.note-finder-fretboard__fret,.note-finder-fretboard__string{display:flex;align-items:center;justify-content:center;color:var(--ink-soft);font-size:var(--text-2xs);line-height:1;letter-spacing:var(--tracking-wide)}.note-finder-fretboard__fret--marker{color:var(--ink);font-weight:700}.note-finder-fretboard__string{position:relative;background:color-mix(in srgb,var(--paper-sunken) 34%,transparent);font-weight:700}.note-finder-fretboard__string-row-0{--string-height: 3px}.note-finder-fretboard__string-row-1{--string-height: 2.4px}.note-finder-fretboard__string-row-2{--string-height: 2px}.note-finder-fretboard__string-row-3{--string-height: 1.4px}.note-finder-fretboard__string-row-4{--string-height: 1.1px}.note-finder-fretboard__string-row-5{--string-height: 1px}.note-finder-fretboard__cell{position:relative;display:flex;align-items:center;justify-content:center;min-width:42px;min-height:var(--note-finder-row-height);border-right:1px solid var(--border-soft)}.note-finder-fretboard__cell--nut{border-left:3px solid var(--ink)}.note-finder-fretboard__cell--nut:before{opacity:.32}.note-finder-fretboard__cell:before{content:"";position:absolute;z-index:0;left:0;right:0;top:50%;height:var(--string-height, 1px);background:var(--ink-soft);opacity:.62;transform:translateY(-50%)}.note-finder-fretboard__string:before{content:"";position:absolute;z-index:0;left:0;right:0;top:50%;height:var(--string-height, 1px);background:var(--ink-soft);opacity:.62;transform:translateY(-50%)}.note-finder-fretboard__cell--marker:after{content:"";position:absolute;z-index:0;left:50%;bottom:3px;width:5px;height:5px;border-radius:50%;background:var(--gold);opacity:.42;transform:translate(-50%)}.note-finder-fretboard__note{--note-color: var(--ink-mute);--note-y: -6px;position:relative;z-index:2;width:clamp(19px,calc(var(--note-finder-row-height) - 17px),25px);height:clamp(19px,calc(var(--note-finder-row-height) - 17px),25px);padding:0;border:0;border-radius:50%;background:color-mix(in srgb,var(--ink-mute) 30%,transparent);color:var(--ink-soft);display:inline-flex;align-items:center;justify-content:center;font-size:clamp(7px,1.65vh,9px);font-weight:800;line-height:1;letter-spacing:0;opacity:.32;box-shadow:none;cursor:pointer;appearance:none;transition:transform var(--duration-fast) var(--ease-default),opacity var(--duration-fast) var(--ease-default),box-shadow var(--duration-fast) var(--ease-default);transform:translateY(var(--note-y))}.note-finder-fretboard__note--selected{--note-y: 0;width:clamp(27px,calc(var(--note-finder-row-height) - 6px),34px);height:clamp(27px,calc(var(--note-finder-row-height) - 6px),34px);border:1px solid color-mix(in srgb,var(--note-color) 78%,var(--ink));background:var(--note-color);color:#fff8e8;font-size:clamp(9px,2.1vh,11px);opacity:1;box-shadow:0 0 0 2px color-mix(in srgb,var(--note-color) 22%,transparent),var(--shadow-1)}.note-finder-fretboard__note:hover{opacity:1;transform:translateY(var(--note-y)) scale(1.06)}.note-finder-fretboard__note:active{transform:translateY(var(--note-y)) scale(.94)}.note-finder-fretboard__note:focus-visible{outline:2px solid var(--note-color);outline-offset:2px}.favorites{flex:1;min-height:0;overflow-y:auto;-webkit-overflow-scrolling:touch;scrollbar-width:thin;margin:0 calc(-1 * var(--space-5));padding:var(--space-1) var(--space-5) var(--space-5)}.favorites__group+.favorites__group{margin-top:var(--space-6)}.favorites__group-title{font-family:var(--font-display);font-weight:700;font-size:var(--text-xl);line-height:1;letter-spacing:var(--tracking-tight);margin-bottom:var(--space-3)}.favorites__group-title em{font-style:italic;color:var(--accent);font-weight:600}.favorites__grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(132px,1fr));gap:var(--space-3)}.favorite-card{background:var(--paper-raised);border:1px solid var(--border-soft);border-radius:var(--radius-sm);box-shadow:var(--shadow-1);padding:var(--space-3);display:flex;flex-direction:column;gap:var(--space-2);min-width:0}.favorite-card__header{display:flex;align-items:center;justify-content:space-between;gap:var(--space-2);min-height:var(--tap-target)}.favorite-card__name{font-family:var(--font-display);font-weight:700;font-size:var(--text-lg);line-height:1;min-width:0;overflow-wrap:anywhere}.favorite-card__star{flex:0 0 var(--tap-target);color:var(--gold);font-size:var(--text-lg)}.favorite-card__diagram{width:100%;aspect-ratio:5 / 6;border:1px dashed var(--border-dashed);border-radius:var(--radius-sm);background:var(--paper-overlay);padding:var(--space-2);display:flex;align-items:center;justify-content:center;transition:background var(--duration-fast) var(--ease-default),transform var(--duration-fast) var(--ease-default)}.favorite-card__diagram:hover{background:var(--accent-wash)}.favorite-card__diagram:active{transform:scale(.98)}.favorite-card__diagram .fretboard-diagram{display:block;width:100%;height:auto;max-height:100%}.favorite-card__meta{font-family:var(--font-mono);font-size:var(--text-2xs);letter-spacing:var(--tracking-wider);line-height:var(--leading-base);color:var(--ink-soft);text-transform:uppercase;min-height:calc(var(--text-2xs) * var(--leading-base))}.favorites__empty{min-height:100%;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:var(--space-2);text-align:center;padding:var(--space-7) var(--space-5)}.favorites__empty-title{font-family:var(--font-display);font-weight:700;font-size:var(--text-xl);line-height:var(--leading-tight)}.favorites__empty-body{max-width:360px;font-family:var(--font-mono);font-size:var(--text-xs);letter-spacing:var(--tracking-wide);color:var(--ink-soft);line-height:var(--leading-base);text-transform:uppercase}.chord-card__diagram .fretboard-diagram{max-width:280px}.install-banner{position:fixed;left:max(var(--space-3),env(safe-area-inset-left));right:max(var(--space-3),env(safe-area-inset-right));bottom:max(var(--space-3),env(safe-area-inset-bottom));max-width:520px;margin:0 auto;background:var(--paper-raised);border:1px solid var(--ink-soft);border-radius:var(--radius-sm);padding:var(--space-4);box-shadow:var(--shadow-2);opacity:0;transform:translateY(20px);transition:opacity var(--duration-base),transform var(--duration-base) var(--ease-spring);z-index:90}.install-banner:before{content:"";position:absolute;inset:6px;border:1px dashed var(--border-dashed);border-radius:var(--radius-xs);pointer-events:none}.install-banner.is-visible{opacity:1;transform:translateY(0)}.install-banner__content{position:relative;display:flex;gap:var(--space-3);align-items:center}.install-banner__text{flex:1;display:flex;flex-direction:column;gap:var(--space-1);min-width:0}.install-banner__title{font-family:var(--font-display);font-weight:700;font-size:var(--text-md);line-height:var(--leading-tight);color:var(--ink)}.install-banner__body{font-family:var(--font-mono);font-size:var(--text-2xs);letter-spacing:var(--tracking-wide);color:var(--ink-soft);line-height:var(--leading-base)}.install-banner__actions{display:flex;align-items:center;gap:var(--space-2);flex-shrink:0}.install-banner__accept{min-height:36px;padding:var(--space-2) var(--space-4);font-size:var(--text-sm)}.install-banner__dismiss{font-size:var(--text-lg);line-height:1;color:var(--ink-soft)}.app-version{text-align:center;font-family:var(--font-mono);font-size:var(--text-2xs);letter-spacing:var(--tracking-wider);color:var(--ink-mute);text-transform:uppercase;padding:var(--space-2) var(--space-5) 0;opacity:.55;user-select:none;flex-shrink:0}