:root{--paper:#f2edde;--cream:#fff8e9;--ink:#354138;--green:#466b55;--muted:#858777;--line:#d6d3bd;--gold:#c08c3b;--root:#c69742;--third:#ba7974;--fifth:#619c89;--seventh:#6f8fba;font-family:Arial,sans-serif;color:var(--ink);background:var(--paper)}*{box-sizing:border-box}body{margin:0}button{font:inherit;cursor:pointer;border:1px solid var(--line);background:transparent;border-radius:7px;padding:10px 12px;color:inherit;touch-action:manipulation}button:hover:not(:disabled){background:#e2e5d5}button:disabled{opacity:.4;cursor:default}button:focus-visible,a:focus-visible,summary:focus-visible{outline:3px solid #bb8e3d;outline-offset:3px}header{max-width:1240px;margin:auto;padding:25px 30px;display:flex;align-items:center;justify-content:space-between;border-bottom:1px solid var(--line)}.brand{font:bold 30px Georgia,serif;letter-spacing:-1px;color:var(--ink);text-decoration:none}.brand i{font-weight:normal;color:var(--green)}.brand span{font:8px Arial,sans-serif;letter-spacing:3.2px;margin-top:8px;display:block;color:var(--muted)}header>div{display:flex;gap:10px}header button{border:0;font-size:11px}main{max-width:1180px;padding:0 24px;margin:auto}.intro{padding:40px 0 34px;display:flex;align-items:center;justify-content:space-between;gap:30px}.eyebrow{font-size:9px;font-weight:bold;letter-spacing:2px;color:var(--green);margin:0 0 12px}h1{font:50px/1.05 Georgia,serif;letter-spacing:-1.8px;margin:0}h1 em{font-weight:normal;color:var(--green)}.intro-copy{font:19px/1.5 Georgia,serif;margin:0 20px 0 0}.intro-copy>span{display:block;font:10px Arial,sans-serif;color:var(--muted);margin-top:15px}.workspace{display:grid;grid-template-columns:minmax(0,1fr) 340px;gap:23px;align-items:start}.instrument{background:#513a26 url('workbench.webp') center/cover;border-radius:16px;overflow:hidden;box-shadow:0 12px 30px #4533211c}.instrument-top{display:flex;justify-content:space-between;gap:10px;padding:23px 24px 20px;color:#e8dac0;font-size:8px;letter-spacing:1.7px}.instrument-top span:last-child{color:#bfba9f;font-size:7px}.fret-numbers{display:grid;grid-template-columns:47px repeat(8,minmax(0,1fr));padding:0 17px;margin-bottom:9px;color:#d6c8aa;text-align:center;font-size:10px}.fret-numbers span:first-child{font-size:7px;letter-spacing:1px;align-self:center}.fretboard{display:grid;grid-template-columns:47px repeat(8,minmax(0,1fr));padding:0 17px;position:relative}.note,.mute{height:66px;padding:0;border:0;border-radius:0;position:relative;color:#d6ccb6;background:transparent;isolation:isolate}.note{border-right:2px solid #b5a17a88}.note.fret-0{border-right:4px solid #e7d5aeaa;background:#2b261a30}.note:before{content:'';height:1.5px;position:absolute;left:0;right:0;top:50%;background:linear-gradient(#eadac0,#807b63);box-shadow:0 1px 2px #0006;z-index:-1}.note.string-0:before{height:3px}.note.string-1:before{height:2.7px}.note.string-2:before{height:2.3px}.note.string-3:before{height:2px}.note:hover:not(:disabled),.mute:hover:not(:disabled){background:#fff6d716}.note:focus-visible,.mute:focus-visible{outline-offset:-4px}.note>span{display:inline-flex;width:27px;height:27px;align-items:center;justify-content:center;border-radius:50%;background:#3d3424e8;color:#e8ddc8;font-size:10px;border:1px solid #bdac7c55;position:relative}.note small{font-size:7px;margin-left:1px;opacity:.6}.note.selected>span{background:transparent;color:#263a2f;border:0;font-weight:bold;width:42px;height:42px;text-shadow:0 1px 2px #ffffff80}.note.selected>span:before{content:'';position:absolute;inset:-5px;z-index:-1;background:var(--pick) center/contain no-repeat}.note.selected.wrong>span{background:#9c3f34;color:#fff;border:1px solid #e3a28c;border-radius:50%;width:30px;height:30px}.note.selected.wrong>span:before{display:none}.note.nudged>span{outline:2px dashed #ffe5a2;outline-offset:5px}.mute{font-size:14px;color:#c7ba9c}.mute span{display:block;font-size:8px;margin-top:5px;opacity:.65}.mute[aria-pressed=true]{color:#fae6bc}.mute.nudged{outline:2px dashed #ffe5a2;outline-offset:-8px}.instrument-bottom{display:flex;justify-content:space-between;gap:15px;padding:16px 25px 24px;font-size:8px;letter-spacing:.5px;color:#c4b599}.voicing-strip{display:flex;justify-content:space-between;gap:15px;align-items:center;padding:24px 26px;background:#f7efdc;border-top:1px solid #c5b58e}.voicing-strip .eyebrow{font-size:8px;margin:0 0 9px}.voicing-strip .strum{background:var(--green);color:#fff7e8;border-color:var(--green);font-size:12px;padding:13px 18px}.strum:hover:not(:disabled){background:#365842}.voicing-strip #voicing-notes{font:20px Georgia,serif;line-height:1.5}.voicing-strip #voicing-notes small{font-size:13px;color:#878a76}kbd{font:9px Arial,sans-serif;opacity:.6;margin-left:4px}.palette{display:flex;justify-content:center;gap:25px;background:#e9e2ce;border-top:1px solid var(--line);padding:11px 18px;color:#737e68}.palette span{display:flex;align-items:center;gap:5px;font-size:9px}.palette img{width:21px;height:24px;object-fit:contain}.commission{border:1px solid var(--line);border-radius:16px;padding:25px;background:#fbf6e8}.commission h2{font:24px Georgia,serif;margin:0 0 14px;letter-spacing:-.5px}.chord-name{font:40px/1 Georgia,serif;letter-spacing:-1px;color:var(--green);margin:7px 0 15px}#story{font-size:11px;line-height:1.8;color:#7e8674;margin:0 0 16px}.recipe{display:flex;gap:8px;margin:18px 0}.recipe>div{flex:1;background:#ede6d2;border:1px solid var(--line);border-radius:7px;padding:10px 4px 8px;text-align:center}.recipe>div strong{font:20px Georgia,serif;display:block;color:var(--ink)}.recipe>div small{font-size:8px;display:block;margin-top:6px;color:#7c8474}.recipe>div.present{border-color:#6e977e;background:#e1e8d6}.checks{border-top:1px solid var(--line);border-bottom:1px solid var(--line);padding:11px 0;margin-bottom:18px}.check{display:flex;align-items:center;gap:9px;font-size:11px;padding:8px 0;color:#818675}.check .mark{width:15px;height:15px;border:1px solid #b7bca8;border-radius:50%;display:flex;align-items:center;justify-content:center;font-size:9px}.check.good{color:var(--green)}.check.good .mark{background:var(--green);color:#fdf6df;border-color:var(--green)}.check span:last-child{margin-left:auto;font-size:10px;color:var(--muted)}.primary-controls{display:flex;gap:7px}.primary-controls button{flex:1;font-size:10px;padding:12px 6px}.primary{background:var(--green);color:#fff9e9;border-color:var(--green)}.primary:hover:not(:disabled){background:#34563f}.secondary-controls{display:flex;gap:6px;margin-top:9px}.secondary-controls button{flex:1;font-size:10px;padding:9px 4px}#status{font-size:11px;line-height:1.7;color:var(--green);min-height:53px;margin:12px 0 0}#status.error{color:#a45b43}.session-meta{display:flex;justify-content:space-between;color:#8c907e;font-size:8px;letter-spacing:.3px;border-top:1px solid var(--line);padding-top:13px;margin-top:4px}#success{background:#e4e9d5;border:1px solid #cad2b8;border-radius:8px;padding:19px;margin-top:18px}#success .eyebrow{font-size:8px}#success h3{font:25px Georgia,serif;margin:5px 0}#success p:not(.eyebrow){font-size:11px;line-height:1.7}#success button{width:100%;margin-top:6px;font-size:11px}.collection{margin:38px 0}.section-heading{display:flex;justify-content:space-between;align-items:center;gap:15px}.section-heading h2{font:27px Georgia,serif;margin:0}.section-heading>span{font-size:10px;color:#7c8571}.studies{display:grid;grid-template-columns:repeat(8,1fr);gap:10px;margin-top:22px}.study{text-align:left;min-height:115px;padding:13px 10px}.study.active{background:#e5e9d8;border-color:var(--green)}.study .number{font:21px Georgia,serif;color:var(--green);display:block;margin-bottom:10px}.study .chord{font:17px Georgia,serif;display:block}.study .medal{font-size:7px;color:#8c875e;display:block;margin-top:10px;line-height:1.4}footer{border-top:1px solid var(--line);padding:18px 0 30px;color:#7b8576;font-size:10px;line-height:1.8}footer details{margin-top:9px}summary{cursor:pointer}footer p{max-width:850px}a{color:var(--green)}#instructions{background:#fdf7e7;border:1px solid var(--line);border-radius:10px;padding:23px 27px;margin-bottom:24px;font-size:12px;line-height:1.9}#instructions h2{font:26px Georgia,serif;margin:0}#instructions ol{padding-left:20px}#instructions p{font-size:11px;color:#7d8671}[hidden]{display:none!important}
@media(max-width:1000px){.workspace{grid-template-columns:minmax(0,1fr) 310px;gap:15px}.commission{padding:20px}.note,.mute{height:61px}.note>span{font-size:9px;width:23px;height:23px}.note.selected>span{width:36px;height:36px}.note.selected>span:before{inset:-3px}.palette{gap:15px}.instrument-top{padding:21px 18px 18px}.instrument-top span:last-child{letter-spacing:.5px}.instrument-bottom{padding:15px 18px 21px;font-size:7px}.voicing-strip{padding:21px}.intro h1{font-size:45px}.intro-copy{font-size:17px}.studies{gap:7px}.study .chord{font-size:15px}.study{padding:12px 9px}}@media(max-width:800px){.workspace{grid-template-columns:1fr}.instrument{max-width:760px}.note,.mute{height:62px}.note>span{width:27px;height:27px;font-size:11px}.note.selected>span{width:40px;height:40px}.commission{display:block;padding:24px}.commission .recipe{max-width:400px}.chord-name{font-size:38px}.checks{display:grid;grid-template-columns:1fr 1fr;gap:0 24px}.primary-controls,.secondary-controls{max-width:500px}.studies{grid-template-columns:repeat(4,1fr)}.intro h1{font-size:41px}.intro-copy{font-size:16px}.intro{gap:20px}.note small{font-size:7px}.study{min-height:105px}.palette{gap:27px}}@media(max-width:500px){header{padding:18px}.brand{font-size:26px}.brand span{font-size:7px;letter-spacing:2.2px}header>div{gap:0}header button{font-size:9px;padding:9px}.intro{display:block;padding:27px 0 25px}.intro h1{font-size:38px}.eyebrow{font-size:7px;letter-spacing:1.7px}.intro-copy{font-size:15px;margin-top:17px}.intro-copy br{display:none}.intro-copy>span{font-size:10px;margin-top:9px}main{padding:0 15px}.instrument-top{padding:20px 13px 17px;font-size:7px;letter-spacing:1px}.instrument-top span:last-child{font-size:6px;letter-spacing:.3px}.fretboard,.fret-numbers{grid-template-columns:32px repeat(8,minmax(0,1fr));padding:0 9px}.fret-numbers{font-size:8px}.fret-numbers span:first-child{font-size:6px}.note,.mute{height:49px}.note>span{width:22px;height:22px;font-size:8px}.note small{font-size:6px}.note.selected>span{width:29px;height:32px}.note.selected>span:before{inset:-3px}.note.selected.wrong>span{width:24px;height:24px}.note.nudged>span{outline-offset:2px}.mute{font-size:13px}.mute span{font-size:7px}.instrument-bottom{font-size:7px;letter-spacing:0;padding:16px 14px 20px;gap:5px}.voicing-strip{padding:20px 16px;gap:12px}.voicing-strip #voicing-notes{font-size:18px}.voicing-strip #voicing-notes small{font-size:11px}.voicing-strip .strum{font-size:11px;padding:11px 14px}.palette{gap:18px;padding:11px 12px}.palette span{font-size:8px;gap:3px}.palette img{width:17px;height:20px}.commission{padding:23px}.commission .eyebrow{font-size:8px}.commission h2{font-size:25px}.chord-name{font-size:37px}.checks{display:block}.check{font-size:12px;padding:9px 0}#story{font-size:12px}.primary-controls button{font-size:11px;padding:13px 7px}.secondary-controls button{font-size:11px;padding:11px 4px}#status{font-size:12px}.collection{margin-top:30px}.section-heading h2{font-size:24px}.section-heading>span{font-size:9px;max-width:66px;text-align:right}.studies{gap:7px}.study{padding:12px 8px;min-height:100px}.study .chord{font-size:14px}.study .medal{font-size:6px}.study .number{font-size:20px}#instructions{padding:20px}.note.fret-0{border-right-width:3px}}@media(prefers-reduced-motion:reduce){*{transition:none!important;animation:none!important}}