*{box-sizing:border-box}html{color-scheme:light;scroll-behavior:smooth}body{margin:0;background:#f6f7f4;color:#183734;font-family:Inter,-apple-system,BlinkMacSystemFont,"Segoe UI","PingFang SC","Microsoft YaHei",sans-serif;font-size:14px;line-height:1.65}button,input{font:inherit}button{cursor:pointer;color:inherit}button,a,input,summary{outline-offset:4px}button:focus-visible,a:focus-visible,input:focus-visible,summary:focus-visible{outline:3px solid #ffad39}button{border:0}a{color:inherit;text-decoration:none}button:disabled{cursor:wait;opacity:.5}h1,h2,h3,p{margin:0}h2{font-size:18px;font-weight:650;letter-spacing:-.3px}h3{font-size:17px}input[type=range]{width:100%;accent-color:#087c75;cursor:pointer;height:18px;margin:4px 0 0}input[type=checkbox]{accent-color:#087c75;width:16px;height:16px}canvas{display:block;touch-action:pan-y}.site-header{height:86px;max-width:1440px;margin:auto;display:flex;justify-content:space-between;align-items:center;padding:0 50px;border-bottom:1px solid #dfe5de}.brand{display:flex;gap:11px;align-items:center;font-size:17px;font-weight:700;letter-spacing:.2px}.brand img{width:43px;height:43px;object-fit:contain}.brand small{display:block;font-size:10px;letter-spacing:2px;font-weight:500;color:#647c76;margin-top:-2px}.header-right{display:flex;align-items:center;gap:24px}.local-tag{font-size:11px;color:#6a8179}.segmented{display:flex;background:#eef2ed;border:1px solid #e3e9e1;padding:3px;border-radius:10px;gap:3px}.segmented button{flex:1;background:transparent;padding:7px 9px;border-radius:7px;white-space:nowrap;font-size:12px;color:#6b7f78;line-height:1.35}.segmented button.active{background:#fff;color:#076d65;box-shadow:0 1px 5px #173f3212;font-weight:650}.language button{padding:5px 11px}.compact{flex-shrink:0}.compact button{padding:6px 15px}main{max-width:1440px;margin:auto;padding:42px 50px 60px}.intro{display:flex;align-items:center;justify-content:space-between;margin:0 0 34px;gap:20px}.eyebrow{font-size:10px;letter-spacing:2px;font-weight:700;color:#54877b}.intro h1{font-size:37px;letter-spacing:-1.5px;line-height:1.35;margin:9px 0 12px;font-weight:650}.intro p:last-child{font-size:14px;color:#6a7e75}.intro-mark{font-size:64px;line-height:1;color:#e6a32c;transform:rotate(-12deg);padding:0 28px}.intro-mark span{font-size:50px;display:inline-block;margin-left:10px;color:#078f83}.workspace{display:grid;grid-template-columns:264px minmax(0,1fr);gap:24px;align-items:start}aside{display:flex;flex-direction:column;gap:20px}.panel{background:#fff;border:1px solid #e2e8df;border-radius:16px;box-shadow:0 5px 24px #244d351f}.library,.settings{padding:22px 18px}.section-heading{display:flex;align-items:center;justify-content:space-between;margin-bottom:16px}.section-heading h2,.settings h2{font-size:15px}.section-heading>span{font-size:10px;color:#a4afa4;letter-spacing:1px}.track{display:flex;align-items:center;gap:11px;width:100%;background:transparent;text-align:left;border:1px solid transparent;border-radius:12px;padding:13px 9px;margin:3px 0;transition:.2s}.track:hover{background:#f4f7f2}.track.active{background:#edf7ef;border-color:#d9eadd}.track-number{border-radius:9px;background:#f1f3ee;color:#90a092;font-size:11px;font-variant-numeric:tabular-nums;width:31px;height:36px;display:flex;align-items:center;justify-content:center;flex-shrink:0}.track.active .track-number{background:#087b70;color:white}.track-title{display:block;font-size:13px;font-weight:650}.track-subtitle{display:block;color:#7e8e81;font-size:10px;margin-top:4px;line-height:1.5}.track-credit{font-size:10px;color:#819083;border-top:1px solid #edf0e9;padding-top:15px;margin:16px 5px 0;line-height:1.8}.control-label{display:block;font-size:11px;color:#65796d;margin:21px 0 8px}.hint{font-size:10px;color:#839084;line-height:1.8;margin-top:9px}.range-label{display:flex;justify-content:space-between;align-items:center;margin-top:22px;font-size:11px;color:#65796d}.range-label output{color:#087b70;font-variant-numeric:tabular-nums}.text-button{padding:1px 0;background:none;font-size:11px;color:#087b70}.observation{border-top:1px solid #edf0e9;margin-top:22px;padding-top:14px}.observation summary{font-size:11px;color:#62786c;cursor:pointer}.stage{min-width:0;display:flex;flex-direction:column;gap:20px}.player{padding:21px 26px 12px}.player-top{display:flex;justify-content:space-between;align-items:center}.player-top h2{font-size:23px;margin-top:2px}.player-top .eyebrow{color:#8ca08e;font-size:9px}.clock{font-size:12px;color:#708674;font-variant-numeric:tabular-nums}.transport{display:flex;align-items:center;gap:12px;margin:18px 0 10px}.play-button{border-radius:9px;background:#067f71;color:white;padding:9px 17px;display:flex;align-items:center;gap:10px;min-width:92px;justify-content:center;font-size:12px;box-shadow:0 3px 9px #087c7525}.play-button:hover{background:#08695f}.icon-button{background:#f1f5ef;border:1px solid #e5ebe0;font-size:21px;width:35px;height:35px;line-height:1;border-radius:9px;flex-shrink:0}.transport #seek{margin:0;min-width:30px}.beat-readout{font-size:10px;white-space:nowrap;color:#7b8c7e;min-width:65px;text-align:right}.score-canvas{width:100%;height:67px;border-radius:8px;background:#fafbf8}.now-playing{display:flex;gap:12px;align-items:center;min-height:43px;font-size:10px;color:#809180;flex-wrap:wrap}.now-playing #notes{display:flex;gap:6px;flex-wrap:wrap;flex:1}.note-chip{border:1px solid #deebe1;background:#f1f8f3;border-radius:5px;padding:1px 7px;color:#227366;font-variant-numeric:tabular-nums}.note-chip:nth-child(2){background:#fff5e9;color:#ad6811;border-color:#f2e3ca}.note-chip:nth-child(3){background:#f7effb;color:#8e4caf;border-color:#eaddf1}.rest{color:#a4afa4}#status{font-size:10px;color:#a66620}#status:empty{display:none}.figure-heading{display:flex;align-items:center;justify-content:space-between;gap:16px;padding:23px 26px 0}.figure-heading h2{margin-top:5px;font-size:19px}.figure-heading .eyebrow{font-size:8px;letter-spacing:1.7px;color:#8da18e}.air-container{position:relative}#airCanvas{width:100%;height:335px;cursor:grab;touch-action:none}#airCanvas:active{cursor:grabbing}.canvas-badge{position:absolute;top:15px;left:26px;display:flex;align-items:center;gap:7px;font-size:9px;color:#7d9386;pointer-events:none;background:#ffffffde;padding:3px 8px;border-radius:5px}.live-dot{width:5px;height:5px;background:#08a790;border-radius:50%}.figure-toolbar{display:flex;justify-content:space-between;align-items:center;margin:0 26px 16px;gap:10px}.figure-toolbar button{background:#f7f9f5;border:1px solid #e6ece2;border-radius:6px;padding:3px 10px;font-size:11px;min-width:30px}.figure-toolbar button:hover{background:#eaf4e9}.rotation-controls,.zoom-controls{display:flex;align-items:center;gap:5px}.rotation-controls>span,.zoom-controls>span{font-size:10px;color:#8b9b8c;margin-right:6px}.figure-caption{border-top:1px solid #edf1e8;padding:15px 26px 20px}.legend{display:flex;gap:18px;flex-wrap:wrap;font-size:10px;color:#6a8071}.legend>span{display:flex;align-items:center;gap:6px}.swatch{width:7px;height:7px;border-radius:50%;display:inline-block}.blue{background:#0088b9}.orange{background:#f2a024}.warm{background:#efae77}.cool{background:#a9dce9}.figure-caption p,.figure-note{font-size:11px;line-height:1.9;color:#7b8c7d;margin-top:11px}.wave-panel{padding-bottom:19px}#waveCanvas{width:100%;height:235px;margin-top:12px}.wave-footer{display:flex;justify-content:space-between;align-items:center;padding:0 26px;font-size:10px;color:#7c8e7c;gap:12px}.check-label{display:flex;align-items:center;gap:7px;cursor:pointer}.wave-direction{color:#10877b;font-size:10px}.figure-note{margin:8px 26px 0}.understanding{padding:21px 26px}.understanding>details>summary{display:flex;justify-content:space-between;align-items:center;cursor:pointer;font-size:17px;font-weight:650;list-style:none}.understanding>details>summary::-webkit-details-marker{display:none}.understanding>details[open]>summary>span:last-child{transform:rotate(45deg)}.understanding>details>summary>span:last-child{font-weight:400;color:#7c9380;transition:.2s}.explain-grid{display:grid;grid-template-columns:1fr 1fr;gap:24px 30px;margin-top:24px}.explain-grid article:last-child{grid-column:1/-1}.article-index{font-size:10px;color:#bf984b;letter-spacing:1px}.explain-grid h3{margin:4px 0 10px}.explain-grid p{font-size:12px;line-height:1.95;color:#617965}.math{font-size:12px;overflow-x:auto;margin:14px 0;color:#244b3a}.katex-display{margin:.8em 0;text-align:left}.katex-display>.katex{text-align:left}.interval-strip{display:flex;margin-top:24px;background:#f7faf5;border:1px solid #e6eddf;border-radius:10px;padding:12px;gap:8px;justify-content:space-between}.interval-item{text-align:center;flex:1;font-size:10px;color:#7c917b}.interval-item strong{display:block;font-size:12px;font-weight:600;color:#1c7d6e}.sources{font-size:10px;color:#92a18e;margin-top:19px;line-height:2}.sources a{text-decoration:underline;text-decoration-color:#cddac7;text-underline-offset:3px}footer{max-width:1340px;margin:auto;padding:22px 0 30px;border-top:1px solid #dfe6da;display:flex;justify-content:space-between;gap:16px;font-size:10px;color:#9aa693}footer>span:first-child{font-weight:650;letter-spacing:1px;color:#6d8872}.air-panel.expanded{position:fixed;inset:20px;z-index:20;display:flex;flex-direction:column;box-shadow:0 0 0 30px #1c382e88}.air-panel.expanded .air-container{flex:1;min-height:0}.air-panel.expanded #airCanvas{height:100%;width:100%}.air-panel.expanded .figure-caption{flex-shrink:0}html.en .intro h1{font-size:36px}html.en .track-title{font-size:12px}html.en .segmented button{font-size:11px}html.en .rotation-controls>span{display:none}
@media(min-width:1600px){main,.site-header{max-width:1510px}.workspace{grid-template-columns:282px minmax(0,1fr)}#airCanvas{height:370px}#waveCanvas{height:255px}}
@media(max-width:1100px){.site-header{padding:0 25px}main{padding:30px 25px 45px}.workspace{grid-template-columns:225px minmax(0,1fr);gap:18px}.library,.settings{padding:20px 13px}.intro h1{font-size:32px}.intro-mark{display:none}.figure-heading{padding:21px 20px 0}.figure-caption{padding:14px 20px 18px}.figure-toolbar{margin:0 20px 14px}.wave-footer{padding:0 20px}.figure-note{margin-left:20px;margin-right:20px}.player{padding:20px 20px 12px}.rotation-controls>span{display:none}.explain-grid{grid-template-columns:1fr;gap:25px}.explain-grid article:last-child{grid-column:auto}.understanding{padding:20px}.beat-readout{display:none}footer{margin:0 25px}#airCanvas{height:310px}}
@media(max-width:760px){.site-header{height:72px;padding:0 18px}.brand{font-size:15px}.brand img{width:35px;height:35px}.brand small{font-size:9px}.local-tag{display:none}.header-right{gap:12px}main{padding:27px 16px 30px}.intro{margin-bottom:25px}.intro h1,html.en .intro h1{font-size:29px;letter-spacing:-.8px}.intro p:last-child{font-size:12px;max-width:480px}.workspace{display:flex;flex-direction:column;gap:17px}aside{display:contents}.library{width:100%;padding:16px 15px;order:0}.section-heading{margin-bottom:10px}.section-heading h2{font-size:14px}#tracks{display:flex;overflow-x:auto;gap:7px;padding-bottom:5px;scroll-snap-type:x mandatory}.track{min-width:169px;max-width:190px;scroll-snap-align:start;padding:10px 7px;gap:8px}.track-number{width:25px;height:31px}.track-subtitle{font-size:9px}.track-credit{display:none}.stage{display:contents}.player{order:1;width:100%;padding:18px 18px 9px}.air-panel{order:2;width:100%}.wave-panel{order:3;width:100%}.settings{order:4;width:100%;display:grid;grid-template-columns:1fr 1fr;gap:0 20px;padding:20px}.settings h2{grid-column:1/-1}.settings .control-label,.settings .hint,.settings .segmented,.settings .range-label,.settings>input{grid-column:1/-1}.settings .observation{grid-column:1/-1}.understanding{order:5;width:100%}.figure-heading{padding:20px 18px 0}.figure-heading h2{font-size:17px}.figure-heading .eyebrow{font-size:7px;letter-spacing:1px}.compact button{padding:6px 10px}#airCanvas{height:290px}.canvas-badge{top:11px;left:18px;font-size:8px}.figure-toolbar{margin:0 15px 14px}.figure-toolbar button{padding:4px 8px}.zoom-controls>span{display:none}.rotation-controls{gap:4px}.legend{gap:12px;font-size:9px}.figure-caption{padding:13px 18px 17px}#waveCanvas{height:215px}.wave-footer{padding:0 18px}.wave-direction{font-size:9px}.wave-footer{font-size:9px}.figure-note{margin-left:18px;margin-right:18px;font-size:10px}.figure-caption p{font-size:10px}.understanding>details>summary{font-size:16px}.interval-strip{gap:4px;padding:10px 4px}.interval-item{font-size:8px}.interval-item strong{font-size:10px}.player-top h2{font-size:21px}.clock{font-size:10px}.transport{gap:8px}.play-button{min-width:80px;padding:9px 12px}.now-playing{gap:8px}.note-chip{font-size:9px}footer{margin:0 18px;flex-wrap:wrap;font-size:9px}footer>span:last-child{width:100%}.air-panel.expanded{inset:8px}.air-panel.expanded .figure-toolbar{margin-top:5px}html.en .rotation-controls #resetView{font-size:9px}}
@media(prefers-reduced-motion:reduce){html{scroll-behavior:auto}*{transition:none!important}}
.component-legend{display:flex;gap:5px 14px;flex-wrap:wrap;margin:9px 26px 0;color:#7c8e7b;font-size:9px}.component-legend>span{display:flex;gap:5px;align-items:center}.component-legend>span::before{content:'';display:block;width:11px;height:2px;background:var(--component-color);opacity:.75}.component-legend:empty{display:none}@media(max-width:760px){.component-legend{margin-left:18px;margin-right:18px;font-size:8px;gap:5px 10px}}
.score-meta{font-size:10px;color:#7b9583;margin-top:3px;font-variant-numeric:tabular-nums}.score-sources{display:flex;flex-direction:column;gap:5px;font-size:9px;line-height:1.7;color:#598573;margin:9px 5px 0}.score-sources:empty{display:none}.score-sources a{text-decoration:underline;text-decoration-color:#c9dace;text-underline-offset:2px}@media(min-width:761px){#tracks{max-height:535px;overflow-y:auto;scrollbar-width:thin;scrollbar-color:#d8e6d9 transparent}}@media(max-width:760px){.score-sources{display:none}.score-meta{font-size:9px}}
.timbre-options{display:grid;grid-template-columns:repeat(6,minmax(0,1fr))}.timbre-options button{grid-column:span 2;min-width:0}.timbre-options button:nth-child(n+4){grid-column:span 3}.hint:empty{display:none}.ornament-hint{font-size:10px;line-height:1.75;color:#81917a;margin-top:7px}.ornament-hint:empty{display:none}
.timbre-options{grid-template-columns:repeat(3,minmax(0,1fr))}.timbre-options button,.timbre-options button:nth-child(n+4){grid-column:span 1}.recording-only{display:none}body.recording-mode .recording-only{display:block;grid-column:1/-1}body.recording-mode .synth-only{display:none}.segmented button:disabled{cursor:default;opacity:.38}
.model-explanation{grid-column:1/-1;border-top:1px solid #e5ebe1;padding-top:22px}.model-explanation summary{font-size:17px;font-weight:650;cursor:pointer;color:#254f43;margin-bottom:14px}.model-explanation p{margin-top:13px}.model-explanation .math{max-width:100%}.swatch.warm{background:#ff831a!important}.swatch.cool{background:#1688f2!important}
#airCanvas{height:390px}@media(max-width:760px){#airCanvas{height:340px}}.air-panel.expanded #airCanvas{height:100%}
.legend .swatch.warm{background:#ff7700!important}
.visual-amplitude-control{margin:0 26px 17px;padding:11px 14px 12px;border:1px solid #e2ebe2;border-radius:10px;background:#fafcf8}.visual-amplitude-control .range-label{margin-top:0;color:#3f6858;font-size:12px}.visual-amplitude-control .range-label output{font-weight:650}.visual-amplitude-control .hint{margin-top:3px}.air-panel.expanded .visual-amplitude-control{flex-shrink:0;margin-bottom:12px}@media(max-width:760px){.visual-amplitude-control{margin:0 18px 15px;padding:10px 12px}.visual-amplitude-control .hint{font-size:10px}}
.amplitude-control-footer{display:flex;align-items:center;justify-content:space-between;gap:10px}.amplitude-control-footer>.check-label{font-size:11px;color:#286f65;white-space:nowrap;flex-shrink:0}.amplitude-control-footer>.check-label input{margin:0;width:14px;height:14px}@media(max-width:760px){.amplitude-control-footer{flex-wrap:wrap;gap:5px}.amplitude-control-footer>.check-label{font-size:10px}}
.upload-jump{font-size:12px;color:#06786d;border:1px solid #cde5d9;border-radius:8px;padding:6px 12px;background:#f1f9f2}.upload-panel{padding:22px 18px;scroll-margin-top:20px}.upload-panel h2{font-size:15px}.upload-profiles{display:grid;grid-template-columns:repeat(3,minmax(0,1fr))}.upload-profiles button{min-width:0}.file-picker{position:relative;display:flex;justify-content:center;align-items:center;min-height:47px;margin-top:17px;border:1px dashed #82b6a3;border-radius:9px;background:#f6fbf5;color:#086e62;cursor:pointer;font-size:12px;overflow:hidden}.file-picker:hover{background:#edf8ee}.file-picker:focus-within{outline:3px solid #ffad39;outline-offset:3px}.file-picker input{position:absolute;inset:0;width:100%;height:100%;opacity:0;cursor:pointer}.upload-filename{font-size:11px;overflow-wrap:anywhere;color:#617b70;margin:9px 0}.upload-submit{width:100%;padding:9px;border-radius:8px;background:#087e70;color:#fff;font-size:12px}.upload-submit:disabled{opacity:.4;cursor:default}.upload-error{font-size:11px;color:#b3392d;line-height:1.8;margin:9px 0 0;overflow-wrap:anywhere}.upload-error:empty{display:none}.analysis-status{margin:10px 0 14px;padding:12px 13px;border:1px solid #e3eade;background:#f7faf4;border-radius:9px}.analysis-status-top,.analysis-status-bottom{display:flex;align-items:center;justify-content:space-between;gap:10px;font-size:11px;color:#3e7567}.analysis-status-bottom{font-size:10px;color:#7c8f7b;min-height:18px}.analysis-status progress{display:block;width:100%;height:7px;margin:8px 0 7px;appearance:none;border:none;border-radius:20px;overflow:hidden;background:#e1ebe1}.analysis-status progress::-webkit-progress-bar{background:#e1ebe1;border-radius:20px}.analysis-status progress::-webkit-progress-value{background:#0b9682;border-radius:20px;transition:width .14s}.analysis-status progress::-moz-progress-bar{background:#0b9682;border-radius:20px}.analysis-status.completed{background:#f7faf6}.analysis-status.failed{border-color:#edc8c0;background:#fff8f6}.play-status{font-size:11px;color:#9a661b;line-height:1.8;margin:6px 0 12px}.play-status:empty{display:none}.play-button{min-width:112px}.air-loading{display:none;position:absolute;inset:0;align-items:center;justify-content:center;color:#6c887b;font-size:13px;background:#ffffffdf;pointer-events:none}.air-panel[data-ready="false"] .air-loading{display:flex}.air-panel[data-ready="false"] canvas{visibility:hidden}.air-panel.expanded .air-loading{height:100%}.settings .timbre-options button:disabled{cursor:default}.player{padding-bottom:15px}[hidden]{display:none!important}
@media(max-width:1100px){.upload-panel{padding:20px 13px}}@media(max-width:760px){.upload-panel{width:100%;order:3;padding:20px}.settings{order:4}.upload-jump{font-size:11px;padding:5px 9px}.header-right{gap:10px}.header-right .segmented button{padding:5px 8px}.play-button{min-width:102px}.analysis-status{padding:10px 11px}.brand small{letter-spacing:1px}.intro h1,html.en .intro h1{font-size:28px}}
/* The whole control is one stable pointer target, including its label. */
.transport .play-button{flex:0 0 auto;min-height:44px;white-space:nowrap;touch-action:manipulation;user-select:none;-webkit-user-select:none}
.transport .play-button>span{pointer-events:none}
/* The stage determines the desktop row height; the music list uses the space
left above the complete upload and oscillation controls. */
@media(min-width:761px){
.workspace{align-items:stretch}
.workspace>aside{contain:size;min-height:0;gap:14px}
.workspace>aside>.panel{padding:18px 14px}
.workspace>aside>.library{display:flex;flex-direction:column;flex:1 1 0;min-height:0}
.workspace>aside>.library .section-heading{flex:0 0 auto;margin-bottom:11px}
.library #tracks{flex:1 1 0;min-height:0;max-height:none;overflow-y:auto;overflow-x:hidden;overscroll-behavior-y:contain;scrollbar-width:thin;scrollbar-color:#91bca8 #f1f6ef;padding-right:3px}
.workspace>aside>.upload-panel,.workspace>aside>.settings{flex:0 0 auto}
.workspace>aside>.settings .control-label{margin-top:15px}
.workspace>aside>.upload-panel .control-label{margin-top:15px}
}
@media(max-width:760px){
.library #tracks{display:block;max-height:264px;overflow-y:auto;overflow-x:hidden;scroll-snap-type:none;overscroll-behavior-y:contain;scrollbar-width:thin;scrollbar-color:#91bca8 #f1f6ef;padding-right:4px}
.library .track{min-width:0;max-width:none;width:100%;scroll-snap-align:none}
}