:root{--bg:#0a0705;--glow:#c98a3c;--ink:#e8ddcb;--ink-dim:#8d8071;--line:#e8ddcb24;--panel:#18120db8}*{box-sizing:border-box}html,body{height:100%}body{background:var(--bg);min-height:100dvh;color:var(--ink);margin:0;font-family:system-ui,sans-serif;line-height:1.6;overflow-x:hidden}main{z-index:1;flex-direction:column;justify-content:center;align-items:center;gap:clamp(1rem,3vw,1.75rem);max-width:none;min-height:100dvh;margin:0;padding:3.5rem 1rem 1.5rem;display:flex;position:relative}a{color:var(--glow)}header{z-index:5;padding:1rem 1.25rem;position:absolute;inset:0 auto auto 0}header nav a{letter-spacing:.04em;opacity:.55;font-size:.8rem;text-decoration:none}header nav a:hover{opacity:.9}header nav a:focus-visible{outline:2px solid var(--glow);outline-offset:3px;opacity:.9;border-radius:2px}.visually-hidden{clip-path:inset(50%);white-space:nowrap;border:0;width:1px;height:1px;margin:-1px;padding:0;position:absolute;overflow:hidden}.stage{z-index:-1;background:var(--bg);pointer-events:none;position:fixed;inset:0}.grain{z-index:-1;opacity:.05;mix-blend-mode:overlay;pointer-events:none;background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='160' height='160'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3'/></filter><rect width='160' height='160' filter='url(%23n)'/></svg>");position:fixed;inset:-50%}.instrument-header{text-align:center;flex-direction:column;align-items:center;gap:.3rem;display:flex}.tagline{letter-spacing:.34em;text-transform:lowercase;color:var(--ink-dim);margin:0;font-size:.95rem;font-weight:500}.now{letter-spacing:.18em;color:var(--ink-dim);font-variant-numeric:tabular-nums;font-size:.78rem}.now b{color:var(--glow);font-weight:500}.instrument{aspect-ratio:1600/560;touch-action:none;cursor:crosshair;filter:drop-shadow(0 34px 60px #000000a6);width:min(1500px,94vw);max-height:66vh;position:relative}#guitar{width:100%;height:100%;display:block;position:absolute;inset:0}#strings{pointer-events:none;width:100%;height:100%;display:block;position:absolute;inset:0}.invite{z-index:5;backdrop-filter:blur(1.5px);cursor:pointer;pointer-events:none;background:radial-gradient(60% 70%,#0a07059e,#0a0705db);border-radius:1rem;place-content:center;justify-items:center;gap:.9rem;transition:opacity .7s,visibility .7s;display:grid;position:absolute;inset:0}.invite p{letter-spacing:.3em;text-transform:lowercase;color:var(--ink);margin:0;font-size:clamp(1rem,2.2vw,1.5rem)}.invite small{letter-spacing:.22em;text-transform:lowercase;color:var(--ink-dim);font-size:.78rem}.pick{background:linear-gradient(160deg,#f0d6a8,#b1793a);border-radius:6px 6px 14px 14px/6px 6px 20px 20px;width:26px;height:30px;animation:3.2s cubic-bezier(.5,0,.5,1) infinite sweep;box-shadow:0 0 22px #e6aa5a8c}@keyframes sweep{0%{opacity:0;transform:translate(-120px,-26px)rotate(-16deg)}18%{opacity:1}50%{opacity:1;transform:translate(120px,26px)rotate(12deg)}72%{opacity:0}to{opacity:0;transform:translate(-120px,-26px)rotate(-16deg)}}body.playing .invite{visibility:hidden;opacity:0}.console{background:var(--panel);border:1px solid var(--line);backdrop-filter:blur(9px);border-radius:999px;flex-wrap:wrap;justify-content:center;align-items:center;gap:.5rem .7rem;max-width:min(1100px,96vw);padding:.55rem .75rem;display:flex}.chords{flex-wrap:wrap;justify-content:center;gap:.4rem;display:flex}.chord{font:inherit;letter-spacing:.1em;color:var(--ink-dim);appearance:none;cursor:pointer;border:1px solid var(--line);background:0 0;border-radius:999px;align-items:baseline;gap:.4rem;padding:.34rem .72rem;font-size:.82rem;transition:color .18s,border-color .18s,background .18s,transform .12s;display:inline-flex}.chord kbd{font:inherit;color:inherit;opacity:.55;letter-spacing:.08em;background:0 0;border:0;padding:0;font-size:.62rem}.chord:hover,.chord:focus-visible{color:var(--ink);border-color:#c98a3c80}.chord[aria-pressed=true]{color:#1a1006;background:linear-gradient(#e6b26a,#c9873a);border-color:#0000;transform:translateY(-1px)}.sep{background:var(--line);width:1px;height:22px}.knob{letter-spacing:.16em;color:var(--ink-dim);align-items:center;gap:.5rem;font-size:.72rem;display:inline-flex}.knob input{appearance:none;background:#e8ddcb33;border-radius:3px;outline:none;width:88px;height:3px}.knob input::-webkit-slider-thumb{cursor:pointer;appearance:none;background:linear-gradient(#f0d3a2,#c9873a);border-radius:50%;width:13px;height:13px;box-shadow:0 0 10px #c98a3c99}.knob input::-moz-range-thumb{cursor:pointer;background:linear-gradient(#f0d3a2,#c9873a);border:0;border-radius:50%;width:13px;height:13px}.hint{letter-spacing:.2em;text-align:center;text-transform:lowercase;min-height:1.2em;color:var(--ink-dim);font-size:.72rem;transition:opacity .4s}:focus-visible{outline-offset:3px;border-radius:6px;outline:2px solid #e6b26ad9}@media (prefers-reduced-motion:reduce){.pick{animation:none}}@media (width<=760px){.knob{display:none}.instrument{max-height:52vh}}.backings{z-index:6;flex-direction:column;gap:.5rem;display:flex;position:fixed;top:50%;left:1.4rem;transform:translateY(-50%)}.backings-label{letter-spacing:.24em;text-transform:lowercase;color:var(--ink-dim);margin:0 0 .15rem .2rem;font-size:.62rem}.backing{min-width:8.5rem;font:inherit;text-align:left;color:var(--ink-dim);background:var(--panel);border:1px solid var(--line);cursor:pointer;backdrop-filter:blur(9px);border-radius:.7rem;flex-direction:column;gap:.15rem;padding:.5rem .8rem;transition:color .18s,border-color .18s,transform .12s;display:flex}.backing:hover,.backing:focus-visible{color:var(--ink);border-color:#c98a3c80}.backing-name{letter-spacing:.08em;font-size:.82rem}.backing-bpm{letter-spacing:.16em;opacity:.55;font-size:.6rem}.backing[aria-pressed=true]{color:#1a1006;background:linear-gradient(#e6b26a,#c9873a);border-color:#0000;transform:translate(2px)}.backing[aria-pressed=true] .backing-name:after{content:" ▍▍";font-size:.7em}@media (width<=900px){.backings{flex-flow:wrap;justify-content:center;position:static;transform:none}.backings-label{text-align:center;flex-basis:100%;margin:.3rem 0 0}.backing{min-width:0}}.song-row{align-items:stretch;gap:.35rem;display:flex}.song-row .song{flex:1}.song-slow{font:inherit;color:var(--ink-dim);background:var(--panel);border:1px solid var(--line);cursor:pointer;border-radius:.7rem;padding:0 .55rem;font-size:.72rem;transition:color .18s,border-color .18s}.song-slow:hover,.song-slow:focus-visible{color:var(--ink);border-color:#c98a3c80}.song-slow[aria-pressed=true]{color:#1a1006;background:linear-gradient(#e6b26a,#c9873a);border-color:#0000}.song-now{align-items:baseline;gap:.5rem;min-height:1.6rem;margin:.1rem 0 0 .2rem;display:flex}.song-chord{letter-spacing:.12em;color:var(--glow);font-size:1.25rem}.song-section{letter-spacing:.24em;text-transform:lowercase;color:var(--ink-dim);font-size:.62rem}.hint-mobile,.rotate-hint{display:none}@media (width<=760px){.kbd-hint,.chord kbd,.hint-desktop{display:none}.hint-mobile{display:inline}.chord,.backing,.song{min-height:44px}}@media (width<=760px) and (orientation:portrait){.rotate-hint{display:block}}