:root{--bg:#0d0f0e;--bg2:#131613;--bg3:#181c18;--bg4:#1e231e;--border:#ffffff12;--border2:#ffffff21;--text:#e8ead6;--text2:#8a9080;--text3:#5a6155;--accent:#c8e86a;--accent2:#7dd4a8;--accent3:#e8a85c;--accent4:#a89fe8;--accent5:#e87c7c;--accent6:#7cc5e8;--rad:6px;--rad2:10px}body{background:var(--bg);color:var(--text);min-height:100vh;font-family:DM Sans,sans-serif;font-size:14px;line-height:1.5}.ac-dropdown{z-index:100;background:var(--bg3);border:1px solid var(--border2);border-radius:var(--rad);min-width:120px;position:absolute;overflow:hidden;box-shadow:0 4px 16px #0006}.ac-item{cursor:pointer;color:var(--text2);padding:6px 10px;font-family:DM Mono,monospace;font-size:12px;transition:background .1s}.ac-item:hover,.ac-item.active{background:var(--bg4);color:var(--accent)}*,:before,:after{box-sizing:border-box;margin:0;padding:0}.je-page{flex-direction:column;align-items:center;min-height:100vh;padding:80px 24px 60px;display:flex;position:relative}.je-auth-bar{z-index:50;align-items:center;gap:8px;display:flex;position:fixed;top:14px;right:18px}.je-auth-email{color:var(--text3);text-overflow:ellipsis;white-space:nowrap;max-width:160px;font-family:DM Mono,monospace;font-size:10px;overflow:hidden}.je-sign-in-btn,.je-sign-out-btn{border-radius:var(--rad);border:1px solid var(--border2);color:var(--text3);cursor:pointer;white-space:nowrap;background:0 0;padding:3px 10px;font-family:DM Mono,monospace;font-size:10px;transition:all .15s}.je-sign-in-btn:hover{color:var(--accent);border-color:var(--accent)}.je-sign-out-btn:hover{color:var(--accent5);border-color:var(--accent5)}.je-my-saves-btn{border-radius:var(--rad);border:1px solid var(--border2);color:var(--text3);white-space:nowrap;background:0 0;padding:3px 10px;font-family:DM Mono,monospace;font-size:10px;text-decoration:none;transition:all .15s}.je-my-saves-btn:hover{color:var(--accent2);border-color:var(--accent2)}.je-hero{text-align:center;margin-bottom:64px}.je-title{color:var(--text);letter-spacing:-.5px;font-family:Playfair Display,serif;font-size:52px;font-weight:400;line-height:1.1}.je-tagline{letter-spacing:2px;text-transform:uppercase;color:var(--text3);margin-top:14px;font-family:DM Mono,monospace;font-size:11px}.je-body{color:var(--text2);max-width:480px;margin-top:10px;font-family:DM Sans,sans-serif;font-size:14px;line-height:1.6}.je-footer{color:var(--text3);letter-spacing:1px;text-align:center;margin-top:64px;font-family:DM Mono,monospace;font-size:11px}.je-grid{grid-template-columns:repeat(auto-fit,minmax(220px,1fr));gap:14px;width:100%;max-width:880px;display:grid}.tool-card{background:var(--bg2);border:1px solid var(--border);border-radius:var(--rad2);flex-direction:column;gap:10px;padding:22px 20px;transition:all .18s;display:flex;position:relative}.tool-card.live{color:inherit;cursor:pointer;text-decoration:none}.tool-card.live:hover{border-color:var(--accent);background:var(--bg3);transform:translateY(-2px);box-shadow:0 8px 32px #c8e86a0f}.tool-card.soon{opacity:.45;cursor:default}.tool-icon{color:var(--accent);align-items:center;display:flex}.tool-card.soon .tool-icon{color:var(--text3)}.tool-name{font-family:Playfair Display,serif;font-size:18px;font-weight:400}.tool-desc{color:var(--text3);font-family:DM Mono,monospace;font-size:11px;line-height:1.5}.soon-badge{letter-spacing:.8px;text-transform:uppercase;color:var(--text3);border:1px solid var(--border2);background:#5a61554d;border-radius:99px;padding:2px 8px;font-family:DM Mono,monospace;font-size:9px;position:absolute;top:14px;right:14px}header{border-bottom:1px solid var(--border);align-items:baseline;gap:14px;padding:18px 28px;display:flex}.logo{font-family:Playfair Display,serif;font-size:20px;font-weight:400}.logo em{color:var(--accent);font-style:normal}.tagline{color:var(--text3);letter-spacing:.8px;text-transform:uppercase;font-family:DM Mono,monospace;font-size:10px}.back-link{letter-spacing:.5px;color:var(--text3);margin-right:4px;font-family:DM Mono,monospace;font-size:10px;text-decoration:none;transition:color .15s}.back-link:hover{color:var(--accent2)}.main{grid-template-columns:var(--sidebar-width,300px) 4px 1fr;min-height:calc(100vh - 57px);display:grid}.left-panel{flex-direction:column;gap:14px;padding:18px;display:flex;overflow-y:auto}.resize-handle{background:var(--border);cursor:col-resize;flex-shrink:0;transition:background .15s;position:relative}.resize-handle:before{content:"";position:absolute;inset:0 -4px}.resize-handle:hover,.resize-handle.dragging{background:#ffffff26}.section-label{letter-spacing:1.2px;text-transform:uppercase;color:var(--text3);margin-bottom:5px;font-family:DM Mono,monospace;font-size:10px}#chord-input{background:var(--bg3);border:1px solid var(--border2);border-radius:var(--rad);width:100%;color:var(--text);resize:none;outline:none;height:72px;padding:10px 12px;font-family:DM Mono,monospace;font-size:13px;transition:border-color .2s}#chord-input:focus{border-color:var(--accent)}#chord-input::placeholder{color:var(--text3)}.hint{color:var(--text3);font-family:DM Mono,monospace;font-size:10px}.hint-row{justify-content:space-between;align-items:center;gap:6px;margin-top:4px;display:flex}.hint-actions{flex-shrink:0;align-items:center;gap:5px;display:flex}.share-btn{border-radius:var(--rad);border:1px solid var(--border2);color:var(--text3);cursor:pointer;white-space:nowrap;background:0 0;padding:2px 9px;font-family:DM Mono,monospace;font-size:10px;transition:all .15s}.share-btn:hover{color:var(--text2);border-color:var(--text2)}.share-btn.shared{color:var(--accent2);border-color:var(--accent2)}.share-btn:disabled{opacity:.4;cursor:not-allowed}.jl-shared-banner{color:var(--accent2);border-radius:var(--rad);background:#7dd4a812;border:1px solid #7dd4a833;margin-bottom:5px;padding:5px 9px;font-family:DM Mono,monospace;font-size:10px;line-height:1.4}.jl-saved-row{margin-top:5px}.jl-saved-list{flex-direction:column;gap:1px;display:flex}.jl-saved-item{border-radius:var(--rad);border:1px solid #0000;align-items:center;gap:3px;padding:4px 6px;transition:background .1s;display:flex}.jl-saved-item:hover{background:var(--bg3);border-color:var(--border)}.jl-saved-name{color:var(--text2);cursor:pointer;text-overflow:ellipsis;white-space:nowrap;flex:1;min-width:0;font-family:DM Mono,monospace;font-size:11px;overflow:hidden}.jl-saved-name:hover{color:var(--accent)}.jl-saved-rename,.jl-saved-delete{color:var(--text3);cursor:pointer;background:0 0;border:none;border-radius:3px;flex-shrink:0;padding:2px 4px;font-size:10px;line-height:1;transition:all .12s}.jl-saved-rename:hover{color:var(--accent3);background:#e8a85c1a}.jl-saved-delete:hover{color:var(--accent5);background:#e87c7c1a}.jl-saved-public{color:var(--text3);cursor:pointer;opacity:.45;background:0 0;border:none;border-radius:3px;flex-shrink:0;padding:2px 4px;font-size:11px;line-height:1;transition:all .12s}.jl-saved-public:hover{opacity:1}.jl-saved-public.is-public{color:var(--accent2);opacity:1}.jl-saved-copy{color:var(--text3);cursor:pointer;background:0 0;border:none;border-radius:3px;flex-shrink:0;padding:2px 4px;font-size:11px;line-height:1;transition:all .12s}.jl-saved-copy:hover{color:var(--accent2)}.enharmonic-btn{border-radius:var(--rad);border:1px solid var(--border2);color:var(--text3);cursor:pointer;background:0 0;min-width:28px;margin-left:auto;padding:2px 9px;font-family:DM Mono,monospace;font-size:13px;font-weight:500;transition:all .15s}.enharmonic-btn:hover{color:var(--text2);border-color:var(--text2)}.enharmonic-btn.sharp{color:var(--accent6);border-color:var(--accent6)}.btn-row{gap:8px;display:flex}.btn{border-radius:var(--rad);border:1px solid var(--border2);color:var(--text2);cursor:pointer;background:0 0;flex:1;padding:8px 12px;font-size:12px;transition:all .15s}.btn:hover{background:var(--bg3);color:var(--text)}.btn.primary{background:var(--accent);color:#0d0f0e;border-color:var(--accent);font-weight:500}.btn.primary:hover{background:#d8f47a}.preset-label{color:var(--text3);margin-bottom:4px;font-family:DM Mono,monospace;font-size:12px;display:none}.presets{scrollbar-width:thin;gap:5px;padding-bottom:4px;display:flex;overflow-x:auto}.preset-divider{background:var(--border2);flex-shrink:0;align-self:stretch;width:1px;margin:0 2px}.preset-group-label{color:var(--text3);letter-spacing:1px;text-transform:uppercase;opacity:.6;flex-shrink:0;align-self:center;padding:0 2px;font-family:DM Mono,monospace;font-size:8px}.preset-btn{border:1px solid var(--border2);color:var(--text3);cursor:pointer;white-space:nowrap;background:0 0;border-radius:99px;flex-shrink:0;padding:3px 9px;font-family:DM Mono,monospace;font-size:10px;transition:all .12s}.preset-btn:hover{color:var(--text);border-color:var(--accent)}.import-zone{border:1px dashed var(--border2);border-radius:var(--rad);text-align:center;cursor:pointer;padding:12px;transition:all .15s}.import-zone:hover,.import-zone.drag-over{border-color:var(--accent);background:#c8e86a0a}.import-zone p{color:var(--text3);font-family:DM Mono,monospace;font-size:11px}.import-zone strong{color:var(--text2)}#file-input{display:none}.chord-list{flex-direction:column;gap:2px;display:flex}.chord-chip{border-radius:var(--rad);cursor:pointer;border:1px solid #0000;align-items:center;gap:8px;padding:7px 10px;transition:all .12s;display:flex}.chord-chip:hover{background:var(--bg3);border-color:var(--border)}.chord-chip.selected{background:var(--bg3);border-color:var(--accent)}.chord-chip.selected .cname{color:var(--accent)}.cnum{color:var(--text3);width:16px;font-family:DM Mono,monospace;font-size:10px}.cname{flex:1;font-family:DM Mono,monospace;font-size:13px;font-weight:500}.cfn{color:var(--text3);font-family:DM Mono,monospace;font-size:10px}.pair-arrows{flex-direction:column;gap:2px;display:flex}.pair-arrow{border-radius:var(--rad);cursor:pointer;color:var(--text2);border:1px solid #0000;align-items:center;gap:6px;padding:6px 10px;font-family:DM Mono,monospace;font-size:11px;transition:all .12s;display:flex}.pair-arrow:hover{background:var(--bg3);color:var(--text)}.pair-arrow.selected{background:var(--bg3);border-color:var(--accent2);color:var(--accent2)}.pair-arrow .arr{color:var(--text3)}.pair-wrap{align-items:center;gap:4px;display:flex}.pair-cycle{color:var(--accent3);background:#e8a85c1f;border-radius:3px;padding:1px 5px;font-family:DM Mono,monospace;font-size:9px}.parse-warn{color:var(--accent5);border-radius:var(--rad);background:#e87c7c12;border:1px solid #e87c7c26;padding:6px 10px;font-family:DM Mono,monospace;font-size:11px}.right-panel{flex-direction:column;display:flex;overflow:hidden}#sequence-strip{border-bottom:1px solid var(--border);scrollbar-width:none;white-space:nowrap;flex-shrink:0;align-items:center;gap:0;height:52px;min-height:52px;padding:0 14px;display:flex;overflow:auto hidden}#sequence-strip::-webkit-scrollbar{display:none}.seq-key-badge{letter-spacing:.8px;text-transform:uppercase;color:var(--text3);background:var(--bg3);border:1px solid var(--border);border-radius:var(--rad);white-space:nowrap;flex-shrink:0;margin-right:8px;padding:2px 7px;font-family:DM Mono,monospace;font-size:9px}.seq-chip{border-radius:var(--rad);cursor:pointer;color:var(--text2);border:1px solid #0000;flex-direction:column;flex-shrink:0;align-items:center;gap:1px;padding:4px 8px;font-family:DM Mono,monospace;font-size:11px;font-weight:500;transition:all .1s;display:flex}.seq-chip:hover{background:var(--bg3);color:var(--text);border-color:var(--border)}.seq-chip.selected{border-color:var(--accent);color:var(--accent);background:#c8e86a0f}.seq-chip-name{line-height:1.2}.seq-roman{color:var(--text3);letter-spacing:.2px;font-size:9px;font-weight:400;line-height:1}.seq-chip.selected .seq-roman{color:#c8e86a99}.seq-arrow{color:var(--text3);flex-shrink:0;padding:0 3px;font-family:DM Mono,monospace;font-size:10px}.seq-arrow.clickable{cursor:pointer;transition:color .1s}.seq-arrow.clickable:hover,.seq-arrow.selected{color:var(--accent2)}#right-content{flex:1;padding:22px 26px;overflow-y:auto}.empty-state{height:100%;color:var(--text3);text-align:center;flex-direction:column;justify-content:center;align-items:center;gap:10px;display:flex}.empty-icon{opacity:.3;font-size:32px}.view-header{align-items:baseline;gap:12px;margin-bottom:18px;display:flex}.view-name{font-family:Playfair Display,serif;font-size:30px}.view-sub{color:var(--text3);font-family:DM Mono,monospace;font-size:12px}.pair-header{align-items:center;gap:10px;margin-bottom:18px;display:flex}.pair-name{font-family:Playfair Display,serif;font-size:24px}.pair-arr-big{color:var(--text3);font-size:18px}.card{background:var(--bg2);border:1px solid var(--border);border-radius:var(--rad2);margin-bottom:12px;padding:14px 16px}.card-title{letter-spacing:1px;text-transform:uppercase;color:var(--text3);margin-bottom:10px;font-family:DM Mono,monospace;font-size:10px}.tones-row{flex-wrap:wrap;gap:6px;display:flex}.tone-box{border-radius:var(--rad);border:1px solid var(--border);flex-direction:column;align-items:center;gap:3px;min-width:46px;padding:8px 12px;display:flex}.tone-note{font-family:DM Mono,monospace;font-size:15px;font-weight:500}.tone-role{text-transform:uppercase;opacity:.6;font-family:DM Mono,monospace;font-size:9px}.t-R{background:#c8e86a12;border-color:#c8e86a66}.t-R .tone-note{color:var(--accent)}.t-3{background:#a89fe812;border-color:#a89fe866}.t-3 .tone-note{color:var(--accent4)}.t-5{background:#7dd4a812;border-color:#7dd4a866}.t-5 .tone-note{color:var(--accent2)}.t-7{background:#e8a85c12;border-color:#e8a85c66}.t-7 .tone-note{color:var(--accent3)}.t-X{background:#7cc5e812;border-color:#7cc5e866}.t-X .tone-note{color:var(--accent6)}.piano-wrap{margin-top:10px}.piano-svg{width:100%;display:block}.instrument-wrap{margin-top:10px}.fretboard-svg{width:100%;display:block}.scale-list{flex-direction:column;gap:5px;display:flex}.scale-item{border-radius:var(--rad);border:1px solid var(--border);flex-direction:column;padding:7px 10px;display:flex}.scale-item.best{background:#c8e86a0a;border-color:#c8e86a4d}.scale-item-row{justify-content:space-between;align-items:flex-start;gap:8px;display:flex}.scale-info{flex:1;min-width:0}.scale-name{font-family:DM Mono,monospace;font-size:12px}.scale-mode{color:var(--accent2);letter-spacing:.3px;margin-top:1px;font-family:DM Mono,monospace;font-size:9px}.scale-parent{color:var(--text3);margin-top:1px;font-family:DM Mono,monospace;font-size:10px}.scale-notes-row{color:var(--text3);white-space:nowrap;text-overflow:ellipsis;margin-top:3px;font-family:DM Mono,monospace;font-size:10px;overflow:hidden}.sn-avoid{color:var(--accent5);font-weight:500}.badge{letter-spacing:.5px;text-transform:uppercase;white-space:nowrap;border-radius:99px;padding:2px 7px;font-family:DM Mono,monospace;font-size:9px}.b-best{color:var(--accent);background:#c8e86a26}.b-good{color:var(--accent2);background:#7dd4a81f}.b-alt{color:var(--text3);background:#5a615540}.scale-piano-btn{color:var(--text3);cursor:pointer;background:0 0;border:none;border-radius:3px;flex-shrink:0;padding:2px 5px;font-family:DM Mono,monospace;font-size:10px;line-height:1.4;transition:all .12s}.scale-piano-btn:hover{color:var(--accent2);background:#7dd4a81a}.scale-piano-btn.active{color:var(--accent2)}.scale-piano-wrap{max-width:200px;margin-top:8px}.scale-piano-wrap .piano-svg{width:100%;display:block}.ca-grid{grid-template-columns:1fr 1fr;gap:10px;display:grid}.ca-title{letter-spacing:.5px;text-transform:uppercase;margin-bottom:7px;font-family:DM Mono,monospace;font-size:10px}.ca-play{color:var(--accent2)}.ca-avoid{color:var(--accent5)}.pills{flex-wrap:wrap;gap:5px;display:flex}.pill{border-radius:99px;padding:4px 10px;font-family:DM Mono,monospace;font-size:12px;font-weight:500}.pill-p{color:var(--accent2);background:#7dd4a81f;border:1px solid #7dd4a84d}.pill-a{color:var(--accent5);background:#e87c7c1a;border:1px solid #e87c7c40}.pill-hint{color:var(--text3);margin-top:5px;font-family:DM Mono,monospace;font-size:10px;line-height:1.4}.hs-banner{border-radius:var(--rad);background:#e87c7c12;border:1px solid #e87c7c2e;align-items:center;gap:8px;margin-bottom:10px;padding:6px 10px;display:flex}.hs-label{color:var(--accent5);letter-spacing:.5px;text-transform:uppercase;font-family:DM Mono,monospace;font-size:11px;font-weight:500}.hs-count{color:var(--text3);margin-left:auto;font-family:DM Mono,monospace;font-size:10px}.hs-list{flex-direction:column;gap:6px;display:flex}.hs-item{border-radius:var(--rad);border:1px solid var(--border);background:var(--bg3);align-items:center;gap:10px;padding:9px 12px;display:flex}.hs-note{text-align:center;min-width:28px;font-family:DM Mono,monospace;font-size:15px;font-weight:500}.hs-mid{flex-direction:column;flex:1;align-items:center;gap:2px;display:flex}.hs-step-label{letter-spacing:.8px;text-transform:uppercase;color:var(--accent5);font-family:DM Mono,monospace;font-size:9px;font-weight:500}.hs-step-line{background:#e87c7c59;width:100%;height:1px}.hs-roles{color:var(--text3);text-align:right;min-width:72px;font-family:DM Mono,monospace;font-size:10px}.hs-dir{text-align:center;border-radius:4px;min-width:44px;padding:2px 7px;font-family:DM Mono,monospace;font-size:10px}.hs-up{color:var(--accent2);background:#7dd4a81f}.hs-down{color:var(--accent5);background:#e87c7c1f}.no-hs{color:var(--text3);font-family:DM Mono,monospace;font-size:12px}.seq-chip-borrowed{position:relative}.seq-chip-borrowed .seq-roman{color:var(--accent3)}.seq-chip-borrowed:after{content:"";background:var(--accent3);pointer-events:none;border-radius:50%;width:4px;height:4px;position:absolute;top:3px;right:3px}.sub-list{flex-direction:column;gap:5px;display:flex}.sub-row{border-radius:var(--rad);border:1px solid var(--border);background:var(--bg3);align-items:center;gap:10px;padding:7px 10px;display:flex}.sub-chord{color:var(--accent6);min-width:72px;font-family:DM Mono,monospace;font-size:14px;font-weight:500}.sub-label{color:var(--accent3);letter-spacing:.3px;flex:1;font-family:DM Mono,monospace;font-size:10px}.sub-reason{color:var(--text3);text-align:right;font-family:DM Mono,monospace;font-size:10px}.tsub-head{align-items:baseline;gap:10px;margin-bottom:10px;display:flex}.tsub-chord{color:var(--text);font-family:DM Mono,monospace;font-size:18px;font-weight:500}.tsub-tag{color:var(--text3);letter-spacing:.3px;font-family:DM Mono,monospace;font-size:10px}.tsub-rows{flex-direction:column;gap:5px;display:flex}.tsub-row{border-radius:var(--rad);border:1px solid var(--border);background:var(--bg3);align-items:center;gap:10px;padding:7px 10px;display:flex}.tsub-note-name{min-width:24px;color:var(--accent3);font-family:DM Mono,monospace;font-size:15px;font-weight:500}.tsub-roles{color:var(--text2);flex:1;font-family:DM Mono,monospace;font-size:11px}.tsub-roles em{color:var(--text3);font-style:normal}.tsub-footer{color:var(--text3);margin-top:8px;font-family:DM Mono,monospace;font-size:10px}.ct-row{flex-wrap:wrap;align-items:center;gap:6px;display:flex}.ct-box{border-radius:var(--rad);color:var(--accent2);background:#7dd4a814;border:1px solid #7dd4a866;padding:5px 12px;font-family:DM Mono,monospace;font-size:13px;font-weight:500}.ct-empty{color:var(--text3);font-family:DM Mono,monospace;font-size:12px}.jl-vl-diagram{border-radius:var(--rad);background:var(--bg3);margin:12px 0 8px;padding:8px;overflow:hidden}.vl-list{flex-direction:column;gap:5px;display:flex}.vl-row{align-items:center;gap:8px;display:flex}.vl-note{border:1px solid #0000;border-radius:5px;justify-content:center;align-items:center;width:30px;height:26px;font-family:DM Mono,monospace;font-size:12px;font-weight:500;display:flex}.vl-conn{flex:1;align-items:center;gap:4px;display:flex}.vl-seg{background:var(--border2);flex:1;height:1px}.vl-mot{color:var(--text3);white-space:nowrap;font-family:DM Mono,monospace;font-size:10px}.g2{grid-template-columns:1fr 1fr;gap:12px;margin-bottom:12px;display:grid}.g2>.card{margin-bottom:0}.card-title-row{justify-content:space-between;align-items:center;margin-bottom:10px;display:flex}.card-title-row>.card-title{margin-bottom:0}.inst-tabs{gap:3px;display:flex}.inst-tab{border:1px solid var(--border);color:var(--text3);cursor:pointer;letter-spacing:.5px;text-transform:uppercase;background:0 0;border-radius:4px;padding:2px 8px;font-family:DM Mono,monospace;font-size:9px;transition:all .12s}.inst-tab:hover{color:var(--text2);border-color:var(--border2)}.inst-tab.active{background:var(--bg4);color:var(--text);border-color:var(--border2)}.scale-filter{gap:2px;display:flex}.sf-btn{border:1px solid var(--border);color:var(--text3);cursor:pointer;letter-spacing:.4px;text-transform:uppercase;background:0 0;border-radius:4px;padding:2px 8px;font-family:DM Mono,monospace;font-size:9px;transition:all .12s}.sf-btn:hover{color:var(--text2);border-color:var(--border2)}.sf-btn.active{background:var(--bg4);color:var(--text);border-color:var(--border2)}.hamburger-btn{border:1px solid var(--border);border-radius:var(--rad);cursor:pointer;color:var(--text2);background:0 0;flex-shrink:0;justify-content:center;align-items:center;padding:5px 7px;transition:all .15s;display:none}.hamburger-btn:hover{border-color:var(--border2);color:var(--text)}.mobile-backdrop{z-index:199;background:#0000008c;display:none;position:fixed;inset:0}.jl-melody-card{margin-bottom:0}.jl-mel-header{justify-content:space-between;align-items:center;gap:10px;display:flex}.jl-mel-toggle{letter-spacing:1px;text-transform:uppercase;color:var(--text3);cursor:pointer;background:0 0;border:none;padding:0;font-family:DM Mono,monospace;font-size:10px;transition:color .15s}.jl-mel-toggle:hover{color:var(--text2)}.jl-mel-legend{color:var(--text3);flex-shrink:0;align-items:center;gap:2px;font-family:DM Mono,monospace;font-size:9px;display:flex}.jl-mel-leg-dot{border-radius:50%;flex-shrink:0;width:6px;height:6px;margin-left:6px;margin-right:2px;display:inline-block}.jl-mel-leg-dot.mel-chord{background:var(--accent)}.jl-mel-leg-dot.mel-color{background:var(--accent2)}.jl-mel-leg-dot.mel-approach{background:var(--accent6)}.jl-mel-leg-dot.mel-avoid{background:var(--accent5)}.jl-mel-panel{margin-top:12px}.jl-mel-grid{grid-template-columns:repeat(12,1fr);gap:4px;display:grid}.jl-mel-btn{border-radius:var(--rad);border:1px solid var(--border);background:var(--bg3);color:var(--text3);cursor:pointer;text-align:center;white-space:nowrap;-webkit-user-select:none;user-select:none;padding:9px 2px;font-family:DM Mono,monospace;font-size:10px;transition:background 80ms;overflow:hidden}.jl-mel-btn:hover{background:var(--bg4)}.jl-mel-btn.jl-mel-active{filter:brightness(1.15);background:var(--bg4)!important}.jl-mel-btn.mel-chord{color:var(--accent);background:#c8e86a12;border-color:#c8e86a59}.jl-mel-btn.mel-color{color:var(--accent2);background:#7dd4a812;border-color:#7dd4a859}.jl-mel-btn.mel-approach{color:var(--accent6);background:#7cc5e812;border-color:#7cc5e859}.jl-mel-btn.mel-avoid{color:var(--accent5);background:#e87c7c12;border-color:#e87c7c59}.jl-mel-btn.mel-neutral{color:var(--text3)}.jl-practice-card{margin-bottom:0}.jl-practice-header{align-items:center;display:flex}.jl-practice-toggle{letter-spacing:1px;text-transform:uppercase;color:var(--text3);cursor:pointer;background:0 0;border:none;padding:0;font-family:DM Mono,monospace;font-size:10px;transition:color .15s}.jl-practice-toggle:hover{color:var(--text2)}.jl-practice-panel{flex-direction:column;gap:14px;margin-top:14px;display:flex}.practice-section{flex-direction:column;gap:8px;display:flex}.practice-label{letter-spacing:.8px;text-transform:uppercase;color:var(--text3);font-family:DM Mono,monospace;font-size:10px}.practice-scale-name{color:var(--text);font-family:DM Mono,monospace;font-size:13px;font-weight:500}.practice-scale-hint{color:var(--text3);font-family:DM Mono,monospace;font-size:11px;line-height:1.5}.practice-approaches{flex-wrap:wrap;gap:6px;display:flex}.practice-approach-pill{color:var(--accent6);background:#7cc5e81f;border:1px solid #7cc5e84d;border-radius:99px;padding:4px 10px;font-family:DM Mono,monospace;font-size:12px;font-weight:500}.practice-drill-btn{border-radius:var(--rad);border:1px solid var(--accent);color:var(--accent);cursor:pointer;letter-spacing:.3px;background:0 0;align-self:flex-start;margin-top:2px;padding:9px 20px;font-family:DM Mono,monospace;font-size:12px;transition:all .15s}.practice-drill-btn:hover{background:var(--accent);color:#0d0f0e}@media (width<=768px){.hamburger-btn{display:flex}.main{flex-direction:column;min-height:calc(100vh - 57px);display:flex}.resize-handle{display:none}.left-panel{z-index:200;background:var(--bg);border-right:1px solid var(--border2);gap:14px;width:min(300px,85vw);max-height:100vh;padding:18px;transition:transform .25s;position:fixed;top:0;bottom:0;left:0;overflow-y:auto;transform:translate(-100%)}#main-layout.left-panel-open .left-panel{transform:translate(0)}#main-layout.left-panel-open .mobile-backdrop{display:block}.right-panel{flex:1;min-height:0}.g2,.ca-grid{grid-template-columns:1fr}.piano-svg,.fretboard-svg{max-width:100%;overflow:hidden}}.prog-db-bar{border-bottom:1px solid var(--border);flex-shrink:0;align-items:center;gap:8px;padding:6px 24px;display:flex}.pdb-save-btn,.pdb-my-btn{border-radius:var(--rad);border:1px solid var(--border2);color:var(--text3);cursor:pointer;white-space:nowrap;background:0 0;flex-shrink:0;padding:3px 10px;font-family:DM Mono,monospace;font-size:10px;transition:all .15s}.pdb-save-btn:hover{color:var(--accent);border-color:var(--accent)}.pdb-my-btn:hover{color:var(--text2);border-color:var(--text2)}.prog-db-bar{position:relative}.prog-saved-panel{z-index:50;background:var(--bg2);border:1px solid var(--border2);border-radius:var(--rad2);min-width:260px;max-height:220px;padding:4px 0;position:absolute;top:calc(100% + 2px);left:24px;overflow-y:auto;box-shadow:0 8px 24px #00000059}.pdb-item{align-items:center;gap:4px;padding:5px 10px;transition:background .1s;display:flex}.pdb-item:hover{background:var(--bg3)}.pdb-item-name{color:var(--text2);cursor:pointer;text-overflow:ellipsis;white-space:nowrap;flex:1;min-width:0;font-family:DM Mono,monospace;font-size:11px;overflow:hidden}.pdb-item-name:hover{color:var(--accent)}.pdb-item-rename,.pdb-item-delete{color:var(--text3);cursor:pointer;background:0 0;border:none;border-radius:3px;flex-shrink:0;padding:2px 5px;font-size:10px;line-height:1;transition:all .12s}.pdb-item-rename:hover{color:var(--accent3);background:#e8a85c1a}.pdb-item-delete:hover{color:var(--accent5);background:#e87c7c1a}.pdb-item-public{color:var(--text3);cursor:pointer;opacity:.45;background:0 0;border:none;border-radius:3px;flex-shrink:0;padding:2px 4px;font-size:11px;line-height:1;transition:all .12s}.pdb-item-public:hover{opacity:1}.pdb-item-public.is-public{color:var(--accent2);opacity:1}.pdb-item-copy{color:var(--text3);cursor:pointer;background:0 0;border:none;border-radius:3px;flex-shrink:0;padding:2px 4px;font-size:11px;line-height:1;transition:all .12s}.pdb-item-copy:hover{color:var(--accent2)}.prog-shared-banner{color:var(--text2);background:#7dd4a812;border-bottom:1px solid #7dd4a82e;padding:7px 24px;font-family:DM Mono,monospace;font-size:11px}.prog-page{flex-direction:column;height:100vh;display:flex;overflow:hidden}.prog-header{border-bottom:1px solid var(--border);flex-wrap:wrap;flex-shrink:0;align-items:center;gap:16px;padding:14px 24px;display:flex}.prog-back{color:var(--text3);letter-spacing:.3px;white-space:nowrap;font-family:DM Mono,monospace;font-size:11px;text-decoration:none;transition:color .15s}.prog-back:hover{color:var(--accent)}.prog-title{color:var(--text);flex:1;margin:0;font-family:Playfair Display,serif;font-size:22px;font-weight:400}.prog-header-right{flex-wrap:wrap;align-items:center;gap:10px;display:flex}.suggest-toggle-btn{border-radius:var(--rad);border:1px solid var(--border2);color:var(--text3);cursor:pointer;white-space:nowrap;background:0 0;padding:5px 12px;font-family:DM Mono,monospace;font-size:11px;transition:all .15s}.suggest-toggle-btn:hover{color:var(--text2);border-color:var(--text3)}.suggest-toggle-btn.active{color:var(--accent);border-color:var(--accent);background:#c8e86a0f}.suggest-controls{align-items:center;gap:6px;display:flex}.suggest-controls select{background:var(--bg3);border:1px solid var(--border2);border-radius:var(--rad);color:var(--text2);cursor:pointer;outline:none;padding:5px 8px;font-family:DM Mono,monospace;font-size:11px;transition:border-color .15s}.suggest-controls select:focus{border-color:var(--accent)}.prog-transport{border-bottom:1px solid var(--border);flex-shrink:0;padding:10px 24px}.tp-wrap{flex-wrap:wrap;align-items:center;gap:10px;display:flex}.tp-btn{border-radius:var(--rad);border:1px solid var(--border2);color:var(--text2);cursor:pointer;white-space:nowrap;background:0 0;padding:7px 16px;font-family:DM Mono,monospace;font-size:12px;line-height:1;transition:all .15s}.tp-btn:hover{background:var(--bg3);color:var(--text)}.tp-play:hover{border-color:var(--accent);color:var(--accent)}.tp-bpm,.tp-timesig{align-items:center;gap:6px;display:flex}.tp-label{color:var(--text3);letter-spacing:.8px;text-transform:uppercase;font-family:DM Mono,monospace;font-size:9px}.tp-slider{width:90px;accent-color:var(--accent);cursor:pointer}.tp-bpm-val{color:var(--text2);text-align:right;min-width:28px;font-family:DM Mono,monospace;font-size:12px}.tp-select{background:var(--bg3);border:1px solid var(--border2);border-radius:var(--rad);color:var(--text2);cursor:pointer;outline:none;padding:5px 8px;font-family:DM Mono,monospace;font-size:12px;transition:border-color .15s}.tp-select:focus{border-color:var(--accent)}.prog-body{flex:1;min-height:0;display:flex;overflow:hidden}.prog-grid-col{border-right:1px solid var(--border);scrollbar-width:thin;scrollbar-color:var(--border2) transparent;flex:none;width:50%;overflow:auto}.cg-wrap{grid-template-columns:60px repeat(12,54px);min-width:max-content;font-family:DM Mono,monospace;display:grid}.cg-corner{z-index:15;background:var(--bg2);border-right:1px solid var(--border);border-bottom:1px solid var(--border);position:sticky;top:0;left:0}.cg-col-head{z-index:10;background:var(--bg2);color:var(--text3);text-align:center;border-bottom:1px solid var(--border);padding:6px 2px;font-size:10px;position:sticky;top:0}.cg-family-divider{letter-spacing:.8px;text-transform:uppercase;color:var(--text3);border-top:1px solid var(--border);background:var(--bg);grid-column:1/-1;padding:8px 10px 5px;font-size:9px}.cg-row-head{z-index:5;background:var(--bg2);color:var(--text3);border-right:1px solid var(--border);align-items:center;min-height:36px;padding:0 8px;font-size:10px;display:flex;position:sticky;left:0}.cg-cell{background:var(--bg3);min-height:36px;color:var(--text2);cursor:pointer;border:1px solid #0000;justify-content:center;align-items:center;padding:0 2px;font-family:DM Mono,monospace;font-size:11px;transition:background .1s,border-color .1s,color .1s;display:flex;position:relative}.cg-cell:hover{background:var(--bg4);border-color:var(--accent);color:var(--accent);z-index:1}[data-suggestions-on] .cg-cell:not([data-diatonic=true]){opacity:.35}[data-suggestions-on] .cg-cell[data-diatonic=true]{color:var(--accent2);background:#7dd4a814;border-color:#7dd4a833}[data-suggestions-on] .cg-cell[data-diatonic=true]:hover{border-color:var(--accent2);opacity:1;background:#7dd4a829}.prog-timeline-col{flex-direction:column;flex:1;gap:12px;min-width:0;padding:16px;display:flex;overflow:hidden}.prog-text-wrap{flex-shrink:0;position:relative}.prog-text-input{background:var(--bg3);border:1px solid var(--border2);border-radius:var(--rad);width:100%;color:var(--text);outline:none;padding:9px 12px;font-family:DM Mono,monospace;font-size:13px;transition:border-color .15s}.prog-text-input:focus{border-color:var(--accent)}.prog-text-input::placeholder{color:var(--text3)}.input-warning{color:var(--accent5);border-radius:var(--rad);background:#e87c7c12;border:1px solid #e87c7c33;margin-top:4px;padding:5px 10px;font-family:DM Mono,monospace;font-size:11px;display:none}.tl-strip{scrollbar-width:thin;scrollbar-color:var(--border2) transparent;flex:1;align-items:flex-start;gap:8px;min-height:80px;padding-bottom:10px;display:flex;overflow:auto visible}.tl-slot{border-radius:var(--rad);cursor:pointer;-webkit-user-select:none;user-select:none;border:1px solid;flex-direction:column;flex-shrink:0;gap:4px;width:84px;min-height:72px;padding:8px 8px 6px;transition:box-shadow .15s;display:flex;position:relative;overflow:hidden}.tl-slot:hover .tl-remove{opacity:1}.tl-slot.tl-playing{box-shadow:0 0 14px #c8e86a24;border-color:var(--accent)!important}.tl-remove{width:16px;height:16px;color:var(--text3);cursor:pointer;opacity:0;background:#00000080;border:none;border-radius:50%;justify-content:center;align-items:center;padding:0;font-size:11px;line-height:1;transition:opacity .12s,color .12s;display:flex;position:absolute;top:4px;right:4px}.tl-remove:hover{color:var(--accent5)}.tl-chord-name{color:var(--text);margin-top:16px;font-family:DM Mono,monospace;font-size:14px;font-weight:500;line-height:1.2}.tl-label{color:var(--accent2);letter-spacing:.3px;cursor:text;white-space:nowrap;text-overflow:ellipsis;opacity:.8;min-height:10px;font-family:DM Mono,monospace;font-size:8px;overflow:hidden}.tl-label-input{border:none;border-bottom:1px solid var(--accent2);width:100%;color:var(--text2);box-sizing:border-box;background:0 0;outline:none;padding:0;font-family:DM Mono,monospace;font-size:8px}.tl-duration{color:var(--text3);letter-spacing:.3px;font-family:DM Mono,monospace;font-size:9px}.tl-progress{background:var(--accent);width:0%;height:3px;position:absolute;bottom:0;left:0}.tl-footer{flex-shrink:0;align-items:center;gap:12px;display:flex}.tl-footer-btn{border-radius:var(--rad);border:1px solid var(--border2);color:var(--text3);cursor:pointer;white-space:nowrap;background:0 0;padding:4px 10px;font-family:DM Mono,monospace;font-size:11px;transition:all .15s}.tl-footer-btn:hover{color:var(--text2);border-color:var(--text2)}.tl-footer-btn:disabled{opacity:.35;cursor:not-allowed}.tl-footer-btn:disabled:hover{color:var(--text3);border-color:var(--border2)}.tl-drill-btn{color:var(--accent);border-color:var(--accent)}.tl-drill-btn:not(:disabled):hover{background:var(--accent);color:#000}.tl-slot-count{color:var(--text3);flex:1;font-family:DM Mono,monospace;font-size:11px}.tl-loop-label{color:var(--text3);cursor:pointer;white-space:nowrap;align-items:center;gap:5px;font-family:DM Mono,monospace;font-size:11px;display:flex}.tl-warn{color:var(--accent5);flex-shrink:0;font-family:DM Mono,monospace;font-size:11px}@media (width<=768px){.prog-page{height:auto;min-height:100vh;overflow:auto}.prog-body{flex-direction:column;height:auto;overflow:visible}.prog-grid-col{border-right:none;border-bottom:1px solid var(--border);width:100%;max-height:45vh;overflow:auto}.prog-timeline-col{overflow:visible}.tl-strip{min-height:80px}.prog-header{gap:10px}.tp-slider{width:70px}}@media (width<=480px){.tp-wrap{gap:6px}.tp-btn .btn-label{display:none}.tp-btn{padding:6px 8px;font-size:12px}.tp-slider{width:60px}.tp-bpm-val{min-width:22px}.tp-select{width:52px;padding:5px 4px}}.tsp-page{max-width:700px;margin:0 auto;padding:0 28px 48px}.tsp-header{border-bottom:1px solid var(--border);align-items:baseline;gap:18px;margin-bottom:36px;padding:20px 0 22px;display:flex}.tsp-back{color:var(--text3);letter-spacing:.3px;white-space:nowrap;font-family:DM Mono,monospace;font-size:11px;text-decoration:none;transition:color .15s}.tsp-back:hover{color:var(--accent)}.tsp-title{color:var(--text);margin:0;font-family:Playfair Display,serif;font-size:26px;font-weight:400}.tsp-body{flex-direction:column;gap:28px;display:flex}.tsp-label{letter-spacing:1px;text-transform:uppercase;color:var(--text3);margin-bottom:8px;font-family:DM Mono,monospace;font-size:10px}.tsp-textarea{box-sizing:border-box;background:var(--bg3);border:1px solid var(--border);border-radius:var(--rad);width:100%;color:var(--text);resize:vertical;outline:none;min-height:110px;padding:12px 14px;font-family:DM Mono,monospace;font-size:14px;line-height:1.7;transition:border-color .15s}.tsp-textarea:focus{border-color:var(--accent)}.tsp-textarea::placeholder{color:var(--text3)}.tsp-keys-row{align-items:flex-end;gap:14px;display:flex}.tsp-key-group{flex:1;min-width:0}.tsp-arrow{color:var(--text3);flex-shrink:0;padding-bottom:7px;font-family:DM Mono,monospace;font-size:20px;line-height:1}.tsp-select{box-sizing:border-box;background:var(--bg3);border:1px solid var(--border);border-radius:var(--rad);width:100%;color:var(--text2);cursor:pointer;appearance:none;outline:none;padding:9px 12px;font-family:DM Mono,monospace;font-size:14px;transition:border-color .15s}.tsp-select:focus{border-color:var(--accent)}.tsp-detect-msg{color:var(--text2);letter-spacing:.3px;opacity:0;min-height:16px;font-family:DM Mono,monospace;font-size:11px;transition:opacity .3s}.tsp-detect-msg.visible{opacity:1}.tsp-output-header{justify-content:space-between;align-items:center;margin-bottom:8px;display:flex}.tsp-output-header .tsp-label{margin-bottom:0}.tsp-output-actions{gap:8px;display:flex}.tsp-copy-btn,.tsp-share-btn{border-radius:var(--rad);border:1px solid var(--border2);color:var(--text3);cursor:pointer;background:0 0;padding:4px 12px;font-family:DM Mono,monospace;font-size:11px;transition:all .15s}.tsp-copy-btn:hover,.tsp-share-btn:hover{color:var(--text2);border-color:var(--text2)}.tsp-copy-btn.copied{color:var(--accent);border-color:var(--accent);background:#c8e86a12}.tsp-share-btn.shared{color:var(--accent2);border-color:var(--accent2);background:#7dd4a812}.tsp-output{background:var(--bg3);border:1px solid var(--border);border-radius:var(--rad);min-height:88px;color:var(--text);word-break:break-word;white-space:pre-wrap;-webkit-user-select:all;user-select:all;padding:12px 14px;font-family:DM Mono,monospace;font-size:15px;line-height:1.8}.tsp-output:empty:before{content:"transposed sequence will appear here";color:var(--text3);font-size:12px}@media (width<=600px){.tsp-page{padding:0 16px 32px}.tsp-header{margin-bottom:24px;padding:16px 0 18px}.tsp-title{font-size:22px}.tsp-keys-row{flex-direction:column;gap:16px}.tsp-arrow{display:none}.tsp-key-group{width:100%}}.et-page{flex-direction:column;height:100vh;display:flex;overflow:hidden}.et-topbar{border-bottom:1px solid var(--border);flex-shrink:0;align-items:center;gap:12px;padding:14px 24px;display:flex}.et-back{color:var(--text3);letter-spacing:.3px;white-space:nowrap;font-family:DM Mono,monospace;font-size:11px;text-decoration:none;transition:color .15s}.et-back:hover{color:var(--accent)}.et-title-txt{color:var(--text);flex:1;font-family:Playfair Display,serif;font-size:18px;font-weight:400}.et-score{color:var(--text2);letter-spacing:.5px;text-align:right;align-items:center;gap:8px;min-width:52px;font-family:DM Mono,monospace;font-size:13px;display:flex}.et-diff-toggle{flex-shrink:1;gap:2px;min-width:0;display:flex}.et-diff-btn{border:1px solid var(--border);color:var(--text3);cursor:pointer;letter-spacing:.4px;text-transform:uppercase;background:0 0;border-radius:4px;padding:2px 8px;font-family:DM Mono,monospace;font-size:9px;transition:all .12s}.et-diff-btn:hover{color:var(--text2);border-color:var(--border2)}.et-diff-btn.active{background:var(--bg4);color:var(--text2);border-color:var(--border2)}.et-stage{flex-direction:column;flex:1;min-height:0;display:flex;overflow:hidden}.et-center{flex-direction:column;flex:1;justify-content:center;align-items:center;gap:22px;padding:32px 24px 16px;display:flex}.et-root{color:var(--text);letter-spacing:-2px;-webkit-user-select:none;user-select:none;font-family:Playfair Display,serif;font-size:88px;font-weight:400;line-height:1}.et-question-sub{color:var(--text2);letter-spacing:.5px;margin-top:-10px;font-family:DM Mono,monospace;font-size:12px}.et-replay{color:var(--text3);border:1px solid var(--border2);border-radius:var(--rad);cursor:pointer;background:0 0;padding:7px 16px;font-family:DM Mono,monospace;font-size:12px;transition:color .15s,border-color .15s}.et-replay:hover{color:var(--text2);border-color:var(--text2)}.et-grid{flex-shrink:0;grid-template-columns:1fr 1fr;gap:10px;padding:16px 20px 24px;display:grid}.et-btn{border-radius:var(--rad2);border:1px solid var(--border2);background:var(--bg2);min-height:64px;color:var(--text2);letter-spacing:.3px;cursor:pointer;padding:12px 8px;font-family:DM Mono,monospace;font-size:13px;font-weight:400;line-height:1.3;transition:background .1s,color .1s,border-color .1s}.et-btn:hover:not(:disabled){background:var(--bg3);color:var(--text);border-color:var(--border2)}.et-btn:disabled{cursor:default}.et-btn-correct{border-color:var(--accent)!important;color:var(--accent)!important;background:#c8e86a1f!important}.et-btn-wrong{border-color:var(--accent5)!important;color:var(--accent5)!important;background:#e87c7c1a!important}.et-streak{color:var(--text2);letter-spacing:.5px;font-family:DM Mono,monospace;font-size:12px}.et-streak--hot{color:#f5a623}.et-results{flex-direction:column;flex:1;justify-content:center;align-items:center;gap:8px;padding:32px 24px;display:flex}.et-result-score{color:var(--text);letter-spacing:-1px;font-family:Playfair Display,serif;font-size:72px;font-weight:400;line-height:1}.et-result-grade{color:var(--text3);letter-spacing:3px;text-transform:uppercase;margin-top:4px;font-family:DM Mono,monospace;font-size:20px}.et-result-diff{color:var(--text3);letter-spacing:1px;text-transform:uppercase;margin-bottom:8px;font-family:DM Mono,monospace;font-size:11px}.et-result-best-streak{color:var(--text3);letter-spacing:1px;margin-top:4px;font-family:DM Mono,monospace;font-size:12px}.et-hist-row{flex-wrap:wrap;justify-content:center;gap:6px;margin-top:12px;display:flex}.et-hist-chip{letter-spacing:.5px;border:1px solid #0000;border-radius:3px;padding:3px 8px;font-family:DM Mono,monospace;font-size:11px}.et-hist-chip.chip-a{border-color:var(--accent);color:var(--accent)}.et-hist-chip.chip-b{color:#7abf7a;border-color:#7abf7a}.et-hist-chip.chip-c{color:#f5a623;border-color:#f5a623}.et-hist-chip.chip-d{border-color:var(--accent5,#e87c7c);color:var(--accent5,#e87c7c)}.et-mode-toggle{flex-shrink:0;gap:2px;display:flex}.et-mode-btn{border:1px solid var(--border2);color:var(--text3);cursor:pointer;white-space:nowrap;letter-spacing:.3px;background:0 0;border-radius:99px;padding:3px 9px;font-family:DM Mono,monospace;font-size:9px;transition:all .12s}.et-mode-btn:hover{color:var(--text2)}.et-mode-btn.active{background:var(--bg4);color:var(--text);border-color:var(--border2)}.et-level-selector{flex-direction:column;align-items:center;gap:20px;padding:32px 24px;display:flex}.et-level-heading{color:var(--text3);letter-spacing:2px;text-transform:uppercase;font-family:DM Mono,monospace;font-size:11px}.et-level-grid{flex-wrap:wrap;justify-content:center;gap:10px;width:100%;max-width:480px;display:flex}.et-level-card{border-radius:var(--rad2);border:1px solid var(--border2);background:var(--bg2);cursor:pointer;flex-direction:column;flex:80px;justify-content:center;align-items:center;gap:4px;min-width:80px;max-width:120px;min-height:88px;padding:12px 8px;transition:background .1s,border-color .1s;display:flex}.et-level-card:hover:not(.et-level-locked){background:var(--bg3);border-color:var(--border2)}.et-level-card.et-level-current{border-color:var(--accent);background:#c8e86a0f}.et-level-locked{opacity:.45;cursor:default}.et-level-num{color:var(--text3);letter-spacing:1px;text-transform:uppercase;font-family:DM Mono,monospace;font-size:9px}.et-level-name{color:var(--text);text-align:center;font-family:DM Sans,sans-serif;font-size:12px;font-weight:500;line-height:1.2}.et-level-name-txt{color:var(--text3);text-align:center;font-family:DM Sans,sans-serif;font-size:10px}.et-level-best{color:var(--accent);min-height:14px;font-family:DM Mono,monospace;font-size:10px}.et-unlock-line{color:var(--accent2,#f9b94e);text-align:center;margin-top:12px;font-family:DM Mono,monospace;font-size:12px}.et-result-btns{flex-direction:column;align-items:center;gap:10px;margin-top:8px;display:flex}.et-choose-level{border-radius:var(--rad);border:1px solid var(--border2);color:var(--text2);cursor:pointer;background:0 0;padding:7px 20px;font-family:DM Mono,monospace;font-size:12px;transition:color .15s,border-color .15s}.et-choose-level:hover{color:var(--text);border-color:var(--text2)}.et-restart{border-radius:var(--rad);border:1px solid var(--accent);background:var(--accent);color:#0d0f0e;cursor:pointer;margin-top:0;padding:11px 32px;font-family:DM Mono,monospace;font-size:13px;font-weight:500;transition:background .15s}.et-restart:hover{background:#d8f47a}@media (width<=480px){.et-root{font-size:72px}.et-grid{gap:8px;padding:12px 14px 20px}.et-btn{min-height:56px;font-size:12px}.et-topbar{padding:12px 16px}.et-result-score{font-size:60px}.et-diff-btn{padding:2px 5px}}.pf-page{max-width:720px;margin:0 auto;padding:0 24px 56px}.pf-topbar{border-bottom:1px solid var(--border);align-items:baseline;gap:16px;margin-bottom:32px;padding:20px 0 22px;display:flex}.pf-back{color:var(--text3);letter-spacing:.3px;white-space:nowrap;font-family:DM Mono,monospace;font-size:11px;text-decoration:none;transition:color .15s}.pf-back:hover{color:var(--accent)}.pf-title{color:var(--text);flex:1;margin:0;font-family:Playfair Display,serif;font-size:24px;font-weight:400}.pf-email{color:var(--text3);letter-spacing:.3px;font-family:DM Mono,monospace;font-size:11px}.pf-body{flex-direction:column;gap:40px;display:flex}.pf-section-hd{letter-spacing:1.2px;text-transform:uppercase;color:var(--text3);margin-bottom:10px;font-family:DM Mono,monospace;font-size:10px}.pf-list{flex-direction:column;gap:1px;display:flex}.pf-loading,.pf-empty{color:var(--text3);padding:12px 0;font-family:DM Mono,monospace;font-size:12px}.pf-row{border-radius:var(--rad);border:1px solid var(--border);background:var(--bg2);align-items:center;gap:12px;padding:10px 12px;transition:border-color .1s;display:flex}.pf-row:hover{border-color:var(--border2)}.pf-row-main{flex-direction:column;flex:1;gap:3px;min-width:0;display:flex}.pf-name{color:var(--text2);white-space:nowrap;text-overflow:ellipsis;font-family:DM Mono,monospace;font-size:13px;overflow:hidden}.pf-meta{color:var(--text3);white-space:nowrap;text-overflow:ellipsis;font-family:DM Mono,monospace;font-size:10px;overflow:hidden}.pf-chords{color:var(--text3);opacity:.8}.pf-row-actions{flex-shrink:0;align-items:center;gap:4px;display:flex}.pf-badge{letter-spacing:.5px;text-transform:uppercase;color:var(--text3);white-space:nowrap;background:#5a615533;border-radius:99px;padding:1px 6px;font-family:DM Mono,monospace;font-size:9px}.pf-badge.pf-pub{color:var(--accent2);background:#7dd4a81f}.pf-act-btn{border-radius:var(--rad);border:1px solid var(--border2);color:var(--text3);cursor:pointer;white-space:nowrap;background:0 0;padding:4px 10px;font-family:DM Mono,monospace;font-size:11px;transition:all .12s}.pf-act-btn:hover{color:var(--text2);border-color:var(--text2)}.pf-icon-btn{padding:4px 7px}.pf-icon-btn.is-pub{color:var(--accent2);border-color:#7dd4a866}.pf-del-btn:hover{color:var(--accent5);border-color:var(--accent5)}.pf-signed-out{text-align:center;flex-direction:column;justify-content:center;align-items:center;gap:16px;padding:80px 24px;display:flex}.pf-signed-out-msg{color:var(--text3);font-family:DM Mono,monospace;font-size:13px}.pf-signin-btn{border-radius:var(--rad);border:1px solid var(--accent);background:var(--accent);color:#0d0f0e;cursor:pointer;padding:9px 24px;font-family:DM Mono,monospace;font-size:13px;font-weight:500;transition:background .15s}.pf-signin-btn:hover{background:#d8f47a}@media (width<=480px){.pf-page{padding:0 14px 40px}.pf-topbar{margin-bottom:24px;padding:16px 0 18px}.pf-title{font-size:20px}.pf-email{display:none}.pf-row{flex-direction:column;align-items:flex-start;gap:8px}.pf-row-actions{justify-content:flex-end;width:100%}}.dr-page{flex-direction:column;height:100vh;display:flex;overflow:hidden}.dr-topbar{border-bottom:1px solid var(--border);flex-shrink:0;align-items:center;gap:12px;padding:14px 24px;display:flex}.dr-back{color:var(--text3);letter-spacing:.3px;white-space:nowrap;font-family:DM Mono,monospace;font-size:11px;text-decoration:none;transition:color .15s}.dr-back:hover{color:var(--accent)}.dr-header{flex:1;align-items:center;gap:8px;min-width:0;display:flex}.dr-header-title{color:var(--text2);text-overflow:ellipsis;white-space:nowrap;flex:1;min-width:0;font-family:DM Mono,monospace;font-size:12px;overflow:hidden}.dr-header-counter{color:var(--text3);letter-spacing:.5px;white-space:nowrap;flex-shrink:0;font-family:DM Mono,monospace;font-size:12px}.dr-stage{flex-direction:column;flex:1;min-height:0;display:flex;overflow:hidden}.dr-center{flex-direction:column;flex:1;justify-content:center;align-items:center;gap:22px;padding:32px 24px 16px;display:flex}.dr-root{color:var(--text);letter-spacing:-2px;-webkit-user-select:none;user-select:none;font-family:Playfair Display,serif;font-size:88px;font-weight:400;line-height:1}.dr-question-sub{color:var(--text2);letter-spacing:.5px;margin-top:-10px;font-family:DM Mono,monospace;font-size:12px}.dr-replay{color:var(--text3);border:1px solid var(--border2);border-radius:var(--rad);cursor:pointer;background:0 0;padding:7px 16px;font-family:DM Mono,monospace;font-size:12px;transition:color .15s,border-color .15s}.dr-replay:hover{color:var(--text2);border-color:var(--text2)}.dr-grid{flex-shrink:0;grid-template-columns:1fr 1fr;gap:10px;padding:16px 20px 24px;display:grid}.dr-btn{border-radius:var(--rad2);border:1px solid var(--border2);background:var(--bg2);min-height:64px;color:var(--text2);letter-spacing:.3px;cursor:pointer;padding:12px 8px;font-family:DM Mono,monospace;font-size:13px;font-weight:400;line-height:1.3;transition:background .1s,color .1s,border-color .1s}.dr-btn:hover:not(:disabled){background:var(--bg3);color:var(--text);border-color:var(--border2)}.dr-btn:disabled{cursor:default}.dr-btn-correct{border-color:var(--accent)!important;color:var(--accent)!important;background:#c8e86a1f!important}.dr-btn-wrong{border-color:var(--accent5)!important;color:var(--accent5)!important;background:#e87c7c1a!important}.dr-empty{text-align:center;flex-direction:column;flex:1;justify-content:center;align-items:center;gap:14px;padding:32px 24px;display:flex}.dr-empty-msg{color:var(--text2);font-family:DM Mono,monospace;font-size:13px;line-height:1.6}.dr-empty-link{color:var(--text3);border:1px solid var(--border2);border-radius:var(--rad);padding:7px 16px;font-family:DM Mono,monospace;font-size:12px;text-decoration:none;transition:color .15s,border-color .15s}.dr-empty-link:hover{color:var(--text2);border-color:var(--text2)}.dr-results{flex-direction:column;flex:1;align-items:center;gap:8px;padding:32px 24px;display:flex;overflow-y:auto}.dr-result-score{color:var(--text);letter-spacing:-1px;font-family:Playfair Display,serif;font-size:72px;font-weight:400;line-height:1}.dr-result-grade{color:var(--text3);letter-spacing:3px;text-transform:uppercase;margin-top:4px;font-family:DM Mono,monospace;font-size:20px}.dr-result-list{flex-direction:column;align-items:center;gap:6px;width:100%;max-width:240px;margin:16px 0 8px;display:flex}.dr-res-chord{align-items:center;gap:10px;width:100%;display:flex}.dr-res-mark{text-align:center;flex-shrink:0;width:18px;font-size:14px}.dr-mark-ok{color:var(--accent)}.dr-mark-x{color:var(--accent5)}.dr-res-chord-name{color:var(--text2);font-family:DM Mono,monospace;font-size:13px}.dr-result-btns{flex-direction:column;align-items:center;gap:12px;margin-top:16px;display:flex}.dr-again-btn{border-radius:var(--rad);border:1px solid var(--accent);background:var(--accent);color:#0d0f0e;cursor:pointer;padding:11px 32px;font-family:DM Mono,monospace;font-size:13px;font-weight:500;transition:background .15s}.dr-again-btn:hover{background:#d8f47a}.dr-back-link{color:var(--text3);font-family:DM Mono,monospace;font-size:12px;text-decoration:none;transition:color .15s}.dr-back-link:hover{color:var(--text2)}.dr-controls{border-bottom:1px solid var(--border);flex-wrap:wrap;flex-shrink:0;align-items:center;gap:16px;padding:10px 24px;display:flex}.dr-mode-toggle,.dr-advance-toggle{gap:4px;display:flex}.dr-mode-btn,.dr-adv-btn{border:1px solid var(--border2);color:var(--text3);cursor:pointer;white-space:nowrap;background:0 0;border-radius:99px;padding:4px 12px;font-family:DM Mono,monospace;font-size:11px;transition:all .12s}.dr-mode-btn:hover,.dr-adv-btn:hover{color:var(--text2);border-color:var(--border2)}.dr-mode-btn.active,.dr-adv-btn.active{background:var(--bg4);color:var(--text);border-color:var(--border2)}.dr-advance-group{align-items:center;gap:8px;margin-left:auto;display:flex}.dr-tempo-group{align-items:center;gap:10px;margin-left:auto;display:flex}.dr-bpm-slider{width:120px;accent-color:var(--accent);cursor:pointer}.dr-advance-label{color:var(--text3);letter-spacing:.5px;white-space:nowrap;font-family:DM Mono,monospace;font-size:10px}.dr-chord-name{color:var(--text);letter-spacing:-1px;-webkit-user-select:none;user-select:none;font-family:Playfair Display,serif;font-size:64px;font-weight:400;line-height:1}.dr-scale-btn{font-size:11px!important}.dr-skip-row{flex-shrink:0;justify-content:center;padding:0 20px 14px;display:flex}.dr-skip-btn{color:var(--text3);cursor:pointer;border-radius:var(--rad);background:0 0;border:none;padding:6px 20px;font-family:DM Mono,monospace;font-size:11px;transition:color .15s}.dr-skip-btn:hover{color:var(--text2)}.dr-no-scales{text-align:center;color:var(--text3);grid-column:1/-1;padding:24px 12px;font-family:DM Mono,monospace;font-size:12px}.dr-result-mode-label{color:var(--text3);letter-spacing:2px;text-transform:uppercase;margin-top:-4px;font-family:DM Mono,monospace;font-size:11px}.dr-res-scale{color:var(--text3);font-size:11px}.dr-missed-btn{border-radius:var(--rad);border:1px solid var(--accent3);color:var(--accent3);cursor:pointer;background:0 0;padding:11px 32px;font-family:DM Mono,monospace;font-size:13px;font-weight:500;transition:background .15s}.dr-missed-btn:hover{background:#e8a85c1a}.dr-guide-pair{color:var(--text);letter-spacing:-1px;-webkit-user-select:none;user-select:none;text-align:center;font-family:Playfair Display,serif;font-size:52px;font-weight:400;line-height:1}.dr-guide-btn{flex-direction:column;justify-content:center;align-items:center;gap:4px;min-height:68px!important;padding:10px 8px!important;display:flex!important}.dr-gt-arrow{color:inherit;letter-spacing:.5px;font-family:DM Mono,monospace;font-size:15px;font-weight:500;line-height:1}.dr-gt-desc{color:var(--text3);letter-spacing:.2px;font-family:DM Sans,sans-serif;font-size:10px;line-height:1}.dr-guide-btn:hover:not(:disabled) .dr-gt-desc{color:var(--text2)}.dr-btn-correct .dr-gt-desc,.dr-btn-wrong .dr-gt-desc{opacity:.8;color:inherit!important}@media (width<=480px){.dr-root{font-size:72px}.dr-chord-name{font-size:52px}.dr-guide-pair{font-size:38px}.dr-grid{gap:8px;padding:12px 14px 20px}.dr-btn{min-height:56px;font-size:12px}.dr-topbar{padding:12px 16px}.dr-controls{gap:10px;padding:8px 16px}.dr-result-score{font-size:60px}.dr-advance-group{margin-left:0}}.ss-page{flex-direction:column;min-height:100vh;display:flex}.ss-phase-bar{border-bottom:1px solid var(--border);flex-shrink:0;justify-content:center;align-items:center;gap:28px;padding:12px 24px;display:flex}.ss-phase-step{letter-spacing:.5px;color:var(--text3);align-items:center;gap:7px;font-family:DM Mono,monospace;font-size:10px;display:flex}.ss-phase-step.active{color:var(--accent)}.ss-phase-step.done{color:var(--text2)}.ss-phase-dot{border:1.5px solid;border-radius:50%;flex-shrink:0;width:7px;height:7px;transition:background .2s}.ss-phase-step.active .ss-phase-dot{background:var(--accent)}.ss-phase-step.done .ss-phase-dot{background:var(--text2)}.ss-standard-title{color:var(--text3);text-align:center;letter-spacing:.5px;padding:6px 24px 0;font-family:DM Mono,monospace;font-size:10px}.ss-picker{box-sizing:border-box;width:100%;max-width:700px;margin:0 auto;padding:28px 24px}.ss-picker-heading{margin-bottom:22px;font-family:Playfair Display,serif;font-size:26px}.ss-picker-groups{flex-direction:column;gap:18px;margin-bottom:26px;display:flex}.ss-group{flex-direction:column;gap:7px;display:flex}.ss-group-label{letter-spacing:1.2px;text-transform:uppercase;color:var(--text3);opacity:.6;font-family:DM Mono,monospace;font-size:8px}.ss-group-pills{flex-wrap:wrap;gap:6px;display:flex}.ss-preset-pill{border:1px solid var(--border2);color:var(--text2);cursor:pointer;white-space:nowrap;background:0 0;border-radius:99px;padding:5px 13px;font-family:DM Mono,monospace;font-size:11px;transition:all .12s}.ss-preset-pill:hover{border-color:var(--accent);color:var(--text)}.ss-custom-section{border-top:1px solid var(--border);flex-direction:column;gap:10px;padding-top:20px;display:flex}.ss-custom-label{color:var(--text3);font-family:DM Mono,monospace;font-size:11px}.ss-custom-input{background:var(--bg3);border:1px solid var(--border2);border-radius:var(--rad);width:100%;color:var(--text);box-sizing:border-box;outline:none;padding:9px 12px;font-family:DM Mono,monospace;font-size:13px;transition:border-color .2s}.ss-custom-input:focus{border-color:var(--accent)}.ss-custom-input::placeholder{color:var(--text3)}.ss-start-btn{border-radius:var(--rad);border:1px solid var(--accent);background:var(--accent);color:#0d0f0e;cursor:pointer;align-self:flex-start;padding:9px 22px;font-family:DM Mono,monospace;font-size:13px;font-weight:500;transition:background .15s}.ss-start-btn:hover:not(:disabled){background:#d8f47a}.ss-start-btn:disabled{opacity:.4;cursor:not-allowed;color:var(--text3);border-color:var(--border2);background:0 0}.ss-step-progress{background:var(--border);flex-shrink:0;height:3px;position:relative}.ss-step-bar{background:var(--accent);transition:width .3s;position:absolute;top:0;bottom:0;left:0}.ss-step-card{box-sizing:border-box;flex-direction:column;gap:14px;width:100%;max-width:580px;margin:0 auto;padding:28px 24px 24px;display:flex}.ss-step-meta{align-items:center;gap:10px;display:flex}.ss-roman{color:var(--text3);background:var(--bg3);border:1px solid var(--border2);border-radius:4px;padding:2px 7px;font-family:DM Mono,monospace;font-size:11px}.ss-chord-type-label{color:var(--text3);font-family:DM Mono,monospace;font-size:11px}.ss-chord-name{letter-spacing:-2px;color:var(--text);-webkit-user-select:none;user-select:none;font-family:Playfair Display,serif;font-size:72px;font-weight:400;line-height:1}.ss-step-section-label{letter-spacing:1px;text-transform:uppercase;color:var(--text3);margin-top:4px;font-family:DM Mono,monospace;font-size:10px}.ss-tones-row{flex-wrap:wrap;gap:7px;display:flex}.ss-tone-pill{border-radius:var(--rad);align-items:center;gap:5px;padding:7px 12px;font-family:DM Mono,monospace;font-size:14px;font-weight:500;display:inline-flex}.ss-tone-role{opacity:.65;text-transform:uppercase;font-size:9px}.ss-scale-name{color:var(--text);font-family:DM Mono,monospace;font-size:14px;font-weight:500}.ss-scale-hint{color:var(--text3);font-family:DM Mono,monospace;font-size:11px;line-height:1.5}.ss-approaches{flex-wrap:wrap;gap:7px;display:flex}.ss-approach-pill{color:var(--accent6);background:#7cc5e81f;border:1px solid #7cc5e84d;border-radius:99px;padding:5px 12px;font-family:DM Mono,monospace;font-size:13px;font-weight:500}.ss-step-nav{border-top:1px solid var(--border);justify-content:space-between;align-items:center;margin-top:8px;padding-top:16px;display:flex}.ss-nav-btn{border-radius:var(--rad);border:1px solid var(--border2);color:var(--text2);cursor:pointer;white-space:nowrap;background:0 0;padding:8px 16px;font-family:DM Mono,monospace;font-size:12px;transition:all .15s}.ss-nav-btn:hover:not(:disabled){border-color:var(--text2);color:var(--text)}.ss-nav-btn:disabled{opacity:.3;cursor:not-allowed}.ss-nav-next{border-color:var(--accent);color:var(--accent)}.ss-nav-next:hover:not(:disabled){background:var(--accent);color:#0d0f0e}.ss-nav-counter{color:var(--text3);letter-spacing:.5px;font-family:DM Mono,monospace;font-size:11px}.ss-drill-wrap{flex-direction:column;flex:1;min-height:0;display:flex;overflow:hidden}.ss-summary{box-sizing:border-box;flex-direction:column;align-items:center;gap:16px;width:100%;max-width:420px;margin:0 auto;padding:40px 24px;display:flex}.ss-summary-name{text-align:center;font-family:Playfair Display,serif;font-size:26px}.ss-summary-time{color:var(--text2);font-family:DM Mono,monospace;font-size:12px}.ss-summary-grade-big{letter-spacing:-2px;font-family:Playfair Display,serif;font-size:80px;font-weight:400;line-height:1}.ss-grade-a{color:var(--accent)}.ss-grade-b{color:var(--accent2)}.ss-grade-c{color:var(--accent3)}.ss-grade-d{color:var(--accent5)}.ss-score-rows{background:var(--bg2);border:1px solid var(--border);border-radius:var(--rad2);box-sizing:border-box;flex-direction:column;gap:10px;width:100%;padding:14px 16px;display:flex}.ss-score-row{align-items:center;gap:10px;display:flex}.ss-score-label{color:var(--text2);flex:1;font-family:DM Mono,monospace;font-size:12px}.ss-score-val{color:var(--text);font-family:DM Mono,monospace;font-size:13px;font-weight:500}.ss-grade-badge{letter-spacing:.5px;text-transform:uppercase;background:var(--bg3);color:var(--text3);border-radius:99px;padding:2px 9px;font-family:DM Mono,monospace;font-size:10px}.ss-grade-badge.ss-grade-a{color:var(--accent);background:#c8e86a26}.ss-grade-badge.ss-grade-b{color:var(--accent2);background:#7dd4a81f}.ss-grade-badge.ss-grade-c{color:var(--accent3);background:#e8a85c1f}.ss-grade-badge.ss-grade-d{color:var(--accent5);background:#e87c7c1a}.ss-summary-btns{flex-direction:column;gap:10px;width:100%;margin-top:8px;display:flex}.ss-btn-primary{border-radius:var(--rad);border:1px solid var(--accent);background:var(--accent);color:#0d0f0e;cursor:pointer;width:100%;padding:11px 24px;font-family:DM Mono,monospace;font-size:13px;font-weight:500;transition:background .15s}.ss-btn-primary:hover{background:#d8f47a}.ss-btn-secondary{border-radius:var(--rad);border:1px solid var(--border2);color:var(--text2);cursor:pointer;background:0 0;width:100%;padding:10px 24px;font-family:DM Mono,monospace;font-size:13px;transition:all .15s}.ss-btn-secondary:hover{border-color:var(--text2);color:var(--text)}.ss-btn-save{border-radius:var(--rad);border:1px solid var(--accent2);color:var(--accent2);cursor:pointer;background:0 0;width:100%;padding:8px 24px;font-family:DM Mono,monospace;font-size:12px;transition:all .15s}.ss-btn-save:hover{background:#7dd4a81a}@media (width<=480px){.ss-chord-name{font-size:56px}.ss-picker{padding:18px 16px}.ss-step-card{padding:20px 16px 16px}.ss-step-nav{flex-wrap:wrap;justify-content:center;gap:8px}.ss-group-pills{grid-template-columns:1fr 1fr;display:grid}.ss-summary{padding:28px 16px}.ss-summary-grade-big{font-size:64px}.ss-phase-bar{gap:14px}.ss-phase-step{font-size:9px}}