*,*:before,*:after{box-sizing:border-box}:root{font-family:system-ui,-apple-system,sans-serif;line-height:1.5;color:#ffffffde;background-color:#1a1a1a;font-synthesis:none;text-rendering:optimizeLegibility;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale}body{margin:0;display:flex;justify-content:center;min-width:320px;min-height:100vh}.settings{display:flex;flex-direction:column;gap:12px;width:100%;max-width:400px}.setting-row{display:flex;align-items:center;gap:12px}.setting-row label{width:160px;text-align:right;font-size:14px;color:#ccc;flex-shrink:0}.setting-row input[type=range]{flex:1;accent-color:#e8a43a}.setting-row input[type=range]:disabled{opacity:.4}.setting-value{width:28px;text-align:center;font-size:14px;font-weight:600;color:#fff;font-variant-numeric:tabular-nums}.pattern-section{display:flex;flex-direction:column;gap:8px;margin-top:4px}.pattern-label{font-size:14px;color:#ccc;text-align:center}.pattern-row{display:flex;align-items:center;gap:10px;justify-content:center}.pattern-slots{display:flex;gap:4px}.pattern-slot{width:48px;height:36px;border-radius:6px;border:2px solid #555;background:transparent;color:#ccc;font-size:12px;font-weight:600;cursor:pointer;transition:border-color .15s,background .15s,color .15s}.pattern-slot:hover:not(:disabled){border-color:#888}.pattern-slot.root,.pattern-slot.\31st,.pattern-slot.\32nd{border-color:#e8a43a;color:#e8a43a}.pattern-slot.random{border-color:#6bb5e8;color:#6bb5e8}.pattern-slot.rest{border-color:#555;color:#666}.pattern-slot.disabled{opacity:.4;cursor:default}.pattern-buttons{display:flex;flex-direction:column;gap:2px}.pattern-btn{width:28px;height:17px;border-radius:4px;border:1px solid #555;background:transparent;color:#888;font-size:14px;line-height:1;cursor:pointer;display:flex;align-items:center;justify-content:center}.pattern-btn:hover:not(:disabled){border-color:#888;color:#ccc}.pattern-btn:disabled{opacity:.3;cursor:default}.staff-container{position:relative;width:calc(100vw - 40px);max-width:1200px;margin:0 auto;height:200px;overflow:hidden;-webkit-mask-image:linear-gradient(to right,transparent,black 20px,black calc(100% - 20px),transparent);mask-image:linear-gradient(to right,transparent,black 20px,black calc(100% - 20px),transparent)}.now-post{position:absolute;top:0;bottom:0;width:3px;background:#e8a43a;z-index:10;transition:box-shadow .05s ease}.now-post.flash{box-shadow:0 0 12px 4px #e8a43a88}.staff-track{position:absolute;top:0;left:0;width:100%;height:100%;will-change:transform}.staff-line{position:absolute;top:130px;left:0;right:0;height:4px;background:#555;z-index:1}.measure-group{position:absolute;top:0;bottom:0}.measure-separator{position:absolute;left:0;top:96px;height:34px;width:3px;background:#888;transform:translate(-50%);transition:background .05s ease,box-shadow .15s ease}.measure-separator.active{background:#f5d742;box-shadow:0 0 8px 2px #f5d74288}.beat-group{position:absolute;top:0;display:flex;flex-direction:column;align-items:center}.beat-tick{position:absolute;top:110px;left:0;width:3px;height:20px;background:#666;transform:translate(-50%);transition:background .05s ease,box-shadow .15s ease}.beat-tick.active{background:#f5d742;box-shadow:0 0 8px 2px #f5d74288}.beat-label{position:absolute;top:60px;left:0;white-space:nowrap;font-size:22px;font-weight:600;color:#ddd;transform:translate(-50%);font-family:Courier New,monospace}.rest-svg{color:#ddd;display:block}.staff-idle{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;font-size:20px;color:#555;background:#1a1a1a}.guide-content{display:flex;flex-direction:column;gap:20px}.guide-content h3{font-size:15px;font-weight:600;color:#e8a43a;margin:0 0 8px}.guide-content p,.guide-content li{font-size:14px;line-height:1.6;color:#aaa;margin:0}.guide-content ol,.guide-content ul{margin:0;padding-left:20px;display:flex;flex-direction:column;gap:8px}.guide-content strong{color:#ccc}.triad-shapes-content{width:100%;max-width:640px;margin:0 auto}.shapes-heading{font-size:15px;font-weight:600;color:#e8a43a;text-align:center;margin:16px 0 8px}.shapes-heading:first-child{margin-top:0}.shapes-row{display:flex;justify-content:center;gap:24px}.shape-diagram{display:flex;flex-direction:column;align-items:center;gap:8px}.shape-title{font-size:14px;font-weight:600;color:#ccc;margin:0}.fretboard-svg{display:block}.inversions-text{font-size:14px;color:#aaa;text-align:center;margin:8px 0;line-height:1.5}.inversions-list{list-style:none;padding:0;margin:8px auto;font-size:14px;color:#aaa;width:fit-content}.inversions-list li{margin:4px 0}.inversions-list strong{color:#ccc}.inversions-bridge{margin-top:16px}.string-group-selector{display:flex;justify-content:center;gap:4px;margin:8px 0;flex-wrap:wrap}.string-group-btn{background:#2a2a2a;border:1px solid #444;border-radius:4px;color:#aaa;font-size:12px;font-family:system-ui,sans-serif;padding:4px 10px;cursor:pointer}.string-group-btn:hover{background:#333;color:#ccc}.string-group-btn.active{background:#e8a43a;border-color:#e8a43a;color:#1a1a1a;font-weight:700}.note-selector{display:flex;justify-content:center;gap:4px;margin:8px 0;flex-wrap:wrap}.note-btn{background:#2a2a2a;border:1px solid #444;border-radius:4px;color:#aaa;font-size:12px;font-family:system-ui,sans-serif;padding:4px 8px;cursor:pointer;min-width:32px}.note-btn:hover{background:#333;color:#ccc}.note-btn.active{background:#e8a43a;border-color:#e8a43a;color:#1a1a1a;font-weight:700}.inversion-fretboard{display:block;margin:8px auto 0}.shapes-note{font-size:13px;color:#666;text-align:center;margin:16px 0 0}.info-bar{width:100%}.info-bar-tabs{display:flex;justify-content:center;gap:8px}.info-bar-tab{font-size:14px;color:#888;background:none;border:none;border-bottom:2px solid transparent;padding:6px 16px;cursor:pointer;-webkit-user-select:none;user-select:none;transition:color .15s,border-color .15s}.info-bar-tab:hover{color:#ccc}.info-bar-tab.active{color:#e8a43a;border-bottom-color:#e8a43a}.info-bar-collapse{display:grid;grid-template-rows:0fr;transition:grid-template-rows .35s ease}.info-bar-collapse.open{grid-template-rows:1fr}.info-bar-panel{overflow:hidden;padding-top:0;transition:padding-top .35s ease}.info-bar-collapse.open>.info-bar-panel{padding-top:16px}.info-bar-close{display:flex;align-items:center;justify-content:center;margin:16px auto 0;background:none;border:1px solid #555;border-radius:50%;width:28px;height:28px;color:#888;font-size:14px;cursor:pointer;padding:0 0 2px;-webkit-user-select:none;user-select:none;transition:color .15s,border-color .15s}.info-bar-close:hover{color:#ccc;border-color:#888}.app{display:flex;flex-direction:column;align-items:center;gap:24px;padding:40px 20px;width:100%;max-width:1200px;margin:0 auto}.title{font-size:28px;font-weight:700;color:#fff;margin:0;letter-spacing:1px}.controls{display:grid;grid-template-columns:1fr 1fr;gap:12px;width:280px}.start-btn{padding:12px 0;font-size:18px;font-weight:600;border-radius:8px;border:2px solid #e8a43a;background:transparent;color:#e8a43a;cursor:pointer;transition:background .15s,color .15s}.start-btn:hover{background:#e8a43a;color:#1a1a1a;border-color:#e8a43a}.start-btn.span-2{grid-column:1 / -1}.start-btn.secondary{border-color:#c44;color:#c44}.start-btn.secondary:hover{background:#c44;color:#1a1a1a;border-color:#c44}.mute-btn{padding:8px 24px;font-size:14px;border-radius:6px;border:1px solid #888;background:transparent;color:#888;cursor:pointer;transition:background .15s,color .15s}.mute-btn:hover{background:#888;color:#1a1a1a}