:root{color-scheme:dark;--bg:#101116;--panel:#15161d;--ink:#eeedf4;--muted:#9695a4;--line:#2b2c36;--accent:#c7b5ff;font-family:Inter,"PingFang SC","Microsoft YaHei",sans-serif}
*{box-sizing:border-box}body{margin:0;background:var(--bg);color:var(--ink)}button,input,a{-webkit-tap-highlight-color:transparent}button{font:inherit;cursor:pointer}button:disabled{opacity:.38;cursor:default}button:focus-visible,a:focus-visible,input:focus-visible{outline:2px solid var(--accent);outline-offset:5px}main{max-width:1400px;margin:auto;padding:0 56px}a{color:inherit;text-decoration:none}.masthead{height:83px;display:flex;align-items:center;justify-content:space-between;border-bottom:1px solid var(--line)}.brand{display:flex;align-items:center;gap:13px;font-size:20px;font-weight:600;letter-spacing:2px}.brand-icon{display:grid;place-items:center;width:31px;height:31px;border:1px solid #7c718f;border-radius:8px;color:var(--accent);font-size:29px;font-weight:400;line-height:1}.brand-en{font-size:10px;font-weight:400;letter-spacing:2px;color:var(--muted);margin-left:9px}.edition{font:10px ui-monospace,monospace;letter-spacing:1.6px;color:var(--muted)}.edition span{color:var(--accent);margin-left:18px}.intro{display:flex;justify-content:space-between;align-items:flex-end;padding:33px 0 28px}.eyebrow{font:9px ui-monospace,monospace;letter-spacing:2.5px;color:var(--muted);margin:0 0 12px}h1{font-size:38px;line-height:1.2;font-weight:500;letter-spacing:2px;margin:0}h1 span{color:var(--accent)}.intro-note{font-size:12px;line-height:1.9;color:var(--muted);margin:0 0 2px}.stage{height:clamp(330px,46vh,540px);position:relative;overflow:hidden;border:1px solid #30303c;border-radius:14px;background:radial-gradient(ellipse at 50% 50%,#1d1932 0%,#14141e 45%,#12131a 80%)}.stage::before{content:"";position:absolute;inset:0;background-image:linear-gradient(#ffffff03 1px,transparent 1px),linear-gradient(90deg,#ffffff03 1px,transparent 1px);background-size:42px 42px;pointer-events:none}.stage-top,.stage-bottom{position:absolute;left:24px;right:24px;display:flex;justify-content:space-between;align-items:center;z-index:2}.stage-top{top:19px}.stage-bottom{bottom:20px;color:#797889;font:9px ui-monospace,monospace;letter-spacing:1.4px}.live-label{font-size:11px;color:#aaa6b8;display:flex;align-items:center;gap:8px}.live-label i{width:5px;height:5px;background:#777481;border-radius:100%}.live-label i.active{background:#bdaaef;box-shadow:0 0 10px #bdaaef99}.icon-button{background:#23232f70;border:1px solid #373644;border-radius:7px;width:31px;height:31px;color:#b8b1c9;font-size:21px;line-height:1}#viewport{position:absolute;inset:0}#viewport canvas{display:block;width:100%;height:100%}.stage-hint{position:absolute;bottom:49px;left:0;right:0;text-align:center;color:#b7adc8;font-size:11px;letter-spacing:1px;pointer-events:none}.render-error{position:absolute;inset:35%;background:var(--panel);padding:20px;font-size:14px;z-index:5}.band-grid{display:grid;grid-template-columns:repeat(3,1fr);margin-top:20px;gap:29px}.band-label,.band-caption{display:flex;align-items:center;justify-content:space-between}.band-label{font-size:12px}.band-label i{display:inline-block;width:6px;height:6px;background:var(--band);border-radius:50%;margin-right:8px}.band-label small{color:#81808e;font:9px ui-monospace,monospace;margin-left:10px}.mapping{color:var(--band);font-size:11px}.band-track{height:3px;background:#2c2b36;border-radius:5px;overflow:hidden;margin:12px 0 9px}.band-track>div{width:100%;height:100%;background:var(--band);transform:scaleX(0);transform-origin:left;border-radius:5px}.band-caption{font-size:10px;color:var(--muted)}.band-caption output{font:10px ui-monospace,monospace;color:var(--band)}.controls{margin-top:25px;display:grid;grid-template-columns:auto 1fr;gap:20px;background:#191a22;border:1px solid var(--line);border-radius:12px;padding:21px 23px 14px}.source-buttons{display:flex;gap:8px;align-items:center}.button{height:37px;background:#25262f;border:1px solid #383844;border-radius:7px;color:#dedce6;padding:0 14px;font-size:11px;white-space:nowrap;transition:background .15s,border-color .15s}.button:hover:not(:disabled){background:#343440;border-color:#686277}.button.active{border-color:var(--accent);color:var(--accent)}.button.primary{background:var(--accent);border-color:var(--accent);color:#201933;font-weight:600;padding:0 18px}.button.primary:hover{background:#d4c6ff}.button.primary span{font-size:10px;margin-right:7px}.pause-button{min-width:36px;padding:0 10px}.sliders{display:flex;justify-content:flex-end;gap:28px;align-items:center}.sliders label{display:grid;grid-template-columns:1fr auto;font-size:10px;color:var(--muted);width:115px;gap:8px}.sliders output{font:10px ui-monospace,monospace;color:#c8c2d6}.sliders input{width:100%;margin:0;grid-column:1/-1;accent-color:var(--accent);height:3px;cursor:pointer}.status-line{grid-column:1/-1;display:flex;justify-content:space-between;gap:20px;border-top:1px solid var(--line);padding-top:12px;align-items:center}.status-line p{font-size:10px;color:var(--muted);margin:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;max-width:85%}.text-button{border:0;background:none;color:#c7bfd8;font-size:10px;padding:0;white-space:nowrap}footer{display:flex;justify-content:space-between;margin:19px 0 23px;color:#777684;font-size:9px;letter-spacing:.3px}.stage:fullscreen{height:100vh;border:0;border-radius:0}.stage:fullscreen .stage-hint{bottom:52px} [hidden]{display:none!important}
@media(min-width:1600px){main{padding:0 70px}.stage{height:52vh}.intro{padding-top:40px;padding-bottom:32px}}
@media(max-width:1050px){main{padding:0 30px}.controls{grid-template-columns:1fr}.sliders{justify-content:flex-start;gap:24px}.sliders label{width:150px}.status-line{grid-column:1}.stage{height:390px}}
@media(max-width:600px){main{padding:0 18px}.masthead{height:66px}.brand-en{display:none}.edition{font-size:8px;letter-spacing:.6px}.edition span{margin-left:7px}.intro{padding:26px 0 23px;display:block}h1{font-size:32px}.intro-note{margin-top:15px;font-size:11px}.intro-note br{display:none}.eyebrow{font-size:8px;letter-spacing:1.6px}.stage{height:350px}.stage-top,.stage-bottom{left:16px;right:16px}.stage-bottom{font-size:7px;letter-spacing:.7px}.band-grid{gap:15px}.band-label{font-size:11px}.band-label small{display:none}.band-label i{margin-right:5px}.mapping{font-size:10px}.band-caption{font-size:9px;gap:5px;align-items:flex-start;line-height:1.6}.band-caption span{max-width:60px}.controls{padding:16px 14px 13px;gap:18px;margin-top:20px}.source-buttons{gap:6px;flex-wrap:wrap}.button{padding:0 10px;font-size:10px}.button.primary{padding:0 12px}.sliders{justify-content:space-between;gap:24px}.sliders label{width:46%}footer{font-size:8px}footer span:last-child{display:none}}

/* 三频段独立开关：关闭后保留标签，方便重新打开。 */
.band-toggle{display:flex;align-items:center;justify-content:center;gap:8px;width:100%;min-height:34px;margin-top:12px;border:1px solid #3d3a49;border-radius:6px;background:#201f2a;color:var(--band);font-size:10px;transition:background .15s}
.band-toggle:hover{background:#2c2938}.toggle-track{position:relative;width:25px;height:14px;border-radius:9px;background:var(--band)}.toggle-track::after{content:"";position:absolute;top:3px;left:14px;width:8px;height:8px;background:#191820;border-radius:50%;transition:left .15s}.band-toggle[aria-pressed="false"]{color:#aaa6b5;background:#17181f;border-color:#30313b}.band-toggle[aria-pressed="false"] .toggle-track{background:#575462}.band-toggle[aria-pressed="false"] .toggle-track::after{left:3px;background:#b4afbf}.band.is-off .band-track{opacity:.4}.band.is-off .mapping,.band.is-off .band-caption{opacity:.6}