*,*:before,*:after{box-sizing:border-box;margin:0;padding:0}html,body{height:100%;overflow:hidden}body{font-family:Avenir,Helvetica,Arial,sans-serif;background:#f5f5f5;color:#555}#app{display:flex;flex-direction:column;height:100vh;max-width:1400px;margin:0 auto;width:100%;padding:0 16px}#header{display:flex;align-items:center;justify-content:space-between;padding:8px 0;flex-shrink:0;border-bottom:1px solid #e0e0e0;gap:12px}#header-left{display:flex;align-items:center;gap:10px}#header h1{font-size:20px;font-weight:600;color:#555;white-space:nowrap}.btn{padding:6px 16px;border:1px solid #d0d0d0;border-radius:6px;font-size:13px;cursor:pointer;font-weight:500;transition:background .15s,color .15s;background:#fff;color:#555;white-space:nowrap}.btn:disabled{opacity:.5;cursor:not-allowed}.btn-primary{background:#b5d8b5;color:#4a7a4a;border-color:#a0c8a0}.btn-primary:hover:not(:disabled){background:#a8d0a8}.btn-danger{background:#e8b5b5;color:#8a4a4a;border-color:#d8a0a0}.btn-danger:hover:not(:disabled){background:#e0a8a8}.btn-outline{background:transparent;color:#888}.btn-outline:hover{background:#e8e8e8}.btn-outline.active{background:#d0d8e8;color:#4a6a8a;border-color:#b0c0d8}#status-bar{display:flex;align-items:center;gap:8px;font-size:12px;flex-shrink:0}#status-bar span{padding:3px 10px;border-radius:10px;background:#e8e8e8;color:#777;line-height:1.5}#midi-indicator{padding:3px 10px;border-radius:10px;cursor:pointer;-webkit-user-select:none;user-select:none;line-height:1.5}#midi-indicator.midi-on{background:#b5d8b5;color:#4a7a4a}#midi-indicator.midi-off{background:#e8b5b5;color:#8a4a4a}main{flex:1;display:flex;flex-direction:column;padding:12px 0;min-height:0}#piano-wrapper{flex:1;min-height:200px;overflow:hidden;position:relative}.component-autopiano{width:100%;position:relative;color:#555}.piano-scroll-wrap{width:100%;overflow:auto;scrollbar-width:thin;scrollbar-color:#ccc transparent}.piano-scroll-wrap::-webkit-scrollbar{height:4px}.piano-scroll-wrap::-webkit-scrollbar-track{background:transparent}.piano-scroll-wrap::-webkit-scrollbar-thumb{background:#ccc;border-radius:2px}.piano-wrap{width:90%;margin:0 auto;border-radius:6px;position:relative;overflow:hidden;border:1px solid #d0d0d0}.piano-band{width:100%;height:36px;line-height:36px;background:#e8e8e8;position:relative}.piano-band-img{width:120px;height:100%;position:absolute;top:0;left:50%;transform:translate(-50%)}.piano-tip{position:absolute;top:50%;right:16px;transform:translateY(-50%);color:#888;font-size:12px}.piano-progress{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);width:140px;height:4px;background:#d0d0d0;border-radius:2px;overflow:hidden}.piano-progress-fill{height:100%;width:0%;background:#7a9cc6;border-radius:2px;transition:width .15s ease}.piano-key-wrap{width:100%;background:#eee;overflow:hidden;position:relative}.piano-key:hover{cursor:pointer}.wkey{display:inline-block;width:2.775%;height:100%;margin:0 auto;background:#fff;border:1px solid #ddd;border-top:none;position:relative;vertical-align:top}.wkey:active,.wkey.local-active{background:#dce8f5}.wkey.local-active{background:#c5d9f0!important}.wkey.remote-active{background:#c5e0c5!important}.wkey .keytip{width:100%;color:#888;text-align:center;font-size:13px;position:absolute;bottom:5%;pointer-events:none}.wkey .keytip .keyname{margin-bottom:4px}.wkey .keytip .notename{color:#7a9cc6;font-weight:700}.bkey{display:inline-block;width:10%;height:70%;background:#555;border:1px solid #444;border-top:none;position:absolute;top:0;overflow:hidden}.bkey:active,.bkey.local-active{background:#7a9cc6}.bkey.local-active{background:#6b8db8!important}.bkey.remote-active{background:#6b9c6b!important}.bkey .keytip{width:100%;color:#ddd;position:absolute;left:0;bottom:5%;font-size:13px;overflow:hidden;pointer-events:none}.bkey .keytip .keyname{width:100%;text-align:center}.bkey:nth-child(1){left:9%}.bkey:nth-child(2){left:23%}.bkey:nth-child(3){left:50%}.bkey:nth-child(4){left:65%}.bkey:nth-child(5){left:79%}.bkey-wrap{width:20%;height:0;position:absolute;top:0}.bkey-wrap1{left:0}.bkey-wrap2{left:19.5%}.bkey-wrap3{left:39%}.bkey-wrap4{left:58.3%}.bkey-wrap5{left:77.7%}@media (max-width: 768px){html,body{overflow:auto;-webkit-overflow-scrolling:touch}#app{height:auto;min-height:100vh;overflow:visible}#header{padding:6px 8px;gap:6px;position:sticky;top:0;z-index:20;background:#f5f5f5}#header h1{font-size:16px}#header-left{gap:6px;flex-wrap:wrap}.btn{padding:5px 12px;font-size:12px}#status-bar{gap:4px}#status-bar span,#midi-indicator{padding:2px 6px;font-size:11px}main{flex:none;min-height:0;padding:8px 0 80px}#piano-wrapper{flex:none;min-height:300px;overflow:visible}.piano-scroll-wrap{overflow:auto;-webkit-overflow-scrolling:touch}.piano-wrap{width:96%}.piano-band{height:32px;line-height:32px}.piano-band-img{width:100px}.piano-progress{width:100px;height:3px}.wkey .keytip,.bkey .keytip{font-size:12px}}