@charset "UTF-8";
:root{color-scheme:light;--ink:#172a29;--muted:#60716c;--paper:#f6f4ed;--line:#d4dbd2;--accent:#b8cbac;--gold:#a56c34}*{box-sizing:border-box}html{scroll-behavior:smooth;scroll-padding-top:36px}body{margin:0;background:var(--paper);color:var(--ink);font-family:system-ui,-apple-system,"PingFang SC","Microsoft YaHei",sans-serif;font-size:17px;line-height:1.9;padding-bottom:220px}a{color:inherit;text-underline-offset:5px}button,input,select{font:inherit}button,select{cursor:pointer}button{border:1px solid #8d9d92;background:transparent;color:var(--ink);padding:10px 17px;border-radius:5px;line-height:1.5;min-height:44px}button:hover{background:#e3e9dd}button:disabled{opacity:.4;cursor:default}.primary{background:var(--ink);color:#fff;border-color:var(--ink)}.primary:hover{background:#304b45;color:#fff}:focus-visible{outline:3px solid #b97725;outline-offset:4px}.skip{position:absolute;left:15px;top:-100px}.skip:focus{top:5px;background:white;z-index:20}.masthead{display:flex;justify-content:space-between;align-items:center;max-width:1120px;margin:auto;padding:28px 30px;border-bottom:1px solid var(--line);font-size:14px}.masthead>a:first-child{font-weight:650;letter-spacing:.03em;text-decoration:none}.masthead span{display:block;color:var(--muted);font-size:12px;font-weight:400}.masthead>a:last-child{color:var(--muted);text-decoration:none}.hero{max-width:1120px;margin:auto;padding:80px 45px 45px;position:relative}.eyebrow,.section-label{font-size:12px;letter-spacing:.14em;text-transform:uppercase;color:var(--muted);font-weight:650}.hero h1{font-family:Georgia,"Songti SC",serif;font-size:clamp(36px,5.5vw,65px);font-weight:500;letter-spacing:-.03em;line-height:1.3;margin:24px 0}.deck{font-size:clamp(19px,2.5vw,25px);line-height:1.6}.hero>p:not(.deck):not(.caption){font-size:14px;color:var(--muted)}.hero-actions{display:flex;gap:25px;align-items:center;margin:28px 0 50px;font-size:14px}.hero-actions a{text-decoration:none}.motif{display:grid;grid-template-columns:repeat(8,1fr);gap:10px;margin-top:15px;border-top:1px solid var(--line);padding-top:24px}.motif span{font-family:Georgia,serif;font-size:clamp(22px,4vw,43px);color:var(--ink);text-align:center;border-bottom:3px solid var(--accent);padding:0 0 13px}.motif span:nth-child(3),.motif span:nth-child(4){border-color:#d8bc98}.caption{font-size:12px;color:var(--muted);text-align:right}.chapters{max-width:1030px;display:flex;gap:26px;margin:0 auto 40px;border-bottom:1px solid var(--line);padding:15px 0;flex-wrap:wrap}.chapters a{font-size:14px;text-decoration:none;color:var(--muted)}article{max-width:750px;margin:auto;padding:0 22px}.intro{font-size:18px}.edition{border-left:3px solid var(--accent);padding:15px 24px;margin:35px 0;background:#ecefe5;font-size:14px}.edition p{margin-bottom:0}article section{padding:48px 0 35px;border-top:1px solid var(--line);scroll-margin-top:20px}h2{font-family:Georgia,"Songti SC",serif;font-size:29px;line-height:1.5;font-weight:600;margin:12px 0 20px}p{margin:17px 0}.listen{display:flex;flex-wrap:wrap;gap:10px;margin:26px 0}.listen button{font-size:14px}.prompt{color:#54644d;background:#e9eddf;padding:13px 18px;font-size:15px;border-radius:3px}.note-strip{font-family:Georgia,serif;font-size:23px;white-space:normal;line-height:2;letter-spacing:.02em}.note-strip span{font-family:system-ui;font-size:12px;color:var(--muted)}.table-wrap{overflow-x:auto;margin:25px 0}table{border-collapse:collapse;font-size:14px;min-width:100%;white-space:nowrap;text-align:center}caption{font-size:12px;color:var(--muted);text-align:left;margin-bottom:8px;white-space:normal}td,th{padding:10px 12px;border-bottom:1px solid var(--line)}th{font-weight:600;background:#ecefe6}.entry-diagram{padding:14px 0;margin:25px 0}.entry-diagram>div{position:relative;height:42px;margin:7px 0;background:linear-gradient(to right,transparent 19.8%,var(--line) 20%,transparent 20.2%,transparent 39.8%,var(--line) 40%,transparent 40.2%,transparent 59.8%,var(--line) 60%,transparent 60.2%);border-bottom:1px solid var(--line);margin-left:70px}.entry-diagram span{position:absolute;left:-70px;font-size:13px;line-height:34px}.entry-diagram i{position:absolute;left:var(--offset);width:var(--width);background:#c5d3bc;font-size:12px;font-style:normal;height:32px;padding-left:9px;line-height:32px}.entry-diagram .bass-line{background:#dfd0bb}.small{font-size:13px;color:var(--muted)}.return{background:#e9eddf;padding:30px 24px;margin:40px -24px}.sources h2{font-size:20px}.sources p{font-size:13px;color:var(--muted)}.keyboard{display:flex;position:relative;align-items:flex-start;width:100%;height:160px;touch-action:manipulation;margin:25px 0;user-select:none}.key{position:relative;flex:1;padding:0;border:1px solid #aaa;border-radius:0 0 4px 4px;height:150px;background:#fff;font-size:10px;display:flex;align-items:flex-end;justify-content:center;padding-bottom:10px;color:#31423c;min-width:0;touch-action:manipulation}.key.black{flex:none;position:absolute;top:0;width:4.5%;height:95px;background:#243833;color:#fff;z-index:2;font-size:9px;padding-bottom:6px;border-color:#172a29}.key.active{background:#b8cbac}.key.black.active{background:#a56c34}.catalog{max-width:1030px;margin:35px auto 50px;padding:30px 22px;border-top:1px solid var(--line)}.catalog h2{font-size:24px}.catalog-item{display:flex;gap:25px;align-items:center;text-decoration:none;border-block:1px solid var(--line);padding:24px 0}.catalog-item>span{font:22px Georgia;color:var(--muted)}.catalog-item>span:last-child{margin-left:auto}.catalog-item strong{display:block;font-size:18px}.catalog-item small{display:block;font-size:12px;color:var(--muted)}footer{max-width:1030px;margin:auto;padding:25px 22px;color:var(--muted);font-size:12px;display:flex;justify-content:space-between;gap:16px}.player{position:fixed;bottom:0;left:0;right:0;z-index:10;background:#fafbf5f7;border-top:1px solid #bbc6b6;backdrop-filter:blur(12px);padding:14px max(20px,calc((100vw - 1030px)/2)) max(10px,env(safe-area-inset-bottom));box-shadow:0 -5px 30px #172a2908}.player-head{display:flex;align-items:center;gap:10px;font-size:13px;line-height:1.4;margin-bottom:9px}.player-head strong{font-weight:500}.player-head #time{margin-left:auto;color:var(--muted);font-variant-numeric:tabular-nums}.playing-dot{width:7px;height:7px;background:#a3afa0;border-radius:100%}.playing-dot.on{background:#49783d}.progress{height:2px;background:#dfe6d7;margin-bottom:12px}.progress i{display:block;height:100%;width:0;background:var(--gold)}.player-controls{display:flex;gap:12px;align-items:center;flex-wrap:wrap}.player-controls button{font-size:14px;min-height:40px;padding:8px 16px}.player-controls label{display:flex;align-items:center;gap:5px;font-size:12px;color:#4e6158;white-space:nowrap}.player-controls select{padding:4px;border:1px solid #b8c5b3;background:#f6f8ef;border-radius:3px;font-size:12px;min-height:34px}.player-controls input[type=checkbox]{width:18px;height:18px;accent-color:#345540}.player-controls input[type=range]{width:65px;accent-color:#345540}#status{font-size:11px;color:var(--muted);margin:7px 0 0;line-height:1.4}button[data-scene].selected{box-shadow:inset 0 0 0 2px var(--gold)}@media(max-width:700px){body{font-size:16px;padding-bottom:240px}.masthead{padding:20px 22px}.hero{padding:45px 22px 20px}.hero h1{font-size:36px}.hero-actions{gap:16px;margin-bottom:30px;flex-wrap:wrap}.chapters{padding:15px 22px;gap:15px;margin-bottom:22px}.chapters a{font-size:12px}h2{font-size:25px}article section{padding:35px 0 25px}.intro{font-size:17px}.motif{gap:4px}.motif span{font-size:24px}.caption{text-align:left}.return{margin:30px -10px;padding:25px 16px}.player{padding:12px 14px max(10px,env(safe-area-inset-bottom))}.player-controls{gap:9px}.volume-label{display:none!important}.player-controls button{padding:8px 12px}.player-controls label{font-size:11px}.player-head{font-size:12px}.keyboard{height:145px}.key{height:135px;font-size:9px}.key.black{height:85px;font-size:8px}footer{display:block}footer a{display:block}}@media(prefers-reduced-motion:reduce){html{scroll-behavior:auto}}