*{box-sizing:border-box;margin:0;padding:0}body{font-family:system-ui,sans-serif;background:#f7fbfd;color:#222}.wrapper{max-width:600px;margin:40px auto;padding:0 20px}header{text-align:center;margin-bottom:32px}header h1{font-size:1.9rem;margin-bottom:4px;color:#1464bf}header h2{font-size:1.25rem;margin-bottom:12px;font-weight:500}.tagline{color:#444}.recorder{text-align:center;margin-bottom:28px}.recorder button{cursor:pointer;margin:6px;padding:10px 18px;border:none;border-radius:6px;background:#1464bf;color:#fff;font-size:1rem}.recorder button[disabled]{opacity:.45;cursor:not-allowed}.player{display:block;margin:16px auto 0;width:100%;max-width:480px}.analyze-btn{background:#2b9348}.result pre{white-space:pre-wrap;background:#eef6ff;padding:16px;border-radius:8px;font-size:1rem;line-height:1.4;color:#0a2e57}footer{margin-top:40px;font-size:.9rem;text-align:center;color:#555}footer b{color:#000}footer u{text-decoration:underline}