.tool-bar,.mixing-display,.track-section{touch-action:manipulation}.tool-bar{display:flex;align-items:center;justify-content:center;flex-wrap:wrap;gap:12px;background:#1a1a1a;border-radius:8px;border:1px solid #333;margin:0 auto 20px;width:min(1200px,calc(100% - 40px));padding:12px 20px;min-height:70px}.Product-select{display:flex;align-items:center;justify-content:center;gap:10px}.mixing-display{width:min(700px,calc(100% - 40px));min-height:50px;margin:0 auto 16px;padding:10px 14px;border-radius:10px;display:flex;align-items:center;justify-content:center;background-color:#262e38;border:1px solid #c0bfbf;color:#e8edf2;font-family:var(--font-primary, "Entropy Sans", "Noto Sans SC", "Microsoft YaHei", "PingFang SC", sans-serif);font-weight:600;font-size:.95rem;text-align:center;opacity:1;transform:translateY(0);transition:opacity .22s ease,transform .22s ease}.mixing-display.is-faded{opacity:0;transform:translateY(-4px);pointer-events:none}.tool-bar label{color:#fff;font-weight:600;white-space:nowrap}@media(max-width:1100px){#track-selector-container{margin-left:0}}.em-button--play-button{background-color:#28a745;border-color:#28a745;color:#fff}.em-button--play-button:hover:not(:disabled){background-color:#218838;border-color:#218838;transform:translateY(-1px);box-shadow:0 4px 12px #28a7454d}#play-button-container,#ref-button-container,#export-button-container{margin:0;text-align:center}main{margin:0 auto;text-align:center}.content-layout{--mixing-card-height: 575px;display:flex;width:100%;height:100%;justify-content:center;align-items:stretch;gap:40px;max-width:1460px;margin:0 auto;padding:20px}.volume-section{flex:0 0 460px;display:flex;position:relative}.album-section{flex:0 0 520px;display:flex;position:relative}main h1{font-family:var(--font-primary, "Entropy Sans", "Noto Sans SC", "Microsoft YaHei", "PingFang SC", sans-serif);font-weight:800;font-size:2.5rem;color:#fff;margin-bottom:30px}main p{font-family:var(--font-primary, "Entropy Sans", "Noto Sans SC", "Microsoft YaHei", "PingFang SC", sans-serif);font-size:1.1rem;line-height:1.6;color:#333;margin-bottom:20px}#track-selector-container{display:flex;align-items:center;gap:10px;width:auto;padding:0;margin-left:0;background:transparent;border:0;border-radius:0}.track-selector-label{font-family:var(--font-primary, "Entropy Sans", "Noto Sans SC", "Microsoft YaHei", "PingFang SC", sans-serif);font-size:.9rem;font-weight:600;letter-spacing:normal;text-transform:none;color:#fff;text-align:left;white-space:nowrap}#track-selector{font-family:var(--font-primary, "Entropy Sans", "Noto Sans SC", "Microsoft YaHei", "PingFang SC", sans-serif);font-size:.9rem;padding:10px 12px;border-radius:6px;border:1px solid #515a63;background-color:#272c30;color:#f2f5f7;cursor:pointer;transition:all .2s ease}#midiDevices{font-family:var(--font-primary, "Entropy Sans", "Noto Sans SC", "Microsoft YaHei", "PingFang SC", sans-serif);font-size:.9rem;padding:10px 12px;border-radius:6px;border:1px solid #515a63;background-color:#272c30;color:#f2f5f7;cursor:pointer;transition:all .2s ease;min-width:220px}#midiDevices:hover{border-color:#7c8792}#midiDevices:focus{outline:none;border-color:#a8b4bf;box-shadow:0 0 0 2px #a8b4bf33}#track-selector:hover{border-color:#7c8792}#track-selector:focus{outline:none;border-color:#a8b4bf;box-shadow:0 0 0 2px #a8b4bf33}.mixing-panel-card{width:100%;height:var(--mixing-card-height);min-height:var(--mixing-card-height);padding:24px;background:#232628;border:1px solid #000;border-radius:10px;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:16px}.mixing-loading-overlay{position:absolute;top:0;right:0;bottom:0;left:0;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:14px;border-radius:10px;background:#080a0cc7;-webkit-backdrop-filter:blur(2px);backdrop-filter:blur(2px);opacity:0;visibility:hidden;pointer-events:none;transition:opacity .16s ease,visibility .16s ease;z-index:12}.is-panel-loading .mixing-loading-overlay{opacity:1;visibility:visible;pointer-events:all}.mixing-loading-spinner{width:36px;height:36px;border-radius:999px;border:3px solid rgba(255,255,255,.25);border-top-color:#fff;animation:mixingSpin .9s linear infinite}.mixing-loading-text{margin:0;color:#fff;font-family:var(--font-primary, "Entropy Sans", "Noto Sans SC", "Microsoft YaHei", "PingFang SC", sans-serif);font-size:.95rem;font-weight:600;letter-spacing:.2px}@keyframes mixingSpin{to{transform:rotate(360deg)}}#track-name{margin:0;color:#fff;font-family:var(--font-primary, "Entropy Sans", "Noto Sans SC", "Microsoft YaHei", "PingFang SC", sans-serif);font-weight:700;font-size:1.8rem;text-align:center}#track-artist{margin:-8px 0 0;color:#b8c0c8;font-family:var(--font-primary, "Entropy Sans", "Noto Sans SC", "Microsoft YaHei", "PingFang SC", sans-serif);font-weight:500;font-size:.95rem;text-align:center}.track-album-cover{width:65%;aspect-ratio:1 / 1;max-height:none;object-fit:cover;border-radius:8px;border:1px solid #3a3f44;background:#1c1f21}#mixing-panel-actions{display:grid;grid-template-columns:1fr 1fr;grid-template-areas:"play play" "reference export";gap:10px;padding:10px;background:#1c1f21;border:1px solid #3a3f44;border-radius:10px;margin-top:auto}.mixing-panel-action{width:100%}.mixing-panel-action em-button{width:100%}.mixing-panel-action .em-button{width:100%;min-height:46px;border-radius:8px;font-weight:700;letter-spacing:.2px}.mixing-panel-action .em-button--play-button{box-shadow:0 6px 14px #00000040}.mixing-panel-action .em-button--outline{color:#d9dee3;border-color:#515a63}.mixing-panel-action .em-button--outline:hover:not(:disabled){background:#d9dee3;color:#111417;border-color:#d9dee3}#play-button-container{grid-area:play}#ref-button-container{grid-area:reference}#export-button-container{grid-area:export}#volume-display-container{margin:0;max-width:420px;width:100%;height:var(--mixing-card-height);min-height:var(--mixing-card-height);padding:20px 28px;background-color:#1e1e1e;border-radius:10px;border:1px solid #000000;box-shadow:0 2px 8px #2b2b2b;display:flex;flex-direction:column}.mixing-slider-board{width:100%;flex:1 1 auto;display:flex;min-height:0}.mixing-sliders{display:flex;flex-direction:row;justify-content:space-evenly;align-items:stretch;gap:18px;width:100%;flex:1 1 auto;min-height:0}.mixing-slider-channel{display:flex;flex-direction:column;align-items:center;gap:8px;height:100%;flex:1 1 0}.mixing-slider{position:relative;width:30px;flex:1 1 auto;min-height:300px;background-color:#4a4a4a;border-radius:10px;border:2px solid transparent;overflow:hidden}.mixing-slider-meter-fill{position:absolute;left:0;right:0;bottom:0;height:0%;background:linear-gradient(180deg,#4bcf7ad9,#2c9e57d9);transition:height 70ms linear,background .1s linear}.mixing-slider-dot{position:absolute;top:280px;left:50%;transform:translate(-50%);width:20px;height:20px;border-radius:10px;background-color:#d9d9d9;z-index:2;box-shadow:0 0 0 2px #00000073,0 0 10px #ffffff59}.mixing-slider-name{font-family:var(--font-primary, "Entropy Sans", "Noto Sans SC", "Microsoft YaHei", "PingFang SC", sans-serif);font-weight:600;color:#fff;font-size:.95rem}.mixing-slider-value{font-family:Courier New,monospace;font-weight:700;color:#6c757d;font-size:.9rem}.mixing-slider-channel.is-disabled .mixing-slider{background-color:#2a2a2a;border-color:#1a1a1a;opacity:.55}.mixing-slider-channel.is-disabled .mixing-slider-meter-fill{display:none}.mixing-slider-channel.is-disabled .mixing-slider-dot{background-color:#8a8a8a;box-shadow:0 0 0 2px #0000008c;opacity:.5}.mixing-slider-channel.is-disabled .mixing-slider-name,.mixing-slider-channel.is-disabled .mixing-slider-value{color:#767676}.control-bar{width:100%;height:auto;display:flex;justify-content:center;align-items:center}.samples{display:flex;justify-content:center;align-items:center;min-height:400px;padding:40px 20px}.sample-buttons{display:flex;flex-direction:column;gap:20px;max-width:300px;width:100%}.button-container{display:flex;justify-content:center}.em-button--active{background-color:#28a745!important;border-color:#28a745!important;transform:translateY(-2px);box-shadow:0 6px 20px #28a74566}.em-button--active:hover{background-color:#218838!important;border-color:#218838!important;transform:translateY(-3px)}@media(max-width:768px){.tool-bar{flex-direction:column;align-items:stretch;gap:10px;width:calc(100% - 20px);padding:10px 12px}.mixing-display{width:calc(100% - 20px)}.Product-select{flex-direction:column;align-items:stretch}.Product-select select{min-width:auto;width:100%}#track-selector-container{margin-left:0;width:100%}#track-selector{width:100%}.sample-buttons{max-width:250px;gap:15px}.samples{padding:20px 10px}.content-layout{flex-direction:column;align-items:stretch}.volume-section,.album-section{flex:1 1 auto}#track-name{text-align:center}#mixing-panel-actions{grid-template-columns:1fr;grid-template-areas:"play" "reference" "export"}}.mixer-debug-overlay{position:fixed;top:20px;right:20px;width:300px;background:#1e1e1e;border:1px solid #444;border-radius:8px;box-shadow:0 4px 20px #00000080;z-index:10000;font-family:var(--font-primary, "Entropy Sans", "Noto Sans SC", "Microsoft YaHei", "PingFang SC", sans-serif);color:#fff;overflow:hidden;-webkit-user-select:none;user-select:none}.mixer-debug-header{display:flex;justify-content:space-between;align-items:center;padding:12px 16px;background:#2a2a2a;border-bottom:1px solid #444}.mixer-debug-header h3{margin:0;font-size:1rem;font-weight:600;color:#fff}.mixer-debug-close{background:transparent;border:none;color:#aaa;font-size:1.5rem;line-height:1;cursor:pointer;padding:0;width:24px;height:24px;display:flex;align-items:center;justify-content:center;border-radius:4px}.mixer-debug-close:hover{color:#fff;background:#444}.mixer-debug-content{padding:16px}.mixer-debug-slider{margin-bottom:16px}.mixer-debug-slider label{display:block;font-size:.85rem;font-weight:500;margin-bottom:6px;color:#ccc}.debug-slider{width:100%;height:6px;-webkit-appearance:none;-moz-appearance:none;appearance:none;background:#444;border-radius:3px;outline:none}.debug-slider::-webkit-slider-thumb{-webkit-appearance:none;-moz-appearance:none;appearance:none;width:18px;height:18px;border-radius:50%;background:#007bff;cursor:pointer;border:2px solid #fff;box-shadow:0 0 4px #00000080}.debug-slider::-moz-range-thumb{width:18px;height:18px;border-radius:50%;background:#007bff;cursor:pointer;border:2px solid #fff;box-shadow:0 0 4px #00000080}.debug-slider-value{display:inline-block;margin-left:10px;font-size:.85rem;font-weight:600;color:#007bff;min-width:40px;text-align:right;float:right}.mixer-debug-info{margin-top:16px;padding-top:12px;border-top:1px solid #444;font-size:.75rem;color:#888;line-height:1.4}