:root{--stage:#17110c;--stage-deep:#0c0805;--edge:#33241a;--ink:#f4e9d9;--ink-quiet:#a8907a;--brass:#e8c58a;--brass-hot:#fff0cd;--wood:#7a4b28;--nut:10.833%;--bridge:84.333%;--band-top:20.968%;--band-height:58.065%;--hole-left:57.5%;--hole-size:min(56.452%, 44vw)}*{box-sizing:border-box}html,body{height:100%}body{background:var(--stage-deep);color:var(--ink);flex-direction:column;height:100dvh;margin:0;font-family:system-ui,sans-serif;display:flex;overflow:hidden}.bar{border-bottom:1px solid var(--edge);background:var(--stage);z-index:2;justify-content:space-between;align-items:baseline;gap:1rem;padding:.75rem 1.25rem;display:flex}.bar h1{letter-spacing:.16em;text-transform:uppercase;margin:0;font-size:1rem;font-weight:600}.bar a{color:var(--ink-quiet);font-size:.8125rem;text-decoration:none}.bar a:hover,.bar a:focus-visible{color:var(--brass)}main{flex-direction:column;flex:1;min-height:0;display:flex}.field{background:var(--stage-deep);flex:1;min-height:0;position:relative;overflow:hidden}.guitar{width:100%;height:100%;position:absolute;inset:0}.guitar .body{fill:#6d3f20}.guitar .top{fill:url(#spruce)}.guitar .noise{fill:#2a170a;mix-blend-mode:overlay;opacity:.5}.guitar .grain path{fill:none;stroke:#6b3d1c}.guitar .board-grain path{stroke:#100702}.guitar .sheen{fill:url(#sheen)}.guitar .binding{fill:none;stroke:#f6e6c4;stroke-width:7px;opacity:.85}.guitar .board{fill:url(#rosewood)}.guitar .board-edge{fill:#e9d6ae;opacity:.55}.guitar .fret{fill:url(#fretwire)}.guitar .nut{fill:url(#bone)}.guitar .bridge{fill:url(#bridgewood)}.guitar .saddle{fill:url(#bone)}.guitar .string-shadows rect{fill:#2a1607;opacity:.4}.rounds,.fingers{pointer-events:none;position:absolute;inset:0}.soundhole{left:var(--hole-left);height:var(--hole-size);aspect-ratio:1;background:radial-gradient(circle closest-side,#0000 0 85.4%,#17100a 85.6% 86.8%,#ecdcb6 87% 88.6%,#4b2a13 88.8% 91.4%,#c9a86a 91.6% 93.2%,#351d0c 93.4% 96.4%,#ecdcb6 96.6% 98.2%,#2a1809 98.4% 100%),radial-gradient(circle closest-side,#000 0% 52%,#150c05 72%,#34200e 83%,#100903 85.4%,#0000 85.6%);border-radius:50%;position:absolute;top:50%;transform:translate(-50%,-50%);box-shadow:0 .4rem 1.4rem #00000073}.inlay{aspect-ratio:1;opacity:.85;background:radial-gradient(circle at 40% 35%,#fffdf5,#d8cbaa 70%,#9d8f70);border-radius:50%;height:3.226%;position:absolute;top:50%;transform:translate(-50%,-50%)}.pins{left:calc(var(--bridge) + 2.6%);width:0;position:absolute;top:0;bottom:0}.pin{aspect-ratio:1;background:radial-gradient(circle at 38% 32%,#fdf4de,#cbb98f 60%,#6a5535);border-radius:50%;height:3.9%;position:absolute;transform:translate(-50%,-50%);box-shadow:0 1px 2px #0000008c}.finger{aspect-ratio:1;background:radial-gradient(circle at 36% 30%,#fff6e2,#e2b268 55%,#8d5320);border-radius:50%;height:5.323%;transition:left .19s cubic-bezier(.32,.72,.3,1),top .19s cubic-bezier(.32,.72,.3,1);position:absolute;transform:translate(-50%,-50%);box-shadow:0 .15rem .5rem #0009,inset 0 -.1rem .25rem #0000004d}.finger[data-open=true]{box-shadow:none;border:.2rem solid var(--brass);opacity:.8;background:0 0}.strings{left:var(--nut);width:calc(var(--bridge) - var(--nut));top:var(--band-top);height:var(--band-height);touch-action:none;-webkit-user-select:none;user-select:none;flex-direction:column;display:flex;position:absolute}.string{cursor:pointer;touch-action:none;background:0 0;border:0;flex:1;align-items:center;min-height:0;padding:0;display:flex;position:relative}.string-key{width:2rem;color:var(--brass);text-align:center;opacity:.6;text-shadow:0 1px 2px #000c;font-size:.75rem;position:absolute;left:-2.75rem}.string-wire{flex:1;min-width:0;height:100%;min-height:0;display:block;overflow:visible}.string-wire path{fill:none;stroke:color-mix(in srgb, #fffdf6 calc(var(--ring,0) * 100%), #efe3c6);stroke-width:calc(var(--gauge,5.5px) - var(--string) * var(--taper,.65px));stroke-linecap:round;filter:drop-shadow(0 1.5px 1px #2e1808e6) drop-shadow(0 0 1px #2e1808b3) drop-shadow(0 0 calc(var(--ring,0) * 14px) rgb(255 244 214/calc(var(--ring,0) * 85%)))}.string:hover .string-wire path{stroke:#fff3d8}.string:focus-visible{outline:2px solid var(--brass-hot);outline-offset:-3px;border-radius:.25rem}.pick{left:45%;top:calc(var(--sweep,0) * 100%);background:var(--brass-hot);opacity:0;pointer-events:none;border-radius:50%;width:.875rem;height:.875rem;margin:-.4375rem 0 0 -.4375rem;transition:opacity .22s;position:absolute;box-shadow:0 0 1.25rem .375rem #fff0cd8c}.pick.sweeping{opacity:1}body.played .pick{display:none}.rhythms{background:var(--stage);z-index:2;align-items:center;gap:.75rem;padding:.5rem .625rem 0;display:flex}.rhythm-set{flex:1;gap:.375rem;min-width:0;display:flex}.rhythm{border:1px solid var(--edge);min-width:0;color:var(--ink-quiet);font:inherit;cursor:pointer;background:#221810;border-radius:.5rem;flex-direction:column;flex:1;align-items:center;gap:.0625rem;padding:.3125rem .125rem;transition:background .12s,color .12s;display:flex}.rhythm-name{font-size:.75rem;font-weight:600;line-height:1.1}.rhythm-beat{letter-spacing:.08em;opacity:.7;white-space:nowrap;font-size:.625rem}.rhythm[aria-pressed=true]{border-color:var(--brass);color:var(--brass-hot);background:#7d5a2c}.tempo{flex:none;align-items:center;gap:.5rem;display:flex}.tempo-mark{height:.875rem;fill:var(--ink-quiet);opacity:.75;flex:none}.tempo input{width:6rem;accent-color:var(--brass)}.rhythm:focus-visible,.tempo input:focus-visible{outline:2px solid var(--brass-hot);outline-offset:2px}.chords{background:var(--stage);border-top:1px solid var(--edge);z-index:2;gap:.5rem;padding:.625rem;display:flex}.chord{border:1px solid var(--edge);color:var(--ink-quiet);font:inherit;cursor:pointer;background:#241a13;border-radius:.625rem;flex-direction:column;flex:1;justify-content:center;align-items:center;gap:.125rem;padding:.5rem .25rem;transition:background .12s,color .12s,border-color .12s;display:flex}.chord-name{font-size:1.375rem;font-weight:600;line-height:1}.chord-key{letter-spacing:.14em;opacity:.65;font-size:.625rem}.chord[aria-pressed=true]{background:var(--brass);border-color:var(--brass-hot);color:#2b1a06}.chord:focus-visible{outline:2px solid var(--brass-hot);outline-offset:-3px}@media (hover:none) and (pointer:coarse){.chord-key{display:none}}@media (width<=799px){.inlay,.string-key{display:none}.string-wire path{--gauge:4px;--taper:.42px}}.hint{display:none}@media (prefers-reduced-motion:reduce){.finger{transition:none}.pick{display:none}.hint{inset-inline:0;text-align:center;color:var(--ink);text-shadow:0 1px 4px #000000e6;margin:0;font-size:.875rem;display:block;position:absolute;bottom:.75rem}body.played .hint{display:none}}@media (width<=799px){.tempo input{width:4rem}.tempo-mark{height:.75rem}}@media (width>=800px){.rhythms{gap:1.25rem;padding:.75rem 1.25rem 0}.rhythm{padding:.5rem .25rem}.rhythm-name{font-size:.875rem}.rhythm-beat{font-size:.75rem}.tempo input{width:9rem}.chords{gap:.75rem;padding:.875rem 1.25rem}.chord{padding:.875rem .5rem}.chord-name{font-size:1.625rem}.string-key{font-size:.875rem;left:-3.25rem}}