:root{--bg:#0b1026;--bg2:#151b3d;--card:#ffffff0f;--card-border:#ffffff1f;--text:#f4f6ff;--muted:#a6adce;--accent:#ffd23f;--accent2:#ff5da2;--good:#46e5a0;--danger:#ff6b6b}*{box-sizing:border-box}html,body{min-height:100%;margin:0;padding:0}body{color:var(--text);background:radial-gradient(1200px 600px at 20% -10%, #2a1c5a 0%, transparent 60%), radial-gradient(1000px 500px at 100% 10%, #3a1350 0%, transparent 55%), linear-gradient(160deg, var(--bg), var(--bg2));-webkit-font-smoothing:antialiased;font-family:ui-rounded,SF Pro Rounded,Segoe UI,system-ui,-apple-system,sans-serif}.wrap{flex-direction:column;max-width:560px;min-height:100dvh;margin:0 auto;padding:28px 20px 56px;display:flex}.title{text-align:center;background:linear-gradient(90deg, var(--accent), var(--accent2));color:#0000;-webkit-background-clip:text;background-clip:text;margin:8px 0 4px;font-size:clamp(28px,8vw,44px);font-weight:800;line-height:1.05}.subtitle{text-align:center;color:var(--muted);margin:0 0 22px;font-size:15px}.card{background:var(--card);border:1px solid var(--card-border);-webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px);border-radius:22px;padding:22px}.step-label{letter-spacing:.04em;text-transform:uppercase;color:var(--muted);margin:0 0 12px;font-size:14px;font-weight:700}.recorder{flex-direction:column;align-items:center;gap:14px;display:flex}.rec-btn{cursor:pointer;color:#fff;background:radial-gradient(circle at 30% 25%, #ff8db1, var(--accent2));border:none;border-radius:50%;place-items:center;width:132px;height:132px;font-size:52px;transition:transform .12s,box-shadow .12s;display:grid;box-shadow:0 12px 30px #ff5da273}.rec-btn:active{transform:scale(.96)}.rec-btn:disabled{opacity:.5;cursor:not-allowed}.rec-btn.recording{background:radial-gradient(circle at 30% 25%, #ff9d9d, var(--danger));animation:1.1s ease-in-out infinite pulse}@keyframes pulse{0%,to{box-shadow:0 0 #ff6b6b8c}50%{box-shadow:0 0 0 18px #ff6b6b00}}.hint{color:var(--muted);text-align:center;min-height:22px;font-size:15px}.timer{font-variant-numeric:tabular-nums;font-size:18px;font-weight:700}.section{margin-top:22px}.voices{grid-template-columns:repeat(auto-fit,minmax(92px,1fr));gap:10px;display:grid}.voice{border:2px solid var(--card-border);cursor:pointer;color:var(--text);background:#ffffff0a;border-radius:16px;flex-direction:column;align-items:center;gap:6px;padding:12px 6px;font-size:13px;font-weight:700;transition:transform .1s,border-color .1s,background .1s;display:flex}.voice .emoji{font-size:30px}.voice:hover{transform:translateY(-2px)}.voice.selected{border-color:var(--accent);background:#ffd23f1f}.btn{cursor:pointer;color:#12142b;background:linear-gradient(90deg, var(--accent), #ffe27a);border:none;border-radius:16px;width:100%;padding:16px;font-size:18px;font-weight:800;transition:transform .1s,filter .1s;box-shadow:0 8px 20px #ffd23f4d}.btn:active{transform:scale(.99)}.btn:disabled{opacity:.55;cursor:not-allowed;filter:grayscale(.3)}.btn.secondary{color:var(--text);border:2px solid var(--card-border);box-shadow:none;background:0 0}.spinner{vertical-align:-3px;border:3px solid #12142b59;border-top-color:#12142b;border-radius:50%;width:18px;height:18px;margin-right:8px;animation:.8s linear infinite spin;display:inline-block}@keyframes spin{to{transform:rotate(360deg)}}.player{margin-top:12px}audio{width:100%;margin-top:10px}.error{color:var(--danger);background:#ff6b6b1a;border:1px solid #ff6b6b4d;border-radius:12px;margin-top:12px;padding:12px 14px;font-size:14px}.row{gap:10px;margin-top:12px;display:flex}.row .btn{flex:1}.foot{text-align:center;color:var(--muted);margin-top:auto;padding-top:26px;font-size:12px}