@import url('https://fonts.googleapis.com/css2?family=DM+Sans:wght@400;450;500;550;600;650;700&family=Manrope:wght@400;500;600;650;700;750;800&display=swap');
:root{--bg:#f6f5f0;--paper:#fffefa;--green:#244c3d;--dark:#193b2f;--ink:#263c32;--muted:#7c8277;--line:#e4e6db;--orange:#c57952;--soft:#edf0e7;--font:'DM Sans',Arial,sans-serif}*{box-sizing:border-box}body{margin:0;background:var(--bg);color:var(--ink);font-family:var(--font);font-size:14px;line-height:1.5}button,input,select,textarea{font:inherit}button,a,input,select,textarea{-webkit-tap-highlight-color:transparent}button{cursor:pointer}button{color:inherit}button,a{touch-action:manipulation}button{border:0;background:none}a{color:inherit;text-decoration:none}button:focus-visible,a:focus-visible,input:focus-visible,select:focus-visible,textarea:focus-visible{outline:3px solid #cf895c;outline-offset:4px}button:disabled{opacity:.5}.icon{flex-shrink:0;vertical-align:middle}.sidebar{width:238px;background:#eeefe7;position:fixed;inset:0 auto 0 0;display:flex;flex-direction:column;padding:32px 20px 22px;border-right:1px solid #e2e5d9;z-index:10}.brand{display:flex;gap:10px;align-items:center;padding:0 8px}.brand>span{font-family:Manrope,var(--font);font-size:23px;font-weight:800;letter-spacing:-1px;line-height:1.2}.brand-light{font-weight:500}.brand small{font:8px var(--font);display:block;letter-spacing:1.5px;margin-top:6px;color:#6d796c}.brand img{border-radius:10px}.nav-label{font-size:10px;color:#919688;letter-spacing:1.8px;margin:53px 16px 18px}.nav-item{display:flex;align-items:center;gap:13px;width:100%;padding:14px 15px;border-radius:8px;color:#727b6d;font-size:13px;text-align:left;margin-bottom:7px;position:relative}.nav-item:hover{background:#e3e7dc}.nav-item.active{background:#214b3c;color:#fffdf1;box-shadow:0 4px 8px #183c2c0c}.nav-item .icon{width:18px;height:18px}.nav-dot{height:5px;width:5px;border-radius:50%;background:#deaa72;margin-left:auto}.sidebar-note{margin-top:auto;padding:30px 15px 18px}.small-cap{font-size:9px;letter-spacing:1.3px;color:#969c8e}.sidebar-note p{font:500 17px/1.7 Manrope,var(--font);color:#64725f;letter-spacing:-.4px}.mini-strings{height:64px;display:flex;gap:10px;align-items:center;opacity:.55}.mini-strings i{display:block;width:2px;background:#9da78d}.phone-button{display:flex;align-items:center;gap:9px;border:1px solid #d7ddcc;border-radius:8px;padding:11px;font-size:11px;background:#f4f5ed}.phone-button>.icon:last-child{margin-left:auto;width:14px}.help-button{display:flex;align-items:center;justify-content:center;gap:8px;font-size:11px;color:#7e8777;padding:17px 0}.help-button .icon{width:16px}.version{border-top:1px solid #dce1d4;padding-top:15px;font-size:8px;color:#969e8b;display:flex;justify-content:space-between}.workspace{margin-left:238px}header{height:84px;border-bottom:1px solid var(--line);display:flex;align-items:center;justify-content:space-between;padding:0 46px}.breadcrumb{font-size:11px;color:#9b9f94}.breadcrumb span{margin:0 13px;color:#bac0b2}.breadcrumb strong{font-weight:500;color:#6d7968}.header-right{display:flex;align-items:center;gap:9px;font-size:10px;color:#77856e}.tuning-dot{background:#5d8659;width:5px;height:5px;border-radius:50%}.tuning{font-size:9px;letter-spacing:3px;margin-left:10px;color:#9aa38e}.avatar{border-radius:50%;background:#e7e8dc;border:1px solid #d9dece;color:#5d7053;height:32px;width:32px;font-size:10px;margin-left:20px}main{max-width:1390px;margin:auto;padding:40px 46px 50px}.page-intro{display:flex;justify-content:space-between;align-items:center;margin-bottom:28px}.eyebrow{font-size:9px;letter-spacing:2px;font-weight:650;color:#7f8e75;display:flex;align-items:center;gap:7px;margin-bottom:16px}.eyebrow i{height:5px;width:5px;background:#c58a57;border-radius:50%}h1{font:650 clamp(32px,3.25vw,49px)/1.15 Manrope,var(--font);letter-spacing:-2px;margin:0 0 18px}h1 em{font-style:normal;color:#85977d;font-weight:500}.page-intro p{color:#93998c;font-size:12px;margin:0}.intro-mark{display:flex;align-items:center;gap:12px;position:relative;color:#b9c0ab;margin-right:25px;transform:rotate(-8deg)}.intro-mark>span{font:700 101px/1 Manrope,var(--font);letter-spacing:-8px;color:#d1d5c4}.intro-mark div{font-size:10px;letter-spacing:2px;line-height:1.7}.intro-mark i{position:absolute;border:1px solid #d8dccd;border-radius:50%;width:150px;height:150px;transform:rotate(-20deg) scaleX(.66);left:0}.search-card{background:var(--paper);border:1px solid var(--line);border-radius:12px;padding:16px 20px;margin-bottom:28px;box-shadow:0 3px 6px #263c3203}.search-field{display:flex;gap:13px;align-items:center}.search-field>.icon{color:#9aa18f}.search-field input{flex:1;border:0;outline:0;background:transparent;font-size:14px;min-width:0;color:var(--ink);padding:9px 0}.search-field input::placeholder{color:#9da394}.search-submit{background:#f0f2e9;border-radius:7px;width:34px;height:32px}.search-submit:hover{background:#e2e8d8}.quick-search{display:flex;align-items:center;gap:8px;margin-top:12px}.quick-search>span{font-size:10px;color:#a3a897;margin-right:9px}.quick-search button{font-size:10px;border:1px solid #e5e7dc;border-radius:5px;padding:3px 11px;color:#7c8971}.quick-search button.selected{background:#edf2e7;border-color:#c7d3bc;color:#395b38}.quick-search button:hover{background:#e9eee3}.error{color:#a84f32;font-size:12px;padding-top:10px}.panel{border:1px solid var(--line);background:var(--paper);border-radius:12px}.chord-workspace{display:grid;grid-template-columns:255px minmax(0,1fr);gap:22px}.chord-selector{padding:23px 22px}.section-title{display:flex;align-items:center;justify-content:space-between;gap:14px;margin-bottom:20px}.section-title h2,h2{font:650 16px/1.4 Manrope,var(--font);letter-spacing:-.4px;margin:0}.section-title>span{font-size:10px;color:#b0b6a5}.section-title p{font-size:10px;color:#97a08b;margin:5px 0 0}.field-label{display:block;font-size:9px;letter-spacing:1.4px;color:#929c86;margin:22px 0 10px}.note-grid{display:grid;grid-template-columns:repeat(6,1fr);gap:6px}.note-grid button{border:1px solid #e2e6d9;border-radius:6px;height:31px;font-size:11px;font-weight:500;color:#758369;background:#fafbf6}.note-grid button.selected{color:white;background:var(--green);border-color:var(--green)}select{width:100%;background:#fffefa;border:1px solid #dde3d2;border-radius:7px;color:#6b7c61;padding:10px;font-size:11px;min-height:39px}.chord-identity{border-top:1px solid #e9ecdf;margin-top:22px;padding-top:18px}.chord-identity>div:first-child{display:flex;align-items:center;justify-content:space-between}.chord-identity strong{font:600 44px/1.2 Manrope,var(--font);letter-spacing:-2px}.icon-btn{display:inline-flex;align-items:center;justify-content:center;width:36px;height:36px;border:1px solid #e5e9dc;border-radius:8px;color:#89967c;background:#fffefa}.icon-btn:hover{background:#f0f2e8}.favorite.saved{color:#bd754f;background:#fbf0e8;border-color:#eecdb6}.favorite.saved svg{fill:#bd754f18}.chord-identity p{color:#a0a793;font-size:11px;margin:6px 0 11px}.note-pills{display:flex;gap:6px;flex-wrap:wrap}.note-pills span{font-size:10px;background:#f1f3ea;border-radius:5px;color:#829175;padding:4px 9px}.teacher-note{display:flex;gap:8px;padding-top:18px;margin-top:17px;border-top:1px dashed #e3e7d9}.teacher-note .icon{color:#9aa58b;width:14px;margin-top:2px}.teacher-note p{font-size:10px;color:#939d87;line-height:1.7;margin:0}.chord-detail{padding:23px 25px;min-width:0}.segmented{padding:3px;border:1px solid #e6e9de;background:#f5f6ef;border-radius:7px;display:flex}.segmented button{font-size:9px;padding:5px 9px;color:#8a957e;border-radius:5px;white-space:nowrap}.segmented .active{background:white;color:#3e613b;box-shadow:0 1px 3px #293d3010}.fretboard{border-radius:9px;overflow:hidden;min-height:226px;display:flex;flex-direction:column;justify-content:center}.dark-board{background:#1f3029;padding:8px 12px 13px}.light-board{background:#f4f5ed;align-items:center}.neck-svg{width:100%;height:auto;display:block}.light-board>.chord-svg{height:210px;max-width:100%}.board-caption{display:flex;justify-content:space-between;font-size:8px;color:#9fae95;padding:0 10px}.board-caption>span:last-child{letter-spacing:1px}.diagram-legend{display:flex;align-items:center;gap:17px;justify-content:center;padding:13px 0;border-bottom:1px solid #e9ecdf;font-size:9px;color:#96a087}.diagram-legend span{display:flex;align-items:center;gap:5px}.dot{height:7px;width:7px;border-radius:50%;display:inline-block}.root-dot{background:#d29362}.finger-dot{background:#afbc9d}.chord-toolbar{display:flex;align-items:center;justify-content:space-between;gap:10px;margin:16px 0}.primary{display:inline-flex;align-items:center;justify-content:center;gap:9px;background:#294e3c;color:#fffdf0;border:1px solid #294e3c;padding:10px 17px;border-radius:7px;font-size:11px;min-height:40px}.primary:hover{background:#183b2b}.primary .icon{width:16px;height:16px}.toggle{display:inline-flex;align-items:center;gap:7px;cursor:pointer;color:#8d9980;font-size:9px}.toggle input{accent-color:#315c3e;width:14px;height:14px}.fret-code{font-size:10px;color:#98a28a;letter-spacing:1px}.string-details{display:grid;grid-template-columns:repeat(6,1fr);gap:3px;padding-top:13px;border-top:1px solid #e9ecdf}.string-details>div{text-align:center;border-right:1px solid #edf0e5}.string-details>div:last-child{border:0}.string-details span,.string-details small{display:block;font-size:8px;color:#a5ad98}.string-details strong{display:block;font-size:10px;font-weight:500;margin:5px 0;color:#738368}.alternatives{margin-top:30px}.alternatives>.section-title{margin-bottom:16px}.count{font:500 10px var(--font);color:#89987c;background:#e9eee1;border-radius:5px;padding:3px 7px;margin-left:5px;vertical-align:middle}.shape-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(135px,1fr));gap:13px}.shape-card{border:1px solid #e1e6d6;background:#fffefa;border-radius:9px;padding:13px 14px;text-align:left;min-width:0;transition:border-color .15s,background .15s}.shape-card:hover{border-color:#91a67d}.shape-card.selected{border-color:#78936b;background:#f1f5e9;box-shadow:inset 0 0 0 1px #78936b44}.shape-header{display:flex;justify-content:space-between;align-items:center;color:#869779;font-size:9px;min-height:18px}.shape-header .icon{width:15px;height:15px;color:#4c7544}.shape-number{color:#bec6b2;font-size:9px}.shape-card .chord-svg{width:100%;height:153px;display:block;margin:8px 0 10px}.shape-card strong{display:block;font-size:10px;font-weight:550}.shape-caption{font-size:9px;color:#a2ac93;display:block;margin-top:4px;letter-spacing:1px}.bottom-note{display:flex;align-items:center;gap:17px;margin-top:27px;border:1px solid #e5e5d6;background:#eeefe3;border-radius:9px;padding:18px 22px}.round-note{height:40px;width:40px;border-radius:50%;background:#e2e7d3;color:#9ca981;display:flex;align-items:center;justify-content:center;font-size:25px;flex-shrink:0}.bottom-note strong{font-size:12px;font-weight:550}.bottom-note p{font-size:10px;margin:4px 0 0;color:#959f85}.bottom-note>button{margin-left:auto;font-size:10px;display:flex;align-items:center;gap:10px;white-space:nowrap}.bottom-note .icon{width:14px}footer{display:flex;justify-content:space-between;border-top:1px solid #e5e8db;margin:0 46px;padding:20px 0;color:#a4ac97;font-size:9px}footer button{font-size:9px;color:#8d9b7d}.mobile-nav{display:none}.intro-counter{display:flex;flex-direction:column;text-align:right;color:#9aa88a}.intro-counter strong{font:500 76px/1 Manrope,var(--font);color:#c4cdb6;letter-spacing:-4px}.intro-counter span{font-size:8px;letter-spacing:1.5px;margin-top:12px}.filter-row{display:flex;gap:12px;border-top:1px solid #edf0e3;padding-top:14px;margin-top:13px;align-items:center}.filter-row select{max-width:210px}.filter-row>span{margin-left:auto;font-size:9px;color:#9da98e}.inline-note{display:flex;align-items:center;gap:12px;background:#ecefe4;border-radius:8px;padding:13px 17px;color:#859474;margin:0 0 26px}.inline-note .icon{width:17px}.inline-note p{font-size:11px;line-height:1.65;margin:0}.inline-note strong{font-weight:550;color:#687f58}.song-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:15px;margin-bottom:26px}.song-card{position:relative;display:flex;gap:16px;border:1px solid #e2e7d7;background:#fffefa;border-radius:10px;padding:17px;min-height:170px}.song-art{width:89px;min-width:89px;overflow:hidden;border-radius:7px;background:#314d3e;color:#c5d5b2;position:relative;display:flex;align-items:flex-end;padding:10px}.song-art span{font:500 27px Manrope,var(--font);z-index:1;letter-spacing:-2px}.song-art i{position:absolute;width:140px;height:140px;border-radius:50%;border:1px solid #ffffff24;top:-20px;left:30px;box-shadow:0 0 0 11px #ffffff06,0 0 0 23px #ffffff08,0 0 0 36px #ffffff06}.song-art .icon{position:absolute;right:11px;top:12px;opacity:.5}.art-1{background:#ab7559;color:#f3ddc2}.art-2{background:#808b69;color:#f2edcf}.art-3{background:#565f55;color:#dde2d0}.art-4{background:#b39b78;color:#fff5d4}.song-info{min-width:0;flex:1;padding-bottom:24px;padding-right:20px}.pill{display:inline-block;font-size:8px;letter-spacing:.3px;background:#eff3e6;color:#81956e;padding:4px 7px;border-radius:4px}.song-info h3{font:600 15px/1.35 Manrope,var(--font);margin:10px 0 5px;letter-spacing:-.4px}.song-info p{font-size:11px;color:#9ca58f;margin:0}.song-source{font-size:9px;color:#a0aa94;margin-top:13px}.song-source span{display:block;font-size:8px;opacity:.8;margin-top:3px}.song-actions .favorite{position:absolute;right:12px;top:12px;width:27px;height:27px;border:0}.song-actions .icon{width:15px;height:15px}.source-link{position:absolute;right:16px;bottom:15px;color:#6c8660;font-size:9px;display:flex;gap:6px;align-items:center}.source-link:hover{color:#254d35;text-decoration:underline}.muted{font-size:10px;color:#9aa68c}.outline{border:1px solid #d8e0cc;border-radius:7px;background:#fffefa;color:#658054;padding:10px 15px;font-size:10px;display:inline-flex;gap:8px;align-items:center;justify-content:center;min-height:40px}.outline .icon{width:15px}.outline:hover{background:#edf2e5}.practice-grid{display:grid;grid-template-columns:245px minmax(0,1fr);gap:22px;margin-top:30px}.study-list{padding:20px 15px}.study-list .section-title{padding:0 7px}.study-item{display:flex;align-items:center;gap:14px;padding:16px 10px;width:100%;text-align:left;border-radius:7px;border-bottom:1px solid #eff1e8}.study-item>span{color:#b2bca3;font-size:10px}.study-item>div{flex:1}.study-item strong{display:block;font-size:12px;font-weight:500}.study-item small{display:block;font-size:9px;color:#9ca98c;margin-top:4px}.study-item>.icon{width:13px;height:13px;color:#a9b29d}.study-item.active{background:#eef3e5}.study-item.active>span,.study-item.active>.icon{color:#4a6f38}.study-detail{padding:25px;min-width:0}.study-detail h2{font-size:24px;margin-top:10px}.study-detail .section-title p{font-size:11px}.tab-scroll{overflow-x:auto;background:#f3f5ed;border-radius:8px;border:1px solid #e8ecdf;padding:25px 16px 16px;scroll-behavior:smooth;position:relative}.tab-grid{min-width:max-content;position:relative}.tab-row{display:grid;grid-template-columns:24px repeat(var(--notes),38px);height:29px;align-items:center;font:13px ui-monospace,SFMono-Regular,Consolas,monospace}.tab-row b{font-weight:500;color:#a0ac90}.tab-note{position:relative;display:flex;justify-content:center;align-items:center;height:29px}.tab-note::before{content:'';height:1px;background:#c7d0b9;position:absolute;top:50%;left:0;right:0}.tab-note i{background:#f3f5ed;position:relative;z-index:1;font-style:normal;padding:0 3px;color:#3e5d31}.tab-note i:empty{padding:0}.tab-note.current{background:#d9e7c5}.tab-note.current i{background:#d9e7c5;font-weight:bold}.durations{font-size:9px;color:#a3b08f;text-align:center;margin-top:9px}.practice-controls{display:flex;align-items:center;gap:15px;margin:20px 0 12px;flex-wrap:wrap}.practice-controls label{font-size:10px;color:#8d9d7c}.practice-controls input,.metronome input{width:51px;border:1px solid #dce3ce;background:#fffef9;border-radius:5px;padding:7px 3px;text-align:center;color:#5c764b;font-size:11px;margin:0 4px}.practice-controls>.outline{margin-left:auto}.tab-hint{font-size:9px;color:#a0ac90;margin:0;line-height:1.8}.teacher-tip{border-top:1px solid #e8ecdf;margin-top:23px;padding-top:20px;display:flex;gap:12px;color:#839b6c}.teacher-tip .icon{width:18px;margin-top:2px}.teacher-tip strong{font-size:11px;font-weight:500;color:#5c7c45}.teacher-tip p{font-size:11px;margin:7px 0;line-height:1.8;color:#92a17f}.practice-bottom{display:grid;grid-template-columns:1.2fr 1fr;gap:22px;margin-top:23px}.metronome{display:flex;align-items:center;gap:10px;padding:24px;flex-wrap:wrap}.metronome h2{font-size:16px}.metronome p{font-size:9px;color:#9aa98a;margin:5px 0}.metronome>span{font-size:9px;color:#8c9e79}.metro-dots{display:flex;gap:7px;margin:0 auto}.metro-dots i{height:9px;width:9px;border-radius:50%;background:#e3e9d8}.metro-dots i.on{background:#bd8152;box-shadow:0 0 0 4px #d6b59644}.own-tabs{padding:24px}.own-tabs p{font-size:11px;color:#9ca98b}.own-tab-row{display:flex;align-items:center;justify-content:space-between;border-top:1px solid #edf0e3;padding:8px 0}.own-tab-row>button:first-child{display:flex;align-items:center;gap:9px;font-size:11px;text-align:left}.favorite-chords{display:flex;flex-wrap:wrap;gap:12px;margin:18px 0 30px}.favorite-chord{display:flex;align-items:center;gap:20px;border:1px solid #dfe7d2;background:#fffefa;border-radius:9px;padding:15px 20px}.favorite-chord>button:first-child{font-size:25px;font-family:Manrope,var(--font);min-width:45px}.study-favorites{display:grid;grid-template-columns:repeat(2,1fr);gap:15px;margin:18px 0 28px}.study-favorites>button{display:flex;align-items:center;gap:15px;padding:20px;text-align:left}.study-favorites strong{font-size:12px}.study-favorites span{font-size:10px;color:#9aa88a}.study-favorites .icon:last-child{margin-left:auto}.empty{padding:45px 25px;text-align:center;grid-column:1/-1}.empty h3{font-weight:500}.empty p{color:#9da78f;font-size:12px}.empty button{margin-top:12px}#toast{position:fixed;bottom:25px;left:50%;transform:translateX(-50%) translateY(20px);background:#243f30;color:#f9f8ed;box-shadow:0 4px 20px #1c302f20;border-radius:10px;padding:14px 22px;max-width:90vw;font-size:12px;z-index:100;pointer-events:none;opacity:0;transition:.2s}#toast.show{opacity:1;transform:translateX(-50%) translateY(0)}dialog{border:1px solid #e0e7d4;border-radius:15px;max-width:700px;width:calc(100% - 32px);padding:0;max-height:85vh;background:#fffefa;color:var(--ink);box-shadow:0 25px 100px #15271955}dialog::backdrop{background:#192c2655;backdrop-filter:blur(3px)}.modal-header{display:flex;justify-content:space-between;align-items:center;padding:23px 28px;border-bottom:1px solid #e4ead9;position:sticky;top:0;background:#fffefa;z-index:2}.modal-header h2{font-size:20px}.modal-content{padding:24px 28px;font-size:13px;color:#7d8f6c;line-height:1.85}.modal-content h3{font-size:14px;font-weight:600;color:#3a5731;margin-top:0}.modal-content p{margin:0 0 16px}.guide-grid{display:grid;grid-template-columns:1fr 1fr;gap:22px}.guide-grid p{font-size:12px}.modal-content label{display:block;font-size:12px;color:#5d784b;margin:0 0 6px}.modal-content input,.modal-content textarea{width:100%;border:1px solid #d9e4ca;border-radius:7px;padding:12px;margin-bottom:19px;background:#fcfdf7;color:#395231}.modal-content textarea{font:12px/1.7 ui-monospace,Consolas,monospace;resize:vertical;white-space:pre}.custom-tab{overflow:auto;background:#f1f5e7;padding:20px;font-size:12px}.install-illustration{background:#edf3e2;border-radius:12px;display:flex;align-items:center;justify-content:center;width:80px;height:80px;margin:0 auto 25px}.install-illustration .icon{width:40px;height:40px;color:#719359}.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}@media(min-width:1500px){main{padding-top:48px}.chord-workspace{grid-template-columns:290px minmax(0,1fr)}.fretboard{min-height:270px}.shape-card .chord-svg{height:175px}}
@media(max-width:1190px){.sidebar{width:205px;padding-left:13px;padding-right:13px}.workspace{margin-left:205px}.brand>span{font-size:21px}.brand img{width:30px;height:30px}header{padding:0 28px}main{padding:30px 28px}.chord-workspace{grid-template-columns:225px minmax(0,1fr);gap:17px}.chord-selector{padding:20px 17px}.chord-detail{padding:20px 17px}.fretboard{min-height:210px}.fret-code{display:none}.diagram-legend{gap:10px;font-size:8px}.chord-toolbar{flex-wrap:wrap}.section-title{gap:8px}.section-title h2{font-size:14px}.segmented button{padding:5px 6px;font-size:8px}.song-card{padding:14px;gap:12px}.song-art{width:65px;min-width:65px}.song-info h3{font-size:13px}.practice-grid{grid-template-columns:210px minmax(0,1fr)}.practice-bottom{grid-template-columns:1fr}.intro-mark{margin-right:0}.intro-mark>span{font-size:80px}.intro-mark i{width:120px;height:120px}}
@media(max-width:950px){.sidebar{width:190px}.workspace{margin-left:190px}main{padding:27px 22px}.brand>span{font-size:18px}.brand img{width:29px;height:29px}.brand small{font-size:6.5px}.nav-item{font-size:11px;padding-left:12px;gap:9px}.chord-workspace{grid-template-columns:1fr}.chord-selector{display:grid;grid-template-columns:1fr 1fr;column-gap:24px;align-items:start}.chord-selector .section-title{grid-column:1/-1;margin-bottom:0}.chord-selector>.field-label{grid-column:1;margin-top:14px}.note-grid{grid-column:1}.chord-selector>select{grid-column:1}.chord-identity{grid-column:2;grid-row:2/6;margin-top:15px;padding:0 0 0 23px;border-top:0;border-left:1px solid var(--line)}.teacher-note{grid-column:1/-1;margin-top:20px;padding-top:13px}.fretboard{min-height:210px}.chord-toolbar{flex-wrap:nowrap}.fret-code{display:block}.song-grid{grid-template-columns:1fr}.intro-mark{display:none}.practice-grid{grid-template-columns:1fr}.study-list{display:flex;flex-wrap:wrap;gap:6px;padding:15px}.study-list .section-title{width:100%;margin:0 0 10px}.study-item{width:calc(50% - 3px);padding:12px}.study-item>.icon{display:none}.study-favorites{grid-template-columns:1fr}.bottom-note{padding:17px}.bottom-note>button{white-space:normal}.filter-row>span{display:none}.tuning{display:none}}
@media(max-width:680px){.sidebar{display:none}.workspace{margin-left:0}header{height:63px;padding:0 21px}.breadcrumb{font-size:10px}.breadcrumb strong{font-size:10px}.breadcrumb span{margin:0 8px}.header-right{gap:6px;font-size:8px}.avatar{margin-left:6px;width:27px;height:27px;font-size:9px}main{padding:28px 19px 30px}.page-intro{margin-bottom:23px}.eyebrow{font-size:8px;letter-spacing:1.8px;margin-bottom:12px}h1{font-size:35px;letter-spacing:-1.7px;line-height:1.18;margin-bottom:15px}.page-intro p{font-size:11px;max-width:270px;line-height:1.7}.search-card{padding:12px 14px;margin-bottom:20px}.search-field input{font-size:13px;padding:9px 0}.quick-search{gap:5px;flex-wrap:wrap;margin-top:12px}.quick-search>span{width:100%;font-size:9px;margin-bottom:1px}.quick-search button{padding:5px 9px;font-size:10px;min-width:34px}.chord-workspace{gap:17px}.chord-selector{padding:18px 15px;column-gap:15px;grid-template-columns:1.15fr .85fr}.note-grid{gap:4px}.note-grid button{height:32px;font-size:10px;padding:0}.chord-selector>.field-label{font-size:8px;margin:15px 0 8px}.chord-selector>select{font-size:10px;padding:9px 7px}.chord-identity{padding-left:15px}.chord-identity strong{font-size:37px}.chord-identity .icon-btn{width:28px;height:28px;border:none}.chord-identity p{font-size:10px}.note-pills{gap:4px}.note-pills span{padding:4px 6px;font-size:9px}.teacher-note{padding-top:12px;margin-top:16px}.teacher-note p{font-size:10px}.chord-detail{padding:19px 14px}.section-title h2{font-size:14px}.section-title p{font-size:9px}.segmented button{font-size:8px;padding:6px}.fretboard{min-height:150px}.dark-board{padding:8px 1px 12px}.neck-svg{min-height:132px}.board-caption{font-size:7px;padding:0 10px}.diagram-legend{font-size:8px;gap:11px;padding:12px 0;flex-wrap:wrap}.chord-toolbar{margin:15px 0}.fret-code{display:none}.toggle{font-size:9px}.primary{padding:10px 13px;font-size:10px}.string-details{padding-top:13px}.string-details strong{font-size:9px}.alternatives{margin-top:24px}.alternatives .section-title{align-items:start}.alternatives .section-title h2{font-size:13px}.alternatives .section-title p{font-size:9px;max-width:200px}.alternatives .toggle{font-size:8px;white-space:nowrap;margin-top:4px;gap:3px}.alternatives .toggle input{width:12px;height:12px}.shape-grid{grid-template-columns:repeat(2,minmax(0,1fr));gap:11px}.shape-card{padding:12px}.shape-card .chord-svg{height:146px;margin:6px 0}.shape-card strong{font-size:10px}.bottom-note{padding:17px 15px;gap:12px;flex-wrap:wrap}.bottom-note .round-note{width:32px;height:32px;font-size:22px}.bottom-note>div{flex:1;min-width:200px}.bottom-note strong{font-size:11px}.bottom-note p{font-size:10px;line-height:1.7}.bottom-note>button{margin-left:44px;font-size:10px}.mobile-nav{position:fixed;bottom:0;left:0;right:0;height:calc(66px + env(safe-area-inset-bottom));padding:5px 10px env(safe-area-inset-bottom);display:flex;z-index:20;background:#fffefaf7;backdrop-filter:blur(12px);border-top:1px solid #e0e5d6;box-shadow:0 -3px 15px #273e3105}.mobile-nav button{flex:1;display:flex;align-items:center;justify-content:center;flex-direction:column;gap:4px;font-size:9px;color:#a0a992;border-radius:10px}.mobile-nav .icon{width:19px;height:19px}.mobile-nav .active{color:#315c35;background:#edf2e6}.mobile-nav .active span{font-weight:650}footer{margin:0 20px;padding:19px 0 calc(85px + env(safe-area-inset-bottom));font-size:8px}footer button{font-size:8px}#toast{bottom:calc(78px + env(safe-area-inset-bottom));font-size:11px;width:max-content;max-width:90vw}.intro-counter strong{font-size:48px}.intro-counter span{font-size:6px;max-width:75px;line-height:1.8;letter-spacing:1px}.intro-counter{align-self:center}.filter-row{gap:7px}.filter-row select{font-size:10px;max-width:none;min-width:0}.inline-note{padding:13px;align-items:flex-start;gap:8px;flex-wrap:wrap}.inline-note .icon{width:15px;margin-top:3px}.inline-note p{flex:1;font-size:10px;min-width:180px}.inline-note>.outline{margin-left:23px}.song-card{gap:14px;min-height:177px;padding:15px}.song-art{width:77px;min-width:77px}.song-info h3{font-size:15px}.song-info{padding-right:14px}.song-source{font-size:9px}.source-link{font-size:10px}.song-actions .favorite{height:32px;width:32px;right:8px;top:10px}.song-grid{gap:13px}.section-title .muted{display:none}.page-intro>.outline{font-size:9px;width:90px;flex-shrink:0;align-self:flex-start;margin-top:30px;padding:8px;gap:3px;line-height:1.6}.practice-grid{gap:16px;margin-top:20px}.study-list{padding:16px 12px}.study-item{gap:8px}.study-item strong{font-size:11px}.study-item small{font-size:8px}.study-detail{padding:20px 14px}.study-detail h2{font-size:22px}.study-detail .section-title p{font-size:9px}.practice-controls{gap:10px}.practice-controls .primary{font-size:10px}.practice-controls label{font-size:9px}.practice-controls>.outline{font-size:9px;margin-left:0;padding:7px 10px;min-height:34px}.tab-scroll{padding:18px 10px 12px}.teacher-tip p{font-size:10px}.practice-bottom{margin-top:16px;gap:16px}.metronome{padding:20px 15px;gap:8px}.metro-dots{gap:6px}.metronome h2{font-size:14px}.metronome p{font-size:8px}.metronome input{font-size:10px;width:40px}.own-tabs{padding:20px 16px}.study-favorites>button{gap:10px}.study-favorites span{font-size:8px}.favorite-chords{gap:9px}.favorite-chord{padding:10px 14px;gap:8px}.favorite-chord>button:first-child{font-size:23px}.modal-header{padding:18px}.modal-header h2{font-size:17px}.modal-content{padding:20px 18px}.guide-grid{grid-template-columns:1fr;gap:10px}.modal-content p{font-size:12px}.custom-tab{padding:13px;font-size:11px}}
@media(prefers-reduced-motion:reduce){*{scroll-behavior:auto!important;transition:none!important}}
.avatar{display:inline-flex;align-items:center;justify-content:center;padding:5px}.avatar .icon{width:17px;height:17px}.page-intro p,.section-title p,.teacher-note p,.chord-identity p,.bottom-note p,.song-info p,.tab-hint,.teacher-tip p{color:#74816a}.field-label,.quick-search>span,.diagram-legend,.toggle,.string-details span,.string-details small,.shape-caption,.song-source,.study-item small{color:#748369}.field-label{font-size:10px}.teacher-note p{font-size:11px}.shape-card strong{font-size:11px}.board-caption{color:#c1ccb7}.source-link{font-size:11px}.pill{font-size:9px}.tab-hint{font-size:10px}.teacher-tip p{font-size:12px}.note-pills span{color:#5e734e}.shape-header{color:#6a8258}.mobile-nav button{color:#718363}.mobile-nav .active{color:#244f2e}.quick-search button{min-height:32px}.section-title>span{color:#849477}
@media(max-width:680px){.search-field input{font-size:16px}.teacher-note p{font-size:11px}.field-label,.chord-selector>.field-label{font-size:10px}.section-title p,.alternatives .section-title p{font-size:10px}.diagram-legend{font-size:10px;gap:10px}.chord-identity p,.toggle,.alternatives .toggle{font-size:10px}.note-pills span{font-size:11px}.string-details strong{font-size:10px}.string-details span,.string-details small{font-size:9px}.shape-card strong{font-size:11px}.shape-caption{font-size:10px}.shape-header{font-size:10px}.inline-note p,.bottom-note p{font-size:11px}.study-item strong{font-size:12px}.study-item small{font-size:10px}.teacher-tip p{font-size:11px}.tab-hint{font-size:10px}.tab-row{font-size:15px}.durations{font-size:10px}.mobile-nav button{font-size:10px}.modal-content input,.modal-content textarea{font-size:16px}.study-detail .section-title p{font-size:10px}.practice-controls label{font-size:10px}.practice-controls input{font-size:16px;width:55px}.practice-controls>.outline{font-size:11px}.chord-identity .icon-btn{width:34px;height:34px}.song-actions .favorite{width:36px;height:36px}}