.jp{--jp-ink:#263b38;--jp-muted:#68746e;--jp-line:#d9ded3;--jp-green:#315e50;color:var(--jp-ink);border:1px solid var(--jp-line);background:#fffefa;font:14px/1.6 system-ui,sans-serif;border-radius:5px;overflow:hidden}.jp *{box-sizing:border-box}.jp button,.jp input{font:inherit}.jp button{cursor:pointer}.jp button:focus-visible,.jp a:focus-visible,.jp input:focus-visible,.jp summary:focus-visible{outline:3px solid #ad7936;outline-offset:3px}.jp-toolbar{display:flex;justify-content:space-between;align-items:center;gap:14px;flex-wrap:wrap;padding:18px 24px;border-bottom:1px solid var(--jp-line)}.jp-toggle{display:flex;padding:3px;background:#edf0e9;border-radius:4px}.jp-toggle button{background:transparent;color:var(--jp-muted);border:0;padding:8px 12px;border-radius:3px}.jp-toggle button[aria-pressed=true]{background:#fffefa;color:var(--jp-ink);box-shadow:0 1px 3px #263b3820}.jp-stamp{color:var(--jp-green);font-size:11px;letter-spacing:.035em}.jp-stamp:before{content:"●";margin-right:8px;font-size:8px}.jp-score{background:#fff;padding:20px 24px 0;overflow:auto}.jp-score img{display:block;width:100%;min-width:500px;height:auto}.jp-caption{padding:12px 24px 22px;background:#fff;color:var(--jp-muted);font-size:12px}.jp-caption span{font-size:9px;font-weight:600;letter-spacing:.08em;color:var(--jp-green);margin-right:12px}.jp-inspector{padding:24px;border-top:1px solid var(--jp-line)}.jp-inspector-title{display:flex;justify-content:space-between;gap:12px;align-items:baseline;margin-bottom:18px}.jp h3{font: 23px/1.2 Georgia,serif;margin:0}.jp-inspector-title>span{color:var(--jp-muted);font-size:11px}.jp-chords{display:flex;gap:8px}.jp-chords button{border:1px solid var(--jp-line);background:transparent;color:var(--jp-ink);border-radius:3px;padding:9px 18px;text-align:left;font:22px/1.4 Georgia,serif;flex:1}.jp-chords small{display:block;font:9px/1.5 system-ui,sans-serif;letter-spacing:.1em;margin-bottom:2px}.jp-chords button[aria-pressed=true]{background:var(--jp-green);border-color:var(--jp-green);color:#fff}.jp-time{display:flex;align-items:center;gap:20px;margin:20px 0}.jp-time label{white-space:nowrap;font-size:12px;min-width:110px}.jp-time input{flex:1;min-width:50px;accent-color:var(--jp-green)}.jp table{border-collapse:collapse;width:100%;font-size:12px}.jp th{color:var(--jp-muted);text-align:left;font-size:10px;font-weight:500;padding:0 8px 10px}.jp td{padding:10px 8px;border-top:1px solid var(--jp-line)}.jp-note{font:18px Georgia,serif}.jp-note sub{font-size:11px;margin-left:2px}.jp-muted{color:var(--jp-muted)}.jp-dot{display:inline-block;width:6px;height:6px;border-radius:100%;margin-right:9px}.jp-melody{background:#a47131}.jp-left{background:#315e50}.jp-right{background:#839990}.jp-required{font-size:11px;color:var(--jp-muted);margin:16px 8px 0}.jp-proof{border-top:1px solid var(--jp-line);padding:18px 24px;background:#f3f5ee}.jp-proof summary{cursor:pointer;font-size:12px}.jp-proof summary span{float:right;font-size:10px;color:var(--jp-green)}.jp-proof p,.jp-proof ul{font-size:12px;color:var(--jp-muted);max-width:650px}.jp-proof code{font-size:11px;overflow-wrap:anywhere}.jp-downloads{display:flex;gap:20px;flex-wrap:wrap;padding:14px 24px;border-top:1px solid var(--jp-line)}.jp-downloads a{color:var(--jp-muted);font-size:10px;text-decoration:none}.jp-downloads a:hover{text-decoration:underline}.jp-sr{position:absolute;width:1px;height:1px;overflow:hidden;clip-path:inset(50%)}@media(max-width:600px){.jp-toolbar,.jp-inspector,.jp-proof{padding:16px}.jp-inspector-title>span{display:none}.jp td,.jp th{padding:9px 4px}.jp table{font-size:11px}.jp-score{padding:12px 8px 0}.jp-chords button{padding:8px 12px}}.jp-piano{padding:24px;border-top:1px solid var(--jp-line,#d9ded3);color:#263b38;background:#f7f8f2;font:14px/1.6 system-ui,sans-serif}.jp-piano *{box-sizing:border-box}.jp-piano-heading{display:flex;justify-content:space-between;align-items:center;flex-wrap:wrap;gap:18px;margin-bottom:24px}.jp-piano-eyebrow{color:#637d6b;font-size:9px;letter-spacing:.12em}.jp-piano h3{margin:5px 0 0;font: 23px/1.3 Georgia,serif}.jp-transport{display:flex;align-items:center;gap:15px}.jp-transport label{font-size:10px;color:#637269;letter-spacing:.05em}.jp-transport input{font:12px system-ui,sans-serif;width:55px;padding:7px 3px 7px 7px;border:1px solid #d1d9ce;border-radius:3px;color:#263b38;background:#fffefa;margin-left:5px}.jp-transport .jp-play{border:0;color:#fff;background:#6193c5;border-radius:4px;padding:10px 18px;min-width:90px;font:12px system-ui,sans-serif;cursor:pointer}.jp-play span{font-size:10px;margin-right:6px}.jp-keyboard-scroll{overflow-x:auto;padding:10px 8px 5px;background:#e7ebe2;border-radius:7px;border:1px solid #d4dbd0}.jp-keyboard-scroll svg{display:block;width:100%;min-width:640px;max-height:225px}.jp-piano-legend{display:flex;flex-wrap:wrap;gap:8px 20px;margin-top:18px;font-size:10px}.jp-piano-legend span{display:flex;align-items:center;gap:6px}.jp-piano-legend i{width:9px;height:9px;border-radius:2px;display:inline-block}.jp-piano-legend .jp-bass-swatch{background:transparent;border:1.5px dashed #6193c5}.jp-piano-hint{font-size:10px;margin:12px 0;color:#627367}.jp-piano-now{display:flex;align-items:center;gap:10px;font-size:11px;color:#5d6c63;min-height:25px}.jp-piano-status{border:1px solid #cad6c8;padding:1px 7px;border-radius:3px;font-size:9px;color:#6193c5}.jp-audio-error{font-size:12px;color:#9a3838}.jp-piano button:focus-visible,.jp-piano input:focus-visible,.jp-keyboard-scroll:focus-visible{outline:3px solid #ad7936;outline-offset:3px}@media(max-width:600px){.jp-piano{padding:16px}.jp-piano-heading{gap:14px}.jp-piano h3{font-size:22px}.jp-piano-legend{column-gap:14px}}.jp-piano.jp-piano-minimal{display:flex;flex-direction:column;padding:0;border:0;background:transparent}.jp-piano-minimal .jp-keyboard-scroll{order:0;padding:0;border:0;background:transparent;border-radius:0;overflow:visible}.jp-piano-minimal .jp-keyboard-scroll svg{min-width:0;max-height:none;width:100%;filter:none}.jp-piano-minimal .jp-piano-heading{order:1;justify-content:center;margin:28px 0 0}.jp-piano-minimal .jp-play{display:grid;place-items:center;width:48px;height:48px;min-width:0;border-radius:50%;padding:0;color:#fafbf7;background:#303832}.jp-piano-minimal .jp-play:hover{background:#475348}.jp-piano-minimal .jp-audio-error{order:2;text-align:center}@media(max-width:600px){.jp-piano-minimal .jp-keyboard-scroll svg{height:145px}.jp-piano-minimal .jp-piano-heading{margin-top:20px}}.jp-key-mark{transition:opacity .18s ease,fill .18s ease}@media(prefers-reduced-motion:reduce){.jp-key-mark{transition:none}}.jp-piano-minimal .jp-play{border-radius:0}.jp-piano-minimal .jp-key-surface{transition:fill .26s ease}@media(prefers-reduced-motion:reduce){.jp-piano-minimal .jp-key-surface{transition:none}}.jp-voice-leading{pointer-events:none}:root{font-family:system-ui,sans-serif;color:#263b38;background:#f6f5ef;font-synthesis:none}*{box-sizing:border-box}body{margin:0}main{max-width:960px;margin:auto;padding:0 40px}header{display:flex;justify-content:space-between;border-bottom:1px solid #d9ded3;padding:30px 0 24px;font-size:10px;letter-spacing:.1em}.brand{text-decoration:none;color:inherit;font-weight:650}.brand span{color:#7b837b;font-weight:400;letter-spacing:.025em}.edition{color:#7b837b}article{padding-top:62px}.eyebrow{color:#47735d;font-size:10px;letter-spacing:.16em;font-weight:600}h1{font:normal clamp(36px,5vw,58px)/1.12 Georgia,serif;letter-spacing:-.035em;margin:20px 0}h1 em{font-weight:400;color:#527260}.intro{max-width:650px;color:#667269;font-size:15px;line-height:1.8;margin-bottom:24px}.article-meta{font-size:9px;color:#758077;letter-spacing:.09em;margin:30px 0 24px}.article-meta span{margin:0 10px}.afterword{display:grid;grid-template-columns:140px 1fr;gap:20px;padding:44px 0}.afterword>span{font-size:9px;letter-spacing:.15em;color:#7b837b;padding-top:9px}h2{font: 27px Georgia,serif;margin:0 0 16px}.afterword p{font-size:14px;line-height:1.85;color:#667269}footer{border-top:1px solid #d9ded3;padding:24px 0 30px;display:flex;justify-content:space-between;font-size:9px;letter-spacing:.04em}footer span{color:#7b837b}@media(max-width:600px){main{padding:0 16px}article{padding-top:36px}header{font-size:9px}.afterword{grid-template-columns:1fr;gap:16px}footer{gap:20px}}.jp-explorer{color:#292d2b;font:14px/1.5 system-ui,sans-serif;margin:36px auto;width:100%;max-width:820px}.jp-explorer *{box-sizing:border-box}.jp-explorer-controls{display:flex;justify-content:center;align-items:center;gap:44px;margin:0 auto 34px}.jp-circle-wrap{width:188px;flex-shrink:0}.jp-circle{position:relative;width:100%;aspect-ratio:1;touch-action:none;-webkit-user-select:none;user-select:none;cursor:grab}.jp-circle:active{cursor:grabbing}.jp-circle svg{display:block;width:100%;height:100%;pointer-events:none}.jp-circle button{position:absolute;transform:translate(-50%,-50%);width:32px;height:32px;border:0;border-radius:50%;background:#f6f5ef;color:#989c96;font:12px system-ui,sans-serif;cursor:grab;touch-action:none}.jp-circle button:hover{color:#242a26}.jp-circle button[aria-pressed=true]{color:#fff;background:#303832}.jp-circle-center{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);text-align:center;border-radius:50%;width:48%;padding:12px 0;cursor:grab}.jp-circle-center strong{font:400 21px/1.2 system-ui,sans-serif;letter-spacing:-.6px}.jp-chord-options{display:flex;align-items:center;gap:20px}.jp-quality{display:flex;gap:4px}.jp-quality button,.jp-ninth-option{display:grid;place-items:center;width:40px;height:40px;border:1px solid transparent;background:transparent;color:#969c95;cursor:pointer;font:14px system-ui,sans-serif;border-radius:50%}.jp-quality button[aria-pressed=true],.jp-ninth-option[aria-pressed=true]{border-color:#acb5aa;color:#303832}.jp-ninth-option{font-size:16px}.jp-explorer button:focus-visible,.jp-circle-center:focus-visible{outline:2px solid #737f72;outline-offset:4px}main.jp-instrument-page{display:grid;place-items:center;min-height:100svh;max-width:960px;padding:36px}@media(max-width:600px){main.jp-instrument-page{padding:24px 14px}.jp-explorer-controls{gap:22px;margin-bottom:28px}.jp-circle-wrap{width:164px}.jp-chord-options{flex-direction:column;gap:8px}.jp-quality{gap:0}.jp-quality button,.jp-ninth-option{width:34px;height:34px;font-size:16px}}.jp-explorer{position:relative}.jp-bass-toggle{position:absolute;right:0;bottom:5px;display:grid;place-items:center;width:38px;height:38px;padding:0;border:1px solid transparent;border-radius:50%;background:transparent;color:#9da69e;cursor:pointer}.jp-bass-toggle[aria-pressed=true]{border-color:#aab7ad;color:#49665b;background:#e3e7e2}.jp-voicing-knob{display:flex;flex-direction:column;align-items:center;gap:6px;color:#737d88;font-size:12px}.jp-voicing-knob button{width:48px;height:48px;padding:0;background:none;border:0;cursor:pointer}.jp-voicing-knob svg{width:100%;height:100%}.jp-explorer:has(.jp-voicing-knob) .jp-chord-options{flex-direction:column;gap:18px}.jp-explorer .jp-bass-toggle{bottom:-28px}.jp-demo{width:100%;max-width:820px;color:#183b45}.jp-demo button{font-family:system-ui,sans-serif;cursor:pointer}.jp-demo-mode{display:flex;justify-content:center;gap:24px;margin-bottom:56px}.jp-demo-mode button{border:0;background:none;padding:8px 0;font-size:12px;color:#607681}.jp-demo-mode button[aria-pressed=true]{color:#477cad;box-shadow:0 2px #6193c5}.jp-progression{display:flex;justify-content:center;gap:12px;margin-bottom:44px}.jp-progression button{position:relative;width:132px;border:0;background:transparent;color:#607681;padding:14px 12px 18px;text-align:left;transition:color .26s,background .26s}.jp-progression button[aria-pressed=true]{color:#477cad;background:#edf3f9}.jp-progression span{display:block;font-size:11px;margin-bottom:6px}.jp-progression strong{font-size:27px;font-weight:500;letter-spacing:-1px}.jp-progression i{position:absolute;bottom:0;left:0;width:100%;height:2px;background:#6193c5;transform-origin:left;transition:transform .3s linear}.jp-demo-options{display:flex;justify-content:center;gap:12px;margin-top:20px}.jp-demo-options button{display:grid;place-items:center;width:34px;height:34px;border:0;background:transparent;color:#607681}.jp-demo-options button[aria-pressed=true]{color:#477cad;background:#edf3f9}.jp-demo button:focus-visible{outline:2px solid #6193c5;outline-offset:4px}main.jp-instrument-page{max-width:1000px}body:has(.jp-instrument-page){background:#f7fafc}.jp-demo .jp-play{background:#6193c5}.jp-demo .jp-play:hover{background:#477cad}@media(max-width:600px){.jp-demo-mode{margin-bottom:32px}.jp-progression{gap:6px;margin-bottom:24px}.jp-progression button{width:100px}.jp-progression strong{font-size:23px}}@media(prefers-reduced-motion:reduce){.jp-progression button,.jp-progression i{transition:none}}.jp-demo>.jp-piano .jp-keyboard-scroll svg{height:210px}@media(max-width:600px){.jp-demo>.jp-piano .jp-keyboard-scroll svg{height:155px}}.jp-excerpt-chords{display:grid;grid-template-columns:repeat(4,1fr);gap:8px}.jp-excerpt-chords button{width:auto;min-width:0;padding:10px 12px 14px}.jp-excerpt-chords strong{font-size:22px}.jp-excerpt-chords span{font-size:10px}@media(max-width:600px){.jp-demo-mode{gap:18px}.jp-excerpt-chords{gap:5px}.jp-excerpt-chords strong{font-size:19px}.jp-excerpt-chords button{padding:10px 7px}}.jp-chord-bar{display:flex;min-width:0;border-bottom:1px solid #e1e8ec}.jp-chord-bar button{flex:1;padding:10px 6px 14px}.jp-chord-bar strong{font-size:clamp(14px,2vw,20px);letter-spacing:-.6px;white-space:nowrap}@media(max-width:600px){.jp-demo-mode{flex-wrap:wrap;gap:8px 18px}.jp-excerpt-chords{grid-template-columns:repeat(2,1fr)}.jp-chord-bar strong{font-size:18px}}body:has(.jp-blog){background:#fff}.jp-blog{max-width:980px;padding:0 56px}.jp-blog a{color:#477cad;text-underline-offset:4px}.jp-blog article{width:100%;max-width:680px;margin:0 auto;padding:48px 0 64px}.jp-blog h1{max-width:750px;margin:20px 0 56px}.jp-blog h2{margin:36px 0 24px;padding:0;border:0;font-size:32px}.jp-blog h3{font: 23px Georgia,serif;margin:36px 0 24px}.jp-blog article>p,.jp-blog article>ul,.jp-blog article>ol{max-width:680px;font-size:16px;line-height:1.85;color:#53635b}.jp-blog-visual{margin:20px 0 32px;padding:0;border:0;background:none}.jp-blog .jp-demo{max-width:none}.jp-blog-visual,.jp-blog .jp-piano,.jp-blog .jp-explorer{width:100%;max-width:100%;min-width:0}.jp-blog .jp-piano .jp-keyboard-scroll svg{width:100%;height:auto;min-width:0;max-height:none}.jp-blog .jp-progression{margin-bottom:24px}.jp-blog .jp-chord-bar{border:0}.jp-blog .jp-progression button{background:none}.jp-blog .jp-progression span:empty,.jp-blog .jp-progression i{display:none}.jp-blog .jp-circle button{background:#fff}.jp-blog .jp-circle button[aria-pressed=true]{background:none;color:#6193c5;font-weight:700}.jp-blog .jp-circle svg circle{stroke:none}.jp-blog .jp-quality button[aria-pressed=true]{border-color:transparent;color:#6193c5}.jp-form,.jp-hand-order{display:flex;flex-wrap:wrap;gap:24px;margin-bottom:24px}.jp-form button,.jp-hand-order button,.jp-recording button{border:0;border-radius:0;background:none;color:#7a8580;padding:6px 0;font:inherit;font-size:12px;cursor:pointer}.jp-form button[aria-pressed=true],.jp-hand-order button[aria-pressed=true]{color:#6193c5}.jp-blog .jp-piano-minimal .jp-play,.jp-blog .jp-piano-minimal .jp-play:hover{background:none;color:#6193c5}.jp-blog .jp-piano-minimal .jp-piano-heading{margin:8px 0 0}.jp-blog .jp-piano-minimal .jp-play{width:56px;height:56px}.jp-blog .jp-piano-minimal .jp-play svg{width:36px;height:36px}.jp-recording iframe{width:100%;aspect-ratio:16/9;border:0;display:block;margin-bottom:16px}.jp-recording .jp-recording-start{display:inline-flex;align-items:center;gap:12px;font:16px/1.6 system-ui,sans-serif;background:none;padding:0;text-decoration:none}.jp-recording-start span{color:#6193c5}.jp-blog button:focus-visible,.jp-blog input:focus-visible{outline:2px solid #6193c5;outline-offset:4px}@media(max-width:600px){.jp-blog{padding:0 18px}.jp-blog article{padding-top:24px}.jp-blog h2{font-size:27px;margin-top:32px}.jp-blog-visual{margin:20px 0 28px}}.jp-blog article img{display:block;max-width:100%;height:auto;margin:40px auto}.jp-blog .jp-pattern-demo>.jp-progression span{font-size:17px;font-weight:500;line-height:1.1;margin-bottom:8px}.jp-blog .jp-pattern-demo>.jp-progression strong{font-size:17px;font-weight:400;letter-spacing:0}.jp-blog .jp-pattern-demo>.jp-progression button{text-align:center}.jp-blog .jp-progression button[aria-pressed=true]{color:#356b9e}.jp-blog .jp-progression button[aria-pressed=true] span,.jp-blog .jp-progression button[aria-pressed=true] strong{font-weight:750}.jp-blog .jp-pattern-demo .jp-circle-center strong{color:#356b9e;font-weight:700}