.voice-header{align-items:flex-start;padding-top:24px}.voice-home{display:flex;align-items:center;gap:10px;border:1px solid var(--line);background:#fff;padding:10px 15px;border-radius:99px}.voice-header .brand-row .brand-logo{width:120px}.voice-main{max-width:940px}.voice-heading{text-align:center;margin:32px auto 27px}.voice-heading h1{font-size:clamp(29px,4vw,38px);letter-spacing:-1px;margin-bottom:9px;line-height:1.2}.voice-heading p{font-size:15px;color:var(--muted);margin:0}.voice-layout{display:grid;grid-template-columns:minmax(0,1fr) 240px;gap:22px;align-items:start}.recorder{background:#fff;border:1px solid #eac6d6;border-radius:26px;padding:25px 30px 27px;text-align:center;min-height:425px;box-shadow:0 12px 38px #a63d7008}.mic-picker{display:flex;align-items:center;justify-content:center;gap:10px;font-size:14px;color:var(--muted)}select{font:inherit;max-width:245px;min-width:0;border:1px solid var(--line);border-radius:10px;background:#fff8fb;color:var(--ink);padding:8px 25px 8px 10px}.status{font-size:15px;font-weight:700;color:var(--purple);margin:25px 0 17px}.record{width:112px;height:112px;border:6px solid #fff;border-radius:50%;background:linear-gradient(140deg,#bd4c97,#ed639d);box-shadow:0 0 0 9px #fcedf4,0 10px 30px #ca4d8930;color:#fff;cursor:pointer;transition:transform .2s,box-shadow .2s}.record:hover{transform:scale(1.04);box-shadow:0 0 0 12px #fce7f1,0 10px 30px #ca4d8940}.record:active{transform:scale(.97)}.record svg{width:45px;height:45px;fill:none;stroke:currentColor;stroke-width:3;stroke-linecap:round}.timer{font-size:27px;font-variant-numeric:tabular-nums;letter-spacing:1px;margin:20px 0 4px}.live-wave{height:48px;display:flex;align-items:center;justify-content:center;gap:3px;margin:0 auto 13px;max-width:350px}.live-wave i{width:4px;height:4px;border-radius:9px;background:linear-gradient(#ee84b2,#a63d70);transform-origin:center}.capture-actions,.result-actions{display:flex;justify-content:center;gap:10px;flex-wrap:wrap}.voice-btn{display:inline-flex;justify-content:center;align-items:center;min-height:43px;padding:9px 19px;border:1px solid #e8bfd1;border-radius:12px;background:white;color:var(--purple);font:inherit;font-size:14px;font-weight:700;cursor:pointer;text-decoration:none;transition:transform .2s,box-shadow .2s}.voice-btn:hover{transform:translateY(-2px);box-shadow:0 5px 14px #a63d7016}.primary{background:linear-gradient(120deg,#b83d7c,#d65b92);color:#fff;border-color:transparent}.quiet{font-size:13px;color:var(--muted);margin:13px 0 0}.filters{padding:19px 16px;border:1px solid #ecd8e2;border-radius:22px;background:#ffffff80}.filters h2{font-size:17px;margin:0 0 14px;text-align:center}.filter-grid{display:grid;grid-template-columns:1fr 1fr;gap:9px}.filter{position:relative;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:5px;min-height:86px;border:1px solid #ecd8e2;border-radius:15px;background:#fff;color:var(--ink);font:inherit;font-size:14px;cursor:pointer;transition:background .2s,box-shadow .2s,transform .2s}.filter span{font-size:25px;line-height:1.2}.filter:disabled{opacity:.52;cursor:default}.filter:not(:disabled):hover{transform:translateY(-2px);background:#fff1f7}.filter[aria-pressed=true]{border-color:#c2679b;background:#fff0f7;box-shadow:0 0 0 2px #dfb6d02b}.filter.original{width:100%;min-height:39px;margin-bottom:9px;flex-direction:row}.filters .quiet{text-align:center;font-size:12px}.filter.spark{animation:filter-pop .3s ease}.filter.spark:after{content:'✦';position:absolute;top:1px;right:7px;color:#d35491;animation:spark .55s both;pointer-events:none}.recorder[data-state=recording] .record{animation:breathe 2s ease-in-out infinite}.recorder[data-state=paused] .record{background:#ac8aaf}.recorder[data-state=processing]{opacity:.8}.finished-mark{display:grid;place-items:center;width:85px;height:85px;border-radius:50%;background:#fbeaf3;color:#b44381;font-size:39px;margin:20px auto 13px}#preset-label{font-weight:700;margin:0 0 14px}audio{display:block;width:100%;height:48px;accent-color:var(--purple)}.result-actions{margin-top:24px}#notice{font-size:14px;background:#fff0f5;border-radius:10px;padding:12px;margin:15px 0 0}button:focus-visible,select:focus-visible{outline:3px solid #a63d70;outline-offset:4px}button:disabled{cursor:default}a[aria-disabled=true]{pointer-events:none;opacity:.5}[hidden]{display:none!important}@keyframes breathe{50%{box-shadow:0 0 0 14px #fceaf3,0 7px 35px #ca4d8930}}@keyframes filter-pop{50%{transform:scale(1.035)}}@keyframes spark{from{opacity:0;transform:translateY(5px) scale(.5)}50%{opacity:1}to{opacity:0;transform:translateY(-8px) scale(.8)}}@media(max-width:680px){.voice-layout{grid-template-columns:1fr;gap:16px}.voice-heading{margin-top:27px}.recorder{padding:22px 19px;min-height:410px}.filters{padding:16px}.filter-grid{grid-template-columns:repeat(3,1fr)}.filter{min-height:79px}.mic-picker{font-size:13px}select{max-width:65%}.voice-main{width:calc(100% - 32px)}}@media(prefers-reduced-motion:reduce){*,*:before,*:after{animation:none!important;transition:none!important}}

.voice-logo{display:block;width:min(300px,78%);height:auto;margin:0 auto 13px}.voice-heading{margin-top:18px}.pink-player{display:flex;align-items:center;gap:12px;padding:12px 15px;background:#fceaf2;border:1px solid #efd1df;border-radius:99px;color:#a63d70}.pink-player button{display:grid;place-items:center;flex:none;width:36px;height:36px;border:0;border-radius:50%;background:#f5cede;color:#963263;cursor:pointer;font-size:15px}.pink-player button:hover{background:#efbbd1}.pink-player span{font-size:12px;font-variant-numeric:tabular-nums;white-space:nowrap}.pink-player input{min-width:0;flex:1;accent-color:#b4487e;cursor:pointer;height:20px}.pink-player input:focus-visible{outline:2px solid #a63d70;outline-offset:3px}.pink-player.is-playing{background:#f8deeb}.pink-player[aria-busy=true]{opacity:.55;pointer-events:none}#player{display:none}@media(max-width:400px){.pink-player{gap:8px;padding:9px}.pink-player span{font-size:11px}}

.recorder-options{display:flex;align-items:center;justify-content:center;flex-wrap:wrap;gap:10px 14px}.recorder-options .mic-picker{gap:6px;font-size:12px}.recorder-options select{width:132px;max-width:132px;padding:7px 4px;font-size:12px}.format-picker{display:flex;align-items:center;gap:4px;white-space:nowrap}.format-pill{font:inherit;font-size:12px;line-height:1;min-height:32px;padding:8px;border-radius:99px;border:1px solid #ead4df;background:#fff;color:#846173;cursor:pointer;transition:background .18s,color .18s,box-shadow .18s}.format-pill:hover{background:#fceaf3}.format-pill[aria-pressed=true]{background:#f3cadf;color:#872755;border-color:#e4a3c2;box-shadow:0 2px 7px #b0447910;font-weight:700}.format-copy{font-size:12px;font-style:italic;color:var(--muted);margin:0 3px}.voice-btn[aria-disabled=true]{opacity:.55;cursor:wait}@media(max-width:680px){.recorder-options{gap:10px}.recorder-options .mic-picker{font-size:13px}.recorder-options select{width:175px;max-width:175px}.format-pill{min-height:38px;padding:10px}.format-copy{font-size:12px}}@media(prefers-reduced-motion:reduce){.format-pill{transition:none}}

/* Illustrated presets: fitted images and high-contrast names above each portrait. */
.voice-main{max-width:1040px}.voice-layout{grid-template-columns:minmax(0,1fr) 310px}.filters{padding:16px}.filter-grid{gap:10px}.filter-grid .filter{padding:0;display:block;aspect-ratio:1;min-height:0;overflow:hidden;border:2px solid #edc9db;border-radius:17px;background:#fff;isolation:isolate}.filter-grid .filter img{display:block;width:100%;height:100%;object-fit:cover;object-position:center 35%;transition:transform .25s ease}.filter-grid .filter .filter-name{position:absolute;top:0;left:0;right:0;padding:7px 3px 10px;background:linear-gradient(#fff6fcfa,#fff4f9e8);color:#6e2852;font-size:14px;font-weight:800;line-height:1.2;text-shadow:0 1px 0 #fff;box-shadow:0 2px 8px #57214410}.filter-grid .filter:disabled{opacity:.8}.filter-grid .filter:not(:disabled):hover img{transform:scale(1.045)}.filter-grid .filter[aria-pressed=true]{border-color:#c14484;box-shadow:0 0 0 3px #e9b2cf70,0 4px 16px #b3447830}.filter-grid .filter[aria-pressed=true] .filter-name{background:#f8d7e9f5;color:#7d2054}.filter-grid .filter:focus-visible{outline-offset:3px}.filter-grid .filter.spark:after{top:auto;bottom:9px;right:10px;color:#fff;text-shadow:0 0 7px #ac2864}@media(max-width:800px){.voice-layout{grid-template-columns:1fr}.filters{max-width:none}.filter-grid{grid-template-columns:repeat(3,minmax(0,1fr))}.filter-grid .filter{aspect-ratio:1.1}.recorder{min-height:410px}}@media(max-width:380px){.filter-grid{gap:7px}.filter-grid .filter .filter-name{font-size:12px;padding:6px 1px}}@media(prefers-reduced-motion:reduce){.filter-grid .filter img{transition:none}.filter-grid .filter:not(:disabled):hover img{transform:none}}

/* Give the recorder priority; keep the filter panel compact but easy to scan. */
.voice-layout{grid-template-columns:minmax(0,1fr) 290px;gap:18px}
.filters h2{font-size:18px;margin:0 0 15px;text-align:center}
.filter-grid{gap:10px}
.filter-grid .filter{position:relative;display:flex;flex-direction:column;align-items:stretch;justify-content:flex-start;aspect-ratio:auto;min-height:0;overflow:hidden;border-radius:17px}
.filter-grid .filter img{width:100%;height:auto;aspect-ratio:1.08;object-fit:cover;object-position:center 34%;flex:1}
.filter-grid .filter .filter-name{position:static;display:grid;place-items:center;min-height:34px;padding:5px 3px;background:#fff;color:#6e2852;font-size:14px;font-weight:800;line-height:1.15;text-shadow:none;box-shadow:none}
.filter-grid .filter[aria-pressed=true] .filter-name{background:#f9e2ed;color:#7d2054}
.original.filter{width:max-content;min-width:158px;min-height:47px;margin:0 auto 12px;padding:9px 22px;border-radius:999px;border:1px solid #e5a7c3;background:#f8deea;color:#812a57;font-size:15px;font-weight:750;box-shadow:inset 0 0 0 1px #fff8,0 3px 10px #a63d7012}
.original.filter span{font-size:19px;line-height:1}
.original.filter[aria-pressed=true]{background:#f4cddd;border-color:#d984ad;box-shadow:0 0 0 3px #f5e1eb,0 4px 14px #a63d701d}
.original.filter:disabled{opacity:1}
.filter-grid .filter::before{content:"";position:absolute;z-index:2;inset:-45% auto -45% -65%;width:42%;pointer-events:none;transform:translateX(-180%) rotate(18deg);background:linear-gradient(90deg,transparent,#fff9 48%,transparent);animation:preset-glint 8s ease-in-out infinite}
.filter-grid .filter:nth-child(2)::before{animation-delay:1.1s}.filter-grid .filter:nth-child(3)::before{animation-delay:2.2s}.filter-grid .filter:nth-child(4)::before{animation-delay:3.3s}.filter-grid .filter:nth-child(5)::before{animation-delay:4.4s}.filter-grid .filter:nth-child(6)::before{animation-delay:5.5s}
@keyframes preset-glint{0%,68%,100%{transform:translateX(-180%) rotate(18deg);opacity:0}72%{opacity:1}84%{transform:translateX(470%) rotate(18deg);opacity:0}}
@media(max-width:940px){.voice-layout{grid-template-columns:1fr}.filters{width:100%;max-width:560px;margin:0 auto}.filter-grid{grid-template-columns:repeat(3,minmax(0,1fr))}}
@media(max-width:680px){.filters{max-width:none}.filter-grid .filter img{aspect-ratio:1.12}}
@media(max-width:380px){.filter-grid{gap:7px}.filter-grid .filter .filter-name{font-size:12px;min-height:31px}.original.filter{min-height:43px}}
@media(prefers-reduced-motion:reduce){.filter-grid .filter::before{animation:none;display:none}.filter-grid .filter img{transition:none}}

/* Short landscape cards with readable names anchored over the bottom edge. */
.filter-grid .filter{aspect-ratio:1.42;border-radius:15px}
.filter-grid .filter img{height:100%;aspect-ratio:auto;object-fit:cover;object-position:center 34%;flex:none}
.filter-grid .filter .filter-name{position:absolute;z-index:3;inset:auto 0 0;display:flex;align-items:center;justify-content:center;min-height:29px;padding:5px 4px;border-radius:0 0 12px 12px;background:linear-gradient(180deg,#28132308,#281323c9 46%,#281323e8);color:#fff;font-size:14px;font-weight:800;line-height:1.1;text-shadow:0 1px 3px #1a0a14;box-shadow:none}
.filter-grid .filter[aria-pressed=true] .filter-name{background:linear-gradient(180deg,#a73a760c,#9e286ccf 46%,#8e205eeF);color:#fff}
@media(max-width:380px){.filter-grid .filter .filter-name{min-height:26px;font-size:12px;padding:4px 2px}}

/* Keep the Voice Filters title and Original selection on one row. */
.filters-head{display:flex;align-items:center;justify-content:space-between;gap:8px;margin:0 0 12px}
.filters-head h2{flex:1;min-width:0;margin:0;text-align:left;font-size:16px;line-height:1.15;white-space:nowrap}
.filters-head .original.filter{flex:0 0 auto;width:auto;min-width:108px;min-height:40px;margin:0;padding:6px 12px;font-size:13px}
.filters-head .original.filter span{font-size:16px}
@media(max-width:380px){.filters-head{gap:6px}.filters-head h2{font-size:15px}.filters-head .original.filter{min-width:102px;min-height:38px;padding:5px 9px;font-size:12px}}

/* Match the recorder height and show more of each filter illustration. */
.voice-layout{align-items:stretch}
.recorder{min-height:470px}
.filters{display:flex;flex-direction:column;min-height:470px}
.filter-grid{flex:1;grid-template-rows:repeat(3,minmax(0,1fr))}
.filter-grid .filter{aspect-ratio:auto;min-height:0}
.filter-grid .filter img{height:100%;aspect-ratio:auto;object-fit:contain;flex:1}
.filter-grid .filter .filter-name{min-height:26px;font-size:13px;padding:4px}
@media(max-width:940px){.voice-layout{align-items:start}.recorder{min-height:425px}.filters{display:block;min-height:0}.filter-grid{flex:none;grid-template-rows:none}.filter-grid .filter{aspect-ratio:1.08}.filter-grid .filter img{aspect-ratio:auto;object-fit:contain}}

/* Compact input confirmation: the meter uses the same stream as the recording. */
.mic-check{display:flex;align-items:center;gap:9px;margin:12px 0 0;min-width:0;text-align:left}
.mic-enable{flex:none;border:1px solid #e8bfd1;border-radius:99px;padding:6px 10px;background:#fceaf3;color:#872755;font:inherit;font-size:12px;cursor:pointer}
.mic-enable:disabled{opacity:.65}
#mic-status{flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font-size:12px;color:var(--muted)}
.mic-meter{flex:0 0 42px;height:6px;overflow:hidden;border-radius:99px;background:#f6e3ed}
#mic-level{display:block;width:100%;height:100%;border-radius:inherit;background:linear-gradient(90deg,#b65b99,#ee84b2);transform:scaleX(0);transform-origin:left}
@media(max-width:400px){.mic-check{flex-wrap:wrap}#mic-status{flex-basis:55%}.mic-meter{margin-left:auto}}

.source-picker{display:inline-flex;gap:4px;max-width:100%;padding:4px;margin:0 auto 15px;border:1px solid #efd4e1;border-radius:99px;background:#fff7fb}
.source-picker button{border:0;border-radius:99px;padding:8px 14px;background:transparent;color:#846173;font:inherit;font-size:13px;font-weight:700;cursor:pointer;transition:background .18s,color .18s}
.source-picker button[aria-pressed=true]{background:#f3cadf;color:#872755;box-shadow:0 2px 7px #b0447910}
.source-picker button:disabled{cursor:default;opacity:.65}
.computer-hint{max-width:430px;margin:0 auto 14px;color:var(--muted);font-size:13px;line-height:1.5}
@media(max-width:380px){.source-picker button{font-size:12px;padding:8px 10px}}