*{box-sizing:border-box}body{margin:0;background:#11181e;color:#f4f6f7;font-family:-apple-system,BlinkMacSystemFont,'Noto Sans TC',sans-serif}main{width:min(100%,590px);min-height:100vh;margin:auto;padding:18px 38px 16px;background:#11181e;position:relative;overflow:hidden}header{height:58px;display:flex;align-items:center;justify-content:space-between;font-size:27px}header strong{font-size:20px}header button,header span{background:none;border:0;color:#f4f6f7;font-size:34px}.lyrics{height:590px;overflow:hidden;display:flex;flex-direction:column;gap:28px;padding-top:105px}.lyrics p{margin:0;font-size:39px;line-height:1.27;letter-spacing:3px;font-weight:700;color:#4d555c}.lyrics .current{color:#fff}.transport{padding-top:14px}.transport input{width:100%;accent-color:#f7f8f8}.time{display:flex;justify-content:space-between;color:#b8bdc0;font-size:12px;margin-top:8px}.controls{display:flex;align-items:center;justify-content:space-between;margin-top:34px}.controls button{border:0;background:none;color:#f6f7f7;font-size:27px;min-width:38px}.controls button small{display:block;font-size:11px;margin-top:3px}.controls .play{font-size:39px}.controls #vocalSwitch b{font-size:26px}.controls #vocalSwitch.disabled{color:#70777c}.bottom-tools{display:flex;justify-content:space-around;margin-top:40px;padding-top:13px}.bottom-tools button{border:0;background:none;color:#eef1f2;font-size:29px}.bottom-tools .selected{background:#27323a;border-radius:10px;padding:8px 18px;color:#42d6eb}.scrim{position:fixed;inset:0;background:#0009;opacity:0;pointer-events:none;transition:.25s}.drawer{position:fixed;z-index:3;bottom:0;left:50%;width:min(100%,590px);transform:translate(-50%,105%);background:#272c30;border-radius:28px 28px 0 0;padding:12px 50px 46px;text-align:center;transition:.3s}.drawer.open{transform:translate(-50%,0)}.scrim.open{opacity:1;pointer-events:auto}.handle{width:86px;height:5px;background:#697177;border-radius:5px;margin:0 auto 35px}.drawer h2{font-size:22px;margin:0 0 40px}.key-circle,.bpm{width:80px;height:80px;border-radius:50%;background:#fff;color:#111;display:flex;align-items:center;justify-content:center;margin:0 auto 24px;font-size:22px;font-weight:600}.key-slider{display:flex;align-items:center;gap:22px}.key-slider button{background:none;border:0;color:#fff;font-size:32px}.ticks{height:72px;flex:1;background:repeating-linear-gradient(90deg,transparent 0 13px,#343b40 14px 16px);position:relative}.ticks:after{content:'';position:absolute;left:50%;height:72px;border-left:3px solid #fff}.reset{border:0;background:none;color:#92999e;font-size:16px;margin-top:36px}.drawer-title{display:flex;align-items:center;justify-content:space-between;margin:0 0 55px}.drawer-title h2{margin:0}.toggle{width:72px;height:36px;border-radius:22px;border:0;background:#08c9d8;padding:4px;text-align:right}.toggle i{display:inline-block;background:#fff;width:28px;height:28px;border-radius:50%}.sliders{display:grid;grid-template-columns:1fr .7fr;gap:42px;text-align:left;color:#c8cdd0}.sliders label{font-size:16px}.sliders input{display:block;width:100%;margin-top:15px;accent-color:#fff}.sub-label{display:block;text-align:left;color:#c8cdd0;margin:44px 0 12px}.choices{display:flex;gap:18px}.choices button{flex:1;border:0;border-radius:30px;background:#343a41;color:#fff;padding:18px 8px;font-size:18px;font-weight:700}.choices .chosen{background:#fff;color:#171b1e}.drawer hr{border:0;border-top:1px solid #4c5256;margin:35px 0}.tempo-name{font-size:16px;margin-bottom:16px}.metro .bpm{margin-bottom:22px}@media(max-width:420px){main{padding-left:38px;padding-right:38px}.lyrics{height:570px;padding-top:100px}.lyrics p{font-size:35px}.drawer{padding-left:50px;padding-right:50px}}