@font-face{font-family:Big Shoulders Display;src:url(./big-shoulders-display-Bn_gnr7w.woff2) format("woff2");font-weight:100 900;font-display:swap}@font-face{font-family:Atkinson Hyperlegible Next;src:url(./atkinson-hyperlegible-next-BcXVPD7q.woff2) format("woff2");font-weight:200 800;font-display:swap}:root{--font-display: "Big Shoulders Display", "Arial Narrow", system-ui, sans-serif;--font-body: "Atkinson Hyperlegible Next", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;--bg: #f1eadb;--surface: #faf6ec;--ink: #241c15;--muted: #66594b;--dim: #9a8a76;--line: #ddd0b9;--line-strong: #8f7f6b;--accent: #184f40;--accent-text: #184f40;--accent-ink: #f7f3ea;--edge: #ddd0b9;--edge-accent: #0e3329;--board-a: #e6c995;--board-b: #d9b77e;--grain: #b88f55;--binding: #f6efdf;--fret-hi: #f4f3ee;--fret-lo: #8e8c85;--nut: #f3ecda;--nut-edge: #c7b997;--string-plain: #6f6a62;--string-wound: #8a6a3e;--note: #241a12;--note-ink: #f4ecdc;--board-dim: #7d6744;--pearl-a: #ffffff;--pearl-b: #e7e1ee;--pearl-c: #d3e9df;--capo-hi: #ecebe6;--capo-lo: #74736d;--capo-pad: #1d1a18;--capo-ink: #2a2622;--radius: 12px;--tap: 44px;--ease-out: cubic-bezier(.33, 1, .68, 1);color-scheme:light dark}@media(prefers-color-scheme:dark){:root{--bg: #1a1411;--surface: #251c17;--ink: #f0e6d6;--muted: #a89886;--dim: #6f6052;--line: #3d3029;--line-strong: #7e6e60;--accent: #57987c;--accent-text: #57987c;--accent-ink: #10201a;--edge: #110c0a;--edge-accent: #3b6e58;--board-a: #4b2b20;--board-b: #3a2018;--grain: #24130d;--binding: #d9ccb2;--fret-hi: #e4e2da;--fret-lo: #77756e;--nut: #e8dcc2;--nut-edge: #b3a281;--string-plain: #cfc9be;--string-wound: #bf9f6c;--note: #efe4cc;--note-ink: #1f1610;--board-dim: #a38b74;--pearl-a: #ffffff;--pearl-b: #e2dcec;--pearl-c: #cfe8dc;--capo-hi: #e4e3dd;--capo-lo: #6b6a64;--capo-pad: #0c0a09;--capo-ink: #24211e}}*{box-sizing:border-box}html,body{margin:0;background:var(--surface);color:var(--ink);font-family:var(--font-body);font-size:16px;-webkit-tap-highlight-color:transparent}button{font:inherit;color:inherit;background:none;border:0;padding:0;cursor:pointer;transition:transform .12s var(--ease-out),background-color .15s,color .15s}button:active:not(:disabled){transform:scale(.96)}button:disabled{color:var(--dim);cursor:default}:focus-visible{outline:2px solid var(--accent);outline-offset:2px}html,body{height:100%;overflow:hidden;overscroll-behavior:none}#app{position:fixed;top:0;right:0;bottom:0;left:0;max-width:520px;margin:0 auto;overflow:hidden;background:var(--bg);display:flex;flex-direction:column}button.primary{min-height:48px;padding:0 24px;border-radius:999px;background:var(--accent);color:var(--accent-ink);font-weight:600;box-shadow:inset 0 -3px 0 var(--edge-accent)}button.secondary,.chip{min-height:var(--tap);padding:0 12px;border-radius:var(--radius);background:var(--surface);border:1px solid var(--line-strong);box-shadow:inset 0 -2px 0 var(--edge);font-size:15px;white-space:nowrap}.chip.on,.list button.on,.grid button.on{background:var(--accent);border-color:var(--accent);color:var(--accent-ink);box-shadow:inset 0 -2px 0 var(--edge-accent)}.text-button{min-height:var(--tap);padding:0 8px;color:var(--accent-text);font-weight:600}.icon-button{width:var(--tap);height:var(--tap);flex:none;display:inline-grid;place-items:center;border-radius:50%;border:1px solid var(--line-strong);background:var(--surface)}.icon-button.bare{border-color:transparent;background:none}.icon-button svg{width:22px;height:22px;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}.segmented{display:flex;background:var(--surface);border:1px solid var(--line-strong);border-radius:999px;margin:0 0 8px}.segmented button{flex:1;min-height:var(--tap);border-radius:999px;font-size:15px}.segmented button.on{background:var(--accent);color:var(--accent-ink);font-weight:600;box-shadow:inset 0 0 0 3px var(--surface)}.subtabs{display:flex;align-items:stretch;gap:16px;margin:0 0 8px;border-bottom:1px solid var(--line)}.subtabs button{min-height:var(--tap);padding:0 2px;font-size:15px;color:var(--muted);border-bottom:2px solid transparent;margin-bottom:-1px;white-space:nowrap}.subtabs button.on{color:var(--ink);font-weight:600;border-bottom-color:var(--accent)}.subtabs button:disabled{color:var(--dim)}.subtabs i{font-style:normal;font-size:10px;color:var(--muted)}.small-toggle{display:flex;gap:4px;font-size:14px}.small-toggle button{min-height:var(--tap);min-width:var(--tap);margin:-8px 0;padding:0 6px;color:var(--muted)}.small-toggle button.on{color:var(--ink);font-weight:600;text-decoration:underline 2px var(--accent);text-underline-offset:5px}.small-toggle button:disabled{color:var(--dim)}.switch{-moz-appearance:none;appearance:none;-webkit-appearance:none;flex:none;width:48px;height:28px;margin:0;border-radius:999px;background:var(--line-strong);position:relative;cursor:pointer;transition:background .15s}.switch:after{content:"";position:absolute;top:3px;left:3px;width:22px;height:22px;border-radius:50%;background:var(--surface);transition:transform .15s}.switch:checked{background:var(--accent)}.switch:checked:after{transform:translate(20px)}.hint{color:var(--muted);font-size:14px;line-height:1.4}.strip{display:flex;gap:6px;overflow-x:auto;scrollbar-width:none}.strip::-webkit-scrollbar{display:none}.strip .chip{flex:none;min-width:48px}.banner{flex:none;display:flex;align-items:center;justify-content:space-between;gap:8px;padding:calc(6px + env(safe-area-inset-top)) 16px 6px;margin:0 0 12px;background:var(--surface);border-bottom:1px solid var(--line)}.wordmark{font-family:var(--font-display);font-size:32px;font-weight:800;line-height:50px;letter-spacing:.01em;color:var(--ink)}@media(max-height:720px){.banner{padding-top:calc(2px + env(safe-area-inset-top));padding-bottom:2px;margin-bottom:8px}.wordmark{font-size:26px;line-height:44px}}main{flex:1;min-height:0;overflow-y:auto;padding:0 16px 8px;display:flex;flex-direction:column}main[data-tab=explore]{overflow:hidden}.placeholder{color:var(--muted);text-align:center;margin-top:30vh}.tabs{display:flex;justify-content:center;background:var(--surface);border-top:1px solid var(--line);padding-bottom:env(safe-area-inset-bottom);z-index:3}.tabs button{flex:1;max-width:173px;min-height:52px;color:var(--muted);font-weight:600;border-top:3px solid transparent}.tabs button.on{color:var(--accent-text);border-top-color:var(--accent)}.explore-body,.chords,.scales{flex:1;min-height:0;display:flex;flex-direction:column}.picker{flex:none;height:var(--tap);display:flex;margin:0 0 8px}.selects{flex:1;min-width:0;display:flex;border:1px solid var(--line-strong);border-radius:var(--radius);background:var(--surface);box-shadow:inset 0 -2px 0 var(--edge);overflow:hidden}.select{flex:1 1 0;min-width:0;min-height:var(--tap);display:flex;align-items:center;justify-content:space-between;gap:4px;padding:0 12px;font-size:15px;font-weight:600}.select+.select{border-left:1px solid var(--line)}.select:first-child{flex:.7 1 0}.select:nth-child(2){flex:1.3 1 0}.select span{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.select i{font-style:normal;font-size:11px;color:var(--muted)}.select:active:not(:disabled){transform:none;background:var(--bg)}.search-row{flex:1;display:flex;gap:4px;margin:0}.search-row input{flex:1;min-width:0;min-height:var(--tap);font:inherit;font-size:16px;padding:0 12px;border-radius:var(--radius);border:1px solid var(--line-strong);background:var(--surface);color:var(--ink)}.search-row input::placeholder{color:var(--muted)}.search-row .text-button{flex:none;margin-right:-8px}.alternates.problem{color:var(--ink)}.naming{flex:none;margin:0 2px}.name-row{display:flex;align-items:baseline;gap:12px;height:36px}.chord-name{font-family:var(--font-display);font-size:42px;font-weight:800;letter-spacing:.005em;margin:0;line-height:36px;white-space:nowrap}.chord-name.unnamed{font-size:30px;font-weight:700;color:var(--muted)}.numeral{font-size:20px;color:var(--accent-text);font-weight:600}.shape-name{font-size:14px;color:var(--muted)}.detail-row{display:flex;align-items:center;justify-content:space-between;gap:8px;height:28px}.alternates,.shape-name{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.alternates{margin:0;min-width:0;font-size:14px;color:var(--muted)}.detail-row .small-toggle{flex:none}.neck-area{flex:1 1 0;min-height:140px;position:relative}.neck-area .board-svg{position:absolute;top:0;right:0;bottom:0;left:0;width:100%;height:100%;max-height:none}.controls{flex:none;display:flex;align-items:center;gap:8px;margin:8px 0 0}.stepper{flex:1;min-width:0;display:flex;align-items:center;gap:4px}.stepper .icon-button{font-size:24px;line-height:1}.stepper .count{flex:1;min-width:0;text-align:center;font-size:14px;color:var(--muted);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.strum-hint{flex:none;max-width:40%;font-size:13px;line-height:1.25;color:var(--muted);text-align:right}.chords .neck-area{touch-action:none}.chords .find-neck,.chords .find-neck .neck-scroll{touch-action:pan-y}.diagram{width:100%;max-height:58vh;display:block;-webkit-user-select:none;user-select:none}.diagram text{text-anchor:middle;font-size:13px;fill:var(--ink)}.diagram .string-name{fill:var(--muted);font-size:12px}.diagram .wood-a{stop-color:var(--board-a)}.diagram .wood-b{stop-color:var(--board-b)}.diagram .fret-hi{stop-color:var(--fret-hi)}.diagram .fret-lo{stop-color:var(--fret-lo)}.diagram .nut-a{stop-color:var(--nut)}.diagram .nut-b{stop-color:var(--nut-edge)}.diagram .capo-hi{stop-color:var(--capo-hi)}.diagram .capo-lo{stop-color:var(--capo-lo)}.diagram .pearl-a{stop-color:var(--pearl-a)}.diagram .pearl-b{stop-color:var(--pearl-b)}.diagram .pearl-c{stop-color:var(--pearl-c)}.diagram .board{fill:url(#fw-wood)}.diagram .grain{fill:none;stroke:var(--grain);stroke-width:.6;opacity:.5}.diagram .grain.wide{stroke-width:1.1}.diagram .binding{fill:var(--binding)}.diagram .fret{fill:url(#fw-fret)}.diagram .nut{fill:url(#fw-nut)}.diagram .capo-pad{fill:var(--capo-pad)}.diagram .capo-bar{fill:url(#fw-capo)}.diagram .capo-label{fill:var(--capo-ink);font-family:var(--font-display);font-size:11px;font-weight:800;letter-spacing:.12em}.diagram .string .plain{stroke:var(--string-plain)}.diagram .string .wound{stroke:var(--string-wound)}.diagram .string .winding{stroke:var(--fret-lo);stroke-dasharray:.8 .8;opacity:.55}.diagram .fret-number{fill:var(--muted);font-size:14px}.diagram .hit{fill:transparent;cursor:pointer}.diagram .hit:active{fill:color-mix(in srgb,var(--note) 14%,transparent)}.diagram .note,.diagram .open,.diagram .mute,.diagram .barre,.diagram .inlay,.diagram .capo,.diagram .string{pointer-events:none}.diagram .inlay{fill:url(#fw-pearl);stroke:color-mix(in srgb,var(--note) 25%,transparent);stroke-width:.6}.diagram .note circle{fill:var(--note)}.diagram .note text{fill:var(--note-ink);font-weight:700}.diagram .note.root circle{fill:var(--accent)}.diagram .note.root text{fill:var(--accent-ink)}.diagram .note circle.halo{fill:none;stroke:var(--note);stroke-width:1.5}.diagram .note.muted circle{fill:none;stroke:var(--note);stroke-dasharray:3 3}.diagram .open circle{fill:var(--bg);stroke:var(--ink);stroke-width:1.5}.diagram .open text{font-size:11px}.diagram .open.root circle{fill:var(--accent);stroke:var(--accent)}.diagram .open.root text{fill:var(--accent-ink)}.diagram .open.held circle{stroke-width:3}.diagram .mute{font-size:22px;fill:var(--muted)}.diagram .barre{fill:var(--note);opacity:.3}.diagram .out{fill:var(--board-dim);font-size:11px;pointer-events:none}.diagram .note.pulse .halo,.diagram .open.pulse circle{transform-box:fill-box;transform-origin:center;animation:pulse .24s var(--ease-out)}@keyframes pulse{40%{transform:scale(1.22)}}.diagram .note.placed{transform-box:fill-box;transform-origin:center;animation:place .18s var(--ease-out)}@keyframes place{0%{transform:scale(.6);opacity:0}}.diagram .string.ring{animation:ring .22s linear}@keyframes ring{15%{transform:translate(1.4px)}30%{transform:translate(-1.2px)}45%{transform:translate(1px)}60%{transform:translate(-.7px)}80%{transform:translate(.4px)}}main[data-tab=tune]{animation:tab-in-tune .18s var(--ease-out)}main[data-tab=explore]{animation:tab-in-explore .18s var(--ease-out)}main[data-tab=create]{animation:tab-in-create .18s var(--ease-out)}.explore-body>.chords,.explore-body>.scales{animation:tab-in-view .16s var(--ease-out)}@keyframes tab-in-tune{0%{opacity:0;transform:translateY(6px)}}@keyframes tab-in-explore{0%{opacity:0;transform:translateY(6px)}}@keyframes tab-in-create{0%{opacity:0;transform:translateY(6px)}}@keyframes tab-in-view{0%{opacity:0}}@media(prefers-reduced-motion:reduce){*,*:before,*:after{animation:none!important;transition:none!important}button:active:not(:disabled){transform:none}}.scale-neck{display:flex;flex-direction:column}.scale-neck .diagram{flex:none;max-height:none;margin:0 auto}.neck-scroll{flex:none;overflow-y:auto;overscroll-behavior:contain;-webkit-overflow-scrolling:touch;touch-action:pan-y;scrollbar-width:thin;-webkit-user-select:none;user-select:none}.scale-pickers{flex:none;display:flex;flex-direction:column;gap:8px;margin:0 0 8px}.scale-row{display:flex;align-items:center;justify-content:space-between;gap:8px}.scale-row .chip{display:flex;align-items:center;gap:8px;min-width:0}.scale-row .chip span{overflow:hidden;text-overflow:ellipsis}.scale-row .caret{color:var(--muted);font-size:11px}.sheet-backdrop{position:fixed;top:0;right:0;bottom:0;left:0;background:#00000059;z-index:10;display:flex;align-items:flex-end;justify-content:center}.sheet-backdrop[hidden]{display:none}.sheet{background:var(--bg);width:100%;max-width:520px;max-height:80dvh;overflow-y:auto;border-radius:18px 18px 0 0;padding:12px 16px calc(24px + env(safe-area-inset-bottom))}.sheet-head{display:flex;align-items:center;justify-content:space-between;margin:0 0 8px}.sheet-head h2{margin:0;font-size:20px}.sheet-head .text-button{margin-right:-8px}.sheet .segmented{margin:8px 0}.list button{display:flex;justify-content:space-between;align-items:center;gap:12px;width:100%;min-height:var(--tap);padding:0 16px;margin-top:8px;border-radius:var(--radius);background:var(--surface);border:1px solid var(--line-strong);text-align:left}.list small{color:var(--muted);font-size:14px}.list button.on small{color:var(--accent-ink)}.grid{display:grid;grid-template-columns:repeat(4,1fr);gap:8px;margin-top:8px}.grid button{min-height:var(--tap);border-radius:var(--radius);background:var(--surface);border:1px solid var(--line-strong)}.setting-row{display:flex;justify-content:space-between;align-items:center;gap:12px;min-height:52px;padding:0 16px;margin-top:8px;border-radius:var(--radius);background:var(--surface);border:1px solid var(--line-strong);cursor:pointer}.readout{flex:1 1 auto;min-height:0;display:flex;flex-direction:column;align-items:center;text-align:center;margin:0 0 8px}.readout .small-toggle{flex:none;align-self:flex-end;margin:0 0 4px}.needle{flex:1 1 0;min-height:48px;max-height:220px;width:100%;max-width:380px;display:block}.needle .arc{fill:none;stroke:var(--line);stroke-width:3}.needle .tick{stroke:var(--muted);stroke-width:2}.needle .pointer{stroke:var(--ink);stroke-width:3;stroke-linecap:round;transition:transform .12s linear}.needle .hub{fill:var(--ink)}.in-tune .needle .pointer,.in-tune .needle .hub{stroke:var(--accent);fill:var(--accent)}.reading{flex:none;display:flex;flex-direction:column;align-items:center;margin:0 0 8px}.read-note{font-family:var(--font-display);font-size:50px;font-weight:800;line-height:44px}.read-detail{color:var(--muted);font-size:15px;min-height:1.3em}.in-tune .read-detail{color:var(--accent-text);font-weight:600}.listen-row{flex:none;display:flex;flex-direction:column;align-items:center;justify-content:center;min-height:var(--tap)}.listen-row .hint{margin:0}.editor{flex:none;padding-top:8px;border-top:1px solid var(--line)}.editor-head{display:flex;align-items:center;gap:8px;min-height:var(--tap)}.tuning-picker{flex:1;min-width:0;min-height:var(--tap);display:flex;align-items:center;gap:8px;font-size:17px;font-weight:600;text-align:left}.tuning-picker span{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.tuning-picker i{font-style:normal;font-size:11px;color:var(--muted)}.editor-head .text-button{flex:none;margin-right:-8px}.editor-head .text-button.quiet{color:var(--muted)}.string-row{display:grid;grid-template-columns:repeat(var(--count),1fr);gap:6px;margin:4px 0 0}.string-button{min-height:var(--tap);border-radius:var(--radius);background:var(--surface);border:1px solid var(--line-strong);box-shadow:inset 0 -2px 0 var(--edge);font-size:15px;font-weight:600}.string-button.on{background:var(--accent);border-color:var(--accent);color:var(--accent-ink);box-shadow:inset 0 -2px 0 var(--edge-accent)}.string-button.matched{outline:2px solid var(--accent);outline-offset:1px}.step-row{display:flex;align-items:center;justify-content:center;gap:16px;margin:8px 0 0}.step-row .icon-button{font-size:20px}.step-note{min-width:48px;text-align:center;font-weight:600}.unsaved-row{display:flex;align-items:center;justify-content:flex-end;gap:8px;margin:4px -8px 0 0}.unsaved-row .hint{flex:1;margin:0}.save-form{display:flex;flex-direction:column;gap:8px;margin-top:8px}.save-form input{min-height:var(--tap);font:inherit;font-size:16px;padding:0 16px;border-radius:var(--radius);border:1px solid var(--line-strong);background:var(--surface);color:var(--ink)}.save-form .hint{margin:0}.confirm-row{display:flex;gap:8px;margin-top:8px}.confirm-row button{flex:1}.sheet-section{margin:16px 0 0;font-size:16px}.diagram .tuning-pill{fill:none;stroke:var(--line-strong);stroke-width:1}.diagram .tuning-caret{fill:var(--muted);font-size:10px}.tuning-hit{position:absolute;top:0;left:0;right:0;height:var(--tap);z-index:1}.tuning-hit:active:not(:disabled){transform:none;background:color-mix(in srgb,var(--ink) 6%,transparent);border-radius:var(--radius)}.tuning-head{flex:none;min-height:var(--tap);display:flex;align-items:center;justify-content:center}.tuning-head:active:not(:disabled){transform:none;background:color-mix(in srgb,var(--ink) 6%,transparent);border-radius:var(--radius)}.readout .needle{margin-top:auto}.readout .listen-row{margin-bottom:auto}