:root{--bg:#141c2b;--panel:#101724;--gold:#d9bd83;--blue:#88adc9;--text:#eef0f5;--muted:#9aa6b8;--line:#ffffff14;--key-height:112px;color-scheme:dark}
*{box-sizing:border-box;margin:0;padding:0}body{min-height:100vh;background:var(--bg);color:var(--text);font-family:"Avenir Next","PingFang SC","Microsoft YaHei",sans-serif}button,input,a,[role=slider]{-webkit-tap-highlight-color:transparent}button:focus-visible,input:focus-visible,a:focus-visible,[role=slider]:focus-visible{outline:2px solid var(--gold);outline-offset:5px}button{font:inherit;cursor:pointer;transition:background .18s,border-color .18s}button:disabled{opacity:.4;cursor:wait}.masthead{height:84px;max-width:1440px;margin:auto;padding:0 6%;display:flex;align-items:center;justify-content:space-between}.brand{display:flex;align-items:center;gap:12px;color:#e5e9f0;font-size:14px;text-decoration:none}.brand-icon{font-family:Georgia,serif;font-size:32px;color:var(--gold)}.edition{color:var(--muted);font-size:12px}.edition-no{margin-left:18px;color:var(--gold);font-family:Georgia,serif;font-style:italic}.concert{max-width:1440px;margin:auto;padding:0 6% 24px}.intro{display:flex;justify-content:space-between;align-items:center;padding:30px 0 36px;gap:24px}.composer{font-family:Georgia,"Times New Roman",serif;color:var(--muted);font-size:15px;margin-bottom:8px}.ttl h1{font-family:Didot,"Bodoni 72",Georgia,serif;font-size:clamp(46px,5.5vw,78px);font-weight:400;line-height:1.1;letter-spacing:-2px}.movement{font-size:25px;color:var(--gold);margin-left:24px;vertical-align:middle;letter-spacing:0;border-left:1px solid #d9bd8345;padding-left:24px}.ttl h2{font-size:14px;font-weight:400;margin-top:17px;letter-spacing:1px}.ttl h2 span{font-size:12px;color:var(--muted);margin-left:18px;letter-spacing:0}.work-note{text-align:right}.opus{color:var(--gold);font-size:25px;font-family:Georgia,serif;font-style:italic}.work-note p{font-size:12px;color:#bdc5d1;margin-top:15px}.sound-source{display:block;font-size:10px;color:var(--muted);margin-top:8px}.instrument{background:var(--panel);border:1px solid #ffffff1c;border-radius:14px;overflow:hidden;box-shadow:0 24px 65px #060b1638}.stage-head{display:flex;align-items:center;padding:18px 25px;gap:24px;border-bottom:1px solid var(--line);font-size:11px}.stage-title{color:#d6dce5}.stage-title>span{font-family:Georgia,serif;font-style:italic;color:var(--muted);margin-left:9px}.legend{display:flex;gap:20px;margin:auto;color:var(--muted)}.dt{display:inline-block;width:6px;height:6px;border-radius:50%;margin-right:8px;vertical-align:middle}.right{background:var(--gold)}.left{background:var(--blue)}.live-note{display:flex;gap:12px;align-items:center;min-width:75px;justify-content:flex-end}#nn{font-family:Georgia,serif;font-size:17px;color:var(--gold)}#dyn{color:var(--muted);font-family:Georgia,serif;font-style:italic}.stage{display:flex;flex-direction:column}.wf{height:clamp(220px,32vh,430px);position:relative;background:linear-gradient(180deg,#101724,#182233)}canvas{display:block;width:100%;height:100%}.pw{height:var(--key-height);background:#0b111d;border-top:2px solid #d9bd8360;display:flex;justify-content:center;overflow:hidden}.pi{position:relative;height:var(--key-height)}.wk,.bk{position:absolute;top:0;border-top:0;transition:background .05s,box-shadow .05s}.wk{height:var(--key-height);background:linear-gradient(#f0f1f2,#d9dde2 88%,#b5bbc4);border:1px solid #a5adb9;border-top:0;border-radius:0 0 3px 3px;z-index:1}.bk{height:64%;background:linear-gradient(100deg,#343e4d,#111823 65%,#242c39);border:1px solid #070d18;border-top:0;border-bottom:5px solid #080e19;border-radius:0 0 3px 3px;z-index:2;box-shadow:2px 4px 3px #0006}.wk.r{background:linear-gradient(#f8e5b9,#d9bd83);box-shadow:0 0 20px #d9bd8350}.wk.l{background:linear-gradient(#c4def0,#88adc9);box-shadow:0 0 20px #88adc950}.bk.r{background:linear-gradient(#d9bd83,#8e7242)}.bk.l{background:linear-gradient(#88adc9,#416480)}.key-label{position:absolute;bottom:10px;left:0;right:0;text-align:center;color:#687181;font-size:9px}.transport{padding:22px 25px 24px}.strip{display:flex;align-items:center;gap:18px}.timeline-label{font-size:10px;color:var(--muted)}.pg{flex:1;height:20px;position:relative;cursor:pointer;touch-action:none}.pg:before{content:"";position:absolute;top:8px;left:0;right:0;height:3px;background:#ffffff16;border-radius:3px}.pgf{position:absolute;top:8px;left:0;height:3px;width:0;background:var(--gold);border-radius:3px;pointer-events:none}.pgf:after{content:"";position:absolute;right:-4px;top:-3px;width:9px;height:9px;background:#f3dfb7;border-radius:50%;box-shadow:0 0 0 4px #d9bd8310}.tm{font-size:11px;color:#b4becd;font-variant-numeric:tabular-nums;min-width:80px;text-align:right}.bar{display:flex;align-items:center;gap:24px;margin-top:18px}.playback{display:flex;align-items:center;gap:10px}#btnPlay{border:1px solid var(--gold);background:var(--gold);color:#17202e;min-width:108px;height:44px;border-radius:7px;font-size:13px;font-weight:600}#btnPlay:hover:not(:disabled){background:#efd6a5}#btnReset{height:44px;width:40px;color:#bac4d2;border:1px solid #ffffff20;border-radius:7px;background:transparent;font-size:23px}#btnReset:hover{background:#ffffff0d}.expression{display:flex;gap:9px;align-items:center}.tog{border:1px solid #ffffff30;background:transparent;color:var(--muted);border-radius:6px;padding:8px 12px;font-size:11px}.tog.on{color:#decba9;background:#d9bd8310;border-color:#d9bd834a}.tog.on:before{content:"";display:inline-block;width:5px;height:5px;border-radius:50%;background:var(--gold);margin-right:7px}#modeTxt{display:none}.settings{display:flex;gap:24px;margin-left:auto}.sld{display:flex;align-items:center;gap:10px;font-size:11px;color:var(--muted);white-space:nowrap}.sld input{width:66px;accent-color:var(--gold);height:22px;cursor:pointer}.sld b{font-weight:400;min-width:36px;font-size:10px;font-variant-numeric:tabular-nums;color:#d6deea}.ft{display:flex;justify-content:space-between;gap:18px;padding:20px 2px 0;color:var(--muted);font-size:10px}.footer-divider{padding:0 12px;color:#647085}kbd{font-family:inherit;font-size:10px;border:1px solid #ffffff25;border-radius:4px;padding:3px 6px;margin-right:7px}.load{position:fixed;inset:0;background:var(--bg);display:flex;flex-direction:column;align-items:center;justify-content:center;gap:20px;z-index:99;transition:opacity .4s}.load.hide{opacity:0;pointer-events:none;visibility:hidden}.load h3{font-family:Georgia,serif;font-size:28px;font-weight:400;color:var(--gold)}.load p{font-size:12px;color:var(--muted)}.lb{width:220px;height:3px;background:#ffffff15}.lbf{height:100%;width:0;background:var(--gold);transition:width .3s}.load button{padding:10px 20px;background:var(--gold);color:var(--bg);border:0;border-radius:6px}
@media(min-width:1500px){.wf{height:38vh}}
@media(max-width:1050px){.bar{flex-wrap:wrap;gap:16px}.settings{gap:18px}.sld{gap:6px}.sld input{width:54px}.concert{padding-left:4%;padding-right:4%}.masthead{padding:0 4%}.expression{margin-right:auto}.settings{margin-left:0}}
@media(max-width:700px){:root{--key-height:90px}.masthead{height:62px}.brand{font-size:12px}.edition{font-size:10px}.edition-no{margin-left:8px}.intro{padding:22px 0 26px}.ttl h1{font-size:49px}.movement{font-size:19px;margin-left:14px;padding-left:14px}.composer{font-size:12px}.ttl h2{font-size:12px;margin-top:12px}.ttl h2 span{display:block;margin:7px 0 0;font-size:11px}.work-note{display:none}.stage-head{padding:14px 14px;gap:10px}.stage-title{font-size:10px}.legend{gap:10px;font-size:10px}.live-note{min-width:40px;gap:5px}#nn{font-size:14px}.stage-title>span{display:none}.wf{height:clamp(200px,32vh,340px)}.transport{padding:15px}.timeline-label{display:none}.strip{gap:12px}.settings{width:100%;justify-content:space-between;gap:10px;padding-top:14px;border-top:1px solid var(--line)}.sld{flex-wrap:wrap;gap:4px}.sld input{width:62px}.sld b{min-width:32px}.bar{margin-top:14px}.expression{margin-left:auto;margin-right:0}.ft{font-size:9px;line-height:1.8}.keyboard-tip{display:none}.key-label{font-size:7px;bottom:8px}.footer-divider{padding:0 7px}.instrument{border-radius:10px}}
@media(prefers-reduced-motion:reduce){*,*:before,*:after{transition:none!important;scroll-behavior:auto!important}}