:root{color-scheme:light;--paper: #f3efe8;--sheet: #f7f4ee;--raise: #e7e1d6;--ink: #1c1915;--muted: #5e584e;--line: #c9c1b4;--mark: #b43322;--mark-ink: #fff7f4;--loop: rgba(180, 51, 34, .12);--danger: #8d2618;--well: #161513;--bone: #f3efe6;--well-dim: rgba(243, 239, 230, .55);--well-faint: rgba(243, 239, 230, .18);--wave: #7c776e;font-family:Commissioner,Avenir Next,Segoe UI,sans-serif;background:var(--paper);color:var(--ink);font-synthesis:none}*{box-sizing:border-box}body{margin:0;min-height:100vh;background:var(--paper)}::selection{background:#f0c8c0;color:var(--ink)}button,input,select,textarea{font:inherit;color:inherit}button{background:var(--sheet);border:1px solid var(--line);border-radius:2px;padding:.35rem .7rem;cursor:pointer}button:hover{border-color:#8d867a;background:#fff}button.on{background:var(--ink);color:var(--bone);border-color:var(--ink)}button.on:hover{background:#2c2824;border-color:#2c2824}button.primary{background:var(--mark);color:var(--mark-ink);border-color:var(--mark)}button.primary:hover{background:#9c2c1d;border-color:#9c2c1d}button:disabled{opacity:.45;cursor:default}button:focus-visible,input:focus-visible,select:focus-visible,textarea:focus-visible{outline:2px solid var(--mark);outline-offset:2px}.app{height:100vh;min-height:0;display:flex;flex-direction:column;overflow:hidden;background:var(--paper)}.app.dragover{outline:2px solid var(--mark);outline-offset:-6px}.top{display:flex;align-items:center;gap:1rem;padding:.55rem .9rem;border-bottom:1px solid var(--line);background:var(--paper)}.brand{font-family:IBM Plex Mono,ui-monospace,monospace;font-weight:500;font-size:.92rem;letter-spacing:-.04em}.tagline,.hint,.status{color:var(--muted)}.tagline{margin:0;font-size:.92rem}.name{flex:1;background:transparent;border:none;border-bottom:1px solid transparent;padding:.15rem 0;min-width:0;font-size:.95rem}.name:focus{outline:none;border-bottom-color:var(--mark)}.top-actions{display:flex;gap:.4rem;margin-left:auto}.empty{flex:1;display:grid;grid-template-columns:minmax(0,1.3fr) minmax(16rem,.7fr);gap:3rem;padding:3.5rem 7vw;align-items:start}.drop h1{font-weight:600;font-size:2.6rem;letter-spacing:-.035em;line-height:1.05;margin:0 0 .75rem}.drop p{max-width:38rem;line-height:1.5}.empty-actions,.grid-row,.alts,.top-actions{display:flex;gap:.4rem;flex-wrap:wrap}.segmented{display:flex;flex-wrap:wrap}.segmented button{border-radius:0;margin-left:-1px}.segmented button:first-child{margin-left:0;border-radius:2px 0 0 2px}.segmented button:last-child{border-radius:0 2px 2px 0}.segmented button:only-child{border-radius:2px}.recent h2,.panel h2,.library-card h2{margin:0 0 .55rem;padding-bottom:.3rem;border-bottom:1px solid var(--line);font-size:.82rem;font-weight:600;letter-spacing:0;text-transform:none;color:var(--ink)}.recent-row,.library-row,.loop-list li{display:flex;justify-content:space-between;gap:.4rem;align-items:center}.recent-row,.loop-name{width:100%;text-align:left;border-radius:2px;background:transparent}.recent{display:flex;flex-direction:column;gap:.35rem}.workspace{flex:1;min-height:0;display:grid;grid-template-columns:260px minmax(0,1fr) 280px;grid-template-rows:minmax(0,1fr);background:var(--raise)}.panel{padding:.85rem .9rem 1.4rem;overflow:auto;background:var(--paper)}.left{border-right:1px solid var(--line)}.right{border-left:1px solid var(--line)}.center{position:relative;min-width:0;min-height:0;max-width:100%;display:flex;flex-direction:column;overflow:hidden;background:var(--sheet)}.hud{position:absolute;top:.7rem;left:50%;transform:translate(-50%);z-index:5;padding:.3rem .7rem;border-radius:2px;background:var(--ink);color:var(--bone);font-family:IBM Plex Mono,ui-monospace,monospace;font-size:.82rem;pointer-events:none;animation:hud 1.2s ease forwards}@keyframes hud{0%{opacity:0;transform:translate(-50%,-4px)}12%{opacity:1;transform:translate(-50%)}75%{opacity:1}to{opacity:0}}button.link{background:none;border:none;border-radius:0;padding:.2rem 0;color:var(--muted);text-decoration:underline;text-underline-offset:3px}button.link:hover{color:var(--ink);background:none}button kbd{margin-left:.3rem;font-size:.78em}button.primary kbd{border-color:#fff7f473;color:var(--mark-ink)}button.on kbd{border-color:#f3efe666;color:var(--bone)}.welcome{position:fixed;top:0;right:0;bottom:0;left:0;z-index:20;display:grid;place-items:center;padding:1.5rem;background:#1c191575;overflow:auto}.welcome-card{width:min(760px,100%);display:flex;flex-direction:column;gap:.85rem;background:var(--sheet);border:1px solid var(--line);padding:1.3rem 1.4rem 1.2rem}.welcome-card h1{font-weight:600;font-size:2.15rem;letter-spacing:-.035em;line-height:1.05;margin:.2rem 0 0}.welcome-card h2{margin:.6rem 0 0;font-size:1.05rem;font-weight:600}.welcome-card .lede{margin:0;color:var(--muted);font-size:1.02rem;max-width:38rem;line-height:1.45}.welcome-card .link{align-self:flex-start}.welcome-card .skip{margin-top:.4rem}.hand-choices,.track-choices{display:grid;grid-template-columns:1fr 1fr;gap:.6rem}.hand-choice,.track-choice{display:flex;flex-direction:column;align-items:flex-start;gap:.3rem;text-align:left;border-radius:2px;padding:.85rem .9rem;background:var(--paper)}.hand-choice:hover,.track-choice:hover,.hand-choice.chosen{border-color:var(--ink)}.hand-choice.chosen{background:var(--sheet)}.hand-choice strong,.track-choice strong{font-size:1.05rem}.hand-choice span,.track-choice span{color:var(--muted)}.track-choice.primary span{color:var(--mark-ink);opacity:.85}.track-choice{min-height:6rem;justify-content:center}.kbmap{display:flex;flex-direction:column;gap:3px;margin-top:.55rem;width:100%}.kbmap-row{display:flex;gap:3px}.kbmap-key{flex:0 0 auto;width:1.45rem;height:1.45rem;display:grid;place-items:center;border:1px solid var(--line);border-radius:2px;font-family:IBM Plex Mono,ui-monospace,monospace;font-size:.62rem;color:var(--muted);background:var(--sheet)}.kbmap-key.lit{background:var(--ink);border-color:var(--ink);color:var(--bone);font-weight:500}.kbmap-key.space{width:8.4rem;margin-left:2.4rem}.coach{position:fixed;right:.8rem;bottom:4.6rem;z-index:10;width:min(340px,calc(100vw - 1.6rem));padding:.85rem .95rem .9rem;background:var(--sheet);border:1px solid var(--line);border-left:3px solid var(--mark);border-radius:0}.coach header{display:flex;justify-content:space-between;align-items:center}.coach-count{font-family:IBM Plex Mono,ui-monospace,monospace;font-size:.72rem;color:var(--muted)}.coach h2{margin:.25rem 0 .35rem;font-size:1.05rem}.coach p{margin:.35rem 0;line-height:1.45}.coach .keys{margin:.5rem 0}.coach-actions{margin-top:.7rem;justify-content:flex-end}.coach-needs{list-style:none;padding:0;margin:.7rem 0 0;display:flex;gap:.35rem;flex-wrap:wrap}.coach-needs li{display:flex;align-items:center;gap:.3rem;padding:.2rem .45rem;border:1px solid var(--line);border-radius:2px;color:var(--muted);font-size:.82rem}.coach-needs li.hit{border-color:var(--mark);color:var(--ink)}.coach-needs li.hit:after{content:"✓";color:var(--mark);font-weight:650}.hand-toggle{margin-bottom:.7rem}.welcome-card.wide{width:min(920px,100%)}.welcome-nav{display:flex;justify-content:space-between;align-items:center;margin-top:.3rem}.how{display:flex;flex-direction:column;gap:.8rem}.mini-wave{background:var(--well);border:1px solid var(--well);padding:.55rem .7rem .6rem;color:var(--bone)}.mw-numbers{display:grid;grid-template-columns:repeat(12,1fr);font-family:IBM Plex Mono,ui-monospace,monospace;font-size:.68rem;color:var(--well-dim);margin-bottom:.2rem}.mw-numbers span{padding-left:.15rem}.mw-body{position:relative;height:88px;display:flex;align-items:center;gap:2px}.mw-tick{flex:1;background:#3a3834;border-radius:1px;transition:background .2s}.mw-tick.in{background:var(--mark)}.mw-tick.line{box-shadow:-1px 0 #2a2926}.mw-loop{position:absolute;top:-3px;bottom:-3px;background:#b4332247;transition:left .28s cubic-bezier(.3,.9,.3,1),width .28s cubic-bezier(.3,.9,.3,1);pointer-events:none}.mw-loop.off{background:#b433221a}.mw-loop .edge{position:absolute;top:0;bottom:0;width:2px;background:var(--mark)}.mw-loop .edge.start{left:0}.mw-loop .edge.end{right:0}.mw-head{position:absolute;top:-6px;bottom:-6px;width:2px;background:var(--bone);pointer-events:none}.mw-status{display:flex;flex-wrap:wrap;gap:.35rem 1rem;margin-top:.5rem;font-size:.8rem;color:var(--well-dim);font-family:IBM Plex Mono,ui-monospace,monospace}.mw-slots{display:flex;gap:.35rem;margin-left:auto}.mw-slots>span{padding:0 .4rem;border:1px solid #3f3d39;color:var(--well-dim)}.mw-slots>span.on{border-color:var(--bone);color:var(--bone)}.mw-dot{display:inline-block;width:.45rem;height:.45rem;margin-left:.3rem;background:transparent;vertical-align:middle}.mw-dot.on{background:#6a675f}.mw-dot.on.tick{animation:tick .18s ease-out}@keyframes tick{0%{background:var(--mark)}to{background:#6a675f}}.how-caption{margin:0;min-height:1.6rem;font-size:1rem;display:flex;align-items:center;gap:.45rem}.how-caption kbd{font-size:.85rem}.how-trying{margin-left:auto;font-family:IBM Plex Mono,ui-monospace,monospace;font-size:.72rem;color:var(--mark)}.kbdemo{display:flex;flex-direction:column;gap:4px;align-self:center}.kbdemo-row{display:flex;gap:4px}.kbdemo-key{width:3.25rem;height:2.9rem;display:flex;flex-direction:column;justify-content:center;align-items:center;gap:.05rem;border:1px solid #3a3834;border-bottom-width:2px;border-radius:2px;color:#8a847a;background:#221f1c;font-family:IBM Plex Mono,ui-monospace,monospace}.kbdemo-key b{font-size:.85rem;font-weight:500}.kbdemo-key small{font-size:.58rem;line-height:1;white-space:nowrap;font-family:Commissioner,sans-serif}.kbdemo-key.lit{color:var(--bone);border-color:#6d6860;background:#2c2926}.kbdemo-key.lit small{color:#d9d3c8}.kbdemo-key.space{width:16.4rem}.kbdemo-key.down{animation:press .42s ease-out}@keyframes press{0%{transform:translateY(0)}18%{transform:translateY(2px);background:var(--mark);color:var(--mark-ink);border-bottom-width:1px}60%{background:var(--mark);color:var(--mark-ink)}to{transform:translateY(0)}}.kbdemo-key.down small{color:inherit}.slot-prompt{display:flex;align-items:center;gap:.7rem;margin:.6rem .8rem 0;padding:.6rem .75rem;background:var(--sheet);border:1px solid var(--line);border-left:3px solid var(--mark)}.slot-prompt>kbd{font-size:1.05rem;padding:.05rem .45rem}.slot-prompt label{flex:1;display:flex;flex-direction:column;gap:.2rem;font-size:.78rem;color:var(--muted)}.slot-prompt input{background:var(--paper);border:1px solid var(--line);border-radius:2px;padding:.35rem .5rem;font-size:1rem}.slot-prompt input:focus{outline:none;border-color:var(--mark)}.loop-list li{gap:.35rem}.slot-badge{min-width:1.4rem;text-align:center;font-family:IBM Plex Mono,ui-monospace,monospace}.slot-badge.empty{color:var(--muted);border-color:transparent}.align-banner{display:flex;align-items:center;justify-content:space-between;flex-wrap:wrap;gap:.8rem;margin:.6rem .8rem 0;padding:.7rem .8rem;background:var(--sheet);border:1px solid var(--line);border-left:3px solid var(--mark)}.align-banner h2{margin:0;font-size:1.05rem;font-weight:600}.align-banner p{margin:.2rem 0 0;max-width:40rem;color:var(--muted)}.align-banner .grid-row{flex-shrink:0}.panel section{margin-bottom:1.15rem}.stack,.slider{display:flex;flex-direction:column;gap:.25rem;font-size:.82rem;color:var(--muted);margin:.5rem 0}input[type=range]{accent-color:var(--mark)}input[type=number],select,textarea{background:var(--sheet);border:1px solid var(--line);border-radius:2px;padding:.32rem .45rem}textarea{resize:vertical;color:var(--ink)}.loop-list{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:.25rem}.loop-list li.active .loop-name{border-color:var(--mark);background:var(--loop)}.loop-name small{display:block;color:var(--muted);font-variant-numeric:tabular-nums}.icon{padding:.15rem .45rem}.stage{flex:1;display:flex;flex-direction:column;min-height:0;min-width:0;max-width:100%;overflow:hidden}.chord-scroll{overflow-x:auto;overflow-y:hidden;width:100%;min-width:0;height:36px;border-bottom:1px solid var(--line);background:var(--sheet);scrollbar-width:none}.chord-scroll::-webkit-scrollbar{display:none}.chord-inner{position:relative;height:36px}.chord{position:absolute;top:4px;height:28px;border-radius:0;padding:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;background:transparent;border:none;font-variant-numeric:tabular-nums}.chord-part{position:absolute;top:0;bottom:0;left:0;right:0;display:flex;flex-direction:column;align-items:center;justify-content:center;overflow:hidden;line-height:1.05}.chord-part.later{border-left:1px dashed var(--line)}.chord small{font-size:.68rem;color:var(--muted);font-family:IBM Plex Mono,ui-monospace,monospace}.chord.edited small{color:inherit;opacity:.75}.chord:hover{background:transparent;border-color:transparent}.chord.in-loop{background:var(--loop)}.chord.edited{color:var(--mark)}.chord.selected{outline:1px solid var(--mark);outline-offset:-1px}.video-stage{flex:1;min-height:0;display:flex;align-items:center;justify-content:center;padding:.5rem .8rem .7rem;background:var(--well)}.video-stage video{max-width:100%;max-height:100%;width:auto;height:auto;object-fit:contain;background:#000;cursor:pointer}.wave-wrap{position:relative;flex:1;height:auto;min-height:200px;min-width:0;background:var(--well);touch-action:none;overflow:hidden}.wave-host{position:absolute;top:0;right:0;bottom:0;left:0}.wave-overlay{position:absolute;left:0;top:0;width:100%;height:100%;pointer-events:none}.zoom-controls{position:absolute;right:8px;bottom:10px;display:flex;gap:.25rem;z-index:2}.zoom-controls button{background:#221f1c;color:var(--bone);border-color:#3c3935;min-width:1.8rem}.zoom-controls button:hover{border-color:var(--bone);background:#2c2926}.transport{display:flex;align-items:center;gap:.55rem;padding:.5rem .8rem;border-top:1px solid var(--line);background:var(--paper)}.readout{min-width:8.5rem;display:flex;flex-direction:column;line-height:1.2}.readout strong{font-family:IBM Plex Mono,ui-monospace,monospace;font-weight:500;font-size:.95rem}.readout span{color:var(--muted);font-family:IBM Plex Mono,ui-monospace,monospace;font-size:.78rem}.slider{min-width:9rem;margin:0}.slider input{width:100%}.sounding{font-size:1.45rem;margin:.15rem 0;letter-spacing:-.03em}.sounding strong{font-weight:600}.error{color:var(--danger)}.fretboard{width:100%;height:auto;margin-top:.5rem}.fret-label{fill:var(--muted);font-size:9px;font-family:IBM Plex Mono,ui-monospace,monospace}.string,.fret{stroke:#8a8378;stroke-width:1}.nut{stroke:var(--ink);stroke-width:3}.dot{fill:var(--mark)}.chroma{display:flex;align-items:end;gap:3px;height:72px;margin-top:.7rem}.chroma-col{flex:1;display:flex;flex-direction:column;justify-content:end;align-items:center;height:100%;font-size:9px;color:var(--muted);font-family:IBM Plex Mono,ui-monospace,monospace}.chroma-bar{width:100%;background:var(--ink);min-height:2px}.tempo-strip{width:100%;height:48px;display:block;margin:.1rem 0 .15rem;color:var(--mark)}.tempo-range{display:flex;justify-content:space-between;gap:.5rem;color:var(--muted);font-size:.72rem;font-family:IBM Plex Mono,ui-monospace,monospace}details.tuck{margin-top:.7rem}details.tuck summary{cursor:pointer;color:var(--muted)}details.tuck summary:hover{color:var(--ink)}.keys{list-style:none;padding:0;margin:0;display:flex;flex-direction:column;gap:.28rem;color:var(--muted);font-size:.84rem}kbd{font-family:IBM Plex Mono,ui-monospace,monospace;font-size:.78em;border:1px solid var(--line);border-bottom-width:2px;border-radius:2px;padding:0 .28rem;background:var(--sheet);color:var(--ink)}.library{position:fixed;top:0;right:0;bottom:0;left:0;background:#1c191575;display:grid;place-items:center;padding:1rem;z-index:15}.library-card{width:min(460px,100%);background:var(--sheet);border:1px solid var(--line);padding:.9rem 1rem 1rem}.library-card header,.library-row{display:flex;justify-content:space-between;align-items:center;gap:.5rem}.status{margin:.35rem .9rem;font-family:IBM Plex Mono,ui-monospace,monospace;font-size:.78rem}@media(max-width:980px){.app{height:auto;min-height:100vh;overflow:auto}.empty,.workspace{grid-template-columns:1fr;grid-template-rows:none}.right,.left{border:none;border-top:1px solid var(--line)}.drop h1{font-size:2rem}.hand-choices,.track-choices{grid-template-columns:1fr}.kbdemo-key{width:2.3rem;height:2.4rem}.kbdemo-key small{font-size:.48rem}.kbdemo-key.space{width:11.5rem}}.tuning-hint{display:flex;flex-wrap:wrap;align-items:center;gap:.35rem .5rem}
