:root{--paper: #f3efe7;--paper-2: #fffdf9;--ink: #17150f;--ink-soft: #6b6459;--line: #e6dfd1;--accent: #3b2ee6;--accent-2: #6a5bff;--rec: #f0410b;--ok: #1f9d55;--warn: #b9770a;--shadow-card: 0 24px 60px -34px rgba(23, 21, 15, .4);--shadow-mic: 0 26px 50px -18px rgba(59, 46, 230, .55);--shadow-rec: 0 26px 50px -18px rgba(240, 65, 11, .55);--r: 22px}*{box-sizing:border-box}html,body{margin:0;padding:0}body{font-family:Hanken Grotesk,system-ui,sans-serif;color:var(--ink);background:radial-gradient(60% 50% at 50% -8%,rgba(106,91,255,.16),transparent 70%),radial-gradient(48% 40% at 85% 18%,rgba(240,65,11,.08),transparent 70%),var(--paper);background-attachment:fixed;min-height:100dvh;-webkit-font-smoothing:antialiased}body:before{content:"";position:fixed;top:0;right:0;bottom:0;left:0;pointer-events:none;opacity:.035;z-index:0;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='120' height='120'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E")}.app{position:relative;z-index:1;max-width:660px;margin:0 auto;padding:clamp(1.5rem,4vw,3rem) 1.25rem 5rem}header{text-align:center;margin-bottom:clamp(1.5rem,5vw,3rem);animation:rise .7s cubic-bezier(.2,.8,.2,1) both}header h1{font-family:Bricolage Grotesque,sans-serif;font-weight:800;font-size:clamp(2.4rem,9vw,4rem);line-height:.95;letter-spacing:-.035em;margin:0 0 .6rem;background:linear-gradient(135deg,var(--ink) 30%,var(--accent) 130%);-webkit-background-clip:text;background-clip:text;color:transparent}header .tagline{margin:0;color:var(--ink-soft);font-size:1rem;font-weight:500}header .tagline b{color:var(--accent);font-weight:700}.muted{color:var(--ink-soft)}.recorder{display:flex;flex-direction:column;align-items:center;gap:1.4rem;margin:0 0 1.5rem;animation:rise .7s cubic-bezier(.2,.8,.2,1) .08s both}.lang{display:inline-flex;align-items:center;gap:.55rem;font-size:.72rem;font-weight:700;color:var(--ink-soft);text-transform:uppercase;letter-spacing:.14em}.lang select{font-family:inherit;font-weight:600;background:var(--paper-2);color:var(--ink);border:1px solid var(--line);border-radius:999px;padding:.45rem .9rem;font-size:.85rem;letter-spacing:0;text-transform:none;cursor:pointer;box-shadow:0 1px #fff9 inset}.lang select:disabled{opacity:.5;cursor:not-allowed}.mic-btn{position:relative;width:132px;height:132px;border-radius:50%;border:none;background:linear-gradient(150deg,var(--accent-2),var(--accent));color:#fff;cursor:pointer;display:grid;place-items:center;box-shadow:var(--shadow-mic);transition:transform .14s ease,box-shadow .25s ease,background .3s ease;-webkit-tap-highlight-color:transparent}.mic-btn .mic-inner{position:relative;z-index:2;display:grid;place-items:center}.mic-btn:hover:not(:disabled){transform:translateY(-3px) scale(1.03)}.mic-btn:active:not(:disabled){transform:scale(.95)}.mic-btn:disabled{opacity:.5;cursor:not-allowed;box-shadow:none;filter:grayscale(.3)}.mic-btn.recording{background:linear-gradient(150deg,#ff7a52,var(--rec));box-shadow:var(--shadow-rec)}.mic-btn.working{background:var(--paper-2);color:var(--accent);box-shadow:var(--shadow-card)}.ripple{position:absolute;top:-2px;right:-2px;bottom:-2px;left:-2px;border-radius:50%;border:2px solid var(--rec);opacity:.55;z-index:1;animation:ripple 1.9s ease-out infinite}.ripple-2{animation-delay:.95s}@keyframes ripple{0%{transform:scale(1);opacity:.55}to{transform:scale(1.9);opacity:0}}.eq{display:flex;align-items:center;gap:5px;height:46px}.eq span{width:6px;height:100%;border-radius:999px;background:#fff;transform-origin:center;animation:eq .9s ease-in-out infinite}.eq span:nth-child(1){animation-delay:-.6s}.eq span:nth-child(2){animation-delay:-.3s}.eq span:nth-child(3){animation-delay:-.8s}.eq span:nth-child(4){animation-delay:-.15s}.eq span:nth-child(5){animation-delay:-.45s}@keyframes eq{0%,to{transform:scaleY(.28)}50%{transform:scaleY(1)}}.spinner{width:42px;height:42px;border:3px solid rgba(59,46,230,.18);border-top-color:var(--accent);border-radius:50%;animation:spin .8s linear infinite}@keyframes spin{to{transform:rotate(360deg)}}.mic-label{margin:0;font-size:1rem;font-weight:600;color:var(--ink-soft);min-height:1.3em;text-align:center}.mic-label.live{color:var(--rec)}.notice{border-radius:16px;padding:.85rem 1.1rem;font-size:.92rem;font-weight:500;margin:0 0 1rem;border:1px solid}.notice.error{background:#fdece7;border-color:#f6c9bb;color:#b3360f}.result{display:grid;gap:.9rem;margin:.5rem 0 2rem;animation:rise .45s cubic-bezier(.2,.8,.2,1) both}.card{background:var(--paper-2);border:1px solid var(--line);border-radius:var(--r);padding:1.1rem 1.25rem;box-shadow:var(--shadow-card)}.card .card-head{display:flex;align-items:center;justify-content:space-between;margin-bottom:.55rem}.card h3{margin:0;font-size:.7rem;font-weight:700;text-transform:uppercase;letter-spacing:.14em;color:var(--ink-soft)}.card.translation h3{color:var(--accent)}.card .text{margin:0;font-size:1.22rem;line-height:1.5;font-weight:500;white-space:pre-wrap;font-family:Bricolage Grotesque,sans-serif;letter-spacing:-.01em}.copy-btn{border:1px solid var(--line);background:var(--paper);color:var(--ink-soft);border-radius:999px;padding:.25rem .7rem;font:inherit;font-size:.74rem;font-weight:600;cursor:pointer;transition:all .15s ease}.copy-btn:hover{color:var(--accent);border-color:var(--accent)}.card.empty .text{color:var(--ink-soft);font-style:italic}.card.warn-card{background:#fdf6e7;border-color:#f0dcae}.card.warn-card .text{font-size:.95rem;color:var(--warn);font-family:Hanken Grotesk,sans-serif}.history{animation:rise .7s cubic-bezier(.2,.8,.2,1) .16s both}.history h2{font-family:Bricolage Grotesque,sans-serif;font-size:.8rem;font-weight:700;text-transform:uppercase;letter-spacing:.16em;color:var(--ink-soft);margin:0 0 .6rem}.history ul{list-style:none;padding:0;margin:0;display:grid;gap:.5rem}.history-item{display:flex;align-items:center;gap:.7rem;width:100%;text-align:left;font:inherit;cursor:pointer;background:var(--paper-2);border:1px solid var(--line);border-radius:14px;padding:.7rem .9rem;color:var(--ink);transition:transform .12s ease,border-color .15s ease,box-shadow .15s ease}.history-item:hover{transform:translate(2px);border-color:var(--accent);box-shadow:0 10px 24px -18px #3b2ee699}.history-item .when{margin-left:auto;font-size:.82rem}.badge{font-size:.64rem;font-weight:700;letter-spacing:.06em;padding:.22rem .55rem;border-radius:999px;text-transform:uppercase;background:var(--line);color:var(--ink-soft)}.badge.done{background:#1f9d5524;color:var(--ok)}.badge.error{background:#f0410b24;color:var(--rec)}.badge.processing,.badge.queued{background:#3b2ee624;color:var(--accent)}@keyframes rise{0%{opacity:0;transform:translateY(14px)}to{opacity:1;transform:translateY(0)}}.progress{display:flex;flex-direction:column;align-items:center;gap:.9rem;margin:0 0 1.75rem;animation:rise .4s ease both}.stepper{display:flex;align-items:flex-start}.step{position:relative;display:flex;flex-direction:column;align-items:center;gap:.4rem;padding:0 1.4rem}.step .dot{width:14px;height:14px;border-radius:50%;background:var(--paper-2);border:2px solid var(--line);transition:all .2s ease}.step .step-label{font-size:.68rem;font-weight:700;text-transform:uppercase;letter-spacing:.08em;color:var(--ink-soft)}.step.done .dot{background:var(--ok);border-color:var(--ok)}.step.active .dot{background:var(--accent);border-color:var(--accent);animation:pulse 1.2s ease-in-out infinite}.step.active .step-label{color:var(--accent)}.step:not(:first-child):before{content:"";position:absolute;top:6px;left:-50%;width:100%;height:2px;background:var(--line);z-index:-1}.step.done:not(:first-child):before,.step.active:not(:first-child):before{background:linear-gradient(90deg,var(--ok),var(--accent))}@keyframes pulse{0%,to{box-shadow:0 0 #3b2ee680}50%{box-shadow:0 0 0 7px #3b2ee600}}.audio-card .player{width:100%;margin-top:.25rem}@media(prefers-reduced-motion:reduce){*,*:before{animation:none!important}.spinner{animation:spin .8s linear infinite!important}}