@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;--nut-ink: #241c15;--nut-dim: #8f7f6b;--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;--nut-ink: #241c15;--nut-dim: #8f7f6b}}*{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.on{background:var(--accent);border-color:var(--accent);color:var(--accent-ink)}.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)}.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}.banner{flex:none;display:flex;align-items:center;justify-content:space-between;gap:8px;padding:env(safe-area-inset-top) 16px 0;margin:0 0 8px;background:var(--surface);border-bottom:1px solid var(--line)}.wordmark{font-family:var(--font-display);font-size:32px;font-weight:800;line-height:52px;letter-spacing:.01em;color:var(--ink)}@media(max-height:600px){.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)}.chords{flex:1;min-height:0;display:flex;flex-direction:column}.toolbar{flex:none;display:grid;grid-template-columns:1fr auto 1fr;align-items:center;gap:8px;height:40px;margin:0 0 8px}.toolbar-side{display:flex;align-items:center;gap:8px;min-width:0}.toolbar-side.end{justify-content:flex-end}.toolbar .icon-button,.controls .icon-button,.key-rail .icon-button,.explore-switch button{position:relative}.toolbar .icon-button,.controls .icon-button{width:36px;height:36px}.explore-switch button{min-height:36px;font-size:14px}.toolbar .icon-button:after,.controls .icon-button:after,.explore-switch button:after{content:"";position:absolute;top:-4px;right:-4px;bottom:-4px;left:-4px}.chord-title{min-width:0;margin:0;font:inherit}.chord-pick{position:relative;max-width:100%;height:40px;display:flex;align-items:center;justify-content:center;gap:4px}.chord-pick:after{content:"";position:absolute;top:-2px;right:0;bottom:-2px;left:0}.chord-pick i{flex:none;font-style:normal;font-size:11px;color:var(--muted)}.chord-name{flex:0 1 auto;min-width:0;overflow:hidden;text-overflow:ellipsis;font-family:var(--font-display);font-size:42px;font-weight:800;letter-spacing:.005em;line-height:40px;white-space:nowrap}.chord-name.long{font-size:32px}.chord-name.unnamed{font-size:24px;font-weight:700;color:var(--muted)}.neck-row{flex:1 1 0;min-height:0;position:relative;container-type:size;display:flex}.neck-row.lefty{justify-content:flex-end}.neck-row>*{--neck-w: min(calc((100cqw - 56px) / .92), calc(100cqh * 300 / 340));--neck-margin: calc((100cqw - var(--neck-w) * .92 - 56px) / 2);--board-edge: calc(var(--neck-margin) + var(--neck-w) * .92)}.neck-row .neck-area{flex:none;width:var(--neck-w);height:100cqh;min-height:0;margin-left:var(--neck-margin)}.neck-row.lefty .neck-area{margin-left:0;margin-right:var(--neck-margin)}.key-rail{position:absolute;top:0;bottom:0;left:var(--board-edge);right:-16px;z-index:2;padding-top:var(--head, 0)}.key-stepper{height:100%;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:12px}.key-stepper .icon-button svg{width:26px;height:26px}.voicing-count{width:100%;min-height:64px;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:2px;font-size:13px;line-height:16px;color:var(--muted);text-align:center}.voicing-count:disabled{color:var(--muted)}.voicing-count small{display:block;font-size:11px;line-height:13px}.voicing-count svg{flex:none;width:14px;height:14px;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}.key-pick{position:relative;flex:0 1 240px;min-width:0;height:36px;display:flex;align-items:center;justify-content:center;gap:8px;border-radius:var(--radius);background:var(--surface);border:1px solid var(--line-strong);box-shadow:inset 0 -2px 0 var(--edge)}.key-pick:after{content:"";position:absolute;top:-4px;right:0;bottom:-4px;left:0}.numeral{font-size:20px;line-height:24px;color:var(--accent-text);font-weight:600;white-space:nowrap}.numeral.long{font-size:15px}.key-line{font-size:15px;line-height:18px;font-weight:600;white-space:nowrap}.key-pick i{flex:none;font-style:normal;font-size:11px;color:var(--muted)}.label-button{position:relative;flex:none;width:52px;height:36px;border-radius:var(--radius);background:var(--surface);border:1px solid var(--line-strong);box-shadow:inset 0 -2px 0 var(--edge);font-size:13px;font-weight:600;color:var(--ink)}.label-button:after{content:"";position:absolute;top:-4px;right:0;bottom:-4px;left:0}.label-button.accidental{font-size:18px}.neck-row.lefty .key-rail{left:-16px;right:var(--board-edge)}.key-rail .label-button{position:absolute;left:0;right:0;bottom:4px;margin:0 auto}.search-row{grid-column:1 / -1;min-width:0;display:flex;align-items:center;gap:8px;margin:0}.search-row input{flex:1;min-width:0;height:36px;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)}.sheet-names{min-height:18px;margin:0 0 8px;line-height:18px;text-align:center;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.chord-sheet{display:grid;grid-template-columns:.85fr 1.2fr .95fr;gap:8px;height:min(280px,calc(100dvh - 372px))}.pick-column{min-width:0;overflow-y:auto;overscroll-behavior:contain;scrollbar-width:none}.pick-column::-webkit-scrollbar{display:none}.pick-column h3{position:sticky;top:0;z-index:1;margin:0;padding:4px 2px;background:var(--bg);font-size:14px;font-weight:600;color:var(--muted)}.chord-sheet .list button{min-height:36px;gap:4px;padding:0 8px;margin-top:4px;font-size:14px}.chord-sheet .list span{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.chord-sheet .list small{flex:none;font-size:13px}.neck-area{flex:1 1 0;min-height:140px;position:relative}.controls{flex:none;display:flex;align-items:center;justify-content:center;gap:8px;height:36px;margin:8px 0 0}.controls .icon-button{font-size:22px;line-height:1}.neck-message{position:absolute;top:0;left:8px;right:8px;z-index:2;margin:0;padding:8px 12px;border-radius:var(--radius);background:var(--surface);border:1px solid var(--line-strong);font-size:14px;text-align:center;pointer-events:none}.swipe-hint{position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);z-index:1;padding:8px 16px;border-radius:var(--radius);background:var(--surface);border:1px solid var(--line-strong);font-size:14px;font-weight:600;white-space:nowrap;pointer-events:none;transition:opacity .22s var(--ease-out)}.swipe-hint.fade{opacity:0}.chords .neck-area,.chords .neck-scroll{touch-action:pan-y}.chords .neck-head,.chords .neck-board{display:block;width:100%;height:auto;max-height:none}.neck-head{position:relative;z-index:1;overflow:visible}.chords .neck-scroll{position:absolute;top:var(--head, 0);right:0;bottom:0;left:0;scrollbar-width:none}.chords .neck-scroll::-webkit-scrollbar{display:none}.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 .nut-name{font-size:14px;font-weight:600;fill:var(--nut-ink)}.diagram .nut-name.off{fill:var(--nut-dim);font-weight:400}.diagram .nut-ring,.diagram .nut-cross{fill:none;stroke:var(--nut-ink);pointer-events:none}.diagram .nut-ring{stroke-width:1.5}.diagram .nut-cross{stroke-width:1.5;stroke-linecap:round}.diagram .free .nut{display:none}.diagram .free .nut-name{fill:var(--ink)}.diagram .free .nut-name.off{fill:var(--dim)}.diagram .free .nut-ring,.diagram .free .nut-cross{stroke:var(--ink)}.string-names{position:absolute;top:-8px;left:0;right:0;height:calc(8px + var(--head, 30px));z-index:2}.string-names button{position:absolute;top:0;bottom:0}.string-names button:active:not(:disabled){transform:none;background:color-mix(in srgb,var(--ink) 8%,transparent);border-radius:var(--radius)}.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 .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.dimmed{opacity:.45}.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 .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)}@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}}.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}.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;display:flex;flex-direction:column;overflow:hidden;border-radius:18px 18px 0 0;padding:0 16px calc(24px + env(safe-area-inset-bottom))}.sheet-handle{position:relative;flex:none;width:100%;height:24px;display:flex;align-items:center;justify-content:center;touch-action:none}.sheet-handle:before{content:"";width:36px;height:4px;border-radius:2px;background:var(--line-strong)}.sheet-handle:after{content:"";position:absolute;top:0;right:0;bottom:-20px;left:0}.sheet-handle:active:not(:disabled){transform:none}.sheet-head{flex:none;display:flex;align-items:center;justify-content:center;margin:0 0 8px;touch-action:none}.sheet-head h2{margin:0;font-size:24px;text-align:center}.chord-head h2{max-width:100%;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font-family:var(--font-display);font-size:42px;font-weight:800;line-height:40px;letter-spacing:.005em}.chord-head.long h2{font-size:32px}.sheet-body{flex:1 1 auto;min-height:0;overflow-y:auto;overscroll-behavior:contain;scrollbar-width:none}.sheet-body::-webkit-scrollbar{display:none}.sheet-body>.grid:first-child,.sheet-body>.setting-row:first-child,.sheet-body>.list:first-child:not(.scale-list)>button:first-child{margin-top:0}.scale-list{height:min(300px,calc(100dvh - 320px));overflow-y:auto;overscroll-behavior:contain;scrollbar-width:none}.scale-list::-webkit-scrollbar{display:none}.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}.readout .needle{margin-top:auto}.readout .listen-row{margin-bottom:auto}main[data-tab=create]{overflow:hidden}.create{flex:1 1 0;min-height:0;display:flex;flex-direction:column;gap:8px}.create-small{position:relative;width:36px;height:36px;flex:none;font-size:20px;line-height:1}.create-small:after{content:"";position:absolute;top:-4px;right:-4px;bottom:-4px;left:-4px}.create-small:disabled{opacity:.45}.create-top{flex:none;display:grid;grid-template-columns:44px 1fr 44px;align-items:center;gap:4px;height:44px}.create-top>button{justify-self:center}.create-slot{width:44px;height:44px;display:grid;place-items:center}.create-progression{min-width:0;text-align:center;font-size:16px;font-weight:600}.create-progression span{display:block;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.create-split{flex:1 1 0;min-height:0;display:grid;grid-template-columns:1fr 76px;gap:8px}.create-split.lefty{grid-template-columns:76px 1fr}.create-split.lefty .create-stack{order:-1}.create-stage{min-height:0;min-width:0;display:flex;flex-direction:column;gap:4px}.create-namebar{flex:none;display:grid;justify-items:center;align-items:center;height:44px}.create-name{min-width:44px;height:44px;display:flex;align-items:center;justify-content:center;gap:4px}.create-name .chord-name{display:block;font-size:36px;line-height:40px}.create-name .chord-name.long{font-size:28px}.create-name small{display:block;font-size:12px;line-height:14px;color:var(--muted);white-space:nowrap}.create-name small:not(:empty){margin-top:-2px}.create-name:has(small) .chord-name{font-size:26px;line-height:28px}.create-name i{flex:none;font-style:normal;font-size:11px;color:var(--muted)}.create-name:disabled{color:var(--accent-text)}.create-neck{flex:1 1 0;min-height:0;position:relative;container-type:size;display:flex;justify-content:center}.create-neck .neck-area{flex:none;width:min(100cqw,calc(100cqh * 300 / 340));height:100cqh;min-height:0}.create-neck.silent .neck-area{opacity:.45}.create-neck.silent .nut-ring{display:none}.create-neck .hit{cursor:default}.create-neck .hit:active{fill:transparent}.create-stack{min-height:0;display:flex;flex-direction:column;gap:4px}.create-row{flex:1 1 0;min-height:0;display:flex;flex-direction:column;gap:4px;padding:3px;margin:-3px;overflow-y:auto;overflow-x:hidden;scrollbar-width:none;overscroll-behavior:contain;touch-action:pan-y}.create-row::-webkit-scrollbar{display:none}.create-chip{position:relative;flex:none;display:flex;flex-direction:column;align-items:center;justify-content:center;width:100%;min-width:0;height:46px;border-radius:var(--radius);background:var(--surface);border:1px solid var(--line-strong);box-shadow:inset 0 -2px 0 var(--edge);user-select:none;-webkit-user-select:none;-webkit-touch-callout:none}.create-chip b{font-family:var(--font-display);font-size:20px;font-weight:800;line-height:22px;white-space:nowrap}.create-chip b.long{font-size:17px}.create-chip small{font-size:11px;line-height:13px;color:var(--muted)}.create-chip.on small{color:var(--accent-ink)}.create-chip.numeral{border-style:dashed;background:none;box-shadow:none}.create-chip.numeral b{font-family:var(--font-body);font-size:18px;font-weight:600;color:var(--accent-text)}.create-chip.on{background:var(--accent);border-color:var(--accent);border-style:solid;color:var(--accent-ink);box-shadow:inset 0 -2px 0 var(--edge-accent)}.create-chip.on.numeral b{color:var(--accent-ink)}.create-chip.now{outline:2px solid var(--accent);outline-offset:2px}.create-chip.lift{opacity:.25}.create-ghost{position:fixed;z-index:40;pointer-events:none;margin:0;transform:scale(1.1);box-shadow:0 8px 20px #00000059}.create-row.dragging .create-chip{transition:transform .12s var(--ease-out)}.create-add{flex:none;width:44px;height:44px;border-radius:var(--radius);background:var(--surface);border:1px solid var(--line-strong);box-shadow:inset 0 -2px 0 var(--edge);font-size:24px;line-height:1}.create-stack .create-add{width:100%}.create-menu-veil{position:fixed;top:0;right:0;bottom:0;left:0;z-index:20}.create-menu{position:fixed;display:flex;gap:4px;padding:2px;border-radius:var(--radius);background:var(--bg);box-shadow:0 4px 16px #00000059;transform-origin:right center;animation:create-menu-grow .16s var(--ease-out)}.create-menu.lefty{transform-origin:left center}@keyframes create-menu-grow{0%{transform:scaleX(.2);opacity:0}}.create-line{flex:none;display:flex;align-items:center;gap:4px;height:44px}.create-key{flex:none;display:flex;align-items:center;gap:8px;height:44px}.create-key .chip{min-width:56px;font-weight:600}.create-key .chip.wait{background:var(--accent);border-color:var(--accent);color:var(--accent-ink);box-shadow:inset 0 -2px 0 var(--edge-accent)}.create-drop{position:relative;flex:1 1 0;min-width:0;height:44px;display:flex;flex-direction:column;align-items:center;justify-content:center;border-radius:var(--radius);background:var(--surface);border:1px solid var(--line-strong);box-shadow:inset 0 -2px 0 var(--edge)}.create-drop small{font-size:11px;line-height:12px;color:var(--muted);white-space:nowrap}.create-drop b{font-size:15px;line-height:18px;font-weight:600}.create-drop b:after{content:" ▾";font-size:9px;font-weight:400;color:var(--muted);vertical-align:2px}.create-drop.off{border-color:var(--line);box-shadow:none}.create-drop.off b,.create-drop.off small{color:var(--dim)}.create-drop select{position:absolute;top:-1px;right:-1px;bottom:-1px;left:-1px;width:calc(100% + 2px);height:calc(100% + 2px);opacity:0;font-size:16px;cursor:pointer}button.primary.create-play{flex:1;display:flex;align-items:center;justify-content:center;min-width:72px;min-height:44px;height:44px;padding:0}button.primary.create-play:disabled{opacity:.45}.create-play svg{width:22px;height:22px;fill:currentColor}.create-emptyhead{flex:none;display:flex;align-items:center;justify-content:space-between;gap:8px;height:48px}.create-scroll{flex:1 1 0;min-height:0;overflow-y:auto;overscroll-behavior:contain;scrollbar-width:none;border-top:1px solid var(--line)}.create-scroll::-webkit-scrollbar{display:none}.create-patterns{display:grid;grid-template-columns:1fr 1fr;gap:4px;padding:4px 0}.create-patterns button{min-width:0;min-height:44px;padding:0 8px;border-radius:var(--radius);background:var(--surface);border:1px solid var(--line-strong);text-align:left;font-size:15px;white-space:nowrap}.create-tunings{display:grid;grid-template-columns:1fr 1fr;gap:4px;margin-top:8px}.create-tunings button{display:flex;flex-direction:column;align-items:flex-start;justify-content:center;min-width:0;min-height:44px;padding:2px 8px;border-radius:var(--radius);background:var(--surface);border:1px solid var(--line-strong);text-align:left}.create-tunings span{max-width:100%;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font-size:15px;line-height:19px}.create-tunings small{color:var(--muted);font-size:11px;line-height:13px;white-space:nowrap}.create-tunings button.on,.create-roots button.on{background:var(--accent);border-color:var(--accent);color:var(--accent-ink)}.create-tunings button.on small{color:var(--accent-ink)}.create-roots{display:grid;grid-template-columns:repeat(6,1fr);gap:4px;margin-top:8px}.create-roots button{min-width:0;min-height:44px;padding:0;border-radius:var(--radius);background:var(--surface);border:1px solid var(--line-strong);font-size:15px}.create-keys button{font-size:13px}.create-nokey{width:100%;margin-top:8px}.create-numerals{grid-template-columns:repeat(7,1fr);gap:2px}.chord-sheet.create-columns .list button{position:relative;min-height:40px}.chord-sheet.create-columns .list button:after{content:"";position:absolute;top:-2px;right:0;bottom:-2px;left:0}.chord-sheet.create-add-columns{height:min(240px,calc(100dvh - 396px))}:root{--scale-root: #a8590f;--scale-root-ink: #fff6e8;--arrow-bg: color-mix(in srgb, var(--ink) 7%, var(--surface))}@media(prefers-color-scheme:dark){:root:not([data-theme=light]){--scale-root: #e8a23c;--scale-root-ink: #241708}}:root[data-theme=dark]{--scale-root: #e8a23c;--scale-root-ink: #241708}.explore-page{flex:1;min-height:0;display:flex;flex-direction:column;position:relative}.explore-page .explore-switch{flex:none}.diagram .sc{pointer-events:none}.diagram .sc circle{fill:color-mix(in srgb,var(--board-a) 72%,transparent);stroke:var(--note);stroke-width:1.2}.diagram .sc text{fill:var(--note);font-weight:600}.diagram .sc.tone circle{fill:color-mix(in srgb,var(--note) 34%,var(--board-a));stroke-width:2.2}.diagram .sc.tone text{font-weight:800}.diagram .sc.root circle{fill:var(--scale-root);stroke:var(--scale-root);stroke-width:2}.diagram .sc.root text{fill:var(--scale-root-ink);font-weight:800}.diagram .note.scale-root circle{fill:var(--scale-root)}.diagram .note.scale-root text{fill:var(--scale-root-ink)}.diagram .position-band{fill:color-mix(in srgb,var(--scale-root) 16%,transparent);stroke:color-mix(in srgb,var(--scale-root) 42%,transparent);stroke-width:1;pointer-events:none}.diagram .position-band.around{fill:color-mix(in srgb,var(--scale-root) 11%,transparent);stroke:color-mix(in srgb,var(--scale-root) 30%,transparent)}.diagram .nut-ring.nut-scale{stroke:var(--scale-root);stroke-width:1.5}.diagram .nut-ring.nut-scale.root{stroke-width:3}.diagram .nut-root{pointer-events:none}.diagram .nut-root.chord{fill:var(--accent)}.diagram .nut-root.scale{fill:var(--scale-root)}.diagram .nut-name.nut-root-name.chord,.diagram .free .nut-name.nut-root-name.chord{fill:var(--accent-ink);font-weight:800}.diagram .nut-name.nut-root-name.scale,.diagram .free .nut-name.nut-root-name.scale{fill:var(--scale-root-ink);font-weight:800}.diagram circle.outside{fill:none;stroke:var(--note);stroke-width:1.8;stroke-dasharray:3.5 3}.diagram .layer-back{opacity:.42}.chord-pad{position:absolute;left:-16px;right:-16px;bottom:0;z-index:6;display:grid;gap:4px;padding:8px 16px;background:var(--surface);border-top:1px solid var(--line-strong);border-radius:14px 14px 0 0;box-shadow:0 -6px 20px color-mix(in srgb,var(--ink) 18%,transparent)}.pad-show{display:flex;align-items:baseline;justify-content:space-between;min-height:32px;padding:0 4px}.pad-show b{font-size:22px;line-height:30px}.pad-show small{font-size:13px;color:var(--muted)}.pad-keys{display:grid;grid-auto-flow:column;grid-auto-columns:minmax(0,1fr);gap:4px}.pad-keys button{height:44px;border-radius:8px;border:1px solid var(--line-strong);background:var(--arrow-bg);box-shadow:inset 0 -2px 0 var(--edge);font-size:16px;font-weight:600}.pad-keys button:disabled{color:var(--dim)}.pad-keys.last{grid-auto-flow:row;grid-template-columns:1fr 1fr 2fr}.pad-keys .pad-done{background:var(--accent);border-color:var(--accent);color:var(--accent-ink);box-shadow:inset 0 -2px 0 var(--edge-accent)}.chord-row{flex:none;display:grid;grid-template-columns:repeat(7,minmax(0,1fr));gap:4px;height:46px;margin-top:8px}.chord-row.source{display:flex}.c-chip{min-width:0;display:flex;flex-direction:column;align-items:center;justify-content:center;border-radius:8px;background:var(--surface);border:1px solid var(--line-strong);box-shadow:inset 0 -2px 0 var(--edge)}.c-chip small{font-size:11px;line-height:13px;color:var(--muted)}.c-chip b{font-size:14px;line-height:17px;font-weight:700}.c-chip.on{background:var(--accent);border-color:var(--accent);color:var(--accent-ink);box-shadow:inset 0 -2px 0 var(--edge-accent)}.c-chip.on small{color:var(--accent-ink)}.c-pick-key{flex:1;border-radius:var(--radius);border:1px solid var(--line-strong);background:var(--surface);font-weight:600}.dock{flex:none;display:flex;gap:6px;margin-top:8px}.dock.pads{height:96px}.dock-cards{flex:1;min-width:0;display:grid;gap:6px}.dock.pads .dock-cards{grid-template-columns:1fr 1fr}.dock.pads .dock-cards.one{grid-template-columns:1fr}.dock-side{flex:0 0 56px;display:grid;grid-auto-rows:minmax(0,1fr);gap:6px}.side-button{min-height:0;display:flex;flex-direction:column;align-items:center;justify-content:center;background:var(--surface);border:1px solid var(--line-strong);border-radius:10px;box-shadow:inset 0 -2px 0 var(--edge)}.side-button small{font-size:11px;line-height:13px;color:var(--muted)}.side-button b{font-size:15px;line-height:19px}.side-button.on{background:var(--accent);border-color:var(--accent);color:var(--accent-ink);box-shadow:inset 0 -2px 0 var(--edge-accent)}.side-button.on small{color:var(--accent-ink)}.card{min-width:0;min-height:0;display:flex;align-items:stretch;background:var(--surface);border:1px solid var(--line-strong);border-radius:var(--radius);overflow:hidden}.card.focus{border-color:var(--accent);outline:1px solid var(--accent)}.card-arrow{flex:none;background:var(--arrow-bg);font-size:28px;line-height:1;color:var(--ink)}.card-arrow:active{background:color-mix(in srgb,var(--accent) 22%,var(--surface))}.card-arrow:disabled{color:var(--dim)}.card.pad{flex-direction:column}.pad-arrows{flex:0 0 38px;display:grid;grid-template-columns:1fr 1fr;border-top:1px solid var(--line)}.pad-arrows .card-arrow:last-child{border-left:1px solid var(--line)}.card-main{flex:1;min-width:0;min-height:0;display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center;padding:0 4px}.card-main small{max-width:100%;overflow:hidden;text-overflow:ellipsis;font-size:11px;line-height:13px;color:var(--muted);white-space:nowrap}.card-main small.warn,.card-main small.position-name{color:var(--scale-root);font-weight:700}.card.pad .card-main .chord-name{font-size:20px;line-height:24px}.card.pad .card-main .chord-name.long{font-size:18px}.card.pad .card-main .chord-name.tight{font-size:15px}.card.pad .card-main .chord-name.tiny{font-size:13px}.explore-page .neck-row>*{--neck-w: min(calc((100cqw - 56px) / .92), calc(100cqh * 300 / 402))}.tool-rail{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:8px}.tool-rail .icon-button,.tool-rail .label-button{width:44px;height:44px}.neck-map{position:relative;display:block;overflow:hidden;border-radius:8px;background-color:color-mix(in srgb,var(--board-a) 30%,var(--surface));border:1px solid var(--line)}.neck-map span{position:absolute;display:block}.neck-map small{position:absolute;font-size:9px;line-height:9px;color:var(--muted)}.neck-map i{position:absolute;display:block}.map-dot{width:3px;height:3px;border-radius:50%;transform:translate(-50%,-50%);background:color-mix(in srgb,var(--note) 38%,transparent)}.map-dot.lit{width:5px;height:5px;background:var(--note)}.map-dot.root{background:var(--scale-root)}.map-dot.chord{width:7px;height:7px;z-index:2;background:var(--accent-text);box-shadow:0 0 0 1px var(--surface)}.map-band{background:color-mix(in srgb,var(--scale-root) 22%,transparent)}.map-tick{background:color-mix(in srgb,var(--accent-text) 42%,transparent);border-radius:1px}.map-tick.on{background:var(--accent-text);z-index:1}.map-window{border:1.5px solid var(--ink);border-radius:3px;pointer-events:none}.neck-map.strip{cursor:grab;touch-action:none;user-select:none;-webkit-user-select:none;flex:none;width:100%;height:52px;margin-top:8px;background-image:linear-gradient(to right,var(--line) 1px,transparent 1px);background-size:calc(100% / var(--frets)) 100%}.strip .map-ticks{top:0;left:0;right:0;height:9px}.strip .map-tick{height:2px}.strip .map-board{top:10px;bottom:11px;left:0;right:0}.strip .map-band{top:0;bottom:0}.strip .map-labels{bottom:0;left:0;right:0;height:10px}.strip .map-labels small{bottom:1px;transform:translate(-50%)}.strip .map-window{top:0;bottom:0}.scale-sheet{grid-template-columns:1.5fr 1fr}