@import"https://fonts.googleapis.com/css2?family=Arvo:ital@0;1&family=JetBrains+Mono:wght@400;700&family=Sora&display=swap";:root{--root-note: #f12d2d;--thirds: #fba02a;--fifths: #3cc653;--chord-glow: #38bdf8;--text: #f9f9f9;--bg: #0e0e0e;--interval: #f3f78c;--dark-grey: #1e1e1e;--mid-grey: #454545;--grey: #808080;--light-grey: #ccc;--border: #2a2a2a;--c-maj: #ff3b84;--c-maj-border: #780f40;--c-maj-bg: #2d0018;--c-min: #60a5fa;--c-min-border: #1e3a5f;--c-min-bg: #0a1f3d;--c-dim: #a78bfa;--c-dim-border: #2d1b4e;--c-dim-bg: #1a0e30;--c-aug: #34d399;--c-aug-border: #134e4a;--c-aug-bg: #052e2b;--c-dom7: #fb923c;--c-dom7-border: #7c2d12;--c-dom7-bg: #3d1200;--c-maj7: #facc15;--c-maj7-border: #713f12;--c-maj7-bg: #3a1f00;--c-min7: #93c5fd;--c-min7-border: #1e3a5f;--c-min7-bg: #0a1f3d;--c-dim7: #c084fc;--c-dim7-border: #3b0764;--c-dim7-bg: #230540;--c-m7b5: #5eead4;--c-m7b5-border: #042f2e;--c-m7b5-bg: #011e1d;--c-sus2: #bef264;--c-sus2-border: #365314;--c-sus2-bg: #1a2e00;--c-sus4: #fdba74;--c-sus4-border: #7c3a12;--c-sus4-bg: #3d1c00;--c-add9: #f0abfc;--c-add9-border: #6b21a8;--c-add9-bg: #2e1065;--c-madd9: #86efac;--c-madd9-border: #14532d;--c-madd9-bg: #052e16;--c-minmaj7: #fb7185;--c-minmaj7-border: #881337;--c-minmaj7-bg: #2d0010;--c-augmaj7: #6ee7b7;--c-augmaj7-border: #065f46;--c-augmaj7-bg: #022c22}*,*:before,*:after{box-sizing:border-box}body{margin:0;font-family:JetBrains Mono,monospace;background:var(--bg);color:var(--text);overflow-x:hidden}.container{padding:1.5rem 1.5rem 3rem;max-width:1040px;margin:auto;min-height:101svh}.title{font-family:Arvo,serif;font-size:clamp(1.2rem,5vw,1.8rem);font-weight:700;margin-bottom:1.25rem;letter-spacing:-.02em}.subtitle{font-size:.78rem;color:var(--grey);margin-bottom:1.5rem}h2{font-family:Sora,sans-serif;font-size:.75rem;font-weight:400;color:var(--grey);margin:2rem 0 .5rem;text-transform:uppercase;letter-spacing:.1em}.tabs{display:flex;gap:.3rem;margin-bottom:1.75rem;background:var(--dark-grey);padding:4px;border-radius:10px;width:fit-content}.tab-btn{padding:.5rem 1.2rem;background:transparent;border:none;color:var(--grey);font-family:JetBrains Mono,monospace;font-size:.82rem;cursor:pointer;border-radius:7px;transition:all .15s;white-space:nowrap}.tab-btn:hover{color:var(--text);background:#ffffff0d}.tab-btn.active{background:var(--mid-grey);color:var(--text)}.controls-row{display:flex;flex-wrap:wrap;align-items:center;gap:.6rem;margin-bottom:.9rem}select{padding:.45rem .7rem;font-size:.85rem;font-family:inherit;background:var(--dark-grey);color:var(--text);border:none;border-radius:6px;cursor:pointer;outline:none;transition:border-color .15s}input[type=text]{padding:.45rem .7rem;font-size:.85rem;font-family:inherit;background:var(--dark-grey);color:var(--text);border:1px solid var(--mid-grey);border-radius:6px;outline:none;flex:1;min-width:220px;max-width:480px;transition:border-color .15s}input[type=text]:focus{border-color:var(--grey)}.lbl{font-size:.8rem;color:var(--grey)}.btn{padding:.42rem .9rem;font-family:inherit;font-size:.82rem;border-radius:6px;cursor:pointer;border:1px solid var(--mid-grey);background:transparent;transition:all .13s}.btn-outline{color:var(--grey)}.btn-outline:hover{border-color:var(--grey);color:var(--text)}.btn-accent{color:var(--interval);border-color:var(--interval)}.btn-accent:hover{background:var(--interval);color:var(--bg)}.btn-nav{padding:.42rem 1rem;background:var(--dark-grey);color:var(--text);font-family:inherit;font-size:.88rem;border-radius:6px;cursor:pointer;transition:all .13s;border:none}.btn-nav:disabled{opacity:.35;cursor:not-allowed}.section-header{display:flex;align-items:baseline;flex-wrap:wrap;gap:.75rem;margin-top:1.75rem}.section-header h2{margin:0}.fretboard-wrap{overflow-x:auto;-webkit-overflow-scrolling:touch;padding-bottom:.5rem}.fretboard{display:flex;flex-direction:column;padding:40px 0 0;width:max-content}.string{display:flex;position:relative}.string:after{content:"";border-top:1.5px dashed var(--mid-grey);position:absolute;top:50%;transform:translateY(-50%);z-index:0;left:50px;width:100%}.string:first-child{counter-reset:fret-counter -1}.string:first-child .fret{counter-increment:fret-counter;position:relative}.string:first-child .fret:before{content:counter(fret-counter);position:absolute;left:50%;transform:translate(-50%);top:-24px;color:var(--mid-grey);font-size:10px}.string:first-child .fret:first-child:before{content:""}.string-label{width:50px;border-right:1px solid var(--text);display:flex;align-items:center;justify-content:center;font-size:.75rem;color:var(--grey);z-index:1;position:absolute;top:7px}.fret{width:50px;border-right:1px solid var(--text);display:flex;align-items:center;justify-content:center;padding:3px 0;background:transparent;position:relative;z-index:1}.fret:nth-child(){border-right:none}.fret:nth-child(3){border-left:2px solid var(--text)}.fret .note-box{width:26px;height:26px;border:none;color:transparent;font-size:11px;border-radius:50%;padding:0;display:flex;align-items:center;justify-content:center;font-family:inherit;font-weight:700;transition:all .12s}.fret-markers{display:flex;width:max-content;padding:4px 0 0}.fret-marker-cell{width:50px;display:flex;align-items:center;justify-content:center}.fret-marker-num{font-size:10px;color:var(--mid-grey);text-align:center}.fret.clickable{cursor:pointer}.fret.pressed .note-box{border:2px solid var(--interval);color:var(--interval);box-shadow:0 0 6px #38bdf833;background:var(--dark-grey)}.fret.pressed.clickable:hover .note-box{filter:brightness(1.15)}.fret.chord-root .note-box{background:var(--dark-grey);border:2px solid var(--c-maj);color:var(--c-maj);box-shadow:0 0 8px #ff3b8459}.fret.chord-tone .note-box{border:2px solid var(--chord-glow);color:var(--chord-glow);box-shadow:0 0 6px #38bdf833;background:var(--dark-grey)}.fret.in-window.chord-root .note-box,.fret.in-window.chord-tone .note-box{border-color:var(--interval)!important;box-shadow:0 0 14px #f3f78c66!important;color:var(--interval)!important}.results-panel{margin-top:1rem;padding:1rem 1.25rem;background:var(--dark-grey);border:1px solid var(--border);border-radius:12px}.results-title{font-family:Sora,sans-serif;font-size:.72rem;text-transform:uppercase;letter-spacing:.1em;color:var(--grey);margin-bottom:.85rem}.sub-label{font-family:Sora,sans-serif;font-size:.72rem;text-transform:uppercase;letter-spacing:.08em;color:var(--grey);margin-bottom:.4rem}.chord-pills{display:flex;flex-wrap:wrap;gap:.4rem}.chord-pill{padding:.28rem .8rem;border-radius:99px;font-family:inherit;font-size:.85rem;font-weight:700;border:1.5px solid var(--mid-grey);background:transparent;color:var(--text);cursor:default}.chord-pill.exact{border-color:var(--interval);color:var(--interval)}.chord-pill.partial{border-color:var(--mid-grey);color:var(--light-grey)}.note-tags-row{display:flex;flex-wrap:wrap;gap:.4rem;align-items:center;margin-bottom:.9rem;min-height:28px}.note-tag{padding:.15rem .65rem;background:transparent;border:1px solid var(--c-maj);color:var(--c-maj);border-radius:99px;font-size:.82rem;font-weight:700}.hint{font-size:.8rem;color:var(--grey)}.chord-info-bar{display:flex;align-items:center;flex-wrap:wrap;gap:.75rem;margin:.6rem 0 1rem}.chord-big-name{font-size:1.5rem;font-weight:700;color:var(--dark-grey);border:1px solid var(--grey);border-radius:8px;padding:10px;background-color:var(--grey)}.chord-notes-inline{font-size:.82rem;color:var(--grey)}.position-badge{padding:.22rem .7rem;background:var(--dark-grey);border:1px solid var(--mid-grey);border-radius:6px;font-size:.8rem;color:var(--light-grey);margin-left:auto}.legend-row{display:flex;gap:1.2rem;flex-wrap:wrap;font-size:.8rem;color:var(--light-grey);align-items:center}.legend-dot{display:inline-block;width:13px;height:13px;border-radius:50%;margin-right:5px;vertical-align:middle;border:2px solid transparent}.parsed-row{display:flex;flex-wrap:wrap;gap:.35rem;margin:.65rem 0 1rem;min-height:26px;align-items:center}.parse-chip{padding:.18rem .65rem;border-radius:99px;font-size:.8rem;font-weight:700;border:1px solid}.parse-chip.ok{border-color:var(--fifths);color:var(--fifths)}.parse-chip.err{border-color:var(--root-note);color:var(--root-note)}.key-results{display:flex;flex-direction:column;gap:.55rem;margin-top:.5rem}.key-card{padding:.9rem 1.1rem;background:var(--dark-grey);border:1px solid var(--border);border-radius:10px;transition:border-color .13s}.key-card:hover{border-color:var(--mid-grey)}.key-card-head{display:flex;align-items:center;gap:.75rem;margin-bottom:.6rem}.key-name{font-family:Arvo,serif;font-size:1rem;font-weight:700}.key-root{color:var(--interval);font-size:1.15rem}.key-pct{font-size:.82rem;color:var(--interval);font-weight:700;margin-left:auto;min-width:38px;text-align:right}.key-bar-wrap{flex:1;height:4px;background:var(--border);border-radius:2px;overflow:hidden;max-width:100px}.key-bar{height:100%;background:var(--interval);border-radius:2px;transition:width .4s ease}.key-chord-tags{display:flex;flex-wrap:wrap;gap:.3rem}.key-chtag{padding:.15rem .6rem;border-radius:99px;font-size:.76rem;font-weight:700;border:1px solid}.key-chtag.in{border-color:var(--fifths);color:var(--fifths)}.key-chtag.out{border-color:var(--c-dom7-border);color:var(--c-dom7)}.info-block{margin-top:2.5rem;background:var(--dark-grey);border:1px solid var(--border);border-radius:12px;overflow:hidden}.info-toggle{width:100%;display:flex;align-items:center;justify-content:space-between;padding:.85rem 1.1rem;background:transparent;border:none;color:var(--light-grey);font-family:JetBrains Mono,monospace;font-size:.82rem;cursor:pointer;text-align:left;transition:background .13s}.info-toggle span{display:flex;gap:10px;align-items:center}.info-toggle:hover{background:#ffffff0a}.info-content{padding:1.25rem;border-top:1px solid var(--border)}.info-section{margin-bottom:1.5rem}.info-section:last-child{margin-bottom:0}.info-h{font-family:Sora,sans-serif;font-size:.72rem;text-transform:uppercase;letter-spacing:.1em;color:var(--interval);margin-bottom:.7rem}.info-table{width:100%;border-collapse:collapse;font-size:.8rem}.info-table th{text-align:left;padding:4px 10px;color:var(--grey);border-bottom:1px solid var(--border);font-size:.72rem;font-family:Sora,sans-serif;text-transform:uppercase;letter-spacing:.08em}.info-table td{padding:5px 10px;border-bottom:1px solid rgba(255,255,255,.04)}.info-table tr:last-child td{border-bottom:none}code{font-family:JetBrains Mono,monospace;background:#ffffff14;padding:1px 5px;border-radius:4px;color:var(--interval);font-size:.88em}.info-note{font-size:.8rem;color:var(--grey);margin-top:.6rem;line-height:1.6}.footer{margin-top:3rem;padding-top:1.25rem;border-top:1px solid var(--border);font-size:.75rem;color:var(--grey);text-align:center;letter-spacing:.03em}.footer strong{color:var(--light-grey);font-weight:600}@media (max-width: 600px){.container{padding:1rem .9rem 3rem}.tabs{width:100%}.tab-btn{flex:1;text-align:center;padding:.5rem .4rem}}