:root{--paper:#f9f8f4;--ink:#352c25;--muted:#776f65;--line:#d9d3c8;--brown:#4b3a2b;--accent:#a44b32;--sand:#eee8dd;--serif:"Noto Serif SC","Songti SC","STSong","SimSun",serif;--sans:"PingFang SC","Microsoft YaHei",system-ui,sans-serif}*{box-sizing:border-box}html{scroll-behavior:smooth;scroll-padding-top:110px}body{margin:0;background:var(--paper);color:var(--ink);font-family:var(--sans);font-size:16px;line-height:1.7}button,input,select{font:inherit}button,a,input,select{-webkit-tap-highlight-color:transparent}button,a{touch-action:manipulation}a{color:inherit;text-decoration:none}button{color:inherit;cursor:pointer}button:disabled{cursor:not-allowed}button{background:none}a:focus-visible,button:focus-visible,input:focus-visible,select:focus-visible{outline:2px solid var(--accent);outline-offset:5px}button:hover,a:hover{color:var(--accent)}.skip-link{position:fixed;top:-100px;padding:10px 20px;background:white;z-index:100}.skip-link:focus{top:10px}.header{height:100px;display:flex;align-items:center;justify-content:space-between;padding:0 5.5%;border-bottom:1px solid var(--line);background:var(--paper);position:relative;z-index:3}.brand{display:flex;align-items:center;gap:14px;font:600 25px var(--serif);letter-spacing:3px}.brand small{display:block;font:10px var(--sans);letter-spacing:2.1px;margin-top:8px}.brand-mark{width:29px;display:grid;gap:6px;transform:rotate(-12deg)}.brand-mark i{height:1px;background:var(--ink);display:block}.brand-mark i:nth-child(2){width:23px}.desktop-nav{display:flex;gap:43px;font-size:15px}.login-link{font-size:14px;display:flex;gap:25px;border-bottom:1px solid var(--ink);padding-bottom:5px}.hero{min-height:570px;position:relative;isolation:isolate;overflow:hidden;display:grid;grid-template-columns:49% 51%}.hero-art{position:relative;overflow:hidden;min-height:570px;mix-blend-mode:multiply}.hero-art img{position:absolute;width:1160px;max-width:none;left:-165px;top:-65px}.art-label{position:absolute;bottom:31px;left:11%;font-size:12px;letter-spacing:3px;background:var(--paper);padding:5px 9px}.art-label b{font-weight:400;font-size:12px;letter-spacing:2px}.hero-copy{position:relative;padding:63px 8% 35px 9%;z-index:1}.eyebrow{font-size:12px;letter-spacing:2.6px;color:var(--accent);margin:0 0 24px}.hero h1{font:500 clamp(40px,4.5vw,66px)/1.35 var(--serif);letter-spacing:3px;margin:0 0 22px}.hero h1 span{color:var(--accent)}.hero-intro{color:var(--muted);font-size:15px;line-height:1.95;margin-bottom:30px}.hero-actions{display:flex;align-items:center;gap:27px}.button{border:1px solid var(--brown);display:inline-flex;justify-content:center;align-items:center;gap:30px;background:var(--brown);color:white;padding:12px 25px;font-size:14px;min-height:49px;transition:background .25s,transform .25s}.button:hover{background:var(--accent);border-color:var(--accent);color:white;transform:translateY(-2px)}.text-link{font-size:14px;border-bottom:1px solid var(--line);padding:10px 0}.hero-note{display:flex;gap:30px;margin-top:39px;color:var(--muted);font-size:12px;letter-spacing:2px}.hero-line{position:absolute;bottom:-60px;right:-70px;width:460px;opacity:.26;z-index:-1;stroke:var(--brown);stroke-width:1}.chapter-nav{display:grid;grid-template-columns:repeat(5,1fr);padding:26px 5.5%;border-top:1px solid var(--line);border-bottom:1px solid var(--line)}.chapter-nav a{padding:3px 0 3px 25px;border-left:1px solid var(--line);transition:transform .25s}.chapter-nav a:first-child{border:0;padding-left:0}.chapter-nav small{display:block;color:var(--muted);font-size:11px;letter-spacing:2px;margin-bottom:6px}.chapter-nav span{font-size:14px}.chapter-nav a:hover{transform:translateY(-3px)}.section{padding:83px 6.5%;scroll-margin-top:20px}.section-heading{display:flex;align-items:flex-end;justify-content:space-between;margin-bottom:35px;gap:30px}.section-heading .eyebrow{margin-bottom:13px}.section-heading h2{font:500 34px/1.5 var(--serif);letter-spacing:2px;margin:0}.section-heading>p{text-align:right;margin:0;font-size:14px}.section-heading>p span{color:var(--muted);font-size:13px}.lessons-layout{display:grid;grid-template-columns:1fr 1.4fr;gap:50px}.lesson-feature{background:var(--sand);padding:34px 38px;position:relative;overflow:hidden;min-height:320px}.outline-label{font-size:11px;border:1px solid #b6a89a;padding:4px 10px;letter-spacing:2px}.lesson-feature h3{font:500 30px/1.5 var(--serif);margin:20px 0 14px}.lesson-feature p{font-size:14px;color:var(--muted)}.round-link{border:0;border-bottom:1px solid var(--ink);padding:8px 0;font-size:14px;display:flex;gap:52px;position:relative;z-index:1}.feature-number{position:absolute;right:12px;bottom:-50px;font:220px Georgia,serif;color:#a894752b}.lesson-list{display:flex;flex-direction:column;justify-content:space-between}.lesson-list>button{width:100%;display:flex;gap:24px;align-items:center;text-align:left;border:0;border-bottom:1px solid var(--line);padding:22px 0}.lesson-list>button:first-child{padding-top:10px}.lesson-number{font:italic 25px Georgia,serif;color:#998776}.lesson-list b{font-weight:500;font-size:17px}.lesson-list small{display:block;color:var(--muted);font-size:12px;margin-top:4px}.lesson-tag{margin-left:auto;font-size:11px;border:1px solid var(--line);padding:2px 8px;white-space:nowrap}footer{margin:0 6.5%;padding:33px 0;display:flex;align-items:center;justify-content:space-between;gap:24px;border-top:1px solid var(--line);font-size:12px;color:var(--muted)}.footer-brand{font-size:20px;color:var(--ink)}dialog{border:1px solid var(--line);background:var(--paper);color:var(--ink);max-width:660px;width:calc(100% - 36px);max-height:85vh;padding:45px;line-height:1.9}dialog::backdrop{background:#241a1380;backdrop-filter:blur(5px)}.dialog-close{position:absolute;right:18px;top:10px;font-size:30px;border:0}.dialog-title{font:30px var(--serif)}#toast{position:fixed;bottom:24px;left:50%;transform:translateX(-50%);max-width:90%;padding:12px 24px;background:var(--brown);color:white;z-index:20;font-size:14px;display:none}#toast.show{display:block}.reveal{opacity:0;transform:translateY(28px);transition:opacity .85s,transform .85s}.reveal.visible{opacity:1;transform:translateY(0)}.reveal.from-above{transform:translateY(-24px)}.reveal.from-above.visible{transform:translateY(0)}.draw-lines path{stroke-dasharray:1000;stroke-dashoffset:1000;animation:draw 3.5s ease forwards}.draw-lines path:nth-child(2){animation-delay:.2s}.draw-lines path:nth-child(3){animation-delay:.4s}@keyframes draw{to{stroke-dashoffset:0}}
@media(min-width:1600px){.hero{min-height:640px}.hero-art{min-height:640px}.hero-art img{width:1350px;left:-130px;top:-70px}.hero-copy{padding-top:95px}.hero-line{width:650px}}@media(max-width:1000px){.header{padding:0 4%;height:85px}.desktop-nav{gap:23px}.hero-art img{left:-240px}.hero-copy{padding:60px 5% 35px}.hero h1{font-size:44px}.hero-actions{gap:15px;flex-wrap:wrap}.chapter-nav{padding:24px 4%}.chapter-nav a{padding-left:12px}.chapter-nav span{font-size:12px}.section{padding:65px 5%}.lessons-layout{gap:25px}.section-heading h2{font-size:29px}.lesson-list>button{gap:15px}}@media(max-width:700px){html{scroll-padding-top:20px}.header{height:78px;padding:0 6%}.brand{font-size:22px;gap:10px}.brand small{font-size:9px}.desktop-nav{display:none}.login-link{font-size:12px;gap:12px}.hero{display:flex;flex-direction:column}.hero-art{min-height:290px;height:290px}.hero-art img{width:920px;left:-175px;top:-93px}.art-label{bottom:12px;font-size:10px;left:6%}.hero-copy{padding:29px 7% 36px}.hero .eyebrow{font-size:11px;margin-bottom:14px}.hero h1{font-size:39px;line-height:1.4;margin-bottom:16px}.hero-intro{font-size:14px;margin-bottom:24px}.hero-note{margin-top:25px}.hero-line{bottom:0;width:350px;right:-120px}.chapter-nav{display:flex;overflow-x:auto;padding:20px 6%;gap:22px}.chapter-nav a{flex:0 0 160px;padding-left:22px}.chapter-nav span{font-size:14px}.section{padding:52px 6%}.section-heading{display:block;margin-bottom:25px}.section-heading h2{font-size:28px}.section-heading>p{text-align:left;margin-top:14px}.lessons-layout{grid-template-columns:1fr;gap:24px}.lesson-feature{min-height:305px;padding:30px}.lesson-list>button{padding:19px 0}.lesson-tag{display:none}.lesson-list>button>span:last-child{margin-left:auto}.lesson-list small{font-size:12px}.lesson-list b{font-size:16px}footer{flex-wrap:wrap;font-size:12px;padding:26px 0;margin:0 6%;gap:12px}footer>span{order:3;width:100%}dialog{padding:35px 25px}}
@media(prefers-reduced-motion:reduce){html{scroll-behavior:auto}*,*::before,*::after{animation:none!important;transition:none!important}.reveal{opacity:1;transform:none!important}.draw-lines path{stroke-dashoffset:0}}
.sounds-section{background:#efebe3}.sound-library{display:grid;grid-template-columns:1.05fr 1fr;border:1px solid var(--line)}.sound-intro{position:relative;background:var(--brown);color:var(--paper);padding:40px;overflow:hidden}.sound-intro .outline-label{border-color:#a89683;color:#ddcdbb}.sound-intro h3{font:32px/1.5 var(--serif);margin:27px 0 12px}.sound-intro p{font-size:14px;color:#e0d3c4;position:relative;z-index:1;margin:0}.sound-waves{width:100%;height:90px;stroke:#c6a580;stroke-width:1.1;margin-bottom:14px}.sound-empty{padding:40px;display:flex;align-items:center;justify-content:center;text-align:center;flex-direction:column}.empty-index{font:48px var(--serif);color:#b3a28b}.sound-empty h3,.market-empty h3{font:24px/1.6 var(--serif);margin:20px 0 10px}.sound-empty p,.market-empty p{color:var(--muted);font-size:14px;line-height:1.9}.quiet-label{font-size:12px;color:var(--muted);border-top:1px solid var(--line);margin-top:20px;padding-top:18px}.string-tool{display:grid;grid-template-columns:1.2fr 1fr;border:1px solid var(--line)}.fret-controls{padding:35px 40px}.tool-step{font:italic 18px Georgia,serif;color:var(--accent);margin:0 0 20px}.tool-step span{font:14px var(--sans);color:var(--ink);margin-left:10px}.tool-step small{font:12px var(--sans);color:var(--muted);float:right}.string-selector{display:flex;gap:12px;margin-bottom:30px}.string-selector button{flex:1;border:1px solid var(--line);padding:15px 10px;display:flex;align-items:center;justify-content:space-around;transition:background .2s}.string-selector button span{font-size:14px}.string-selector button b{font:27px Georgia,serif}.string-selector button sub,.note-columns sub{font-size:14px}.string-selector button[aria-pressed=true]{background:var(--brown);color:var(--paper);border-color:var(--brown)}.fret-selector{display:grid;grid-template-columns:repeat(7,1fr);gap:8px}.fret-selector button{min-height:44px;border:1px solid var(--line);font:17px Georgia,serif}.fret-selector button[aria-pressed=true]{color:var(--accent);border-color:var(--accent);background:#a44b320a}.tool-hint{font-size:12px;color:var(--muted);margin:22px 0 0}.note-result{padding:30px 40px;border-left:1px solid var(--line);background:#f1ede5}.note-result-heading{display:flex;justify-content:space-between;font-size:12px;letter-spacing:1px}.note-columns{display:flex;justify-content:space-around;margin-top:20px;text-align:center}.note-columns small{display:block;font-size:12px;color:var(--muted);margin-bottom:10px}.note-columns b{font:48px/1.25 Georgia,serif;position:relative}.note-columns b.upper-octave:before{content:'·';position:absolute;top:-28px;left:50%;transform:translateX(-50%);font-size:28px}.note-result svg{display:block;width:100%;height:128px}.note-bottom{display:flex;justify-content:space-between;align-items:center;font-size:13px;margin-top:2px}.note-bottom button{font-size:14px;border:0;border-bottom:1px solid #ae9e8c;padding:4px 0;min-height:40px}.tone-disclaimer{display:block;margin-top:8px;font-size:12px;color:var(--muted)}.source-note{font-size:12px;color:var(--muted);margin:18px 0 0}.source-note a{border-bottom:1px solid var(--line);margin-left:8px}.market-section{padding-top:30px}.market-toolbar{display:flex;align-items:center;justify-content:space-between;border-bottom:1px solid var(--line)}.market-toolbar>div{display:flex;gap:30px}.market-toolbar button{border:0;border-bottom:2px solid transparent;padding:12px 0;font-size:15px}.market-toolbar button[aria-pressed=true]{border-color:var(--accent);color:var(--accent)}.market-toolbar>span{font-size:12px;color:var(--muted)}.market-empty{text-align:center;padding:65px 20px 30px}.empty-line{display:block;width:48px;height:26px;margin:0 auto;border-top:1px solid #b4a28e;border-bottom:1px solid #b4a28e;position:relative}.empty-line:after{content:'';height:1px;background:#b4a28e;position:absolute;left:0;right:0;top:12px}.blank-section{padding-top:0}.blank-inner{position:relative;padding:55px 20px 92px;text-align:center;border:1px dashed #c6bbaa;overflow:hidden;min-height:335px}.blank-inner .eyebrow{font-size:11px}.blank-symbol{font-size:32px;color:#b8aa98;font-weight:200}.blank-inner h2{font:29px var(--serif);margin:17px 0}.blank-inner p:not(.eyebrow){font-size:14px;color:var(--muted)}.blank-lines{position:absolute;bottom:-38px;right:0;width:65%;stroke:#99806b;stroke-width:1;opacity:.5}.draw-on-view path{stroke-dasharray:1200;stroke-dashoffset:1200;transition:stroke-dashoffset 3s ease}.draw-on-view.is-drawn path{stroke-dashoffset:0}.draw-on-view path:nth-child(2){transition-delay:.15s}.draw-on-view path:nth-child(3){transition-delay:.3s}.practice-box{padding:20px;background:var(--sand);font-size:15px;margin:25px 0}.lesson-intro{color:var(--accent);font-size:16px}.lesson-done{margin-top:24px}.sr-only{position:absolute;width:1px;height:1px;padding:0;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}.login-layout{display:grid;grid-template-columns:1fr 1fr;min-height:710px}.login-art{position:relative;overflow:hidden;border-right:1px solid var(--line);min-height:710px;background:white}.login-art img{position:absolute;width:1330px;left:-240px;top:-100px}.login-art-caption{position:absolute;top:90px;left:40%;right:8%;background:#ffffffed;padding:25px 5px 25px 22px}.login-art-caption h1{font:44px/1.45 var(--serif);margin:0 0 24px}.login-art-caption p:not(.eyebrow){font-size:14px;color:var(--muted)}.login-art-caption .eyebrow{font-size:10px;letter-spacing:1.6px;line-height:1.7}.login-panel{padding:65px 12% 50px;align-self:center}.login-panel>.eyebrow{margin-bottom:16px}.login-panel h2{font:30px/1.5 var(--serif);margin:0}.login-subtitle{font-size:14px;color:var(--muted);margin:13px 0 24px}.preview-notice{font-size:12px;background:var(--sand);padding:10px 15px;margin:0 0 25px;color:#78644d;border-left:2px solid #b09a7d}#email-form label{font-size:14px;display:block;margin-bottom:9px}#email-form input{width:100%;min-height:50px;padding:12px 15px;background:transparent;border:1px solid #c5bdb1;border-radius:0;font-size:15px;color:var(--ink)}.email-button{width:100%;justify-content:space-between;margin-top:16px}.login-divider{position:relative;text-align:center;margin:30px 0 24px;color:var(--muted);font-size:12px}.login-divider:before{content:'';height:1px;background:var(--line);position:absolute;top:50%;left:0;right:0}.login-divider span{background:var(--paper);padding:0 16px;position:relative}.providers{display:flex;justify-content:space-around}.providers button{display:flex;flex-direction:column;align-items:center;border:0;min-width:70px;gap:4px;padding:5px}.provider-symbol{display:flex;align-items:center;justify-content:center;width:48px;height:48px;border:1px solid #c9c0b5;border-radius:50%;margin-bottom:5px;font-size:18px}.provider-symbol.wechat{color:#4b7860}.provider-symbol.qq{font:17px Georgia,serif;color:#42617b}.provider-symbol.bilibili{font:bold 12px Georgia,serif;color:#ad6779}.providers b{font-size:14px;font-weight:400}.providers small{font-size:12px;color:var(--muted)}.login-status{font-size:12px;color:var(--muted);line-height:1.8;min-height:44px;margin:23px 0 15px}.guest-link{display:block;font-size:14px;text-align:center;text-decoration:underline;text-underline-offset:5px}.login-page footer>span{width:auto;order:initial}
@media(max-width:1000px){.fret-controls,.note-result{padding:30px 25px}.sound-intro,.sound-empty{padding:30px}.login-panel{padding:50px 9%}.login-art img{left:-370px}.login-art-caption{left:20%;top:110px}.login-art-caption h1{font-size:37px}}
@media(max-width:700px){.sound-library,.string-tool{grid-template-columns:1fr}.sound-intro,.sound-empty{padding:30px 25px}.sound-intro h3{font-size:28px}.sound-empty{min-height:285px}.string-tool .note-result{border-left:0;border-top:1px solid var(--line)}.fret-controls,.note-result{padding:27px 22px}.string-selector{gap:8px}.string-selector button{padding:12px 6px}.string-selector button span{font-size:13px}.fret-selector{gap:6px}.tool-hint{font-size:12px}.market-toolbar>div{gap:24px}.market-toolbar>span{font-size:11px}.market-toolbar button{font-size:14px}.market-empty{padding:45px 10px 10px}.market-empty h3{font-size:22px}.blank-inner{padding:40px 15px 75px;min-height:300px}.blank-inner h2{font-size:26px}.blank-lines{width:100%}.login-layout{grid-template-columns:1fr;min-height:auto}.login-art{display:none}.login-panel{padding:45px 7%}.login-panel h2{font-size:28px}.login-panel .eyebrow{font-size:11px}.login-page footer{display:block}.login-page footer span{display:block;margin-bottom:5px}.source-note a{display:inline-block}.note-columns b{font-size:43px}}
@media(prefers-reduced-motion:reduce){.draw-on-view path{stroke-dashoffset:0}}
/* Keep everyday reading comfortable on both desktop and mobile. */
.hero-intro,.lesson-feature p,.sound-intro p,.sound-empty p,.market-empty p,.blank-inner p:not(.eyebrow),.login-subtitle{font-size:16px}.chapter-nav small,.outline-label,.lesson-tag,.blank-inner .eyebrow,.login-art-caption .eyebrow{font-size:12px}.section-heading>p span,.note-result-heading,.note-columns small,.tool-hint,.login-status{font-size:14px}.hero .eyebrow,.login-panel .eyebrow{font-size:12px}.fret-controls,.note-result{min-width:0}
@media(max-width:700px){.hero-art img{width:900px;left:-65px;top:-195px}}