.analysis-active .track,.analysis-active #preview{display:none}.analysis-panel{border:1px solid #ececee;border-radius:12px;padding:18px;background:#fff}.analysis-panel-head{display:flex;justify-content:space-between;align-items:flex-start;margin-bottom:14px}.analysis-panel-head b{font-size:12px;display:block}.analysis-panel-head strong{display:block;font:700 25px 'DM Mono',monospace;color:#f22b2b;margin-top:3px}.analysis-panel-head small{font-size:10px;color:#85858b;text-align:right}.analysis-panel canvas{display:block;width:100%;height:125px;border:1px solid #f1d1d1;border-radius:9px;cursor:pointer}.analysis-play-row{display:flex;justify-content:space-between;align-items:center;margin:10px 0 16px}.analysis-play-row button{border:0;border-radius:7px;background:#171719;color:#fff;padding:9px 14px;font:700 11px Manrope,Arial;cursor:pointer}.analysis-play-row span{font:600 10px 'DM Mono',monospace;color:#777}.bpm-adjust{border-top:1px solid #eee;padding-top:15px;display:grid;grid-template-columns:1fr 90px 72px;gap:9px;align-items:center}.bpm-adjust label{font-size:11px;font-weight:800}.bpm-adjust small{display:block;font-size:9px;color:#85858b;margin-top:2px}.bpm-adjust input,.bpm-adjust select{width:100%;border:1px solid #e5e5e7;border-radius:6px;padding:8px;background:#fff;font:600 11px 'DM Mono',monospace}.bpm-preview{margin-top:12px;padding:10px 11px;border-radius:7px;background:#fff5f5;color:#68686d;font-size:10px}.bpm-preview b{color:#f22b2b}.bpm-download{width:100%;margin-top:9px;border:1px solid #171719;border-radius:7px;padding:10px;background:#171719;color:#fff;font:700 11px Manrope,Arial;cursor:pointer}.bpm-download:disabled{opacity:.45;cursor:not-allowed}.key-panel{overflow:hidden}.key-shift-head{display:flex;justify-content:space-between;gap:12px;border-top:1px solid #eee;padding:14px 0 9px;font-size:11px}.key-shift-head span{font:600 10px 'DM Mono',monospace;color:#f22b2b;text-align:right}.simple-piano{display:flex;align-items:flex-start;height:76px;border:1px solid #dcdce0;border-radius:8px;overflow:hidden;background:#f5f5f6}.piano-key{position:relative;flex:1;height:75px;border:0;border-right:1px solid #d9d9dc;background:#fff;color:#505056;font:700 10px 'DM Mono',monospace;cursor:pointer;padding:48px 2px 6px}.piano-key:last-child{border-right:0}.piano-key:hover,.piano-key.selected{background:#fff0f0;color:#e52323}.piano-key.black-key{align-self:flex-start;z-index:1;flex:0 0 0;width:0;height:42px;overflow:visible;color:#fff;background:transparent;border:0;padding:0}.piano-key.black-key::after{content:attr(aria-label);font-size:0;position:absolute;left:-11px;width:22px;height:42px;background:#232327;border:1px solid #111;border-radius:0 0 4px 4px;box-shadow:0 2px 3px #0003}.piano-key.black-key::before{content:attr(data-key-note);position:absolute;z-index:2;left:-10px;width:20px;top:24px;color:#fff;font:700 8px 'DM Mono',monospace}.piano-key.black-key.selected::after,.piano-key.black-key:hover::after{background:#f22b2b}.key-stepper{display:grid;grid-template-columns:1fr 1fr 1.15fr 1fr 1fr;gap:6px;margin-top:11px}.key-stepper button,.key-download{border:1px solid #e2e2e5;border-radius:6px;background:#fff;padding:8px 4px;color:#444;font:700 10px Manrope,Arial;cursor:pointer}.key-stepper button:hover{border-color:#f22b2b;color:#f22b2b}.key-stepper output{display:grid;place-items:center;background:#fff5f5;border-radius:6px;color:#e52323;font:700 10px 'DM Mono',monospace}.key-preview{margin-top:11px;padding:10px 11px;border-radius:7px;background:#fff5f5;color:#68686d;font-size:10px}.key-preview b{color:#f22b2b}.key-export{display:flex;align-items:center;gap:10px;margin-top:9px}.key-export label{flex:1;font:700 10px Manrope;color:#555}.key-export select{margin-left:6px;border:1px solid #e5e5e7;border-radius:6px;padding:7px;background:#fff;font:600 10px 'DM Mono',monospace}.key-download{flex:1;background:#171719;color:#fff;border-color:#171719;padding:10px}.key-download:disabled{opacity:.45;cursor:not-allowed}@media(max-width:760px){.analysis-panel{padding:14px}.analysis-panel canvas{height:105px}.bpm-adjust{grid-template-columns:1fr 80px}.bpm-adjust select{grid-column:2}.analysis-panel-head{display:block}.analysis-panel-head small{text-align:left;display:block;margin-top:4px}.key-shift-head{display:block}.key-shift-head span{display:block;text-align:left;margin-top:3px}.key-export{align-items:stretch;flex-direction:column}.key-export label{display:flex;align-items:center;justify-content:space-between}.key-export select{margin-left:0}}