:root{--bg: #faf7f4;--panel: #fffdfb;--ink: #1d1a18;--muted: #8b8580;--line: #cfc9c3;--fret: #d5cfc9;--nut: #706a65;--string: #b4ada6;--note-bg: #262220;--note-ink: #ffffff;--root-bg: #d2673c;--root-ink: #ffffff;--open-bg: #e7e2dd;--open-ink: #55504c;--cell-h: 54px;--fret-min: 46px;color-scheme:light}:root[data-theme=dark]{--bg: #171514;--panel: #211e1c;--ink: #f2eee9;--muted: #948d86;--line: #3a3532;--fret: #3d3835;--nut: #9a938c;--string: #5a534e;--note-bg: #f2eee9;--note-ink: #171514;--root-bg: #e0764a;--root-ink: #1a1210;--open-bg: #322d2a;--open-ink: #c7c0b9;color-scheme:dark}*{box-sizing:border-box}html,body{margin:0;background:var(--bg);color:var(--ink);font-family:ui-sans-serif,system-ui,-apple-system,Segoe UI,Roboto,sans-serif;-webkit-text-size-adjust:100%}.app{max-width:1400px;margin:0 auto;padding:28px 20px 64px}.topbar h1{margin:0;font-size:26px;letter-spacing:-.02em}.tagline{margin:6px 0 24px;color:var(--muted);font-size:14px}.white{color:var(--note-bg);font-weight:600}.root-word{color:var(--root-bg);font-weight:600}.board-scroll{overflow-x:auto;padding-bottom:8px}.board{display:grid;grid-template-columns:64px repeat(var(--frets),minmax(var(--fret-min),1fr));grid-template-rows:28px repeat(var(--strings),var(--cell-h));min-width:calc(64px + var(--frets) * var(--fret-min));align-items:stretch}.string-row{display:contents}.fret-number{grid-row:1;display:flex;align-items:center;justify-content:center;font-size:12px;color:var(--muted);font-variant-numeric:tabular-nums}.cell{position:relative;display:flex;align-items:center;justify-content:center;border-right:1px solid var(--fret)}.cell:before{content:"";position:absolute;left:0;right:0;top:50%;height:var(--string-w, 1px);transform:translateY(-50%);background:var(--string)}.cell.first-fret:after{content:"";position:absolute;left:-2px;top:0;bottom:0;width:4px;border-radius:2px;background:var(--nut)}.open-cell{border-right:none}.open-cell:before{display:none}.inlay{position:relative;pointer-events:none}.inlay-dot{position:absolute;left:50%;width:13px;height:13px;border-radius:50%;background:var(--line);opacity:.75;transform:translate(-50%,-50%)}.inlay.single .inlay-dot{top:50%}.inlay.double .inlay-dot:first-child{top:var(--cell-h)}.inlay.double .inlay-dot:last-child{bottom:var(--cell-h);transform:translate(-50%,50%)}.hit{position:absolute;top:0;right:0;bottom:0;left:0;z-index:1;display:flex;align-items:center;justify-content:center;border:none;padding:0;margin:0;background:transparent;cursor:pointer;-webkit-tap-highlight-color:transparent}.dot{position:relative;width:36px;height:36px;border-radius:50%;pointer-events:none;font:inherit;font-size:14px;font-weight:600;letter-spacing:-.01em;display:flex;align-items:center;justify-content:center;background:transparent;color:transparent;transition:background-color .12s ease,color .12s ease,transform .12s ease}@media (hover: hover) and (pointer: fine){.hit:hover .dot{background:color-mix(in srgb,var(--note-bg) 12%,transparent);color:var(--muted)}.hit:hover .dot.note{background:var(--note-bg);color:var(--note-ink)}.hit:hover .dot.root{background:var(--root-bg);color:var(--root-ink)}}.hit:active .dot{transform:scale(.92)}.hit:focus-visible{outline:none}.hit:focus-visible .dot{outline:2px solid var(--root-bg);outline-offset:2px}.dot.ghost{color:var(--muted);background:color-mix(in srgb,var(--bg) 70%,transparent)}.dot.note{background:var(--note-bg);color:var(--note-ink)}.dot.root{background:var(--root-bg);color:var(--root-ink)}.dot.open-note{background:var(--open-bg);color:var(--open-ink)}.dot.open-note.note{background:var(--note-bg);color:var(--note-ink)}.dot.open-note.root{background:var(--root-bg);color:var(--root-ink)}.degree{position:absolute;top:-4px;right:-6px;min-width:17px;height:17px;padding:0 3px;border-radius:999px;border:2px solid var(--bg);display:flex;align-items:center;justify-content:center;font-size:10px;font-weight:700;line-height:1;letter-spacing:0;background:var(--root-bg);color:var(--root-ink)}.dot.root .degree{background:var(--note-bg);color:var(--note-ink)}.controls{display:flex;flex-wrap:wrap;align-items:center;gap:14px;margin-top:18px;padding:14px 16px;background:var(--panel);border:1px solid var(--line);border-radius:14px}.controls label,.controls .control{display:flex;align-items:center;gap:8px;font-size:13px;color:var(--muted)}.controls select{font:inherit;font-size:13px;color:var(--ink);background:var(--bg);border:1px solid var(--line);border-radius:8px;padding:6px 8px}.segmented{display:inline-flex;border:1px solid var(--line);border-radius:999px;overflow:hidden}.segmented button{display:inline-flex;align-items:center;justify-content:center;min-height:30px;font:inherit;font-size:15px;line-height:1;padding:7px 14px;border:none;background:var(--bg);color:var(--muted);cursor:pointer}.segmented button.active{background:var(--note-bg);color:var(--note-ink)}.switch{cursor:pointer}.switch input{accent-color:var(--root-bg);width:16px;height:16px}.clear,.play{font:inherit;font-size:13px;padding:8px 14px;border-radius:999px;border:1px solid var(--line);background:var(--bg);color:var(--ink);cursor:pointer}.actions{display:flex;flex-wrap:wrap;align-items:center;justify-content:flex-end;gap:12px;margin-bottom:12px}.volume{display:flex;align-items:center;gap:8px;color:var(--muted)}.volume input{width:110px;accent-color:var(--root-bg);cursor:pointer}.play{display:inline-flex;align-items:center;gap:7px;border-color:transparent;background:var(--note-bg);color:var(--note-ink);font-weight:600}.clear:disabled,.play:disabled{opacity:.45;cursor:default}.export{margin-top:22px;padding:14px 16px;background:var(--panel);border:1px solid var(--line);border-radius:14px}.export img{display:block;width:100%;max-width:620px;height:auto;border-radius:8px}.download{display:inline-block;margin-bottom:12px;padding:6px 14px;border:1px solid var(--line);border-radius:999px;font-size:13px;color:var(--ink);text-decoration:none}.notefilter{display:flex;flex-wrap:wrap;align-items:center;gap:6px;margin-top:10px;padding:10px 12px;background:var(--panel);border:1px solid var(--line);border-radius:14px}.notefilter-label{margin-right:6px;font-size:13px;color:var(--muted)}.notefilter button{font:inherit;font-size:13px;font-weight:600;min-width:40px;padding:6px 10px;border-radius:999px;border:1px solid var(--line);background:var(--bg);color:var(--muted);cursor:pointer}.notefilter button.active{background:var(--note-bg);border-color:transparent;color:var(--note-ink)}.notefilter .reset{margin-left:6px;min-width:0;font-weight:400;color:var(--muted)}.legend{display:flex;gap:18px;margin-top:10px;font-size:13px;color:var(--muted)}.legend span{display:inline-flex;align-items:center;gap:7px}.swatch{width:14px;height:14px;border-radius:50%;display:inline-block}.swatch.note{background:var(--note-bg)}.swatch.root{background:var(--root-bg)}.spelling{margin-top:22px;padding:14px 16px;background:var(--panel);border:1px solid var(--line);border-radius:14px}.spelling h2{display:flex;align-items:baseline;flex-wrap:wrap;gap:4px 12px;margin:0;font-size:17px;font-weight:700;letter-spacing:-.01em}.spelling h2 .chord-quality{font-size:13px;font-weight:400;color:var(--muted)}h2+.spelling-rows:not(:empty){margin-top:12px}.spelling-rows{display:flex;flex-wrap:wrap;gap:10px}.spelling .reset{font:inherit;font-size:12px;font-weight:400;padding:4px 10px;border-radius:999px;border:1px solid var(--line);background:var(--bg);color:var(--muted);cursor:pointer}.swatch.badge{width:17px;height:17px;background:var(--root-bg);color:var(--root-ink);font-size:10px;font-weight:700;font-style:normal;display:inline-flex;align-items:center;justify-content:center}@media (max-width: 640px){:root{--cell-h: 46px;--fret-min: 42px}.dot{width:32px;height:32px;font-size:13px}.degree{top:-3px;right:-4px;min-width:15px;height:15px;font-size:9px;border-width:1.5px}.actions{justify-content:flex-start}}