@import url('https://fonts.googleapis.com/css2?family=DM+Sans:wght@400;500;600;700&family=Noto+Sans+Thai:wght@400;500;600;700&display=swap');
:root{--bg:#f6f6f0;--surface:#fff;--ink:#252822;--muted:#62695d;--line:#e4e6dd;--orange:#ed784e;--orange-dark:#b74a27;--sage:#e5ebdc;--dark:#222720;--font:'DM Sans','Noto Sans Thai',sans-serif;--radius:14px}*{box-sizing:border-box}body{margin:0;background:var(--bg);color:var(--ink);font:1.125rem/1.8 var(--font);-webkit-font-smoothing:antialiased}button,input,select,textarea{font:inherit}button,a,input,select,textarea{-webkit-tap-highlight-color:transparent}button,a{touch-action:manipulation}button{cursor:pointer}a{color:inherit;text-decoration:none}button{border:0;background:none;color:inherit}button:disabled{opacity:.5;cursor:not-allowed}button:focus-visible,a:focus-visible,select:focus-visible,input:focus-visible,textarea:focus-visible{outline:3px solid #c65c37;outline-offset:4px}button,a,select{transition:background .18s,color .18s,transform .18s}button:hover:not(:disabled){filter:brightness(.97)}h1,h2,h3,h4,p{margin:0}svg.icon{width:20px;height:20px;fill:none;stroke:currentColor;stroke-width:1.7;stroke-linecap:round;stroke-linejoin:round;flex-shrink:0}.skip{position:fixed;top:-80px;z-index:100;background:var(--orange);padding:16px}.skip:focus{top:0}.sidebar{width:236px;position:fixed;inset:0 auto 0 0;background:var(--dark);color:#d4d9ce;padding:33px 20px 0;display:flex;flex-direction:column;z-index:30}.brand{display:flex;gap:11px;align-items:center;padding:0 12px;color:#f8f9f1;font-size:2.25rem;line-height:1;font-weight:700;letter-spacing:-1.4px}.brand-icon{font-size:2.25rem;font-style:italic;letter-spacing:-5px;display:grid;place-items:center;width:38px;height:44px;background:var(--orange);color:var(--dark);border-radius:10px;position:relative;padding-right:7px}.brand-icon>span{position:absolute;right:8px;bottom:6px}.brand-dot{color:var(--orange)}.brand small{display:block;font-size:0.875rem;font-weight:500;letter-spacing:1.65px;margin-top:10px;color:#a9b09f}.nav-caption{font-size:0.875rem;letter-spacing:1.6px;color:#9da795;margin:46px 15px 15px}.nav-item{width:100%;display:flex;align-items:center;gap:13px;min-height:48px;border-radius:8px;text-align:left;padding:10px 15px;color:#bfc8b8;margin-bottom:8px;font-size:1rem}.nav-item.active{color:#f3f6ed;background:#3a4034}.nav-item.active:after{content:'';margin-left:auto;height:5px;width:5px;background:var(--orange);border-radius:50%}.nav-item:hover{background:#30362b}.nav-item.active .icon{color:#ef9b76}.sidebar-bottom{margin-top:auto}.daily-tip{margin:30px 10px;border:1px solid #454d3d;border-radius:12px;padding:19px 17px;background:#2b3126}.tiny-label{font-size:0.875rem;letter-spacing:1.6px;font-weight:600}.daily-tip .tiny-label{color:#bbc6ac}.daily-tip p{font-size:1rem;line-height:1.9;color:#d8dfcf}.mini-wave{color:#c2d1a5;font-size:2rem;letter-spacing:3px;margin:12px 0}.profile{display:flex;align-items:center;gap:10px;border-top:1px solid #444b3c;width:calc(100% + 40px);margin-left:-20px;padding:22px 18px;text-align:left}.avatar{width:37px;height:37px;display:grid;place-items:center;flex-shrink:0;background:#e5e9d8;border-radius:50%;font-weight:600;color:#46513b}.avatar-small{width:33px;height:33px;font-size:1rem}.profile strong{font-size:1rem;display:block;color:#eee}.profile small{font-size:0.875rem;color:#b5bfa9}.profile-gear{margin-left:auto}.profile .icon{width:16px}.workspace{margin-left:236px;min-height:100vh}.topbar{height:82px;border-bottom:1px solid var(--line);padding:0 39px;display:flex;align-items:center;justify-content:space-between;gap:15px;background:#fbfbf7}.breadcrumb{display:flex;gap:15px;font-size:1rem;color:var(--muted)}.breadcrumb strong{font-weight:500;color:var(--ink)}.topbar-right{display:flex;gap:20px;align-items:center}.save-status{font-size:0.9375rem;color:var(--muted)}.save-status i{display:inline-block;width:5px;height:5px;border-radius:50%;background:#7c8e63;margin-right:5px}.streak-pill{display:flex;align-items:center;gap:7px;border:1px solid var(--line);border-radius:30px;padding:5px 12px;min-height:36px;font-size:1rem;background:white}.streak-pill .icon{width:15px;color:#bf5934}main{padding:30px 39px 15px;max-width:1560px;margin:auto;outline:none}.page-heading{display:flex;align-items:center;justify-content:space-between;gap:20px;margin-bottom:25px}.eyebrow{color:var(--muted);letter-spacing:2px;font-size:0.875rem;font-weight:700;margin-bottom:7px}.page-heading h1{font-size:2rem;letter-spacing:-.8px;font-weight:600;line-height:1.6}.page-heading p{font-size:1rem;color:var(--muted);margin-top:4px}.date-chip{font-size:0.9375rem;color:#62665b;display:flex;align-items:center;gap:8px}.date-chip .icon{width:15px}.hero-layout{display:grid;grid-template-columns:minmax(0,1fr) 284px;gap:20px}.hero{position:relative;isolation:isolate;overflow:hidden;min-height:291px;background:#e8eddf;border:1px solid #dde4d3;border-radius:var(--radius);padding:28px 32px}.hero-copy{position:relative;z-index:2;max-width:63%}.tag{display:inline-flex;align-items:center;gap:6px;padding:4px 9px;border-radius:5px;background:#f5f7ee;border:1px solid #d8dfce;font-size:0.875rem;color:#52613f;font-weight:500}.tag i{width:5px;height:5px;border-radius:50%;background:#778d59}.hero h2{font-size:2.25rem;line-height:1.4;letter-spacing:-1.1px;margin:17px 0 9px;font-weight:600}.hero h2 span{color:#637847}.hero p{font-size:1rem;color:#67725b;line-height:1.9;margin-bottom:22px}.hero-actions{display:flex;align-items:center;gap:16px}.btn{display:inline-flex;align-items:center;justify-content:center;gap:9px;padding:11px 17px;min-height:43px;border-radius:7px;font-size:1rem;font-weight:600;line-height:1.5;border:1px solid transparent}.btn.primary{background:var(--ink);color:#fff}.btn.orange{background:var(--orange);color:#22271e}.btn.outline{background:white;border-color:var(--line)}.btn.soft{background:#ecefe6;color:#4b5840}.btn.small{padding:8px 12px;min-height:36px;font-size:0.9375rem}.btn .icon{width:15px;height:15px}.text-btn{font-size:0.9375rem;color:#59634d;display:inline-flex;align-items:center;gap:8px;min-height:40px}.hero-art{position:absolute;width:49%;height:100%;right:-9px;bottom:0;pointer-events:none}.hero-art svg{width:100%;height:100%}.art-label{position:absolute;right:32px;bottom:22px;display:flex;gap:5px;align-items:center;font-size:0.875rem;letter-spacing:1.5px;color:#667757}.hero .corner-star{position:absolute;right:32px;top:20px;color:#6c7c59;font-size:2rem}.plan-card{border-radius:var(--radius);border:1px solid var(--line);padding:23px;background:#fff;display:flex;flex-direction:column}.card-top{display:flex;justify-content:space-between;align-items:center;gap:10px}.section-kicker{font-size:0.9375rem;font-weight:600;letter-spacing:1.5px;color:#777d70}.mini-icon{color:#6e7e5b}.mini-icon .icon{width:17px}.plan-card h3{font-size:1.375rem;margin:10px 0 2px;font-weight:600}.plan-card>p{font-size:0.9375rem;color:var(--muted)}.duration-switch{display:flex;background:#f3f4ee;border-radius:6px;margin:16px 0;padding:4px}.duration-switch button{flex:1;min-height:33px;font-size:1rem;border-radius:4px;color:#72786a}.duration-switch button.selected{background:white;box-shadow:0 1px 5px #26321b10;color:#303b25;font-weight:600}.plan-list{display:flex;flex-direction:column;gap:9px;margin-bottom:18px}.plan-line{display:flex;justify-content:space-between;font-size:0.9375rem;color:#6c7165}.plan-line span:first-child{display:flex;gap:7px;align-items:center}.plan-line i{width:5px;height:5px;border-radius:50%;background:#b1bf98}.plan-card .btn{width:100%;margin-top:auto}.stats{display:grid;grid-template-columns:repeat(4,1fr);gap:15px;margin:22px 0 28px}.stat{background:white;border:1px solid var(--line);border-radius:10px;display:flex;gap:13px;padding:17px 19px;align-items:center}.stat-icon{width:36px;height:36px;background:#f3f4ed;border-radius:9px;display:grid;place-items:center;color:#71805e}.stat-icon.orange{color:#bf653d;background:#fcf0e9}.stat-icon.purple{color:#8e7ca9;background:#f4f0f8}.stat-icon .icon{width:19px}.stat-label{color:var(--muted);font-size:0.9375rem}.stat-value{font-size:1.75rem;line-height:1.35;font-weight:600;letter-spacing:-.5px}.stat-value small{font-size:0.9375rem;font-weight:400;color:#757c6c;letter-spacing:0;margin-left:5px}.section-heading{display:flex;align-items:center;justify-content:space-between;margin-bottom:15px;gap:15px}.section-heading h2{font-size:1.375rem;line-height:1.6;font-weight:600}.section-heading p{font-size:0.9375rem;color:var(--muted);margin-top:2px}.section-heading .text-btn{color:#697858}.paths{display:grid;grid-template-columns:repeat(4,1fr);gap:15px}.path{background:white;border:1px solid var(--line);border-radius:11px;overflow:hidden;text-align:left;padding:0;display:flex;flex-direction:column;transition:transform .2s,border-color .2s}.path:hover{transform:translateY(-3px);border-color:#adb89f}.path-visual{height:103px;position:relative;overflow:hidden;padding:14px 18px;display:flex;justify-content:space-between;align-items:flex-start}.sage{background:#e6ecdf}.peach{background:#f7e5d8}.lavender{background:#eae7f0}.sand{background:#eae9dd}.path-num{font-size:0.875rem;font-weight:600;letter-spacing:1px;z-index:2}.path-chip{font-size:0.875rem;border:1px solid #ffffffb3;border-radius:30px;padding:2px 7px;z-index:2;background:#ffffff70}.path-symbol{position:absolute;width:90%;height:80%;right:-12%;bottom:-14%;opacity:.7;color:#78896a;transform:rotate(-12deg)}.peach .path-symbol{color:#c4815e}.lavender .path-symbol{color:#9888ac}.sand .path-symbol{color:#9c9d76}.path-body{padding:17px 17px 15px;flex:1}.path h3{font-size:1rem;margin-bottom:5px;font-weight:600}.path p{font-size:0.9375rem;line-height:1.8;color:var(--muted);min-height:36px}.path-bottom{display:flex;justify-content:space-between;font-size:0.875rem;color:var(--muted);margin-top:16px}.progress-track{height:3px;border-radius:5px;background:#edf0e7;margin-top:9px;overflow:hidden}.progress-fill{height:100%;background:#7d9169;border-radius:5px}.bottom-grid{display:grid;grid-template-columns:1.55fr 1fr;gap:20px;margin-top:26px}.panel{background:white;border:1px solid var(--line);border-radius:var(--radius);padding:24px}.quick-tools{display:grid;grid-template-columns:repeat(3,1fr);gap:13px}.quick-tool{text-align:left;min-height:98px;padding:15px;border-radius:8px;background:#f7f8f3;position:relative;border:1px solid #eef0e6}.quick-tool>.icon{color:#73815f;width:21px;height:21px;margin-bottom:10px}.quick-tool strong{display:block;font-size:1rem;font-weight:600}.quick-tool small{font-size:0.875rem;color:var(--muted)}.quick-arrow{position:absolute;right:12px;top:12px;color:#919987}.challenge{background:#f7ece3;border-color:#efdfd1;position:relative}.challenge-top{display:flex;align-items:center;justify-content:space-between;font-size:0.875rem;letter-spacing:1px;color:#9e6245}.challenge h3{font-size:1.375rem;margin:12px 0 5px;font-weight:600}.challenge p{font-size:0.9375rem;color:#866c5d;max-width:85%;line-height:1.9}.challenge .text-btn{margin-top:8px;color:#8b4a2b}.challenge-badge{font-size:0.875rem;padding:3px 7px;background:#fff5ec;border-radius:4px;letter-spacing:0}.full-width{width:100%}footer{max-width:1560px;margin:auto;padding:24px 39px 23px;display:flex;justify-content:space-between;gap:15px;color:#68705f;font-size:0.9375rem}footer>span{font-weight:700}footer .footer-light{font-weight:400;color:#989d91;margin-left:10px;font-size:0.875rem}footer button{font-size:0.875rem;color:#7a8171;min-height:30px}.view-intro{background:#e9eee0;border-radius:12px;padding:20px 24px;margin-bottom:24px;display:flex;align-items:center;justify-content:space-between;gap:25px}.view-intro p{color:#5e6b50;font-size:1rem;max-width:720px}.view-intro .icon{color:#6a7c54;width:30px;height:30px}.level-section{margin:26px 0}.level-heading{display:flex;gap:14px;align-items:center;margin-bottom:15px}.level-badge{width:40px;height:40px;display:grid;place-items:center;border-radius:10px;font-size:1.125rem}.level-heading h2{font-size:1.375rem}.level-heading p{font-size:0.9375rem;color:var(--muted)}.level-heading>span:last-child{margin-left:auto;font-size:1rem;color:var(--muted)}.lesson-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:13px}.lesson-card{padding:18px;background:white;border:1px solid var(--line);border-radius:10px;text-align:left;display:flex;gap:12px;min-height:118px}.lesson-index{color:#7f8b73;font-size:1rem;min-width:20px}.lesson-card h3{font-size:1rem;line-height:1.8}.lesson-card p{font-size:0.9375rem;color:var(--muted);margin:4px 0 10px}.lesson-card small{font-size:0.875rem;color:#8b9382}.lesson-card.done{border-color:#acb99b;background:#f8faf4}.lesson-card:hover{border-color:#a9b59c}.controls{display:flex;gap:15px;flex-wrap:wrap;align-items:end}.field{display:flex;flex-direction:column;gap:6px;min-width:120px}.field label{font-size:0.9375rem;font-weight:600;color:#717869}select,input[type=text],input[type=number],textarea{border:1px solid #dfe3d8;background:#fff;border-radius:7px;padding:11px 13px;min-height:44px;color:var(--ink);max-width:100%}select{padding-right:30px;cursor:pointer}.field.grow{flex:1}.field.grow select{width:100%}.scale-header{display:flex;justify-content:space-between;align-items:center;margin:25px 0 15px;gap:16px}.scale-header h2{font-size:1.75rem;font-weight:600;letter-spacing:-.6px}.scale-header p{font-size:1rem;color:var(--muted);margin-top:3px}.segmented{display:flex;padding:4px;border-radius:8px;background:#ecefe5}.segmented button{padding:7px 12px;border-radius:5px;font-size:0.9375rem;min-height:34px}.segmented .selected{background:white;box-shadow:0 1px 4px #00000008}.fretboard-shell{background:#272d23;border-radius:12px;padding:25px 20px 18px;color:#e7eadf;overflow:hidden}.fretboard-scroll{overflow-x:auto;scrollbar-width:thin;scrollbar-color:#7b886c #343d2c;padding-bottom:6px}.fretboard{position:relative;min-width:var(--board-min,660px);display:grid;grid-template-columns:28px repeat(var(--cols),minmax(45px,1fr));grid-template-rows:repeat(6,58px) 38px}.string-name{display:grid;place-items:center;font-size:0.9375rem;color:#bbc5ae}.fret-cell{border-right:2px solid #637055;position:relative;display:flex;align-items:center;justify-content:center}.fret-cell:before{content:'';position:absolute;left:0;right:0;top:50%;height:var(--thickness,1px);background:#8f9b81;opacity:.7}.fret-cell.nut{border-left:4px solid #c8d0bc}.note{z-index:2;width:44px;height:44px;min-width:44px;border-radius:50%;background:#d9e5c2;box-shadow:0 2px 4px #1115;color:#26321d;font:600 1.125rem var(--font);position:relative;display:grid;place-items:center;border:2px solid #d9e5c2}.note.root{background:#ee976f;border-color:#ee976f;color:#34251d}.note.playing{outline:3px solid white;outline-offset:3px;transform:scale(1.07)}.fret-number{display:flex;justify-content:center;gap:3px;align-items:center;color:#b8c4ab;font-size:0.9375rem}.fret-number.mark:after{content:'·';font-size:2rem;line-height:10px}.board-footer{display:flex;justify-content:space-between;gap:15px;padding-top:18px;font-size:0.9375rem;color:#bdc8b1}.legend{display:flex;gap:16px}.legend span{display:flex;gap:6px;align-items:center}.legend i{width:8px;height:8px;background:#d9e5c2;border-radius:50%}.legend .root{background:#ee976f}.scale-info{display:grid;grid-template-columns:1.2fr 1fr;gap:20px;margin-top:20px}.formula{display:flex;gap:9px;flex-wrap:wrap;margin:15px 0}.formula span{background:#f0f3ea;border-radius:7px;min-width:40px;text-align:center;padding:9px 10px;font-weight:600}.formula span:first-child{background:#f8e4d5}.formula small{display:block;font-weight:400;font-size:0.875rem;color:var(--muted);margin-top:4px}.panel h3{font-size:1.125rem;font-weight:600}.panel>p{font-size:1rem;color:var(--muted);line-height:1.9;margin-top:8px}.hint{font-size:1rem;color:#627151;line-height:1.9;margin-top:15px;background:#f3f5ed;padding:13px;border-radius:7px}.library{display:grid;grid-template-columns:repeat(3,1fr);gap:12px;margin-top:20px}.scale-tile{border:1px solid var(--line);background:white;border-radius:9px;padding:15px;text-align:left}.scale-tile.active{border-color:#9aaa83;background:#f0f4e9}.scale-tile strong{font-size:1rem;display:block}.scale-tile small{color:var(--muted);font-size:0.9375rem}.scale-tile .scale-tag{font-size:0.875rem;float:right;padding:3px 6px;border-radius:4px;background:#f0f2e9;margin-left:4px}.studio-tabs{display:flex;gap:5px;border-bottom:1px solid var(--line);margin-bottom:25px;overflow:auto}.studio-tabs button{padding:12px 19px;font-size:1rem;border-bottom:2px solid transparent;white-space:nowrap;min-height:46px;color:#6c7662;display:flex;align-items:center;gap:8px}.studio-tabs .selected{color:#a94729;border-bottom-color:#cc6a44}.studio-tabs .icon{width:17px}.studio-grid{display:grid;grid-template-columns:1.1fr 1fr;gap:22px}.timer-card{background:#e7eddc;padding:28px;text-align:center}.timer-card .eyebrow{color:#657852}.timer-digits{font-size:4.8125rem;font-weight:500;line-height:1.5;letter-spacing:-4px;font-variant-numeric:tabular-nums}.timer-card h3{font-size:1.25rem}.timer-card p{font-size:1rem;max-width:330px;margin:8px auto 22px;color:#66745a}.timer-controls{display:flex;justify-content:center;gap:10px;margin-top:20px}.timer-step{margin-top:25px;display:flex;gap:5px}.timer-step span{flex:1;height:4px;border-radius:2px;background:#cfdbc0}.timer-step span.active{background:#7a905b}.timer-step span.done{background:#a5b98b}.session-stages{display:flex;flex-direction:column;gap:9px;margin-top:15px}.stage{display:flex;gap:12px;align-items:center;border:1px solid var(--line);border-radius:7px;padding:12px}.stage.active{background:#f0f4e8;border-color:#b7c6a3}.stage-number{font-size:0.9375rem;border:1px solid #dfe6d7;border-radius:50%;width:27px;height:27px;display:grid;place-items:center;color:#72815f}.stage strong{font-size:1rem;display:block}.stage small{font-size:0.9375rem;color:var(--muted)}.stage>span:last-child{margin-left:auto;color:var(--muted);font-size:0.9375rem}.metronome{text-align:center;padding:35px}.bpm-value{font-size:5.5rem;letter-spacing:-5px;font-variant-numeric:tabular-nums;line-height:1.25;font-weight:500;margin-top:20px}.bpm-label{font-size:0.9375rem;letter-spacing:3px;color:var(--muted);margin-bottom:25px}.range-controls{display:flex;gap:16px;align-items:center;justify-content:center;margin:20px 0}.round-btn{width:44px;height:44px;display:grid;place-items:center;border:1px solid var(--line);border-radius:50%;background:white;font-size:1.75rem}.range-controls input{max-width:220px;width:100%;accent-color:#818f65}.beats{display:flex;justify-content:center;gap:17px;margin:25px 0}.beat{width:14px;height:14px;background:#e2e7d9;border-radius:50%}.beat.lit{background:#e88051;box-shadow:0 0 0 5px #fbebdf}.metro-options{display:flex;gap:12px;align-items:end;justify-content:center;margin:20px 0}.jam-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:13px;margin:20px 0}.jam-track{text-align:left;border:1px solid var(--line);padding:18px;background:white;border-radius:10px}.jam-track.selected{border-color:#8fa274;background:#f1f5e9}.jam-track strong{display:block;font-size:1.125rem}.jam-track small{font-size:0.9375rem;color:var(--muted)}.jam-track .icon{display:block;margin-bottom:12px;color:#7e9064}.chord-display{display:flex;gap:10px;margin:22px 0;flex-wrap:wrap}.chord{padding:17px 15px;border:1px solid var(--line);border-radius:9px;flex:1;text-align:center;font-size:1.5rem;min-width:60px}.chord.active{background:#e9eedf;border-color:#9ead88;color:#42582a}.ear-panel{max-width:740px;margin:0 auto;text-align:center;padding:35px}.ear-orb{width:83px;height:83px;border-radius:50%;background:#e6ecd9;margin:25px auto;display:grid;place-items:center;color:#6b8051}.ear-orb .icon{width:34px;height:34px}.ear-answers{display:grid;grid-template-columns:repeat(3,1fr);gap:10px;margin:25px 0}.ear-answer{padding:15px;border:1px solid var(--line);border-radius:8px;background:#f8f9f4;font-size:1rem;min-height:58px}.ear-answer.correct{border-color:#79905c;background:#e7efd9}.ear-answer.wrong{border-color:#c98569;background:#f9e4d9}.ear-feedback{font-size:1rem;min-height:44px;margin-top:15px;color:#566646}.chart{display:flex;align-items:end;gap:18px;height:170px;margin:25px 0 12px;border-bottom:1px solid var(--line);padding:0 10px}.chart-day{flex:1;min-width:15px;text-align:center;height:100%;display:flex;flex-direction:column;justify-content:flex-end;position:relative}.chart-day small{font-size:0.875rem;color:var(--muted);margin-bottom:5px}.chart-bar{background:#dbe6c9;border-radius:4px 4px 0 0;min-height:3px}.chart-day.today .chart-bar{background:#a4b783}.chart-labels{display:flex;gap:18px;padding:0 10px}.chart-labels span{flex:1;text-align:center;font-size:0.875rem;color:var(--muted)}.history{width:100%;border-collapse:collapse;font-size:1rem;margin-top:15px}.history th{text-align:left;color:var(--muted);font-weight:500;font-size:0.875rem;padding:12px 10px;border-bottom:1px solid var(--line)}.history td{padding:15px 10px;border-bottom:1px solid #f0f2e9}.empty-state{text-align:center;padding:36px 20px;color:var(--muted)}.empty-state .icon{width:30px;height:30px;margin-bottom:10px;color:#8d9d75}.empty-state p{font-size:1rem;margin:6px 0 18px}.milestones{display:flex;flex-direction:column;gap:15px;margin-top:22px}.milestone{display:flex;gap:14px;align-items:center;color:#7a8370}.milestone .icon{width:26px;height:26px;color:#a7b39b}.milestone strong{display:block;font-size:1rem;font-weight:500}.milestone small{font-size:0.9375rem;color:var(--muted)}.milestone.earned{color:#44612c}.milestone.earned .icon{color:#9a6c35}.data-note{font-size:0.9375rem;color:#888f7f;margin-top:18px}.session-banner{position:fixed;bottom:18px;left:calc(50% + 118px);transform:translateX(-50%);background:#263120;color:white;border:1px solid #899a75;border-radius:12px;box-shadow:0 4px 25px #1c281d30;z-index:40;padding:12px 20px;display:flex;gap:18px;align-items:center;white-space:nowrap;font-size:1rem}.session-banner button{background:#deebc8;border-radius:6px;padding:7px 13px;font-size:0.9375rem;color:#25351a}.session-banner strong{font-variant-numeric:tabular-nums}.toast{position:fixed;bottom:28px;right:28px;max-width:min(400px,calc(100% - 40px));padding:13px 20px;background:#273221;color:#f7f9ef;border:1px solid #7b8b69;border-radius:9px;box-shadow:0 7px 24px #0002;z-index:100;font-size:1rem;opacity:0;transform:translateY(10px);transition:opacity .2s,transform .2s;pointer-events:none}.toast.show{opacity:1;transform:translateY(0)}dialog{border:1px solid var(--line);border-radius:16px;max-width:min(760px,calc(100% - 32px));width:100%;padding:0;background:var(--bg);color:var(--ink);max-height:90vh;box-shadow:0 25px 90px #0003}dialog::backdrop{background:#17201490;backdrop-filter:blur(4px)}.modal-inner{padding:32px}.modal-top{display:flex;align-items:start;justify-content:space-between;gap:20px}.modal-top h2{font-size:2rem;font-weight:600;line-height:1.6}.close-btn{border:1px solid var(--line);background:white;border-radius:50%;width:44px;min-width:44px;height:44px;padding:0;line-height:1;display:grid;place-items:center;flex-shrink:0}.close-btn .icon{display:block;width:20px;height:20px}.lesson-lead{font-size:1rem;line-height:2.1;margin:20px 0;color:#69725f}.lesson-steps{list-style:none;padding:0;counter-reset:step;display:flex;flex-direction:column;gap:13px;margin:15px 0 22px}.lesson-steps li{counter-increment:step;padding:16px 17px;background:white;border:1px solid var(--line);border-radius:8px;display:flex;gap:13px;font-size:1rem;line-height:1.95}.lesson-steps li:before{content:counter(step);font-size:0.9375rem;background:#e8eddf;border-radius:50%;width:24px;height:24px;flex-shrink:0;text-align:center;line-height:24px;color:#6c8053}.lesson-callout{padding:15px 18px;margin:14px 0;background:#f3e7dc;border:1px solid #eddbca;border-radius:8px;font-size:1rem;color:#846249}.lesson-callout.green{background:#eaf0df;border-color:#dce6cb;color:#60714a}.lesson-callout strong{display:block;font-size:1rem;margin-bottom:4px}.modal-actions{display:flex;justify-content:space-between;gap:10px;margin-top:25px;flex-wrap:wrap}.modal-form{display:flex;flex-direction:column;gap:20px;margin-top:25px}.modal-form .field{width:100%}.modal-form .field label{font-size:1rem}.modal-form textarea{min-height:90px;resize:vertical}.source-list{padding-left:20px;line-height:2.3;font-size:1rem;color:#65784e}.source-list a{text-decoration:underline}.search-field{margin-bottom:15px}.search-field input{width:100%}.filter-chips{display:flex;gap:8px;flex-wrap:wrap;margin:18px 0}.filter-chips button{border:1px solid var(--line);padding:8px 13px;border-radius:30px;font-size:0.9375rem;background:white;min-height:36px}.filter-chips button.active{background:#283220;color:white;border-color:#283220}.scroll-table{overflow:auto}.vol-control{max-width:200px;display:flex;align-items:center;gap:10px;margin:18px auto 0;color:var(--muted);font-size:0.9375rem}.vol-control input{width:100%;accent-color:#8d9d75}.resource-links{font-size:1rem;line-height:2;color:#71845c}.resource-links a{text-decoration:underline}.practice-helper{margin-top:20px;padding-top:20px;border-top:1px solid var(--line);font-size:1rem;color:#7c8570;line-height:2}
@media(min-width:1500px){main{padding-top:38px}.hero{min-height:320px;padding:32px 38px}.hero h2{font-size:2.75rem}.hero p{font-size:1rem}.hero-layout{grid-template-columns:minmax(0,1fr) 315px}.path-visual{height:120px}.hero-copy{max-width:62%}.path h3{font-size:1.125rem}.path p{font-size:1rem}.plan-card>p,.plan-line{font-size:1rem}.stat-label{font-size:1rem}.stat-value{font-size:2rem}}
@media(max-width:1200px){.sidebar{width:210px;padding-left:14px;padding-right:14px}.profile{margin-left:-14px;width:calc(100% + 28px)}.brand{font-size:2rem;gap:9px;padding:0 6px}.brand small{font-size:0.875rem}.workspace{margin-left:210px}.topbar{padding:0 25px}main{padding:26px 25px 15px}.hero-layout{grid-template-columns:minmax(0,1fr) 250px;gap:15px}.hero{padding:25px}.hero h2{font-size:2rem}.hero p{font-size:0.9375rem}.hero-copy{max-width:70%}.hero-art{right:-40px}.hero-actions{gap:10px}.hero-actions .text-btn{font-size:0.875rem}.plan-card{padding:20px}.stats{gap:10px}.stat{padding:16px 12px;gap:9px}.stat-icon{width:31px;height:31px}.stat-value{font-size:1.75rem}.path-body{padding:14px}.path h3{font-size:1rem}.path p{font-size:0.875rem}.paths{gap:12px}.bottom-grid{gap:15px}.panel{padding:20px}.quick-tools{gap:9px}.quick-tool{padding:12px}.session-banner{left:calc(50% + 105px)}}
@media(max-width:1000px){.sidebar{width:185px}.brand{font-size:2rem}.brand-icon{width:31px;height:36px;font-size:2rem}.brand small{font-size:0.875rem;letter-spacing:1.4px}.nav-item{font-size:1rem;padding:10px}.nav-caption{font-size:0.875rem;margin-left:10px}.workspace{margin-left:185px}.hero-layout{grid-template-columns:1fr}.hero{min-height:260px}.hero-copy{max-width:65%}.hero h2{font-size:2.25rem}.hero-art{right:0;max-width:300px}.plan-card{display:none}.bottom-grid{grid-template-columns:1fr}.stats{grid-template-columns:repeat(2,1fr)}.paths{grid-template-columns:repeat(2,1fr)}.path-visual{height:100px}.path h3{font-size:1.125rem}.path p{font-size:1rem;min-height:0}.date-chip{display:none}.lesson-grid{grid-template-columns:repeat(2,1fr)}.studio-grid,.scale-info{grid-template-columns:1fr}.save-status{display:none}.library{grid-template-columns:repeat(2,1fr)}.session-banner{left:calc(50% + 92px)}.profile small{display:none}.profile strong{font-size:0.9375rem}.profile-gear{display:none}}
@media(max-width:700px){.sidebar{width:100%;height:66px;top:auto;padding:0 8px;display:block;border-top:1px solid #4b5540}.sidebar>.brand,.nav-caption,.sidebar-bottom{display:none}.sidebar nav{height:100%;display:flex;justify-content:space-around}.nav-item{padding:6px 2px;margin:0;flex:1;min-width:0;border-radius:0;display:flex;flex-direction:column;justify-content:center;gap:2px;font-size:0.875rem}.nav-item .icon{width:20px;height:20px}.nav-item.active{background:transparent;color:#f1a480}.nav-item.active:after{display:none}.workspace{margin-left:0;padding-bottom:66px}.topbar{height:62px;padding:0 20px}.breadcrumb{font-size:0.9375rem;gap:10px}.topbar-right{gap:10px}.streak-pill{font-size:0.9375rem;padding:4px 10px}.avatar-small{width:29px;height:29px}.topbar-right .avatar{display:none}main{padding:24px 20px 10px}.page-heading{margin-bottom:20px;gap:10px}.page-heading h1{font-size:2rem}.page-heading p{font-size:1rem;max-width:280px}.eyebrow{font-size:0.875rem}.hero{padding:24px 22px;min-height:315px}.hero h2{font-size:2.25rem;line-height:1.5}.hero-copy{max-width:100%}.hero p{max-width:70%;font-size:1rem}.hero-art{width:51%;height:75%;right:-30px;bottom:-18px;opacity:.55;z-index:0}.hero-actions{align-items:start;flex-direction:column;gap:3px}.hero .corner-star{right:20px}.art-label{display:none}.hero-actions .text-btn{font-size:0.9375rem}.tag{font-size:0.875rem}.stats{margin:17px 0 25px;gap:10px}.stat{padding:15px 12px;gap:9px}.stat-label{font-size:0.875rem}.stat-value{font-size:1.75rem}.stat-value small{font-size:0.875rem}.stat-icon{width:29px;height:29px}.section-heading h2{font-size:1.25rem}.section-heading p{font-size:0.9375rem}.section-heading .text-btn{font-size:0.875rem}.paths{gap:12px}.path-visual{height:85px;padding:12px}.path h3{font-size:1rem;line-height:1.8}.path p{font-size:0.9375rem;min-height:36px}.path-body{padding:13px}.path-num{font-size:0.875rem}.path-chip{font-size:0.875rem}.path-bottom{font-size:0.875rem;gap:5px}.bottom-grid{margin-top:20px}.panel{padding:19px}.quick-tools{gap:8px}.quick-tool{padding:11px 9px}.quick-tool strong{font-size:0.9375rem}.quick-tool small{font-size:0.875rem}.quick-arrow{display:none}footer{padding:18px 20px 20px;font-size:0.875rem}.footer-light{display:none}footer button{font-size:0.875rem}.view-intro{padding:17px}.view-intro p{font-size:1rem}.view-intro>.icon{display:none}.lesson-grid{grid-template-columns:1fr}.lesson-card{min-height:98px}.lesson-card h3{font-size:1rem}.level-heading h2{font-size:1.125rem}.level-heading p{font-size:0.875rem}.level-heading>span:last-child{font-size:0.875rem;white-space:nowrap}.level-badge{width:33px;height:33px;flex-shrink:0}.controls{gap:10px}.field{min-width:100px;flex:1}.field.grow{flex-basis:65%}.field select{width:100%;font-size:1rem;padding-left:10px}.scale-header{flex-direction:column;align-items:start;gap:12px}.scale-header h2{font-size:1.75rem}.fretboard-shell{margin:0 -5px;padding:20px 10px 14px}.board-footer{flex-direction:column;gap:8px;font-size:0.875rem}.library{gap:9px}.scale-tile{padding:12px}.scale-tile strong{font-size:1rem}.scale-tile .scale-tag{float:none;display:inline-block;margin-bottom:5px}.studio-tabs button{font-size:0.9375rem;padding:10px 11px;gap:5px}.studio-tabs .icon{width:14px}.timer-digits{font-size:4.375rem}.timer-card{padding:23px}.jam-grid{grid-template-columns:1fr 1fr}.jam-track{padding:14px}.jam-track strong{font-size:1rem}.jam-track small{font-size:0.875rem}.ear-panel{padding:22px 16px}.ear-answers{grid-template-columns:repeat(2,1fr)}.ear-answer{padding:12px;font-size:1rem}.session-banner{bottom:76px;left:50%;padding:10px 14px;gap:12px;font-size:0.9375rem;max-width:94vw}.toast{bottom:86px;right:20px}.modal-inner{padding:22px}.modal-top h2{font-size:1.75rem}.lesson-lead{font-size:1rem}.lesson-steps li{padding:13px;font-size:1rem}.modal-actions .btn{flex:1}.page-heading>.btn{padding:9px;font-size:0.875rem;white-space:nowrap}.scale-info .panel h3{font-size:1rem}.history{font-size:0.9375rem}.history th,.history td{padding:12px 7px}.chart{gap:10px}.chart-labels{gap:10px}.modal-form .field{flex:auto}.profile{display:none}.practice-helper{font-size:0.9375rem}}
@media(prefers-reduced-motion:reduce){*,*:before,*:after{animation:none!important;transition:none!important;scroll-behavior:auto!important}}
.mini-wave{width:100%;height:40px;line-height:1;letter-spacing:0;margin:15px 0}.mini-wave svg{width:100%;height:100%}.note:after{content:'';position:absolute;inset:0;border-radius:50%}.audio-banner{position:fixed;right:22px;bottom:80px;display:flex;align-items:center;gap:12px;padding:10px 14px;background:#fff;border:1px solid #bcc9a9;border-radius:10px;box-shadow:0 3px 18px #24301a18;font-size:0.9375rem;z-index:35}.audio-banner button{min-height:34px;padding:4px 8px;background:#eef2e7;border-radius:5px}.audio-banner .icon{width:16px;height:16px}@media(max-width:700px){.audio-banner{bottom:131px;right:20px;max-width:90vw;font-size:0.875rem;gap:8px}}

/* Reading scale: preserve comfortable text sizes across breakpoints. */
:root{--reading-size:1.125rem;--ui-size:1rem;--detail-size:.875rem;--sidebar-width:264px}
.sidebar{width:var(--sidebar-width);padding:30px 18px 0}
.workspace{margin-left:var(--sidebar-width)}
.nav-item{font-size:var(--ui-size);min-height:52px;padding:12px;gap:11px}
.nav-label-mobile{display:none}
.brand{font-size:1.875rem;gap:10px;padding:0 6px}
.brand-icon{font-size:2.125rem;width:38px;height:44px;flex-shrink:0}
.brand small{font-size:.625rem;letter-spacing:1.2px;line-height:1.6}
.nav-caption,.tiny-label{font-size:.75rem;letter-spacing:1px}
.daily-tip{margin:24px 0;padding:16px}
.daily-tip p{font-size:var(--ui-size);line-height:1.8}
.profile{width:calc(100% + 36px);margin-left:-18px;padding:18px 14px;gap:8px}
.profile strong{font-size:var(--detail-size);overflow-wrap:anywhere}
.profile small{font-size:.75rem;line-height:1.6}
.profile-gear{flex-shrink:0}
.topbar{min-height:82px;height:auto;padding-block:18px}
.topbar-right{gap:14px}
.page-heading p,.section-heading p,.scale-header p,.plan-card>p,.plan-line,
.path p,.quick-tool small,.challenge p,.level-heading p,.lesson-card p,
.stage small,.jam-track small,.scale-tile small,.empty-state p,.practice-helper,
.data-note,.hint,.ear-feedback,.timer-card p{font-size:var(--ui-size);line-height:1.85}
.panel>p,.lesson-lead,.lesson-steps li,.lesson-callout,.source-list,.resource-links,.view-intro p{font-size:var(--reading-size);line-height:1.9}
.eyebrow,.section-kicker,.path-num,.challenge-top{font-size:.8125rem;letter-spacing:1.3px}
.tag,.path-chip,.challenge-badge,.scale-tag{font-size:.8125rem;line-height:1.65}
.hero{min-height:365px;padding:30px}
.hero-copy{max-width:66%}
.hero h2{font-size:2.5rem;line-height:1.5}
.hero p{font-size:var(--ui-size);line-height:1.9}
.hero-actions{gap:10px;flex-wrap:wrap}
.hero-actions .text-btn,.section-heading .text-btn{font-size:var(--ui-size)}
.hero-art{width:43%;opacity:.85;right:-16px}
.art-label{display:none}
.plan-card{padding:24px 20px}
.plan-card h3,.panel h3,.path h3,.lesson-card h3,.quick-tool strong,.milestone strong{font-size:1.25rem;line-height:1.7}
.btn,.btn.small,.page-heading>.btn,.text-btn,.segmented button,.filter-chips button,
.duration-switch button,.studio-tabs button,.ear-answer,.field label,.modal-form .field label,
.history,.vol-control,.stage strong{font-size:var(--ui-size)}
.btn{min-height:48px;padding:12px 18px}
.btn.small,.segmented button,.filter-chips button,.duration-switch button{min-height:44px}
.btn .icon{width:18px;height:18px}
.text-btn{min-height:44px}
.duration-switch{gap:3px;margin:18px 0}
.duration-switch button{white-space:nowrap;padding:6px}
.plan-list{gap:12px}
.plan-line{gap:10px;align-items:start}
.plan-line>span:last-child{white-space:nowrap}
.plan-line i{flex-shrink:0}
.stat{align-items:start;padding:20px 16px;gap:12px}
.stat-label{font-size:var(--ui-size);line-height:1.7}
.stat-value{font-size:2rem;line-height:1.5}
.stat-value small,.path-bottom{font-size:var(--detail-size)}
.stat-icon{width:38px;height:38px;flex-shrink:0}
.path-body{display:flex;flex-direction:column;padding:19px;gap:5px}
.path p{flex:1;min-height:0}
.path-bottom{margin-top:14px;gap:10px;flex-wrap:wrap}
.path-visual{height:116px}
.path-visual .path-chip{white-space:nowrap}
.bottom-grid{grid-template-columns:1.35fr 1fr}
.quick-tool{padding:16px 13px;min-height:150px}
.quick-tool strong{font-size:1.125rem}
.quick-tools{gap:12px}
.challenge p{max-width:none}
.section-heading{align-items:start;flex-wrap:wrap}
.level-heading>span:last-child{font-size:var(--detail-size);white-space:nowrap}
.lesson-card{padding:21px 17px;gap:12px;min-height:150px}
.lesson-index{font-size:1rem;min-width:24px;line-height:2}
.lesson-card small{font-size:var(--detail-size);line-height:1.7}
select,input[type=text],input[type=number],input[type=search],textarea,.field select{font-size:var(--ui-size);line-height:1.6;min-height:48px}
.controls .field{min-width:140px}
.controls .field.grow{min-width:240px}
.field label{line-height:1.7}
.scale-header{margin:28px 0 20px}
.scale-header h2{font-size:1.75rem;line-height:1.5}
.fretboard-shell{padding-top:26px}
.string-name,.fret-number{font-size:1rem}
.board-footer{font-size:var(--detail-size);line-height:1.7;flex-wrap:wrap}
.formula span{font-size:1.25rem;min-width:52px;padding:10px 12px}
.formula small{font-size:1rem}
.scale-tile{padding:18px}
.scale-tile strong{font-size:1.125rem;line-height:1.7}
.scale-tile .scale-tag{font-size:.8125rem;float:none;display:inline-block;margin:0 0 6px}
.studio-tabs button{padding:13px 16px;min-height:52px}
.stage{gap:12px;padding:15px}
.stage>span:last-child{white-space:nowrap;font-size:var(--detail-size)}
.stage-number{min-width:30px;height:30px;font-size:var(--detail-size)}
.timer-card p{max-width:400px}
.timer-card h3{font-size:1.375rem}
.history th{font-size:var(--detail-size)}
.history th,.history td{padding:16px 12px;line-height:1.8}
.history td:last-child{min-width:200px}
.chart-day small,.chart-labels span,.milestone small{font-size:var(--detail-size)}
.milestone strong{font-size:1.125rem}
.milestone small{line-height:1.7}
.modal-top h2{font-size:1.75rem}
.modal-inner{padding:32px}
.lesson-callout strong{font-size:var(--ui-size)}
.lesson-step-heading{font-size:1.25rem}
.lesson-confirmation{display:flex;gap:12px;align-items:start;font-size:var(--ui-size);line-height:1.9;margin-top:22px}
.lesson-confirmation input{width:22px;height:22px;flex-shrink:0}
.close-btn{min-width:44px;height:44px}
.toast{font-size:var(--ui-size);line-height:1.8}
.session-banner{left:calc(50% + 132px);font-size:var(--ui-size);max-width:calc(100vw - 300px);white-space:normal}
.session-banner button,.audio-banner,.audio-banner button{font-size:var(--detail-size)}
.session-banner button,.audio-banner button{min-height:44px}
.session-banner>span{white-space:nowrap}
.audio-banner{padding:10px 14px;bottom:100px}
footer{align-items:center;flex-wrap:wrap;font-size:var(--detail-size)}
footer .footer-light,footer button{font-size:var(--detail-size);line-height:1.8}
footer button{min-height:44px}
@media(max-width:1200px){
 :root{--sidebar-width:232px}
 .sidebar{padding-inline:14px}.profile{margin-left:-14px;width:calc(100% + 28px)}
 .brand{font-size:1.625rem;gap:8px}.brand small{font-size:.5625rem;letter-spacing:1px}
 .hero-layout{grid-template-columns:1fr}.plan-card{display:flex}.hero{min-height:350px}
 .hero-copy{max-width:66%}.hero-art{right:0;max-width:360px}
 .hero h2{font-size:2.375rem}.hero p{font-size:1rem}
 .stats,.paths{grid-template-columns:repeat(2,minmax(0,1fr))}
 .bottom-grid,.studio-grid,.scale-info{grid-template-columns:1fr}
 .lesson-grid,.library{grid-template-columns:repeat(2,minmax(0,1fr))}
 .quick-tool strong{font-size:1.125rem}
 .session-banner{left:calc(50% + 116px);max-width:calc(100vw - 260px)}
 .profile strong{font-size:.875rem}
}
@media(max-width:900px){
 .topbar .save-status,.date-chip{display:none}
 .hero-copy{max-width:100%}.hero-art{opacity:.2;width:55%;right:-25px}
 .hero p{max-width:90%}.hero-actions{position:relative;z-index:2}
 .lesson-grid,.library{grid-template-columns:1fr}
 .page-heading,.scale-header{align-items:start;flex-direction:column}
 .scale-header h2{font-size:1.625rem}
 .topbar{padding-inline:20px}.topbar-right{gap:8px}
 .quick-tools{grid-template-columns:1fr}.quick-tool{min-height:100px}
 .controls{align-items:stretch}.controls .field,.controls .field.grow{min-width:0;flex:1 1 100%}
 .level-heading{flex-wrap:wrap}.level-heading>div{flex:1;min-width:200px}
 .level-heading>span:last-child{margin-left:54px}
 .session-banner{font-size:.875rem;gap:10px;padding:10px 12px}
 .session-banner>.icon{display:none}
 .plan-card h3{font-size:1.375rem}
}
@media(max-width:700px){
 :root{--sidebar-width:0px}
 .sidebar{width:100%;height:80px;padding:0 4px}
 .workspace{margin-left:0;padding-bottom:80px}
 .nav-item{min-height:80px;padding:8px 2px;gap:5px;font-size:.75rem;line-height:1.4}
 .nav-label-desktop{display:none}.nav-label-mobile{display:inline}
 .nav-item .icon{width:24px;height:24px}
 .topbar{min-height:70px;padding:12px 20px}
 .topbar-right .avatar{display:grid;width:36px;height:36px;font-size:1rem}
 .streak-pill{min-height:40px;font-size:.875rem;white-space:nowrap}
 .breadcrumb{font-size:.875rem;gap:8px;flex-wrap:wrap}
 .page-heading h1{font-size:1.875rem;line-height:1.6}
 .page-heading p{font-size:1rem;max-width:none}
 .hero{padding:24px;min-height:370px}.hero h2{font-size:2.25rem}
 .hero-copy{max-width:100%}.hero p{max-width:90%}
 .hero-actions .text-btn,.section-heading .text-btn{font-size:1rem}
 .tag{font-size:.75rem}.hero-actions{gap:10px;align-items:flex-start}
 .stats{gap:12px}.stat{padding:16px 14px;flex-direction:column;gap:8px}
 .stat-value{font-size:1.75rem}.stat-label{font-size:1rem}.stat-value small{font-size:.875rem}
 .paths{grid-template-columns:1fr}.path-visual{height:108px}
 .path h3{font-size:1.25rem}.path p{font-size:1rem}.path-body{padding:20px}
 .path-num,.path-chip{font-size:.8125rem}.path-bottom{font-size:.875rem}
 .panel{padding:20px}.panel h3,.scale-info .panel h3{font-size:1.25rem}
 .section-heading h2,.level-heading h2{font-size:1.375rem}
 .level-heading{gap:12px}.level-badge{font-size:1rem;width:36px;height:36px}
 .lesson-card h3{font-size:1.125rem}.lesson-card p{font-size:1rem}
 .controls{gap:16px}.field select{font-size:1rem}
 .fretboard-shell{margin:0 -10px;padding:22px 8px 16px}
 .fretboard{grid-template-rows:repeat(6,56px) 38px}
 .note{font-size:1rem}.board-footer{font-size:.875rem;gap:12px}
 .legend{flex-wrap:wrap;gap:12px}
 .formula{gap:8px}.formula span{min-width:46px;font-size:1.125rem}
 .studio-tabs{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));overflow:visible}
 .studio-tabs button{font-size:1rem;justify-content:center;padding:12px 8px;gap:7px;white-space:normal}
 .studio-tabs .icon{width:18px;height:18px}
 .timer-card p{font-size:1rem}.timer-controls{flex-wrap:wrap}
 .stage{flex-wrap:wrap}.stage>div{flex:1;min-width:140px}.stage small{font-size:1rem}
 .stage>span:last-child{margin-left:42px}.jam-grid{grid-template-columns:1fr}
 .jam-track strong{font-size:1.25rem}.jam-track small{font-size:1rem}
 .ear-answer{font-size:1rem;padding:14px 8px}
 .metro-options{flex-wrap:wrap}.metro-options .field{flex-basis:100%}
 .session-banner{bottom:92px;left:50%;max-width:calc(100vw - 24px);width:max-content;font-size:.875rem}
 .session-banner button{font-size:.875rem;padding:8px 10px;white-space:nowrap}
 .audio-banner{bottom:164px;right:12px;font-size:.875rem;gap:8px;max-width:calc(100vw - 24px)}
 .toast{bottom:100px;font-size:1rem}
 .modal-inner{padding:22px}.modal-top h2{font-size:1.5rem}
 .lesson-lead,.lesson-steps li{font-size:1.125rem}.lesson-steps li{padding:16px 13px}
 .modal-actions{gap:12px}.modal-actions .btn{flex-basis:100%}
 .history{font-size:1rem}.history th{font-size:.875rem}
 .practice-helper{font-size:1rem}.chart{gap:9px}.chart-labels{gap:9px}
 footer{font-size:.875rem}footer button{font-size:.875rem}
}
/* Fretboard atlas, chord guide and construction reference. */
.reference-nav{display:flex;gap:6px;flex-wrap:wrap;border-bottom:1px solid var(--line);margin-bottom:28px;padding-bottom:10px}
.reference-nav a{font-size:1rem;font-weight:500;min-height:48px;padding:10px 17px;border-radius:7px;display:flex;align-items:center}
.reference-nav a:hover{background:#e9edde}.reference-nav a.active{background:var(--dark);color:#f5f8ed}
.reference-heading p{max-width:850px}.reference-entry-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:16px;margin:0 0 26px}
.reference-entry{position:relative;border:1px solid #dce3d1;border-radius:12px;padding:22px;background:#eaf0df;display:flex;flex-direction:column;gap:8px}
.reference-entry:nth-child(2){background:#f4e8db;border-color:#e8d9c8}.reference-entry:nth-child(3){background:#eeeaf3;border-color:#e1dcea}
.reference-entry>.icon{width:26px;height:26px;color:#5e7450;margin-bottom:8px}.reference-entry strong{font-size:1.125rem}.reference-entry span{font-size:1rem;color:#5f6856}.reference-entry b{position:absolute;top:19px;right:20px;font-weight:400;font-size:1.25rem}
.reference-controls{display:flex;gap:18px;align-items:end;flex-wrap:wrap}.reference-controls .field{min-width:160px}.reference-controls .field.grow{min-width:220px;flex:1}.reference-controls select{width:100%;font-size:1rem}.reference-labels{margin-left:auto;align-self:end}
.mode-selector{display:grid;grid-template-columns:repeat(7,minmax(0,1fr));gap:8px;margin:26px 0}
.mode-selector button{border:1px solid var(--line);background:#f5f7f0;border-radius:8px;text-align:left;padding:13px 10px;min-height:82px}
.mode-selector button.selected{background:#e5edd7;border-color:#849c66}.mode-selector small{font-size:.75rem;letter-spacing:1px;display:block;color:#63754e}.mode-selector strong{font-size:1rem;font-weight:500;display:block;margin-top:4px}
.reference-summary{display:flex;align-items:center;justify-content:space-between;gap:22px;margin:26px 0 14px}.reference-summary h2{font-size:2rem;line-height:1.5;margin:9px 0 5px;overflow-wrap:anywhere}.reference-summary p{font-size:1.125rem;color:var(--muted)}
.reference-audio-actions{display:flex;gap:10px;flex-wrap:wrap}.reference-audio-actions .btn{white-space:nowrap}.reference-formula{margin:20px 0;gap:10px}.reference-formula span{font-size:1.125rem;min-width:58px}.reference-formula small{font-size:1rem}
.reference-callout{background:#eaf0df;border:1px solid #dce5ce;border-radius:10px;padding:19px 22px;margin:20px 0 24px}.reference-callout strong{font-size:1.125rem}.reference-callout p{font-size:1rem;line-height:1.9;color:#59694a;margin-top:5px}
.atlas-board{padding:22px 12px 18px}.atlas-board .note.chord-tone,.legend i.chord-tone{background:#bcd8e5;border-color:#bcd8e5;color:#203b4a}.atlas-board .fretboard-scroll{overscroll-behavior-x:contain}.atlas-board .note{font-size:1rem}.atlas-board .board-footer{font-size:.875rem;gap:12px;flex-wrap:wrap}
.atlas-section-heading{margin:32px 0 20px}.atlas-section-heading p{max-width:800px}.shape-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:22px}.shape-card{min-width:0;padding:20px}.shape-heading{display:flex;justify-content:space-between;align-items:start;gap:12px;margin-bottom:18px}.shape-heading p{font-size:1rem;color:var(--muted);margin-top:4px}.shape-heading h3{font-size:1.375rem}.shape-heading .btn{font-size:.875rem;padding:9px 12px;white-space:nowrap}.shape-heading .eyebrow{font-size:.8125rem}.compact-board .fretboard{grid-template-rows:repeat(6,52px) 36px}.compact-board .board-footer{flex-direction:column;align-items:start}.compact-board .note{width:40px;height:40px;min-width:40px;font-size:1rem}.compact-board .note:after{inset:-2px}
.reference-details{margin-top:18px;border-top:1px solid var(--line);padding-top:12px}.reference-details summary,.reference-sources summary{cursor:pointer;font-size:1rem;min-height:44px;padding:8px 0}.shape-tab{display:grid;gap:5px;padding:12px 16px;background:#f0f3e9;border-radius:8px}.shape-tab>div{display:flex;gap:22px;font-variant-numeric:tabular-nums}.shape-tab strong{min-width:18px;color:#61774b}.shape-tab span{font-family:monospace;font-size:1rem}
.family-selector{display:flex;gap:10px;flex-wrap:wrap;margin-bottom:22px}.family-selector button{border:1px solid #d9e1ce;border-radius:30px;padding:11px 20px;min-height:48px;font-size:1rem;background:#fff}.family-selector button.selected{background:#33452a;color:#f6f9ee;border-color:#33452a}
.reference-subheading{display:flex;justify-content:space-between;align-items:end;gap:15px;margin:28px 0 18px}.reference-subheading p{font-size:1rem;color:var(--muted);margin-top:6px}.scale-choice-list{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px}.scale-choice-list button{text-align:left;border:1px solid var(--line);background:#f8f9f4;border-radius:9px;padding:16px}.scale-choice-list button.selected{border-color:#8eaa6f;background:#eaf1df}.scale-choice-list strong{display:block;font-size:1.125rem}.scale-choice-list span{display:block;font-size:1rem;color:#617151;margin-top:6px}.chord-map-toggle{width:max-content;max-width:100%;margin-bottom:18px}.reference-practice{border-top:1px solid var(--line);padding-top:24px;margin-top:24px}.reference-practice strong{font-size:1.125rem}.reference-practice p{font-size:1.125rem;line-height:1.95;margin-top:7px}.chord-cheatsheet{margin-top:24px}.chord-cheatsheet .history th,.chord-cheatsheet .history td{white-space:nowrap}.chord-cheatsheet .history td:last-child{min-width:100px}.chord-cheatsheet .history{font-size:1rem}
.reference-basics{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:16px;margin-bottom:24px}.reference-basics article{border-radius:10px;background:#e9eedf;border:1px solid #dce4cf;padding:22px}.reference-basics strong{font-size:1.125rem}.reference-basics p{font-size:1rem;color:#60704e;margin-top:8px;line-height:1.9}.construction-recipe{background:#f3e6da;border:1px solid #e9d6c4;border-radius:9px;font-size:1.125rem;padding:20px;line-height:1.9;margin:20px 0}.construction-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:18px;margin:26px 0}.construction-grid article{padding:18px;background:#f5f7ef;border:1px solid #e7ebdf;border-radius:8px}.construction-grid h3{font-size:1.125rem}.construction-grid p{font-size:1rem;line-height:1.9;color:#5c6a50;margin-top:8px}.construction-grid small{font-size:.875rem;color:#69745f;display:block;margin-top:10px}
.step-pattern{border-top:1px solid var(--line);margin-top:25px;padding-top:23px}.step-pattern>div{display:flex;gap:9px;flex-wrap:wrap;margin:16px 0}.step-pattern span{background:#e8eedc;min-width:65px;padding:10px 12px;border-radius:7px;text-align:center}.step-pattern strong{font-size:1.125rem;display:block}.step-pattern small{font-size:.875rem;display:block;color:#5d6d4a}.step-pattern p{font-size:1rem;color:var(--muted)}.formula-index,.formula-harmony{margin-top:26px}.formula-index .history td:nth-child(2),.formula-index .history td:nth-child(3){min-width:240px}.formula-table-link{font-size:1rem;font-weight:600;text-align:left;min-height:44px;color:#4c6837;text-decoration:underline;text-underline-offset:4px}.formula-harmony h2{font-size:1.5rem}.formula-harmony>p{font-size:1rem}.harmony-grid{display:grid;grid-template-columns:repeat(7,minmax(0,1fr));gap:10px;margin:20px 0}.harmony-grid button{background:#eaf0df;border:1px solid #d5e0c6;border-radius:8px;padding:16px 9px;min-height:90px}.harmony-grid small{display:block;font-size:.875rem;color:#61784c}.harmony-grid strong{font-size:1rem;display:block;margin-top:8px;overflow-wrap:anywhere}
.reference-sources{margin:28px 0;color:#637254}.reference-sources p,.reference-sources li{font-size:1rem;line-height:1.9}.reference-sources a{text-decoration:underline;text-underline-offset:3px}.reference-sources summary:focus-visible,.reference-details summary:focus-visible{outline:3px solid #c65c37;outline-offset:3px}
@media(max-width:1250px){.mode-selector{grid-template-columns:repeat(4,minmax(0,1fr))}.shape-grid{grid-template-columns:1fr}.reference-entry-grid,.reference-basics,.construction-grid{grid-template-columns:1fr}.reference-entry{padding:20px}.reference-entry>.icon{margin-bottom:0}.reference-summary{align-items:start;flex-direction:column}.harmony-grid{grid-template-columns:repeat(4,minmax(0,1fr))}}
@media(max-width:700px){.reference-nav{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:6px;margin-bottom:24px}.reference-nav a{font-size:1rem;padding:10px;justify-content:center;text-align:center}.reference-heading h1{font-size:1.75rem}.reference-controls{gap:16px;align-items:stretch}.reference-controls .field,.reference-controls .field.grow{min-width:0;flex:1 1 100%}.reference-labels{margin-left:0;align-self:start}.mode-selector{grid-template-columns:repeat(2,minmax(0,1fr));gap:8px;margin:22px 0}.mode-selector button{min-height:74px;padding:10px 12px}.mode-selector strong{font-size:1rem}.mode-selector small{font-size:.75rem}.reference-summary h2{font-size:1.75rem}.reference-summary p{font-size:1rem}.reference-audio-actions{width:100%}.reference-audio-actions .btn{flex:1;font-size:.9375rem;padding:10px}.reference-formula span{min-width:48px;padding:9px;font-size:1rem}.reference-callout{padding:17px}.reference-callout p{font-size:1rem}.shape-card{padding:16px}.shape-heading{flex-direction:column;gap:12px}.shape-heading h3{font-size:1.25rem}.shape-heading .btn{font-size:1rem}.atlas-board{margin:0 -10px;padding:18px 8px 14px}.atlas-board .board-footer{font-size:.875rem;line-height:1.8}.compact-board .board-footer{font-size:.875rem}.shape-tab{padding:12px}.family-selector{gap:8px;display:grid;grid-template-columns:repeat(2,minmax(0,1fr))}.family-selector button{font-size:.9375rem;line-height:1.6;padding:10px}.reference-subheading{flex-direction:column;align-items:start}.scale-choice-list{grid-template-columns:1fr}.scale-choice-list strong{font-size:1.125rem}.chord-map-toggle{width:100%}.chord-map-toggle button{font-size:.9375rem;padding:10px 8px;flex:1;white-space:normal}.reference-practice p{font-size:1rem}.reference-basics{gap:12px}.reference-basics article{padding:18px}.construction-grid{gap:12px}.construction-grid h3{font-size:1.125rem}.construction-recipe{font-size:1.125rem;padding:17px}.step-pattern>div{gap:8px}.step-pattern span{min-width:56px;padding:10px}.harmony-grid{grid-template-columns:repeat(2,minmax(0,1fr))}.reference-sources p,.reference-sources li{font-size:1rem}.reference-entry strong{font-size:1.125rem}}
/* Personal practice profiles */
.avatar[data-color="sage"],.color-choice[data-color="sage"] span{background:#dce5cc;color:#40552d}.avatar[data-color="orange"],.color-choice[data-color="orange"] span{background:#f4d7c4;color:#894723}.avatar[data-color="blue"],.color-choice[data-color="blue"] span{background:#d8e8f1;color:#315a77}.avatar[data-color="purple"],.color-choice[data-color="purple"] span{background:#e4dcf1;color:#684c89}.avatar[data-color="sand"],.color-choice[data-color="sand"] span{background:#ece1c9;color:#6f5932}.avatar[data-color="rose"],.color-choice[data-color="rose"] span{background:#f1dce0;color:#87495b}
.profile-dot{color:var(--orange)}.profile-layout{display:grid;grid-template-columns:minmax(0,1.15fr) minmax(0,.85fr);gap:26px;align-items:start}.profile-layout h2{font-size:1.65rem;line-height:1.5}.profile-muted{color:var(--muted);font-size:1rem;line-height:1.9;margin:10px 0 24px}.auth-card{padding:32px}.auth-card .section-kicker{display:block;margin-bottom:12px}.google-login{width:100%;justify-content:center;gap:14px;margin:4px 0 10px}.google-symbol{font-family:Arial,sans-serif;font-size:24px;font-weight:700;color:#4285f4}.auth-divider{display:flex;align-items:center;gap:16px;color:var(--muted);font-size:1rem;margin:18px 0}.auth-divider:before,.auth-divider:after{content:'';height:1px;background:var(--line);flex:1}.auth-tabs{display:flex;margin-bottom:24px}.auth-tabs button{flex:1;font-size:1rem;white-space:nowrap;padding:10px}.profile-form{display:grid;gap:20px}.profile-form .field{gap:8px;min-width:0}.profile-form input,.profile-form select{width:100%;min-height:50px;font-size:1.0625rem}.profile-form .btn{justify-self:start;min-height:50px}.profile-form .field small{font-size:.9375rem;color:var(--muted);line-height:1.85}.profile-fields{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:20px}.profile-fields .full{grid-column:1/-1}.profile-footnote{font-size:.9375rem;line-height:1.9;color:var(--muted);margin-top:24px}.profile-feedback{color:#9a432c;line-height:1.85;overflow-wrap:anywhere;font-size:1rem}.profile-feedback:empty{display:none}.profile-feedback .btn{margin-top:12px}.profile-story{border:1px solid #cbd5bd;background:#e7eddc;border-radius:16px;padding:38px;overflow:hidden}.profile-story h2{font-size:2.1rem;line-height:1.5;color:#35472b;margin:12px 0 24px}.profile-story p{font-size:1rem;line-height:1.95;color:#586c48;overflow-wrap:anywhere;margin-bottom:22px}.profile-story ul{padding-left:22px;line-height:2.3;font-size:1.0625rem;margin:20px 0}.profile-story-mark{font:italic 700 100px Georgia,serif;color:#465d36;line-height:1.3;margin-bottom:30px}.profile-story-mark span{color:#bf714e}.guest-preferences{margin-top:26px}.guest-preferences summary{cursor:pointer;font-size:1.0625rem;min-height:44px}.guest-preferences .profile-form{margin-top:24px;max-width:740px}.avatar-colors{display:flex;gap:12px;flex-wrap:wrap;border:0;padding:0;margin:0}.avatar-colors legend{font-size:1rem;font-weight:600;margin-bottom:10px}.color-choice{position:relative;width:48px;height:48px;display:grid;place-items:center;cursor:pointer}.color-choice input{position:absolute;inset:0;opacity:0;margin:0;width:48px;height:48px;cursor:pointer}.color-choice span{width:38px;height:38px;border-radius:50%;border:3px solid white;outline:1px solid #ccd1c5;pointer-events:none}.color-choice input:checked+span{outline:3px solid #50623f}.color-choice input:focus-visible+span{outline:3px solid #b14d29;outline-offset:3px}.import-option{display:flex;align-items:flex-start;gap:14px;padding:18px;background:#f3f1e7;border:1px solid #dedbc7;border-radius:8px;line-height:1.8;cursor:pointer}.import-option input{width:22px;height:22px;min-height:0;margin-top:5px;accent-color:#52683d;flex:none}.import-option strong,.import-option small{display:block;font-size:1rem}.import-option small{color:var(--muted);margin-top:7px}.profile-identity{display:flex;align-items:center;gap:24px;margin-bottom:20px}.profile-large-avatar{width:88px;height:88px;flex:none;font-size:2.3rem;border-radius:24px;display:grid;place-items:center;background:#e7eddc;color:#52683d}.profile-identity h2{font-size:1.8rem;margin:4px 0}.profile-identity p{font-size:1rem;color:var(--muted);overflow-wrap:anywhere}.profile-account-badge{margin-left:auto;font-size:.9375rem;background:#edf2e5;border:1px solid #dae4cc;border-radius:24px;padding:10px 16px;white-space:nowrap}.profile-sync-panel{border:1px solid #d4dec7;background:#edf2e5;border-radius:12px;padding:20px 24px;display:flex;justify-content:space-between;align-items:center;gap:18px;margin-bottom:24px}.profile-sync-panel p{font-size:.9375rem;color:var(--muted);line-height:1.8;margin-top:4px}.profile-sync-panel strong{font-size:1.0625rem}.profile-actions{display:flex;gap:12px;flex-wrap:wrap;margin-top:22px}.profile-account p{font-size:1rem;line-height:1.95;margin-top:14px;color:var(--muted)}.profile-account .profile-actions{flex-direction:column;align-items:stretch}.profile-account .btn{justify-content:center}.verification-card{max-width:780px;padding:38px}.verification-card h2{font-size:1.8rem;margin:24px 0 12px}.verification-card p{font-size:1.0625rem;line-height:1.95;overflow-wrap:anywhere}.profile-loading{padding:48px;font-size:1.125rem}.save-status[data-status="error"],.save-status[data-status="offline"],.save-status[data-status="pending"]{color:#9a572f}
@media(max-width:1100px){.profile-layout{grid-template-columns:1fr}.profile-story{display:none}.profile-account-badge{display:none}.auth-card{max-width:740px}.profile-layout>.panel{width:100%}}
@media(max-width:700px){.profile-layout{gap:18px}.auth-card,.verification-card{padding:22px}.profile-layout h2{font-size:1.4rem}.auth-tabs{width:100%}.auth-tabs button{font-size:.9375rem;padding:10px 6px}.profile-fields{grid-template-columns:1fr}.profile-fields .full{grid-column:auto}.profile-identity{gap:16px;align-items:flex-start;padding:22px}.profile-large-avatar{width:62px;height:62px;border-radius:18px;font-size:1.7rem}.profile-identity h2{font-size:1.4rem}.profile-identity .eyebrow{font-size:.625rem}.profile-sync-panel{align-items:flex-start;flex-direction:column;padding:20px}.profile-sync-panel .btn{width:100%;justify-content:center}.profile-form>.btn{width:100%;justify-content:center}.profile-actions .btn{flex:1 1 100%;justify-content:center}.guest-preferences{padding:22px}.import-option{padding:14px}}