*{box-sizing:border-box}.knp-root{font-family:system-ui,-apple-system,"Segoe UI",sans-serif;width:100%;max-width:520px;margin:24px auto;color:#1f2937}.knp-card{background:#fff;border-radius:28px;box-shadow:0 22px 55px rgba(55,65,81,.18);overflow:hidden;min-height:610px;display:flex;flex-direction:column}.knp-card>header{background:linear-gradient(135deg,#4f46e5,#6366f1);color:#fff;text-align:center;padding:24px 18px}.knp-card>header h2{margin:0;font-size:26px}.knp-card>header p{margin:6px 0 0;color:#c7d2fe}.knp-card>main{flex:1;padding:44px 24px 28px;text-align:center}.knp-card>main>span{color:#6b7280;font-size:13px;font-weight:700;letter-spacing:.08em}.knp-card h1{margin:10px 0 24px;font-size:clamp(48px,12vw,76px);line-height:1;font-weight:900}.knp-listen{border:0;border-radius:999px;background:#e0e7ff;color:#4338ca;padding:13px 22px;font-weight:800;cursor:pointer}.knp-card>footer{background:#f8fafc;min-height:150px;padding:24px;display:flex;flex-direction:column;justify-content:center;align-items:center;border-top:1px solid #eef2f7}.knp-mic{width:82px;height:82px;border:0;border-radius:50%;background:#4f46e5;color:#fff;font-size:34px;cursor:pointer;box-shadow:0 12px 24px rgba(79,70,229,.28)}.knp-mic.recording{background:#ef4444;animation:pulse 1s infinite}@keyframes pulse{50%{box-shadow:0 0 0 18px rgba(239,68,68,0)}}.knp-status{margin-top:14px;color:#6b7280;font-weight:700}.knp-result{margin:28px auto 0;padding:20px;border-radius:22px;max-width:340px}.knp-result.pass{background:#f0fdf4;color:#15803d}.knp-result.fail{background:#fef2f2;color:#b91c1c}.knp-ring{--score:0deg;width:112px;height:112px;margin:auto;border-radius:50%;background:conic-gradient(currentColor var(--score),#e5e7eb 0);display:grid;place-items:center}.knp-ring b{width:88px;height:88px;border-radius:50%;background:#fff;display:grid;place-items:center;font-size:29px;color:#1f2937}.knp-error{margin:18px auto 0;background:#fef2f2;color:#b91c1c;border:1px solid #fecaca;padding:12px;border-radius:14px}.knp-row{display:flex;width:100%;gap:12px}.knp-btn{width:100%;border:0;padding:15px 18px;border-radius:16px;font-size:16px;font-weight:800;cursor:pointer}.knp-btn.primary{background:#4f46e5;color:#fff}.knp-btn.success{background:#22c55e;color:#fff}.knp-btn.outline{background:#fff;color:#4f46e5;border:2px solid #c7d2fe}.knp-btn.muted{background:#e5e7eb;color:#4b5563}.knp-center{align-items:center;justify-content:center;padding:36px;text-align:center}.knp-trophy{font-size:84px}.knp-big{width:72px;height:72px;border-radius:50%;display:grid;place-items:center;background:#fee2e2;color:#dc2626;font-size:38px;font-weight:900}.knp-average{width:100%;background:#eef2ff;border-radius:20px;padding:22px;margin:20px 0 28px}.knp-average span{display:block;color:#6366f1;font-weight:800}.knp-average strong{font-size:58px;color:#4f46e5}@media(max-width:600px){.knp-root{margin:12px auto}.knp-card{min-height:560px;border-radius:20px}.knp-card>header h2{font-size:22px}}
.knp-listen:disabled,.knp-mic:disabled{opacity:.55;cursor:not-allowed;transform:none!important;}