:root{--ink:#182e40;--muted:#566675;--line:#dce3e9;--paper:#fff;--bg:#f3f6f8;--accent:#a64624;--amber:#f0c36b;--blue:#215d85;--soft:#eaf1f6;--root:#a64624;font-family:system-ui,-apple-system,"Segoe UI","Microsoft YaHei",sans-serif;color:var(--ink);background:var(--bg);font-size:16px;font-synthesis:none}*{box-sizing:border-box}html{scroll-behavior:smooth;scroll-padding-top:100px}body{margin:0;line-height:1.75}button,select,input{font:inherit}button,select{min-height:44px}button{cursor:pointer;border:1px solid var(--line);border-radius:8px;background:white;color:var(--ink);padding:9px 17px;font-weight:600}button:hover{background:var(--soft)}button:focus-visible,a:focus-visible,input:focus-visible,select:focus-visible,summary:focus-visible{outline:3px solid var(--blue);outline-offset:3px}button.primary{background:var(--ink);color:white;border-color:var(--ink)}button.primary:hover{background:#29465c}button.selected{background:var(--ink);color:white;border-color:var(--ink)}a{color:var(--blue)}h1,h2,h3,p{margin-top:0}h1{font-size:clamp(1.8rem,3.7vw,2.7rem);line-height:1.3;letter-spacing:-.035em;margin-bottom:14px}h2{font-size:1.65rem;line-height:1.35;margin-bottom:16px}h3{font-size:1.08rem;margin-bottom:8px}p{margin-bottom:14px}svg{max-width:100%;display:block}label{display:flex;flex-direction:column;gap:6px;font-size:.9rem;font-weight:600}select{border:1px solid #a7b6c2;background:white;color:var(--ink);border-radius:7px;padding:8px 34px 8px 12px;max-width:100%}.top{background:var(--ink);color:white;position:sticky;top:0;z-index:10;min-height:74px;padding:12px 5%;display:flex;justify-content:space-between;align-items:center;gap:12px}.brand{color:white;text-decoration:none;display:flex;align-items:center;gap:12px;font-size:1.2rem;font-weight:700}.brand-mark{display:grid;place-items:center;background:var(--amber);color:var(--ink);width:37px;height:37px;border-radius:8px;font-family:Georgia,serif;font-weight:bold}.top-note{font-size:.88rem;color:#cbd8e2}.layout{max-width:1370px;margin:auto;display:grid;grid-template-columns:215px minmax(0,1fr)}.sidebar{position:sticky;top:74px;height:calc(100vh - 74px);padding:37px 19px;border-right:1px solid var(--line)}.side-title,.mini-label,.eyebrow{font-size:.78rem;letter-spacing:.13em;font-weight:700;color:var(--muted)}.side-title{margin:0 0 20px 12px}nav{display:flex;flex-direction:column;gap:7px}nav a{display:flex;gap:14px;padding:11px 12px;text-decoration:none;color:var(--muted);border-radius:7px;font-size:.94rem}nav a span{font-size:.8rem;opacity:.8}nav a.active{background:var(--ink);color:white}nav a:hover{box-shadow:inset 0 0 0 1px #889eaf}.side-bottom{font-size:.8rem;margin:40px 12px;color:var(--muted)}.side-bottom b{font-size:1rem;letter-spacing:.14em;line-height:2.5}main{padding:40px clamp(20px,4vw,58px) 0;min-width:0}.chapter{padding-bottom:62px;scroll-margin-top:20px}.chapter+.chapter{padding-top:30px;border-top:1px solid var(--line)}.eyebrow{color:var(--accent);margin-bottom:12px}.intro{font-size:1rem;color:var(--muted);max-width:640px;margin-bottom:24px}.workbench{background:var(--paper);border:1px solid var(--line);border-radius:14px;overflow:hidden;box-shadow:0 8px 24px #182e4005}.controls{display:flex;gap:20px;align-items:end;justify-content:space-between;flex-wrap:wrap;border-bottom:1px solid var(--line);padding:20px 26px}.controls label{min-width:155px}.segmented{display:flex;flex-wrap:wrap;gap:5px}.segmented button{font-size:.88rem;padding:8px 13px}.chord-content{display:grid;grid-template-columns:1.05fr 1fr;gap:28px;align-items:center;padding:24px}.diagram-wrap{min-width:0}.legend{display:flex;gap:19px;justify-content:center;font-size:.85rem;flex-wrap:wrap}.root-dot{display:inline-block;border:3px solid var(--root);border-radius:50%;width:13px;height:13px;vertical-align:-1px}.chord-info h2{font-size:2.2rem;margin:3px 0 10px}.chord-info p{color:var(--muted)}dl{margin:18px 0 22px}dl>div{display:flex;justify-content:space-between;gap:16px;border-bottom:1px solid var(--line);padding:9px 0}dt{color:var(--muted)}dd{margin:0;font-weight:600}.caption{font-size:.8rem;margin-top:12px}.bench-foot{background:#f7f9fb;padding:14px 24px;border-top:1px solid var(--line);font-size:.85rem;color:var(--muted)}.notes-grid{display:grid;grid-template-columns:1fr 1fr;gap:28px;margin:26px 0}.notes-grid article{padding-left:16px;border-left:3px solid var(--amber)}.notes-grid p{font-size:.94rem;color:var(--muted);margin-bottom:0}details{border-top:1px solid var(--line);border-bottom:1px solid var(--line);padding:15px 0}details+details{border-top:0}summary{cursor:pointer;font-weight:600}details p{padding-top:15px;color:var(--muted)}table{border-collapse:collapse;width:100%;font-size:.9rem;margin:16px 0}th,td{padding:11px 12px;border-bottom:1px solid var(--line);text-align:left}th{background:var(--soft);font-weight:600}.table-scroll{overflow-x:auto}.section-body{padding:24px}.section-body h3{margin-top:20px}.section-body h3:first-child{margin-top:0}.button-row{display:flex;gap:8px;flex-wrap:wrap}.scale-strip{display:flex;gap:8px;flex-wrap:wrap;margin:20px 0}.scale-note{min-width:58px;text-align:center;display:flex;flex-direction:column;align-items:center;gap:3px}.scale-note small{font-weight:400;color:var(--muted)}.formula{font-size:1.1rem;letter-spacing:.08em;background:var(--soft);padding:17px 20px;border-radius:8px;overflow-wrap:anywhere}.tip{border-left:3px solid var(--accent);padding:9px 16px;margin:18px 0;color:var(--muted);font-size:.95rem}.beat-dots{display:flex;gap:12px;flex-wrap:wrap;margin:28px 0}.beat{height:57px;width:57px;display:grid;place-items:center;border:1px solid var(--line);border-radius:50%;font-weight:600}.beat.strong{border:2px solid var(--accent)}.beat.on{background:var(--ink);color:white}.bpm-control{display:flex;align-items:center;gap:15px;flex-wrap:wrap}.bpm-control input{width:min(100%,300px);accent-color:var(--ink)}.tech-layout{display:grid;grid-template-columns:1fr 1fr;gap:28px}.tab-example{font-family:ui-monospace,Consolas,monospace;white-space:pre;overflow:auto;background:var(--ink);color:#f3d594;padding:20px;border-radius:8px;font-size:1.2rem;line-height:2}.tech-steps{padding-left:23px}.tech-steps li{margin:9px 0}.fret-scroll{overflow-x:auto;padding:8px 0 15px}.fret-grid{display:grid;grid-template-columns:48px repeat(13,minmax(48px,1fr));min-width:750px;gap:0;align-items:center}.fret-head{text-align:center;color:var(--muted);font-size:.8rem;padding:5px 0}.string-label{text-align:center;font-size:.83rem;font-weight:600}.fret-cell{height:49px;background:linear-gradient(transparent 48%,#b8c2cb 48%,#b8c2cb 52%,transparent 52%);border:0;border-right:1px solid #b9c5ce;border-radius:0;padding:0;min-width:0}.fret-cell span{background:white;display:inline-grid;place-items:center;min-width:34px;min-height:32px;font-size:.82rem;border-radius:20px}.fret-cell.root-note span{background:var(--ink);color:white}.fret-cell.picked span{outline:3px solid var(--accent);outline-offset:2px}.fret-cell.open{border-right:4px solid var(--ink)}.fret-caption{font-size:.86rem;color:var(--muted);margin-top:8px}.selection-detail{padding:15px 0;font-weight:600;min-height:58px}.audio-status{font-size:.9rem;color:var(--muted)}footer{border-top:1px solid var(--line);padding:28px 0 35px;color:var(--muted);font-size:.88rem}footer span{font-size:.78rem}#audio-message:not(:empty){position:fixed;bottom:20px;left:50%;transform:translateX(-50%);background:var(--ink);color:white;padding:12px 20px;border-radius:8px;z-index:20;width:max-content;max-width:90vw}@media(max-width:950px){.layout{grid-template-columns:175px minmax(0,1fr)}.sidebar{padding:30px 10px}.chord-content{gap:14px;padding:18px}.tech-layout{grid-template-columns:1fr}.controls{padding:18px}.top{padding:12px 24px}main{padding-left:24px;padding-right:24px}}@media(max-width:680px){html{scroll-padding-top:155px}.top{min-height:64px;padding:12px 18px}.top-note{font-size:.75rem}.layout{display:block}.sidebar{top:64px;height:auto;padding:8px 12px;background:var(--bg);z-index:9;border-right:0;border-bottom:1px solid var(--line)}.side-title,.side-bottom{display:none}nav{flex-direction:row;gap:5px;flex-wrap:wrap}nav a{font-size:.8rem;padding:6px 9px;min-height:36px;align-items:center}nav a span{display:none}main{padding:27px 17px 0}.chord-content{grid-template-columns:1fr;padding:18px}.diagram-wrap{max-width:355px;width:100%;margin:auto}.chord-info{padding:8px 6px}.chord-info h2{font-size:1.8rem}.notes-grid{grid-template-columns:1fr;gap:20px}.controls{gap:12px}.controls label{min-width:130px}.section-body{padding:18px}.chapter{padding-bottom:42px}.beat{width:49px;height:49px}.bench-foot{padding:13px 18px}.intro{font-size:.95rem}.chord-info dl{margin-top:10px}.top-note{max-width:115px;text-align:right}}@media(prefers-reduced-motion:reduce){html{scroll-behavior:auto}*{animation:none!important;transition:none!important}}

.chord-pickers{display:flex;flex-wrap:wrap;gap:16px}.chord-pickers label{min-width:155px}.jianpu-example{padding:18px 20px;background:#fffaf0;border:1px solid #e9ddc5;border-radius:10px;color:var(--ink)}.jianpu-meta{display:flex;justify-content:space-between;gap:12px;flex-wrap:wrap;font-size:.9rem}.jianpu-example svg{width:100%;max-width:360px;margin:auto;fill:currentColor}.jianpu-note{font:500 40px Georgia,serif;text-anchor:middle}.jianpu-link{font:14px system-ui;text-anchor:middle}.jianpu-reading{text-align:center;font-weight:600}.jianpu-example .caption{margin-bottom:0}.chord-pickers select{width:100%}@media(max-width:420px){.chord-pickers{width:100%;gap:10px}.chord-pickers label{flex:1;min-width:0}.chord-pickers select{padding-left:8px;font-size:.9rem}}