:root{--ink:#101b2f;--muted:#707989;--green:#176b52;--line:#dce1e7;--radius:8px}*{box-sizing:border-box}body{margin:0;background:#fff;color:var(--ink);font:16px/1.6 Inter,"Microsoft YaHei","PingFang SC",sans-serif}header{height:84px;border-bottom:1px solid var(--line);display:flex;align-items:center;justify-content:space-between;padding:0 4%;font-weight:600}a{color:inherit;text-decoration:none}.brand{display:flex;align-items:center;gap:15px;font-size:30px;font-weight:800}.brand svg{width:40px;height:40px;stroke:var(--green);stroke-width:3;stroke-linecap:round;fill:none}main{max-width:1080px;padding:0 24px;margin:auto}.intro{text-align:center;padding:60px 0 32px}h1{font-size:clamp(30px,4.3vw,56px);letter-spacing:-2px;line-height:1.35;margin:0 0 16px;font-weight:800}.intro p{font-size:23px;color:var(--muted);margin:0}form{padding:0 56px}label{display:block;font-size:19px;font-weight:650;margin-bottom:10px}.query{display:flex;gap:20px}input{min-width:0;flex:1;height:64px;border:1px solid #bfc6d0;border-radius:var(--radius);padding:0 18px;font:16px inherit;color:var(--ink);font-family:inherit;font-size:16px}input::placeholder{color:#929aaa}button{font:600 18px/1.5 inherit;font-family:inherit;font-size:18px;border:0;background:var(--green);color:white;padding:16px 32px;border-radius:var(--radius);cursor:pointer;transition:background .15s}button:hover{background:#10563f}button:disabled{opacity:.55;cursor:wait}input:focus-visible,button:focus-visible,a:focus-visible{outline:3px solid #a4d8c7;outline-offset:3px}.hint{font-size:14px;color:var(--muted);margin:10px 0 0}#status{margin:20px 0 30px;border-bottom:1px solid var(--line);padding:0 0 14px;min-height:25px;color:var(--green);text-align:center}#status.error{color:#ad3333}.result{border:1px solid var(--line);border-radius:12px;padding:30px}.empty{text-align:center;border-style:dashed;padding:32px}.empty svg{width:45px;height:45px;fill:var(--green);stroke:var(--green);stroke-width:2}.result h2{font-size:25px;line-height:1.4;margin:12px 0 8px;overflow-wrap:anywhere}.result p{color:var(--muted);margin:0}.song-heading{display:flex;align-items:center;gap:20px}.record{display:grid;place-items:center;width:72px;height:72px;flex-shrink:0;border-radius:50%;background:#edf5f1;color:var(--green);font-size:38px}.song-heading h2{margin:0 0 5px}audio{width:100%;margin:24px 0 16px;height:48px}.formats{display:grid;grid-template-columns:repeat(3,1fr);gap:12px}.formats button{border:1px solid var(--line);background:white;color:var(--ink);padding:16px 12px}.formats button:first-child{background:var(--green);border-color:var(--green);color:#fff}.formats button:hover{border-color:var(--green);background:#edf5f1;color:var(--green)}.formats span{display:block;font-size:12px;font-weight:400;margin-top:4px;opacity:.75}.result .hint{margin-top:15px;font-size:12px}.steps{display:grid;grid-template-columns:repeat(3,1fr);margin:32px 0 40px;gap:30px}.steps>div+div{border-left:1px solid var(--line);padding-left:30px}.steps h3{font-size:18px;margin:0;display:flex;align-items:center;gap:18px}.steps h3 span{font-size:36px;font-weight:500;color:var(--green)}.steps p{font-size:13px;color:var(--muted);margin:4px 0 0}footer{border-top:1px solid var(--line);text-align:center;padding:22px 0 28px}footer strong{font-size:19px;letter-spacing:1px}footer p{color:var(--muted);margin:4px 0}[hidden]{display:none!important}@media(max-width:640px){header{height:68px;padding:0 20px;font-size:12px}.brand{font-size:24px;gap:9px}.brand svg{width:30px}main{padding:0 20px}.intro{padding:40px 0 30px}h1{font-size:31px;letter-spacing:-1px}.intro p{font-size:16px}form{padding:0}label{font-size:16px}.query{flex-direction:column;gap:10px}input{flex:auto;width:100%;height:56px}.query button{padding:12px}.result{padding:22px 18px}.result h2{font-size:20px}.result p{font-size:14px}.formats{grid-template-columns:1fr}.formats button{text-align:left;padding:12px 16px}.formats span{display:inline;margin-left:12px}.steps{grid-template-columns:1fr;gap:18px;margin:26px 0}.steps>div+div{border-left:0;padding:0}.steps h3 span{font-size:27px}.steps p{padding-left:48px}.record{width:54px;height:54px}.song-heading{gap:12px}}
.follow{border-top:1px solid var(--line);padding:32px 0;text-align:center}.follow h2{font-size:23px;margin:0 0 8px}.follow p{color:var(--muted);font-size:14px;margin:0 auto 20px;max-width:600px}.follow a{display:block;max-width:640px;margin:0 auto;border-radius:12px;overflow:hidden}.follow img{display:block;width:100%;height:auto}.follow .hint{font-size:12px;margin:12px auto 0}@media(max-width:640px){.follow{padding:26px 0}.follow h2{font-size:21px}.follow p{font-size:13px}.follow a{border-radius:8px}}
