@layer base{*,:before,:after{box-sizing:border-box}html{color:var(--foreground);background:var(--background);font-family:var(--font-sans)}body{background:var(--background);min-width:320px;min-height:100vh;margin:0}h1,p,figure{margin:0}button,a,audio{font:inherit}}@layer components{.recorder-page{background:radial-gradient(circle at 18% 12%,#ffffffe0,#0000 28rem),linear-gradient(145deg,#f8f9ff 0%,#f2f0ff 52%,#eef6ff 100%);place-items:center;min-height:100svh;padding:56px 20px;display:grid;position:relative;overflow:hidden}.ambient{filter:blur(8px);pointer-events:none;border-radius:999px;position:absolute}.ambient-one{background:#8776ff21;width:340px;height:340px;top:-160px;right:-80px}.ambient-two{background:#52aeff1f;width:260px;height:260px;bottom:-120px;left:-80px}.recorder-shell{z-index:1;width:min(100%,610px);position:relative}.recorder-heading{text-align:center;margin-bottom:28px}.brand-mark{color:#6756db;background:#ffffffc7;border:1px solid #6756db24;border-radius:16px;place-items:center;width:52px;height:52px;margin:0 auto 14px;display:grid;box-shadow:0 10px 30px #5748b41a}.brand-mark svg{width:23px;height:23px}.eyebrow{color:#776cb4;letter-spacing:.16em;margin-bottom:9px;font-size:.7rem;font-weight:750}.recorder-heading h1{color:#25223c;letter-spacing:-.045em;font-size:clamp(2rem,6vw,2.75rem);font-weight:700;line-height:1.1}.intro{color:#77748a;max-width:430px;margin:12px auto 0;font-size:.95rem;line-height:1.7}.recorder-card{-webkit-backdrop-filter:blur(16px);backdrop-filter:blur(16px);background:#ffffffe0;border:1px solid #7067a61f;border-radius:30px;padding:clamp(24px,6vw,38px);box-shadow:0 30px 80px #453b7f1f,inset 0 1px #ffffffbf}.status-row{justify-content:space-between;align-items:center;display:flex}.status-pill{color:#69657b;align-items:center;gap:7px;font-size:.78rem;font-weight:650;display:inline-flex}.status-pill:before{content:"";background:#a9a4bb;border-radius:50%;width:7px;height:7px}.timer{color:#2f2b46;font-family:var(--font-mono);font-variant-numeric:tabular-nums;letter-spacing:.05em;font-size:.9rem}.waveform{background:linear-gradient(#f8f7ff 0%,#fbfbff 100%);border-radius:20px;justify-content:center;align-items:center;gap:clamp(5px,1.6vw,9px);height:132px;margin:26px 0 30px;display:flex;position:relative;overflow:hidden}.waveform-canvas,.waveform-idle{width:100%;height:100%;position:absolute;inset:0}.waveform-idle{justify-content:center;align-items:center;gap:clamp(3px,1.1vw,6px);padding:0 14px;display:flex}.waveform-idle span{background:#c7c1e8;border-radius:999px;width:clamp(3px,1vw,5px);height:6px}.waveform[data-active=true]{box-shadow:inset 0 0 0 1px #7463d70f}.status-pill[data-status=recording]:before{background:#ed5f6a;animation:1.4s ease-in-out infinite status-pulse;box-shadow:0 0 0 4px #ed5f6a1a}.status-pill[data-status=preview]:before{background:#42aa79}.status-pill[data-status=error]:before{background:#ed8b50}.error-message{color:#9c473d;background:#fff5f2;border:1px solid #d2685529;border-radius:14px;align-items:flex-start;gap:9px;margin:-10px 0 24px;padding:12px 14px;font-size:.8rem;line-height:1.55;display:flex}.error-message svg{flex:none;width:17px;height:17px;margin-top:1px}.recording-preview{background:#f9f8ff;border:1px solid #6958ca1f;border-radius:18px;margin:-10px 0 26px;padding:16px}.preview-copy{justify-content:space-between;align-items:center;gap:14px;margin-bottom:13px;display:flex}.preview-title{color:#38334f;font-size:.82rem;font-weight:700}.preview-meta{color:#8a849d;margin-top:2px;font-size:.7rem}.download-button{color:#5f52b6;background:#fff;border:1px solid #6252be29;border-radius:10px;justify-content:center;align-items:center;gap:6px;height:34px;padding:0 11px;font-size:.76rem;font-weight:650;text-decoration:none;transition:border-color .16s,background .16s;display:inline-flex}.download-button:hover{background:#f4f2ff;border-color:#6252be4d}.download-button:focus-visible{outline-offset:2px;outline:3px solid #6352d233}.audio-player{width:100%;height:38px;display:block}.record-action .record-button.is-recording{background:linear-gradient(145deg,#f06d78,#dc5260);box-shadow:0 14px 28px #da4b5840,0 0 0 8px #e6546114}.record-action .record-button.is-recording:hover{background:linear-gradient(145deg,#e96773,#cf4b58)}.record-action .record-button.is-recording svg{fill:currentColor;width:20px;height:20px}.record-action{place-items:center;gap:12px;display:grid}.record-action .record-button{color:#fff;cursor:pointer;background:linear-gradient(145deg,#7e6ce7,#5b4dcc);border:0;border-radius:50%;justify-content:center;align-items:center;width:74px;height:74px;transition:transform .18s,box-shadow .18s,background .18s;display:inline-flex;box-shadow:0 14px 28px #5e4dce47,0 0 0 8px #6b59db14}.record-action .record-button:hover{background:linear-gradient(145deg,#7563e0,#5345c0);box-shadow:0 16px 34px #5e4dce57,0 0 0 10px #6b59db17}.record-action .record-button:active{transform:translateY(1px)scale(.98)}.record-action .record-button:focus-visible{outline-offset:5px;outline:3px solid #6352d23d}.record-action .record-button:disabled{cursor:wait;opacity:.65}.record-action .record-button svg{width:25px;height:25px}.record-action p{color:#787488;font-size:.8rem}.privacy-note{color:#898596;text-align:center;justify-content:center;align-items:center;gap:7px;margin-top:20px;font-size:.76rem;display:flex}.privacy-note svg{color:#6d61b3;width:15px;height:15px}@media (width<=520px){.recorder-page{place-items:start center;padding-top:34px}.recorder-heading{margin-bottom:22px}.recorder-card{border-radius:24px}.waveform{height:112px}.privacy-note{align-items:flex-start;padding:0 10px;line-height:1.5}.preview-copy{align-items:flex-start}}@keyframes status-pulse{0%,to{opacity:1}50%{opacity:.55}}@media (prefers-reduced-motion:reduce){*,:before,:after{scroll-behavior:auto!important;transition-duration:.01ms!important;animation-duration:.01ms!important;animation-iteration-count:1!important}}}:root{--font-sans:Inter, ui-sans-serif, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;--font-mono:"SFMono-Regular", Consolas, "Liberation Mono", monospace;--background:oklch(97.5% .012 272);--foreground:oklch(24% .035 273);--card:oklch(100% 0 0);--card-foreground:oklch(14.5% 0 0);--popover:oklch(100% 0 0);--popover-foreground:oklch(14.5% 0 0);--primary:oklch(56% .19 278);--primary-foreground:oklch(98.5% 0 0);--secondary:oklch(97% 0 0);--secondary-foreground:oklch(20.5% 0 0);--muted:oklch(97% 0 0);--muted-foreground:oklch(55.6% 0 0);--accent:oklch(97% 0 0);--accent-foreground:oklch(20.5% 0 0);--destructive:oklch(57.7% .245 27.325);--border:oklch(92.2% 0 0);--input:oklch(92.2% 0 0);--ring:oklch(67% .15 278);--chart-1:oklch(87% 0 0);--chart-2:oklch(55.6% 0 0);--chart-3:oklch(43.9% 0 0);--chart-4:oklch(37.1% 0 0);--chart-5:oklch(26.9% 0 0);--radius:1rem;--sidebar:oklch(98.5% 0 0);--sidebar-foreground:oklch(14.5% 0 0);--sidebar-primary:oklch(20.5% 0 0);--sidebar-primary-foreground:oklch(98.5% 0 0);--sidebar-accent:oklch(97% 0 0);--sidebar-accent-foreground:oklch(20.5% 0 0);--sidebar-border:oklch(92.2% 0 0);--sidebar-ring:oklch(70.8% 0 0)}.dark{--background:oklch(17% .025 273);--foreground:oklch(98.5% 0 0);--card:oklch(20.5% 0 0);--card-foreground:oklch(98.5% 0 0);--popover:oklch(20.5% 0 0);--popover-foreground:oklch(98.5% 0 0);--primary:oklch(72% .14 278);--primary-foreground:oklch(17% .025 273);--secondary:oklch(26.9% 0 0);--secondary-foreground:oklch(98.5% 0 0);--muted:oklch(26.9% 0 0);--muted-foreground:oklch(70.8% 0 0);--accent:oklch(26.9% 0 0);--accent-foreground:oklch(98.5% 0 0);--destructive:oklch(70.4% .191 22.216);--border:oklch(100% 0 0/.1);--input:oklch(100% 0 0/.15);--ring:oklch(55.6% 0 0);--chart-1:oklch(87% 0 0);--chart-2:oklch(55.6% 0 0);--chart-3:oklch(43.9% 0 0);--chart-4:oklch(37.1% 0 0);--chart-5:oklch(26.9% 0 0);--sidebar:oklch(20.5% 0 0);--sidebar-foreground:oklch(98.5% 0 0);--sidebar-primary:oklch(48.8% .243 264.376);--sidebar-primary-foreground:oklch(98.5% 0 0);--sidebar-accent:oklch(26.9% 0 0);--sidebar-accent-foreground:oklch(98.5% 0 0);--sidebar-border:oklch(100% 0 0/.1);--sidebar-ring:oklch(55.6% 0 0)}