*{box-sizing:border-box}html{scroll-behavior:smooth;scroll-padding-top:25px}body{margin:0;background:#fff;color:#000;font:16px/1.7 Arial,"PingFang SC","Microsoft YaHei",sans-serif}a{color:#000;text-underline-offset:4px}button,input,select{font:inherit;color:#000}button{cursor:pointer;background:#fff;border:0}button:focus-visible,a:focus-visible,select:focus-visible{outline:2px solid #000;outline-offset:5px}img,svg{max-width:100%}figure{margin:0}.wrap{max-width:1440px;margin:auto;padding:0 48px}.masthead{display:flex;justify-content:space-between;align-items:center;gap:25px;border-bottom:1px solid #000;padding:30px 0 24px}.brand{display:flex;gap:14px;align-items:center;text-decoration:none}.brand svg{width:31px;fill:none;stroke:#000;stroke-width:2}.brand b{font:600 36px Georgia,"Songti SC",serif}.brand span{font-size:12px}.header-right{display:flex;align-items:center;gap:28px}.language{display:flex;gap:12px;font-size:12px}.language a[aria-current]{font-weight:bold}.logo{width:136px;height:auto}.hero{padding:58px 0 38px;border-bottom:1px solid #000}.eyebrow{font-size:11px;letter-spacing:.09em;text-transform:uppercase}.hero h1{font:500 clamp(34px,4.5vw,68px)/1.12 Georgia,"Songti SC",STSong,serif;letter-spacing:-.035em;margin:19px 0 25px;max-width:1100px}.hero-row{display:grid;grid-template-columns:1.5fr 1fr;gap:65px;align-items:end}.hero-row p{margin:0;max-width:750px;font-size:16px}.hero-index{font:30px/1.5 Georgia,serif;display:flex;justify-content:flex-end;gap:20px;flex-wrap:wrap}.breadcrumbs{display:flex;justify-content:space-between;gap:15px;padding:14px 0;border-bottom:1px solid #000;font-size:12px}.layout{display:grid;grid-template-columns:226px minmax(0,1fr);gap:58px;padding:37px 0 80px}.sidebar{position:sticky;top:25px;align-self:start;max-height:calc(100vh - 50px);overflow-y:auto;font-size:13px}.sidebar .current{border-bottom:1px solid #000;padding:0 0 19px;margin-bottom:19px}.sidebar a{display:block;text-decoration:none;padding:8px 0}.sidebar a:hover,.sidebar a[aria-current]{text-decoration:underline}.sidebar .num{display:inline-block;width:32px;font-size:11px}.sidebar .minor{font-size:11px;margin-top:28px}.section{padding:0 0 52px;margin:0 0 45px;border-bottom:1px solid #000;scroll-margin-top:25px}.section:last-child{border:0}.section-heading{display:flex;align-items:baseline;gap:16px;margin-bottom:21px}.section-heading .num{font-size:12px}.section h2{font:500 clamp(27px,2.5vw,39px)/1.22 Georgia,"Songti SC",serif;letter-spacing:-.025em;margin:0}.section h3{font-size:18px;font-weight:500;margin:0 0 12px}.lead{max-width:820px;margin:0 0 25px}.pair{display:grid;grid-template-columns:1fr 1fr;gap:44px;margin:35px 0}.operation{border-top:1px solid #000;padding-top:18px}.operation .ratio{font:54px/1.1 Georgia,serif;margin:20px 0}.operation p{font-size:14px;margin:14px 0}.operation svg{display:block;width:100%;height:auto}.formula{font:24px/1.6 Georgia,"Songti SC",serif;overflow-wrap:anywhere}.sequence{display:flex;gap:16px;flex-wrap:wrap;align-items:baseline;margin:26px 0}.sequence strong{font:28px Georgia,serif}.small,.credit,figcaption{font-size:12px;line-height:1.7}.note{max-width:800px;font-size:14px}.credit{margin-top:15px}.plate{width:100%;height:auto;display:block;border:1px solid #b5b5b5}.plate-link{display:block}.plate-actions{display:flex;justify-content:space-between;gap:15px;margin:10px 0 17px;font-size:12px}.ratio-buttons{display:flex;flex-wrap:wrap;gap:8px 21px;margin:23px 0 28px;padding-bottom:16px;border-bottom:1px solid #000}.ratio-buttons button{padding:5px 0;font:20px Georgia,serif;border-bottom:2px solid transparent}.ratio-buttons button[aria-pressed=true]{border-bottom-color:#000}.calculator{margin:20px 0 28px}.calculator svg{display:block;width:100%;max-width:750px}.calc-result{margin:10px 0;font:26px Georgia,serif}.calc-copy{display:grid;grid-template-columns:1fr 1fr;gap:40px}.rectangles{display:grid;grid-template-columns:repeat(4,1fr);gap:20px;margin:30px 0}.rectangles svg{width:100%;display:block}.rectangles p{text-align:center;font:23px Georgia,serif}.tong-lines{display:grid;grid-template-columns:1fr 1fr;gap:35px;margin:25px 0}.tong-lines>div{border-top:1px solid #000;padding-top:15px}.tong-lines p{font-size:14px}.case-header{display:grid;grid-template-columns:110px 1fr;gap:24px;margin:27px 0 18px}.case-header .ratio{font:46px/1.1 Georgia,serif}.case-header p{margin:8px 0}.case-meta{display:flex;gap:20px;flex-wrap:wrap;font-size:11px;letter-spacing:.03em}.case-description{max-width:750px;font-size:14px}.case-value{font:24px/1.5 Georgia,serif}.case-select{display:none}table{width:100%;border-collapse:collapse;font-size:13px;line-height:1.6}caption{text-align:left;font-size:17px;margin-bottom:18px}th,td{text-align:left;vertical-align:top;border-bottom:1px solid #aaa;padding:13px 12px 13px 0}th{border-color:#000;font-weight:500}td:first-child{font-family:Georgia,serif;font-size:17px;min-width:120px;width:21%}td:nth-child(2){width:25%}.source-link{display:block;font-size:12px;margin-top:6px}details{border-bottom:1px solid #000;margin-top:25px;padding:16px 0}summary{cursor:pointer;font-size:14px}details .plate{margin-top:20px}.references{padding-left:24px;font-size:13px}.references li{padding-left:7px;margin-bottom:18px;overflow-wrap:anywhere}.references a{font-size:12px}.author-note{border-top:1px solid #000;margin-top:36px;padding-top:20px}.footer{border-top:1px solid #000;display:flex;justify-content:space-between;gap:20px;padding:24px 0 35px;font-size:12px}.skip{position:absolute;top:-100px}.skip:focus{top:8px;left:8px;background:white;z-index:10}.js [hidden]{display:none!important}sup a{text-decoration:none;font-size:11px}::selection{background:#ddd}
@media(min-width:1600px){.wrap{padding:0 58px}.layout{gap:80px;grid-template-columns:245px minmax(0,1fr)}}
@media(max-width:1100px){.wrap{padding:0 32px}.layout{grid-template-columns:190px minmax(0,1fr);gap:32px}.hero-row{gap:30px}.brand span{display:none}.pair{gap:25px}.hero-index{font-size:26px}.header-right{gap:18px}}
@media(max-width:860px){.layout{display:block;padding-top:24px}.sidebar{position:static;max-height:none;display:flex;flex-wrap:wrap;gap:5px 23px;border-bottom:1px solid #000;padding-bottom:20px;margin-bottom:34px}.sidebar .current{flex-basis:100%;margin:0;padding:0 0 8px;border:0}.sidebar a{padding:3px 0}.sidebar .minor{display:none}.hero-row{grid-template-columns:1fr}.hero-index{justify-content:flex-start;font-size:25px}.hero{padding-top:38px}.hero h1{font-size:43px}.layout{padding-bottom:25px}.section{padding-bottom:38px;margin-bottom:35px}}
@media(max-width:540px){body{font-size:15px}.wrap{padding:0 19px}.masthead{padding:21px 0 18px;align-items:flex-start;gap:12px}.brand{gap:9px}.brand b{font-size:28px}.brand svg{width:24px}.header-right{flex-direction:column-reverse;align-items:flex-end;gap:10px}.logo{width:92px}.language{font-size:10px;gap:9px}.hero{padding-top:31px;padding-bottom:27px}.hero h1{font-size:35px;line-height:1.25;margin:15px 0 19px}.hero-row{gap:22px}.hero-row p{font-size:14px}.hero-index{font-size:23px;gap:15px}.eyebrow{font-size:10px}.breadcrumbs{font-size:11px}.sidebar{font-size:12px;gap:7px 16px}.sidebar .num{width:24px}.pair{grid-template-columns:1fr;gap:26px;margin:24px 0}.operation .ratio{font-size:46px}.section h2{font-size:29px}.section-heading{gap:11px}.calc-copy,.tong-lines{grid-template-columns:1fr;gap:10px}.rectangles{grid-template-columns:repeat(2,1fr);gap:14px}.ratio-buttons{gap:5px 17px}.ratio-buttons button{font-size:19px}.case-header{grid-template-columns:74px 1fr;gap:14px}.case-header .ratio{font-size:33px}.case-header h3{font-size:17px}.case-value{font-size:20px}.case-select{display:block;margin:18px 0}.case-select select{max-width:100%;width:100%;background:#fff;border:1px solid #000;padding:10px;font-size:14px;border-radius:0}.case-tabs{display:none}.table-wrap{overflow-x:auto}table{min-width:580px}.plate-actions{align-items:flex-start;font-size:11px}.small,.credit,figcaption{font-size:11px}.references{font-size:12px;padding-left:20px}.footer{font-size:11px}.sequence{gap:9px}.sequence strong{font-size:24px}.formula{font-size:22px}}
@media(prefers-reduced-motion:reduce){html{scroll-behavior:auto}}@media print{.sidebar,.language,.case-tabs,.case-select,.calculator,.plate-actions{display:none}.layout{display:block}.js article[hidden]{display:block!important}.wrap{max-width:none;padding:0}.section{break-inside:avoid}.hero h1{font-size:35px}.case{page-break-inside:avoid;margin-bottom:25px}}
/* Click-through scientific diagrams and historical facsimiles. */
.mode-buttons,.steps{display:flex;flex-wrap:wrap;gap:8px 24px;margin:20px 0;border-bottom:1px solid #000;padding-bottom:12px}.mode-buttons button,.steps button{padding:8px 0;border-bottom:2px solid transparent;text-align:left}.mode-buttons button{font-size:18px}.mode-buttons span{font-family:Georgia,serif;margin-left:12px}.steps button{font-size:13px}.steps span{font-size:10px;margin-right:4px}.steps button[aria-pressed=true],.mode-buttons button[aria-pressed=true]{border-bottom-color:#000}.guqin{display:block;width:100%;height:auto;margin:15px 0}.demo-instruction{font-size:13px}.demo-reading{min-height:138px}.demo-reading p{margin:9px 0}.next-step{font-size:13px;border-bottom:1px solid #000;padding:8px 0;margin:8px 0 16px}.stage-reveal{opacity:0;transition:opacity .4s}.sanfen-demo:not([data-step="0"]) .stage-reveal{opacity:1}.calc-stage{transition:opacity .35s}.song-comparison{border-top:1px solid #000;margin-top:42px;padding-top:28px}.song-comparison>h3{font:28px Georgia,"Songti SC",serif}.book-pair,.comparison-text{display:grid;grid-template-columns:1fr 1fr;gap:30px;margin:28px 0}.book-pair figure{margin:0}.book-pair img{display:block;width:100%;height:420px;object-fit:contain;object-position:center;background:#fff}.book-pair figcaption{margin-top:14px}.comparison-text>div{border-top:1px solid #000;padding-top:18px}.comparison-text p{font-size:14px}.comparison-text .formula{font-size:25px}.cai-diagram{display:block;width:100%;max-width:640px;margin:20px auto}.song-sequence{font-size:28px}button:focus-visible,a:focus-visible{outline:2px solid #000;outline-offset:5px}
@media(max-width:600px){.book-pair,.comparison-text{grid-template-columns:1fr;gap:28px}.book-pair img{height:auto;max-height:500px}.mode-buttons{gap:8px 18px}.mode-buttons button{font-size:16px}.steps{gap:4px 15px}.steps button{font-size:12px}.guqin{min-height:145px}.demo-reading{min-height:166px}.song-sequence{font-size:22px}.song-comparison>h3{font-size:25px}}
@media(prefers-reduced-motion:reduce){.stage-reveal,.calc-stage{transition:none}}
@media(max-width:540px){.steps{display:grid;grid-template-columns:1fr 1fr;gap:4px 18px}.steps button{width:100%;font-size:13px}.mode-buttons{display:grid;grid-template-columns:1fr 1fr;gap:16px}.mode-buttons button span{display:block;margin:3px 0 0}.guqin text{font-size:32px}.calculator svg text{font-size:30px}.cai-diagram text{font-size:23px}.demo-reading{min-height:118px}.calc-result{font-size:22px}}
.room-ratios{display:grid;grid-template-columns:1fr 1fr;gap:22px 24px;margin:24px 0}.room-ratios svg{display:block;width:100%;height:auto}.room-ratios figcaption{font-size:13px}.room-height{display:block;width:100%;max-width:400px;height:auto;margin:24px auto}.tong-lines blockquote{margin:0 0 20px;padding:0;font-size:14px;line-height:1.8}.tong-lines h3{font-size:20px}.tong-lines{gap:36px}.hero{padding-bottom:28px}
@media(max-width:900px){.tong-lines{grid-template-columns:1fr;gap:30px}.room-ratios{grid-template-columns:repeat(2,1fr)}}
@media(max-width:540px){.room-ratios{grid-template-columns:1fr}.room-ratios svg{max-width:320px;margin:auto}.room-ratios figcaption{font-size:14px}.room-height{max-width:350px}.hero{padding-bottom:15px}}

.bibliography-disclosure{margin:0;padding:0 0 14px;border:0}.bibliography-disclosure summary{font-size:13px;font-weight:400}.bibliography-disclosure summary .num{margin-right:12px;font-size:11px}.references{font-size:12px;line-height:1.6;padding-left:21px;margin-top:18px}.references li{margin-bottom:10px;padding-left:3px}.references a{font-size:11px}.reference-figures{display:block;font-size:11px;margin-top:3px}.author-note{font-size:11px;line-height:1.6;margin-top:18px;padding-top:14px}.section .author-note h3{font:400 12px/1.5 Arial,sans-serif;margin:0 0 7px}.author-note p{margin:0;max-width:760px}