.fretflow{.course-index{margin-top:var(--ff-section-gap)}.course-index summary{cursor:pointer;padding:var(--ff-section-gap) 0;font-weight:700}.week-list{display:grid;grid-template-columns:repeat(auto-fit,minmax(250px,1fr));gap:var(--ff-size-15)}.week-link{justify-content:space-between;text-align:left}.week-link span{display:grid;gap:var(--ff-size-15)}.week-link.selected{background:color-mix(in srgb,var(--green) 18%,var(--card))}.week-link.selected strong{color:var(--green)}.practice-steps{padding-left:var(--ff-section-gap)}.practice-steps li{margin:var(--ff-section-gap) 0}.practice-steps p{color:var(--sub)}.variant-field{margin-bottom:var(--ff-section-gap)}--ff-tracking: -.7px;--ff-section-gap: 16px;--ff-size-0: 500px;--ff-color-1: #0c111c;--ff-color-2: #172131;--ff-color-3: #202c3f;--ff-color-4: #314258;--ff-color-5: #eff6ff;--ff-color-6: #a8b8cb;--ff-color-7: #67e8b0;--ff-color-8: #75b4ff;--ff-color-9: #ffd284;--ff-size-10: 15px;--ff-size-11: 850px;--ff-size-12: 18px;--ff-size-13: 14px;--ff-size-14: 70px;--ff-size-15: 8px;--ff-size-16: 23px;--ff-size-17: 7px;--ff-size-18: 19px;--ff-size-19: 5px;--ff-size-20: 12px;--ff-size-21: 1px;--ff-size-22: 13px;--ff-size-23: 20px;--ff-color-24: #05091425;--ff-size-25: 10px;--ff-color-26: #244b44;--ff-size-27: 6px;--ff-size-28: 11px;--ff-size-29: 99px;--ff-size-30: 9px;--ff-size-31: 30px;--ff-size-32: 4px;--ff-size-33: 110px;--ff-size-34: 44px;--ff-size-35: 46px;--ff-color-36: #10251d;--ff-color-37: #203e56;--ff-color-38: #365d7a;--ff-size-39: 2px;--ff-size-40: 27px;--ff-color-41: #47586c;--ff-color-42: #101a28;--ff-size-43: 680px;--ff-size-44: 40px;--ff-color-45: #546071;--ff-color-46: #62708555;--ff-color-47: #87919f77;--ff-color-48: #bcc2ca;--ff-size-49: 36px;--ff-color-50: #0e202b;--ff-color-51: #bac9d8;--ff-size-52: 400px;--ff-size-53: 45px;p,small,.muted{word-break:auto-phrase;text-wrap:pretty}.task-chords-heading{margin-top:var(--ff-section-gap)}.audio-controls{margin:var(--ff-size-20) 0}.board-help{font-size:var(--ff-size-20)}.top>.button{flex-shrink:0;white-space:nowrap}@media(max-width:500px){.row{flex-direction:column;align-items:stretch}.row>.button{width:100%;flex:auto}}*{box-sizing:border-box}button,select,input{font:inherit}button{cursor:pointer;touch-action:manipulation}button:disabled{opacity:.4;cursor:default}main{max-width:var(--ff-size-11);padding:var(--ff-size-12) var(--ff-size-13) var(--ff-size-14);margin:auto}header{display:flex;justify-content:space-between;align-items:center;margin-bottom:var(--ff-size-12);gap:var(--ff-size-15)}h1{font-size:var(--ff-size-16);margin:0;letter-spacing:var(--ff-tracking)}h2{font-size:var(--ff-size-18);margin:0}p{margin:var(--ff-size-19) 0}small,.muted{color:var(--sub)}.eyebrow{color:var(--green);font-size:var(--ff-size-20);font-weight:800;letter-spacing:.13em}.panel{border:var(--ff-size-21) solid var(--edge);border-radius:var(--ff-size-18);background:var(--card);padding:var(--ff-size-12);margin:var(--ff-size-22) 0;box-shadow:0 var(--ff-size-17) var(--ff-size-23) var(--ff-color-24)}.top{display:flex;align-items:center;justify-content:space-between;gap:var(--ff-size-25)}.chip{color:var(--green);background:var(--ff-color-26);padding:var(--ff-size-27) var(--ff-size-28);border-radius:var(--ff-size-29);font-size:var(--ff-size-20);font-weight:700}.progress{height:var(--ff-size-30);background:var(--soft);border-radius:var(--ff-size-31);overflow:hidden;margin:var(--ff-size-20) 0 var(--ff-size-19)}.progress>div{background:var(--green);height:100%;transition:width .2s}.controls{display:flex;gap:var(--ff-size-30);flex-wrap:wrap;align-items:end}.field{display:grid;gap:var(--ff-size-32);color:var(--sub);font-size:var(--ff-size-20);flex:1;min-width:var(--ff-size-33)}.field select,.field input{width:100%;min-height:var(--ff-size-34);background:var(--soft);border:var(--ff-size-21) solid var(--edge);color:var(--fg);border-radius:var(--ff-size-25);padding:var(--ff-size-15)}.button{border:var(--ff-size-21) solid var(--edge);background:var(--soft);color:var(--fg);padding:var(--ff-size-20) var(--ff-size-10);border-radius:var(--ff-size-20);font-weight:700;min-height:var(--ff-size-35)}.button.primary{background:var(--green);color:var(--ff-color-36);border-color:var(--green)}.button.secondary{background:var(--ff-color-37);border-color:var(--ff-color-38)}.button:focus-visible,select:focus-visible{outline:var(--ff-size-39) solid var(--green)}.wide{width:100%}.task-title{font-size:clamp(var(--ff-size-23),5vw,var(--ff-size-40));line-height:1.35;margin:var(--ff-size-15) 0}.hint{padding:var(--ff-size-20);background:var(--soft);border-radius:var(--ff-size-20);margin-top:var(--ff-size-20)}.chords{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:var(--ff-size-27);margin:var(--ff-size-22) 0}.chord{border:var(--ff-size-21) solid var(--edge);border-radius:var(--ff-size-25);padding:var(--ff-size-25) var(--ff-size-39);text-align:center;background:var(--soft);font-weight:700;font-size:clamp(var(--ff-size-20),3.5vw,var(--ff-size-12))}.chord.active{border-color:var(--green);color:var(--ff-color-1);background:var(--green)}.dots{display:flex;gap:var(--ff-size-27)}.dot{width:var(--ff-size-15);height:var(--ff-size-15);background:var(--ff-color-41);border-radius:50%}.dot.on{background:var(--gold)}.board-scroll{overflow-x:auto;-webkit-overflow-scrolling:touch;border-radius:var(--ff-size-20);background:var(--ff-color-42);border:var(--ff-size-21) solid var(--edge);padding:var(--ff-size-20) var(--ff-size-15)}.board{min-width:var(--ff-size-43)}.fretrow{display:grid;grid-template-columns:var(--ff-size-44) repeat(13,1fr);align-items:center;height:var(--ff-size-44)}.fretrow .st{font-size:var(--ff-size-20);text-align:center;color:var(--sub)}.cell{height:100%;border-right:var(--ff-size-39) solid var(--ff-color-45);border-top:var(--ff-size-21) solid var(--ff-color-46);position:relative;display:flex;justify-content:center;align-items:center;background:linear-gradient(transparent 48%,var(--ff-color-47) 49%,var(--ff-color-47) 51%,transparent 52%)}.cell:nth-child(2){border-right:var(--ff-size-19) double var(--ff-color-48)}.note{border:none;border-radius:50%;width:var(--ff-size-49);height:var(--ff-size-49);font-size:var(--ff-size-28);font-weight:800;color:var(--ff-color-50);background:var(--ff-color-51);padding:0}.note.root{background:var(--green)}.note.guide{background:var(--gold)}.note.color{background:var(--blue)}.frets{display:grid;grid-template-columns:var(--ff-size-44) repeat(13,1fr);text-align:center;color:var(--sub);font-size:var(--ff-size-28);margin:var(--ff-size-27) 0}.legend{display:flex;gap:var(--ff-size-10);flex-wrap:wrap;margin:var(--ff-size-28) 0;color:var(--sub);font-size:var(--ff-size-20)}.legend span:before{content:" ";display:inline-block;width:var(--ff-size-28);height:var(--ff-size-28);border-radius:50%;background:var(--green);margin-right:var(--ff-size-27)}.legend span:nth-child(2):before{background:var(--gold)}.legend span:nth-child(3):before{background:var(--blue)}.row{display:flex;gap:var(--ff-size-30);align-items:center}.row>button{flex:1}.status{text-align:center;color:var(--sub);font-size:var(--ff-size-20);min-height:var(--ff-size-23)}.setup{padding:var(--ff-size-22) 0}.footer{text-align:center;color:var(--sub);font-size:var(--ff-size-20);padding:var(--ff-size-10)}.tag{display:inline-block;padding:var(--ff-size-32) var(--ff-size-30);background:var(--soft);border-radius:var(--ff-size-15);color:var(--sub);font-size:var(--ff-size-20)}.off{display:none!important}@media(max-width:400px){main{padding:var(--ff-size-20) var(--ff-size-25) var(--ff-size-53)}.panel{padding:var(--ff-size-13)}.button{padding:var(--ff-size-28) var(--ff-size-30)}.chords{gap:var(--ff-size-32)}}.home-link{display:inline-block;color:var(--sub);padding:var(--ff-size-20) 0;text-decoration:underline}.button{display:inline-flex;align-items:center;justify-content:center;gap:var(--ff-size-27)}svg{width:var(--ff-size-12);height:var(--ff-size-12);flex-shrink:0}.board-scroll:focus-visible,input:focus-visible,.note:focus-visible{outline:var(--ff-size-39) solid var(--green);outline-offset:var(--ff-size-39)}@media(prefers-reduced-motion:reduce){.progress>div{transition:none}}color-scheme:dark;--bg:var(--ff-color-1);--card:var(--ff-color-2);--soft:var(--ff-color-3);--edge:var(--ff-color-4);--fg:var(--ff-color-5);--sub:var(--ff-color-6);--green:var(--ff-color-7);--blue:var(--ff-color-8);--gold:var(--ff-color-9);margin:0;background:var(--bg);color:var(--fg);font:var(--ff-size-10)/1.55 -apple-system,BlinkMacSystemFont,"Hiragino Kaku Gothic ProN",sans-serif;min-height:100dvh}