:root{--red:#a40000;--ink:#24242a;--muted:#67676f;--line:#e5e5e8;--paper:#f5f5f7}*{box-sizing:border-box}body{margin:0;background:var(--paper);color:var(--ink);font:16px/1.55 Arial,Helvetica,sans-serif}button,input,select{font:inherit}button,select{cursor:pointer}button:focus-visible,a:focus-visible,select:focus-visible,input:focus-visible,summary:focus-visible{outline:3px solid #cf8c24;outline-offset:4px}header{height:88px;background:var(--red);color:white;display:flex;align-items:center;padding:0 max(24px,calc((100vw - 1320px)/2));gap:20px}header img{height:84px;width:84px;object-fit:cover}.brand{font-size:12px;letter-spacing:1.8px}.brand span{display:block;font-size:20px;letter-spacing:0;margin-top:4px}.header-note{margin-left:auto;font-size:12px;letter-spacing:2px;opacity:.8}main{max-width:1368px;margin:auto;padding:34px 24px}.title{display:flex;justify-content:space-between;align-items:center;margin-bottom:28px}.eyebrow{font-size:12px;font-weight:700;letter-spacing:2px;margin:0 0 8px;color:var(--red)}h1{font-size:40px;letter-spacing:-1.5px;margin:0;line-height:1.2}h1 span{color:var(--red)}.title>p{color:var(--muted);margin:0}h2{font-size:28px;line-height:1.2;letter-spacing:-.7px;margin:18px 0 12px}h3{font-size:21px;line-height:1.3;margin:8px 0 16px}.workspace{display:grid;grid-template-columns:350px minmax(0,1fr);gap:24px}.panel{background:white;border:1px solid var(--line);border-radius:14px;padding:24px}.section-label{font-size:12px;color:var(--red);font-weight:bold;letter-spacing:1px;display:flex;gap:12px}.section-label span{color:var(--ink);font-size:14px;letter-spacing:0}.mode{display:flex;margin:20px auto 8px;background:var(--paper);border-radius:8px;padding:4px;width:220px}.mode button{border:0;background:transparent;flex:1;padding:7px;border-radius:5px;font-size:14px}.mode button[aria-pressed=true]{background:var(--ink);color:#fff}.circle{position:relative;width:100%;aspect-ratio:1;margin:4px auto 12px;border-radius:50%;background:radial-gradient(circle,white 0 32%,#eeeef1 32.5% 33%,white 33.5% 48%,#fafafb 48.5% 69%,transparent 70%)}.key{position:absolute;transform:translate(-50%,-50%);border:0;background:transparent;border-radius:50%;width:46px;height:46px;line-height:1.15;color:var(--ink);font-weight:bold;font-size:18px;transition:.15s}.key small{display:block;font-size:12px;color:var(--muted);font-weight:normal;margin-top:3px}.key:hover{background:#f0e3e3}.key.active{background:var(--red);color:#fff;box-shadow:0 4px 12px #a4000028}.key.active small{color:#ffd8d8}.circle-center{position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);text-align:center;pointer-events:none}.circle-center small{font-size:10px;letter-spacing:2px;color:var(--muted)}.circle-center strong{display:block;font-size:38px;line-height:1.2}.circle-center span{font-size:14px;color:var(--muted)}.key-summary{text-align:center}.key-summary span{display:block;color:var(--muted);font-size:14px}.spelling{display:flex;align-items:center;justify-content:space-between;font-size:14px;margin-top:16px}.spelling select{max-width:165px;background:white;border:1px solid var(--line);border-radius:6px;padding:6px}.small{font-size:13px;color:var(--muted)}.circle-help{margin:16px 0 0}.library{margin-top:20px;padding:20px 12px}.library .section-label{padding:0 12px 14px}.progression-choice{border:0;border-radius:8px;background:transparent;width:100%;display:flex;text-align:left;align-items:center;justify-content:space-between;padding:12px;gap:8px}.progression-choice strong{font-size:14px;font-weight:600}.progression-choice span{font-size:13px;color:var(--muted)}.progression-choice.active{background:#faeeee;color:var(--red)}.progression-choice.active span{color:var(--red)}.progression-choice:hover{background:#f5f5f7}.results{min-width:0}.progression-detail{padding:28px}.detail-top{display:flex;justify-content:space-between;align-items:center}.pill{display:inline-block;background:#f4eeee;color:#8d1515;font-size:12px;border-radius:4px;padding:4px 8px}.progression-detail>p{color:var(--muted);max-width:700px}.formula{font-size:clamp(20px,2.3vw,30px);letter-spacing:1px;margin:24px 0;font-family:Georgia,serif;color:var(--red)}.formula span{color:#b9b9be;margin:0 7px;font-family:Arial;font-size:18px}.playback{display:flex;align-items:center;gap:18px;flex-wrap:wrap;padding-bottom:24px;border-bottom:1px solid var(--line)}.primary{border:0;border-radius:7px;background:var(--red);color:white;padding:11px 17px;font-size:14px;font-weight:bold}.playback label{display:flex;align-items:center;gap:8px;font-size:13px}.playback input[type=range]{width:75px;accent-color:var(--red)}.playback input[type=checkbox]{accent-color:var(--red)}output{white-space:nowrap}.chords{display:grid;grid-template-columns:repeat(auto-fit,minmax(116px,1fr));gap:12px;margin:24px 0 16px}.chord{padding:14px 8px 10px;background:#fff;border:1px solid var(--line);border-radius:9px;color:var(--ink);transition:.15s;min-width:0}.chord:hover,.chord.sounding{background:#fff7f7;border-color:var(--red);transform:translateY(-2px)}.chord strong{display:block;font-size:26px;line-height:1.2}.chord .roman{font-size:14px;color:var(--red);margin:5px 0}.chord svg{width:100%;max-width:145px;display:block;margin:auto}.chord .notes{display:block;font-size:12px;color:var(--muted)}.diagram-note{margin-bottom:20px}.theory{border-left:3px solid var(--red);padding:10px 14px;background:#f7f7f9;font-size:14px}.below{display:grid;grid-template-columns:1fr 1fr;gap:20px;margin-top:20px}.below p:not(.eyebrow){font-size:14px}.repertoire a{font-size:14px;color:var(--red);text-underline-offset:4px}.original{font-family:Georgia,serif;font-size:18px;margin:16px 0}.task{background:#27272e;color:white;border-color:#27272e}.task .eyebrow{color:#f19d9d}.task-label{font-size:11px;letter-spacing:1.5px;color:#d5b0b0;font-weight:bold;margin-top:16px}.task p{margin:5px 0 12px}.time{border-top:1px solid #48484e;padding-top:15px;margin-top:20px;color:#bebec8;font-size:12px}.guide{margin-top:20px;font-size:14px}.guide summary{cursor:pointer;font-weight:bold}.guide p{color:var(--muted)}footer{display:flex;gap:16px;align-items:center;color:var(--red);font-size:20px;font-weight:bold;margin:40px 0 0}footer span{font-weight:normal;font-size:12px;color:var(--muted)}footer span:last-child{margin-left:auto}@media(min-width:1150px){.circle-panel{padding:24px}.circle{width:300px}}@media(max-width:1000px){.workspace{grid-template-columns:290px minmax(0,1fr)}.panel{padding:20px}.below{grid-template-columns:1fr}.header-note{display:none}.progression-choice{display:block}.progression-choice span{display:block}.circle-panel{padding:16px}.key{width:42px;height:42px;font-size:16px}}@media(max-width:700px){header{padding:0 12px;height:74px;gap:8px}header img{height:70px;width:70px}.brand{font-size:10px;letter-spacing:1px}.brand span{font-size:18px}main{padding:24px 16px}.title{display:block}h1{font-size:34px}.title>p{margin-top:12px;font-size:14px}.workspace{display:block}aside{display:grid;grid-template-columns:1fr;gap:16px}.circle{max-width:310px}.library{margin-top:0}.progression-choice{display:flex}.progression-choice span{display:inline}.results{margin-top:20px}.chords{grid-template-columns:repeat(2,minmax(0,1fr))}.chord:last-child:nth-child(odd){grid-column:1/-1;max-width:180px;justify-self:center;width:100%}.formula{font-size:25px}.formula span{margin:0 3px}.below{grid-template-columns:1fr}footer{flex-wrap:wrap}footer span:last-child{width:100%;margin-left:0}.playback{gap:12px}.key{width:46px;height:46px}}

.position-control{display:flex;align-items:center;gap:14px;flex-wrap:wrap;margin-top:22px;font-size:14px;font-weight:bold}.position-control select{padding:9px 12px;border:1px solid var(--line);border-radius:7px;background:white;max-width:100%}.voicing-info{display:block;margin-top:8px;font-size:12px;color:var(--muted)}
.degree-legend{display:flex;flex-wrap:wrap;gap:6px;margin-top:18px}.degree-legend span{color:var(--degree);font-size:13px;border-bottom:3px solid var(--degree);padding:2px 5px;font-weight:bold}.circle-tone{display:block;border-radius:5px;padding:2px 0;line-height:1.1}.circle-tone.relative-tone{font-size:12px;font-weight:normal;margin-top:3px}.key{height:auto;min-height:49px;border-radius:10px;padding:3px}.key.active{background:#e8e8ed;color:#24242a;box-shadow:none;outline:1px solid #aaa}.used-tone{color:var(--degree)!important;background:#fff;border-bottom:3px solid var(--degree);font-weight:bold!important}.current-tone{outline:3px solid #24242a;outline-offset:1px}.degree-token{color:var(--degree);font:inherit;background:white;border:0;border-bottom:3px solid var(--degree);padding:3px 6px;border-radius:4px;cursor:pointer}.formula{display:flex;flex-wrap:wrap;gap:6px;align-items:center}.formula>span{margin:0 2px}.degree-token.sounding{box-shadow:0 0 0 2px var(--degree)}.custom-form{border-top:1px solid var(--line);margin:16px 10px 0;padding-top:18px}.custom-form label{display:block;font-size:15px;font-weight:bold}.custom-form textarea{display:block;width:100%;resize:vertical;padding:10px;border:1px solid #b9b9c2;border-radius:6px;font:16px/1.5 Arial;margin-top:8px}#customError{color:#a40000;font-size:14px}.all-toggle{display:flex;align-items:center;gap:9px;font-size:14px;margin:20px 0}.all-toggle input{accent-color:#a40000;width:18px;height:18px}.chords{grid-template-columns:repeat(auto-fit,minmax(170px,1fr))}.chord-card{min-width:0;border:1px solid var(--line);border-top:4px solid var(--degree);border-radius:9px;overflow:hidden}.chord-card>.chord{border:0;border-radius:0;width:100%;height:auto;transform:none;display:block}.chord-card>.chord .roman{color:var(--degree)}.chord-card>.chord.sounding{box-shadow:inset 0 0 0 2px var(--degree);background:#f7f7fa}.chord-card .chord svg{max-width:155px}.chord-controls{padding:12px;border-top:1px solid var(--line);background:#fafafa}.chord-controls label{display:block;font-size:13px;margin-bottom:12px}.chord-controls select{width:100%;min-width:0;padding:7px 5px;margin-top:4px;font-size:13px;border:1px solid #c7c7cf;background:white;border-radius:5px}.text-button{background:transparent;border:0;color:var(--degree);text-decoration:underline;text-underline-offset:3px;font-size:13px;padding:0}.omissions{display:block;font-size:12px;color:#7c4a19;margin-top:6px}.position-gallery{margin-top:20px}.gallery-section{padding:16px 0;border-top:1px solid var(--line);scroll-margin-top:20px}.gallery-section h3 small{font-size:16px}.voicing-gallery{display:grid;grid-template-columns:repeat(auto-fill,minmax(150px,1fr));gap:12px}.gallery-chord{padding:12px 8px;border:1px solid var(--line);border-top:3px solid var(--degree);border-radius:7px;background:white;font:14px/1.5 Arial;color:var(--ink)}.gallery-chord svg{width:100%;max-width:150px}.gallery-chord .notes{display:block;font-size:12px}.gallery-chord.chosen{outline:2px solid var(--degree);outline-offset:1px;background:#f5f5f7}.pick-label{display:block;margin-top:12px;color:var(--degree);font-weight:bold}.gallery-chord:hover{background:#f5f5f7}[hidden]{display:none!important}.chord:disabled{opacity:.7;cursor:default}button:disabled{cursor:default}
@media(max-width:700px){.chords{grid-template-columns:repeat(2,minmax(0,1fr))}.chord-card>.chord:last-child:nth-child(odd){grid-column:auto;max-width:none}.chord-controls{padding:10px 7px}.chord-card .notes{font-size:12px}.voicing-gallery{grid-template-columns:repeat(2,minmax(0,1fr))}.position-control{display:block}.position-control label{display:block;margin-bottom:6px}.position-control select{width:100%}.formula{font-size:21px}.key{width:46px}.gallery-section h3{font-size:20px}}

.harmony-lab{margin-top:20px}.harmony-lab>summary{font-size:21px;font-weight:bold;cursor:pointer}.harmony-lab details{margin-top:22px;border-top:1px solid var(--line);padding-top:16px}.harmony-lab details>summary{font-size:18px;font-weight:bold;cursor:pointer}.harmony-list{display:flex;flex-wrap:wrap;gap:8px}.harmony-list button{background:white;border:1px solid var(--degree);border-bottom:3px solid var(--degree);color:var(--degree);border-radius:6px;padding:8px 12px}.harmony-list small{display:block;font-size:12px}.lab-controls{display:flex;flex-wrap:wrap;align-items:end;gap:12px;margin:20px 0}.lab-controls label{font-size:14px}.lab-controls select{display:block;max-width:100%;padding:8px;background:white;border:1px solid #bbb;border-radius:5px}.lab-controls button{padding:10px}.sequence-editor{display:flex;gap:6px;flex-wrap:wrap;margin-top:16px}.sequence-editor>span{border:1px solid var(--degree);color:var(--degree);border-radius:5px;padding:4px 8px}.sequence-editor button{background:none;border:0;color:inherit}.builder-shape{width:175px}.builder-shape svg{width:100%}#labStatus{font-size:14px;color:var(--red)}#buildNotes{padding:9px;margin-left:10px}.harmony-lab .gallery-chord button{padding:6px;margin-top:8px;border:1px solid #aaa;background:white;border-radius:4px}@media(max-width:700px){.lab-controls{display:grid;grid-template-columns:1fr 1fr}.lab-controls>*{min-width:0}.lab-controls select{width:100%}.harmony-lab{padding:16px}}

.practice-controls{border-bottom:1px solid var(--line);padding:18px 0;display:flex;flex-wrap:wrap;gap:15px}.practice-controls label{display:flex;gap:8px;align-items:center;font-size:14px}.practice-controls input[type=range]{width:100px;accent-color:var(--red)}.practice-controls input[type=checkbox]{accent-color:var(--red)}.practice-controls p{width:100%;margin:0}#practiceStatus{color:var(--red);font-size:14px;min-height:22px}.identifier{margin-top:20px}.identifier>summary{font-size:21px;font-weight:bold;cursor:pointer}.identifier details{margin-top:24px;border-top:1px solid var(--line);padding-top:16px}.identifier details>summary{font-weight:bold;cursor:pointer}#identifyForm{display:grid;gap:8px}#identifyForm input,#identifyForm select{padding:10px;font:16px Arial;border:1px solid #aaa;border-radius:6px;max-width:100%;min-width:0}#identifyForm button{justify-self:start;margin-top:8px}.identify-match{display:flex;gap:14px;align-items:center;border-bottom:1px solid var(--line);padding:12px 0;flex-wrap:wrap}.identify-match strong{font-size:20px;color:var(--red);min-width:80px}.identify-match span{font-size:14px;flex:1;min-width:160px}.identify-match button,#scoreReader>button:not(.primary){padding:8px;border:1px solid #aaa;border-radius:5px;background:white}#scoreCanvas{display:block;width:100%;height:auto;border:1px solid #aaa;margin:14px 0;cursor:crosshair;touch-action:manipulation}#identifyStatus,#scoreStep{font-size:14px;color:var(--red)}#scoreFile{max-width:100%;font-size:14px}

.account-panel{margin-bottom:24px}.account-heading,.account-tabs,.saved-actions{display:flex;align-items:center;gap:12px;flex-wrap:wrap}.account-heading{justify-content:space-between}.account-heading h2{font-size:1.2rem;overflow-wrap:anywhere}.account-tabs{margin:20px 0}.account-tabs [aria-pressed=true],.save-progression{background:#a40000;color:#fff;border-color:#a40000}.saved-item{padding:18px 0;border-top:1px solid #ddd;display:flex;justify-content:space-between;gap:18px;flex-wrap:wrap}.saved-item h3{margin:0 0 8px;font-size:1rem;overflow-wrap:anywhere}.saved-item p{margin:0 0 8px;overflow-wrap:anywhere}.saved-item small{font-size:.875rem;color:#62626a}.saved-actions button{font-size:.875rem;padding:8px 12px}.pro-coming{border-top:1px solid #ddd;margin-top:24px;padding-top:18px}.pro-coming p{max-width:650px;font-size:.95rem}.account-panel form{display:grid;gap:12px;max-width:650px}.account-panel label,dialog label{display:grid;gap:8px}.account-panel input,.account-panel textarea,dialog input{padding:12px;border:1px solid #b8b8c0;border-radius:8px;font:inherit;width:100%;box-sizing:border-box}.account-panel [hidden],[hidden]{display:none!important}dialog{border:1px solid #ddd;border-radius:16px;padding:28px;width:min(480px,calc(100% - 40px));max-height:85vh;overflow:auto;box-sizing:border-box;color:#25252b}dialog::backdrop{background:#17171b99}dialog h2{margin-top:0}dialog button,dialog a.primary{display:inline-block;margin:10px 8px 0 0}#accountStatus:empty{display:none}#accountStatus{padding:12px 0;color:#850000}#memberList{max-height:300px;overflow:auto}#memberList p{overflow-wrap:anywhere}#accountButton{margin-left:auto}@media(max-width:640px){.saved-actions{gap:8px}.account-tabs button{flex:1}.account-heading{align-items:flex-start}#accountButton{font-size:.875rem;padding:8px}.brand{min-width:0}}
.tap-builder{margin:20px 0;padding:16px 0;border-top:1px solid #ddd}.tap-board{overflow-x:auto;max-width:100%;padding:8px 0}.fret-row{display:grid;grid-template-columns:65px repeat(17,48px);gap:3px;align-items:center;min-width:932px}.fret-row>span,.fret-row>strong{text-align:center;font-size:14px}.fret-row button{height:44px;padding:2px;font-size:14px;border-radius:6px;margin:2px 0}.fret-row button[aria-pressed=true]{background:#a40000;color:white;border-color:#a40000}.fret-row button:focus-visible{outline:3px solid #17669a;outline-offset:1px}#builderAudioStatus{color:#850000}
.tap-board{width:100%;max-width:410px;max-height:480px;overflow-y:auto;overflow-x:hidden;border:1px solid #bcbcc4;border-radius:10px;padding:0;overscroll-behavior-y:contain;scrollbar-gutter:stable}.neck-row{display:grid;grid-template-columns:40px repeat(6,minmax(0,1fr));align-items:stretch;min-width:0}.neck-row>strong{text-align:center;padding:8px 0}.neck-row small{display:block;font-size:12px;color:#666}.neck-header{position:sticky;top:0;z-index:2;background:white;border-bottom:1px solid #ccc}.neck-row .fret-number{display:flex;align-items:center;justify-content:center;font-size:12px;color:#666;background:#f6f6f8}.neck-row button{position:relative;min-width:0;min-height:48px;padding:0;border:0;border-radius:0;background:linear-gradient(90deg,transparent calc(50% - 1px),#92929b calc(50% - 1px),#92929b calc(50% + 1px),transparent calc(50% + 1px));touch-action:pan-y}.neck-fret button{border-bottom:2px solid #bcbcc4}.neck-open button{border-bottom:5px solid #52525b}.neck-row button span{display:inline-flex;align-items:center;justify-content:center;min-width:28px;height:28px;background:#fff;color:#64646e;border-radius:50%;font-size:12px}.neck-row button[aria-pressed=true] span{background:#a40000;color:#fff;font-weight:700}.neck-row button:focus-visible{outline:3px solid #17669a;outline-offset:-3px}.builder-transport{display:flex;flex-wrap:wrap;gap:10px;align-items:center;margin-top:14px}
.scale-workspace{margin-bottom:24px;scroll-margin-top:20px}.scale-controls{display:flex;flex-wrap:wrap;gap:12px;align-items:end;margin:16px 0}.scale-controls label{display:flex;flex-direction:column;gap:6px;font-size:14px}.scale-controls select{max-width:100%;padding:9px;border:1px solid #bbb;border-radius:6px;background:white;font-size:15px}.scale-layout{display:grid;grid-template-columns:minmax(250px,380px) minmax(0,1fr);gap:24px;margin-top:18px;align-items:start}.scale-workspace h2{margin-bottom:6px}.scale-workspace h3{margin-top:0}.scale-workspace .tap-board{max-height:460px;background:#fff}.scale-workspace .neck-row button span{background:#f5dddd;color:#720000;font-weight:600}.scale-workspace .neck-row button.scale-chord span{background:#a40000;color:white}.scale-workspace .neck-row button.scale-outside span{background:#fff4dc;color:#754800;outline:2px solid #b97600}.scale-workspace .neck-row button.scale-hidden span{visibility:hidden}.scale-workspace .neck-row button.scale-hidden{opacity:1}.scale-workspace .neck-row button.scale-playing span,.scale-workspace .neck-row button.scale-tapped span{box-shadow:0 0 0 4px #15768b}.scale-workspace [aria-pressed=true]{outline:2px solid #a40000;outline-offset:1px}.scale-workspace #scaleChordRow{display:flex;flex-wrap:wrap;gap:8px}.scale-workspace #scaleChordRow button{border-bottom:3px solid var(--degree);padding:10px 14px}.scale-workspace #scaleChordRow small{display:block;color:var(--degree);margin-top:4px}.chord-card>.text-button{margin:12px}.scale-workspace .small{font-size:13px;line-height:1.55;color:#62626b}@media(max-width:800px){.scale-layout{grid-template-columns:1fr}.scale-workspace .tap-board{max-width:410px}.scale-controls label{max-width:100%}}
.title{flex-wrap:wrap}.tutorial-launch{font-size:14px;padding:9px 14px;border:1px solid #a40000;background:white;color:#a40000;border-radius:6px;white-space:nowrap}#quickTutorial{width:min(520px,calc(100% - 32px));max-height:calc(100dvh - 32px);box-sizing:border-box;padding:28px;border:0;border-top:5px solid #a40000;border-radius:12px;background:white;color:#24242a;overflow:auto}#quickTutorial::backdrop{background:rgba(18,18,24,.62)}.tutorial-top{display:flex;align-items:center;justify-content:space-between;gap:12px}.tutorial-top>span{font-size:12px;letter-spacing:.08em;font-weight:700;color:#a40000}#tutorialSkip{font-size:14px;background:none;border:0;padding:8px;color:#555;text-decoration:underline;white-space:nowrap}#tutorialProgress{margin:28px 0 10px;font-size:14px;color:#777}#tutorialTitle{font-size:28px;line-height:1.2;margin:0 0 18px}#tutorialTitle:focus{outline:none}#tutorialText,#tutorialTip{font-size:16px;line-height:1.6}#tutorialTip{background:#faf0f0;border-left:3px solid #a40000;padding:12px 16px;margin:20px 0}.tutorial-actions{display:flex;justify-content:space-between;gap:12px;margin-top:24px}.tutorial-actions button{min-height:44px;padding:10px 18px;font-size:16px}.tutorial-actions button:disabled{opacity:.4}.tutorial-return{font-size:14px;line-height:1.5;color:#666;margin:20px 0 0}#quickTutorial button:focus-visible,.tutorial-launch:focus-visible{outline:3px solid #17669a;outline-offset:3px}@media(max-width:480px){#quickTutorial{padding:20px}.tutorial-top{align-items:flex-start;flex-wrap:wrap}#tutorialTitle{font-size:25px}}
#guidedTutorial{position:fixed;z-index:1001;box-sizing:border-box;max-height:calc(100dvh - 24px);overflow:auto;padding:20px;border:1px solid #dedede;border-top:4px solid #a40000;border-radius:12px;background:#fff;color:#24242a;box-shadow:0 10px 36px #0003}#guidedTutorial.tutorial-below{max-height:45dvh}#guidedTutorial #tutorialProgress{margin:12px 0 8px}#guidedTutorial #tutorialTitle{font-size:23px;margin-bottom:12px}#guidedTutorial #tutorialText{margin:0;font-size:16px;line-height:1.5}#guidedTutorial #tutorialTip{font-size:14px;padding:9px 12px;margin:12px 0}#guidedTutorial .tutorial-actions{margin-top:14px}#guidedTutorial button:focus-visible{outline:3px solid #17669a;outline-offset:2px}.tutorial-spotlight{position:fixed;z-index:1000;box-sizing:border-box;pointer-events:none;border:3px solid #a40000;border-radius:10px;box-shadow:0 0 0 4px #fff,0 0 0 7px #a4000026}@media(max-width:480px){#guidedTutorial{padding:14px}#guidedTutorial #tutorialTitle{font-size:21px}#guidedTutorial #tutorialTip{margin:8px 0}#guidedTutorial .tutorial-top{flex-wrap:nowrap}#guidedTutorial #tutorialSkip{padding:4px}}
.circle .key{min-height:62px}.circle-signature{display:block;font-size:12px;line-height:1.2;font-weight:normal;color:#555;margin-top:3px}.circle .key.active .circle-signature{color:#555}.symbol-guide{margin:20px 0;border:1px solid var(--line);border-radius:8px;padding:14px}.symbol-guide summary{cursor:pointer;font-weight:600;color:var(--red)}.symbol-table{overflow-x:auto;margin-top:14px}.symbol-table table{border-collapse:collapse;width:100%;font-size:14px;line-height:1.5}.symbol-table th,.symbol-table td{text-align:left;vertical-align:top;border-bottom:1px solid var(--line);padding:10px;min-width:120px}.symbol-table thead{background:#f5f5f7}.symbol-table tbody th{color:#8d1515;font-weight:600}
.key-signature-staff{display:block;width:220px;max-width:100%;height:auto;margin:0 auto 8px}
#resetWorkspaceDialog{max-width:480px;width:calc(100% - 32px);border:0;border-top:4px solid var(--red);border-radius:12px;padding:24px;max-height:calc(100dvh - 32px);overflow:auto}#resetWorkspaceDialog::backdrop{background:#12121899}.reset-actions{display:flex;flex-wrap:wrap;gap:12px;margin-top:20px}.reset-actions button{min-height:44px}#resetWorkspaceStatus:empty{display:none}#resetWorkspaceStatus{background:#fff;border-left:3px solid var(--red);padding:12px 16px;font-size:15px}

/* Shared progression editor: touch scrolling remains enabled outside the drag handle. */
.results{overflow-anchor:none}.harmony-lab{overflow-anchor:none}#labStatus{min-height:1.5em}
.sequence-editor{align-items:center;gap:4px}.sequence-editor>.sequence-card{display:inline-flex;align-items:center;padding:2px;max-width:100%;background:white}.sequence-card small{display:block;font-size:12px}.sequence-editor button{min-height:44px;min-width:36px;font-size:15px;cursor:pointer}.sequence-editor>.insert-step{border:1px dashed #aaa;border-radius:6px;background:white;color:#a40000;min-width:32px}.sequence-editor .drag-handle{touch-action:none;cursor:grab;font-size:22px}.sequence-editor .dragging{opacity:.55}.sequence-editor .drop-target{outline:3px solid var(--degree);outline-offset:2px}.sequence-card button:not(.drag-handle){touch-action:pan-y}
#chordPicker{width:min(600px,calc(100vw - 24px));max-height:85vh;overflow:auto}#chordPicker select{max-width:100%;min-height:44px}#pickError{color:#a40000}.chord-explanation{padding:10px;font-size:14px}.chord-explanation summary{cursor:pointer}.chord-explanation p{overflow-wrap:anywhere}.secondary-pair{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px}.secondary-panel button{min-height:44px;margin:4px 2px}.secondary-pair .gallery-chord{min-width:0}.secondary-pair svg{display:block}.chord-controls select{min-height:44px;font-size:14px}.chord-controls label{font-size:14px}#tapSpellings select{min-height:44px}#tapSpellings>span{flex-basis:100%}.chord-card .omissions,.chord-card .voicing-info{font-size:13px}
@media(max-width:450px){.secondary-pair{grid-template-columns:1fr}.lab-controls{gap:10px}.sequence-editor>.sequence-card{flex-shrink:0}#tapSpellings{grid-template-columns:repeat(2,minmax(0,1fr))}#tapSpellings>span{grid-column:1/-1}}

.alteration-help{display:block;max-width:28rem;font-weight:400;line-height:1.45;margin-top:.35rem;font-size:.875rem;color:var(--muted,#666)}

.progression-export{margin:12px 0}.progression-export>summary{cursor:pointer;width:fit-content;padding:10px 14px;min-height:44px;font-size:16px!important}.export-options{border:1px solid var(--line);border-radius:8px;padding:10px;max-width:380px;background:white}.export-options button{display:block;width:100%;text-align:left;padding:12px;margin:4px 0;min-height:44px;background:white;border:1px solid var(--line);border-radius:5px;font-size:16px}.export-options small{display:block;font-size:14px;margin-top:4px}.export-options p{font-size:14px;margin:10px 2px}

.explorer-navigation{border:1px solid var(--line);border-radius:9px;margin:16px 0;padding:12px;background:white}.navigation-bar{display:flex;flex-wrap:wrap;justify-content:space-between;gap:10px}.navigation-bar button{min-height:44px;padding:8px 14px;border:1px solid var(--line);border-radius:6px;background:white;font-size:16px}.view-choice{display:flex;align-items:center;gap:6px}.view-choice button[aria-pressed=true]{background:var(--red,#a40000);color:white}#navigationLinks{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:14px;border-top:1px solid var(--line);margin-top:12px;padding-top:12px}#navigationLinks strong{display:block;margin:6px}#navigationLinks button{display:block;width:100%;text-align:left;background:white;border:0;border-radius:5px;min-height:44px;padding:9px;font-size:14px}#navigationLinks button:hover,#navigationLinks button[aria-current]{background:#f5eeee;color:#a40000}#viewExplanation{margin:10px 0 0}#navigationStatus:empty{display:none}body[data-harmony-view=basic] .pro-control{display:none!important}@media(max-width:700px){#navigationLinks{grid-template-columns:1fr 1fr;max-height:60vh;overflow:auto}}@media(max-width:360px){#navigationLinks{grid-template-columns:1fr}}