:root{color-scheme:light;font-family:Inter,Segoe UI,system-ui,sans-serif}*{box-sizing:border-box}body{margin:0;background:#f6f7fb;color:#12131a}main{max-width:900px;margin:0 auto;padding:40px 20px 60px}.card{background:#fff;border-radius:16px;padding:24px;box-shadow:0 10px 30px rgba(18,19,26,.08)}.header{display:flex;align-items:center;justify-content:space-between;gap:16px;flex-wrap:wrap}.badge{background:#eef1ff;color:#2e3a8c;padding:6px 12px;border-radius:999px;font-size:14px;font-weight:600}.phrase{font-size:24px;line-height:1.4;margin:16px 0 8px}.buttons{display:flex;gap:12px;flex-wrap:wrap}button{border:none;padding:12px 18px;border-radius:10px;font-size:15px;cursor:pointer}button.primary{background:#3b5bff;color:#fff}button.secondary{background:#eef1ff;color:#2e3a8c}button.danger{background:#ff6b6b;color:#fff}button:disabled{opacity:.6;cursor:not-allowed}.recorder{margin:20px 0;padding:16px;border-radius:12px;background:#f3f4f8}.timer{font-weight:600;color:#3b3f4a}.spinner{display:inline-block;width:18px;height:18px;border:3px solid rgba(59,91,255,.3);border-top-color:#3b5bff;border-radius:50%;animation:spin 1s linear infinite}@keyframes spin{0%{transform:rotate(0deg)}to{transform:rotate(1turn)}}.results{margin-top:24px;display:grid;grid-gap:16px;gap:16px}.result-card{background:#fff;border-radius:14px;padding:18px;border:1px solid #eef1ff}.result-card h3{margin:0 0 8px}.result-card p{margin:0;color:#2a2f3a}.error{color:#d33f3f;font-weight:600}