.translation-page{--translation-paper:#fafbfd;--translation-ink:#162238;--translation-muted:#717c91;--translation-line:#dfe5ef;--translation-cobalt:#4b5fff;--translation-mono:var(--font-mono);container-type:inline-size;box-sizing:border-box;background:var(--translation-paper);color:var(--translation-ink);height:var(--translation-height,calc(100svh - 120px));min-height:0;padding:18px 2.4% 8px;display:grid;grid-template-rows:auto auto auto auto minmax(0,1fr) auto;overflow:hidden;font-family:var(--font-sans);-webkit-font-smoothing:antialiased}
.translation-page *{box-sizing:border-box}.translation-page [hidden]{display:none!important}.translation-page button,.translation-page textarea{font:inherit}.translation-page button{cursor:pointer;touch-action:manipulation;color:inherit}.translation-page button:disabled{cursor:default;opacity:.3}.translation-page button:focus-visible,.translation-page textarea:focus-visible,.translation-page summary:focus-visible,.translation-page input:focus-visible,.translation-result>p:focus-visible{outline:2px solid var(--translation-cobalt);outline-offset:3px}.translation-page h1,.translation-page p{margin:0}
.translation-toolbar{display:flex;align-items:center;justify-content:space-between;gap:18px;padding-bottom:13px}.translation-kicker{font:12px/1.4 var(--translation-mono);color:var(--translation-muted);letter-spacing:1.2px;padding-bottom:7px}.translation-toolbar h1{font-size:24px;line-height:1.15;font-weight:500;letter-spacing:-.04em}.translation-toolbar h1>span{font:13px var(--translation-mono);margin-left:15px;color:var(--translation-muted);letter-spacing:0}
.translation-source{position:relative;z-index:2;background:#fff;border:1px solid var(--translation-line);border-radius:8px;padding:9px 14px 8px}.translation-source:focus-within{border-color:#aeb7ff;box-shadow:0 0 0 2px #4b5fff07}.translation-source-top{display:flex;align-items:center;justify-content:space-between;gap:12px;font:12px var(--translation-mono);letter-spacing:.6px;color:var(--translation-muted)}.translation-source-top>div{display:flex;align-items:center;gap:15px}.translation-source-top>div>span{font-size:12px;letter-spacing:0;white-space:nowrap}.translation-source-top button{border:0;background:none;padding:3px 0 3px 7px;font:13px var(--translation-mono);min-height:25px;color:var(--translation-muted)}.translation-source textarea{display:block;width:100%;height:58px;min-height:58px;max-height:58px;resize:none;border:0;background:transparent;padding:4px 0;color:var(--translation-ink);font-size:20px;line-height:1.25;letter-spacing:-.025em;overflow:auto}.translation-source textarea::placeholder{color:#a0a9ba}.translation-source textarea:focus-visible{outline:0}.translation-input-bottom{display:flex;align-items:center;justify-content:space-between;gap:15px;padding-top:4px;color:var(--translation-muted);font:12px/1.4 var(--translation-mono)}.translation-input-bottom>p{min-width:0}.translation-choices{display:flex;flex-wrap:wrap;gap:13px;justify-content:flex-end}.translation-choices button{display:flex;align-items:center;gap:7px;border:0;background:transparent;padding:2px 0;font:12px/1.4 var(--translation-mono);color:var(--translation-muted);white-space:nowrap}.translation-choices button:hover,.translation-choices button>span{color:var(--translation-cobalt)}
.translation-targets{position:relative;z-index:4;display:flex;align-items:center;justify-content:space-between;gap:14px;padding:10px 0 4px;min-height:46px}.translation-presets{display:flex;align-items:center;gap:5px}.translation-presets>span{font:12px var(--translation-mono);letter-spacing:.6px;color:var(--translation-muted);margin-right:8px}.translation-presets>button{border:1px solid var(--translation-line);border-radius:5px;min-width:34px;min-height:30px;background:#fff;font:14px var(--translation-mono)}.translation-presets>button[aria-pressed=true]{background:var(--translation-ink);color:#fff;border-color:var(--translation-ink)}.translation-presets>button:hover{border-color:var(--translation-cobalt)}.translation-target-picker{font:13px var(--translation-mono);color:var(--translation-muted)}.translation-target-picker summary{cursor:pointer;display:flex;align-items:center;gap:14px;min-height:30px;list-style:none}.translation-target-picker summary::-webkit-details-marker{display:none}.translation-target-picker summary>span:last-child{color:var(--translation-cobalt)}.translation-language-options{position:absolute;right:0;top:calc(100% + 4px);z-index:6;width:min(620px,100%);margin:0;padding:14px;display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:5px;border:1px solid var(--translation-line);border-radius:8px;background:#fff;box-shadow:0 18px 48px #17243a1a;max-height:45svh;overflow:auto}.translation-target-picker:not([open]) .translation-language-options{display:none}.translation-language-options legend{float:left;width:100%;grid-column:1/-1;padding:0 7px 9px;font:13px var(--translation-mono);color:var(--translation-ink)}.translation-language-options label{display:flex;align-items:center;gap:7px;padding:9px 6px;border-radius:5px;font:13px/1.4 var(--translation-mono);cursor:pointer}.translation-language-options label:hover{background:#f4f6fa}.translation-language-options input{accent-color:var(--translation-cobalt);width:15px;height:15px;margin:0;flex:none}.translation-language-options label>span{min-width:0}.translation-language-options small{display:block;color:var(--translation-muted);font:13px/1.5 var(--font-sans)}.translation-language-options>p{grid-column:1/-1;border-top:1px solid var(--translation-line);margin-top:7px;padding:12px 7px 1px;font:13px/1.6 var(--translation-mono)}
.translation-alert{display:flex;align-items:center;gap:12px;min-height:0;max-height:65px;overflow:auto}.translation-error{flex:1;padding:8px 0;color:#91445f;font-size:14px;line-height:1.5}.translation-alert>button{flex:none;border:1px solid #c997a7;border-radius:4px;padding:7px 10px;background:transparent;color:#91445f;font:13px var(--translation-mono)}.translation-output-stage{display:flex;flex-direction:column;min-height:0;padding-top:6px}.translation-live-bar{display:flex;align-items:center;justify-content:space-between;gap:12px;font:12px/1.4 var(--translation-mono);letter-spacing:.4px;color:var(--translation-muted)}.translation-state{color:var(--translation-cobalt);min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.translation-live-bar>span:last-child{white-space:nowrap}.translation-output-context{font:12px/1.4 var(--translation-mono);padding:5px 0 9px;color:var(--translation-muted);min-height:25px;overflow:hidden;white-space:nowrap;text-overflow:ellipsis}
.translation-results{flex:1;min-height:0;display:grid;grid-template-columns:repeat(5,minmax(0,1fr));grid-auto-rows:minmax(140px,1fr);gap:8px;overflow:auto;scrollbar-width:thin;scrollbar-color:#cbd2df transparent;padding-bottom:1px}.translation-results[data-count="1"]{grid-template-columns:1fr}.translation-results[data-count="2"]{grid-template-columns:repeat(2,minmax(0,1fr))}.translation-results[data-count="3"]{grid-template-columns:repeat(3,minmax(0,1fr))}.translation-results[data-count="4"]{grid-template-columns:repeat(4,minmax(0,1fr))}.translation-result{min-width:0;min-height:0;border:1px solid var(--translation-line);border-radius:7px;background:#fff;padding:12px 13px 7px;display:flex;flex-direction:column;overflow:hidden}.translation-language{display:flex;align-items:baseline;justify-content:space-between;gap:8px;color:var(--translation-muted);margin-bottom:10px;min-height:16px}.translation-language>span{font:13px/1.4 var(--translation-mono);letter-spacing:0}.translation-language>b{font-size:14px;line-height:1.2;font-weight:450;color:var(--translation-ink);text-align:right;white-space:nowrap}.translation-result>p{font-size:18px;line-height:1.45;letter-spacing:-.02em;overflow-wrap:anywhere;white-space:pre-wrap;flex:1;min-height:0;overflow:auto;scrollbar-width:thin;scrollbar-color:#c5cbd8 transparent}.translation-results[data-count="1"] .translation-result{padding:24px 28px 12px}.translation-results[data-count="1"] .translation-result>p{font-size:clamp(24px,3cqw,40px);line-height:1.4;max-width:1000px}.translation-results[data-count="1"] .translation-language{margin-bottom:22px}.translation-result>p[lang=ja],.translation-result>p[lang=zh-Hans],.translation-result>p[lang=ko]{line-height:1.55;letter-spacing:0}.translation-result>p[lang=ar],.translation-result>p[lang=hi],.translation-result>p[lang=th]{line-height:1.65;letter-spacing:0}.translation-output-empty{opacity:.2}.translation-card-footer{display:flex;align-items:center;justify-content:space-between;gap:8px;margin-top:7px;color:var(--translation-muted);font:12px/1.5 var(--translation-mono);letter-spacing:.35px;min-height:25px}.translation-card-footer button{border:0;background:transparent;font:12px var(--translation-mono);padding:5px 0 5px 5px;min-height:25px;white-space:nowrap;color:var(--translation-cobalt)}
.translation-inspector{position:relative;margin-top:5px;min-height:0;font:12px/1.5 var(--translation-mono);color:var(--translation-muted)}.translation-inspector summary{cursor:pointer;padding:9px 0 3px;display:flex;align-items:center;justify-content:space-between;list-style:none}.translation-inspector summary>span{color:var(--translation-cobalt)}.translation-details-body{position:absolute;bottom:calc(100% + 5px);left:0;right:0;z-index:5;border:1px solid var(--translation-line);border-radius:7px;background:#fff;box-shadow:0 10px 50px #11182720;padding:16px;max-height:min(420px,60svh);overflow:auto}.translation-inspector:not([open]) .translation-details-body{display:none}.translation-bottom{display:grid;grid-template-columns:1fr 1fr 1.2fr;gap:20px;padding-bottom:14px;border-bottom:1px solid var(--translation-line)}.translation-bottom>div{display:flex;flex-direction:column;gap:7px}.translation-bottom span{font:12px var(--translation-mono);letter-spacing:.7px;color:var(--translation-muted)}.translation-bottom b{font:16px var(--translation-mono);font-weight:450}.translation-bottom small{font:12px/1.6 var(--translation-mono);color:var(--translation-muted)}.translation-inspector pre{font:13px/1.7 var(--translation-mono);white-space:pre-wrap;overflow-wrap:anywhere;color:var(--translation-ink);margin:14px 0}.translation-footnote{font:12px/1.7 var(--translation-mono);color:var(--translation-muted)}.translation-sr{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}
@container(max-width:960px){.translation-results:not([data-count="1"]):not([data-count="2"]){grid-template-columns:repeat(3,minmax(0,1fr))}.translation-result{padding:10px 11px 5px}.translation-result>p{font-size:16px}.translation-language{gap:5px;margin-bottom:7px;flex-wrap:wrap}.translation-language>b{font-size:13px}.translation-card-footer{margin-top:4px}.translation-language-options{grid-template-columns:repeat(3,minmax(0,1fr))}}
@container(max-width:640px){.translation-toolbar{padding-bottom:11px}.translation-toolbar h1{font-size:20px}.translation-toolbar h1>span{display:none}.translation-source{padding:7px 10px}.translation-source textarea{font-size:18px;height:54px;min-height:54px;max-height:54px}.translation-source-top{font-size:12px}.translation-source-top>div{gap:9px}.translation-choices{gap:12px}.translation-choices button{font-size:12px}.translation-input-bottom>p{font-size:12px}.translation-targets{gap:7px}.translation-presets{gap:4px}.translation-presets>span{font-size:12px;margin-right:4px}.translation-presets>button{min-width:31px;min-height:34px}.translation-target-picker{font-size:13px}.translation-target-picker summary{gap:7px;min-height:34px}.translation-language-options{grid-template-columns:repeat(2,minmax(0,1fr));max-height:50svh}.translation-language-options label{min-height:43px}.translation-results:not([data-count="1"]){grid-template-columns:repeat(2,minmax(0,1fr))}.translation-result>p{font-size:16px}.translation-results[data-count="1"] .translation-result{padding:18px 18px 9px}.translation-language{flex-wrap:nowrap}.translation-card-footer button{min-height:28px}.translation-bottom{grid-template-columns:1fr 1fr;gap:18px}.translation-bottom>div:last-child{grid-column:1/-1}.translation-live-bar,.translation-output-context{font-size:12px}.translation-input-bottom{align-items:start}.translation-choices button:last-child{display:none}}
@media(max-width:700px){.translation-page{height:calc(100svh - 120px);min-height:530px;padding:12px 4% 12px}.translation-source-top button{min-height:30px}.translation-results{grid-auto-rows:minmax(155px,1fr)}.translation-inspector summary{padding:12px 0 4px}.translation-details-body{max-height:60svh}.translation-input-bottom{min-height:24px}}
@media(prefers-reduced-motion:reduce){.translation-page *{animation:none!important;transition:none!important}}

/* Speech stays compact so the source and translations are visible together. */
.translation-mode-picker{display:flex;gap:3px;padding:3px;border:1px solid var(--translation-line);border-radius:7px;flex-shrink:0;background:#fff}.translation-mode-picker button{border:0;background:transparent;color:var(--translation-muted);padding:7px 13px;font-size:13px;border-radius:4px}.translation-mode-picker button[aria-pressed=true]{background:var(--translation-ink);color:white}.translation-voice-bar{display:flex;align-items:center;gap:16px;padding:7px 0 4px;min-height:40px}.translation-microphone{border:0;border-radius:6px;background:var(--translation-cobalt);color:white;display:flex;align-items:center;justify-content:center;gap:9px;min-height:32px;padding:8px 13px;font-size:14px;white-space:nowrap}.translation-microphone:disabled{opacity:.5;cursor:default}.translation-mic-icon{font-size:13px}.translation-page[data-speech=listening] .translation-microphone{background:#b6495b}.translation-page[data-speech=listening] .translation-mic-icon{animation:translation-mic-pulse 1.2s ease-in-out infinite}.translation-spoken-language{display:flex;gap:7px;align-items:center;font:12px var(--translation-mono);letter-spacing:.6px;color:var(--translation-muted);white-space:nowrap}.translation-spoken-language select{border:1px solid var(--translation-line);background:#f6f8fc;color:var(--translation-ink);border-radius:4px;padding:5px 7px;font-size:13px;letter-spacing:0;max-width:115px}.translation-speech-state{font:13px/1.5 var(--translation-mono);color:var(--translation-muted)}.translation-page[data-speech=error] .translation-speech-state{color:#a44458}.translation-speech-credit{font:12px/1.5 var(--translation-mono);color:#929cac;margin-top:2px}.translation-page[data-input-mode=voice] .translation-input-bottom{padding-top:3px}
@keyframes translation-mic-pulse{50%{opacity:.4}}
@container(max-width:650px){.translation-toolbar h1>span{display:none}.translation-voice-bar{gap:10px;flex-wrap:wrap}.translation-speech-state{flex-basis:100%;font-size:12px}.translation-spoken-language{margin-left:auto}.translation-mode-picker button{padding:7px 11px}.translation-speech-credit{font-size:12px}}
@media(max-width:700px){.translation-toolbar h1{font-size:20px}.translation-toolbar h1>span{display:none}.translation-voice-bar{gap:10px;flex-wrap:wrap}.translation-speech-state{flex-basis:100%;font-size:12px}.translation-spoken-language{margin-left:auto}}
@media(prefers-reduced-motion:reduce){.translation-mic-icon{animation:none!important}}
/* Keep recovery visible and actionable when speech cannot start. */
.translation-voice-bar{flex-wrap:wrap;gap:10px 14px}.translation-page .translation-microphone{color:#fff;min-height:38px}.translation-speech-state{flex:1 1 220px;font:14px/1.5 var(--font-sans);color:var(--translation-muted)}.translation-page[data-speech-issue=true] .translation-speech-state{order:3;flex-basis:100%;padding:9px 11px;border:1px solid #e0d5cb;border-radius:5px;background:#faf5ef;color:#704d34;font-size:16px}.translation-open-browser{order:2;min-height:38px;border:1px solid var(--translation-cobalt);border-radius:5px;background:#f4f5ff;padding:8px 12px;font-size:14px;white-space:nowrap}.translation-page .translation-open-browser{color:var(--translation-cobalt)}.translation-page[data-speech=starting] .translation-mic-icon{animation:translation-mic-pulse 1.2s ease-in-out infinite}.translation-page[data-speech=stopping] .translation-microphone{background:#745366}
@container(max-width:650px){.translation-speech-state{flex-basis:100%;font-size:14px}.translation-page[data-speech-issue=true] .translation-speech-state{font-size:14px}.translation-open-browser{width:100%;min-height:38px}.translation-page .translation-microphone{min-height:40px}}
@media(max-width:700px){.translation-speech-state{flex-basis:100%;font-size:14px}.translation-open-browser{min-height:40px}}

/* Local recognition exposes preparation, real microphone activity and decoding. */
.translation-audio-level{width:48px;height:16px;accent-color:var(--translation-cobalt);flex:none}.translation-audio-level::-moz-meter-bar{background:var(--translation-cobalt)}.translation-page[data-speech=transcribing] .translation-microphone{background:#b6495b}.translation-page[data-speech=transcribing] .translation-mic-icon,.translation-page[data-speech=loading] .translation-mic-icon{animation:translation-mic-pulse 1.2s ease-in-out infinite}

/* V6.6: one input for typing and speech; readable supporting text. */
.translation-voice-bar{border-top:1px solid var(--translation-line);margin-top:6px;padding-top:10px}
.translation-microphone{border-radius:999px;min-height:38px;padding:8px 18px;font-size:14px;font-weight:600}
.translation-speech-state{font-size:13px}
.translation-speech-credit{font-size:12px;line-height:1.6}
.translation-language-options label{font-size:14px;padding:10px 8px}
.translation-language-options small{font-size:12px}
.translation-target-picker summary{min-height:38px;padding:0 4px}
.translation-live-bar [data-translation-progress]{font-variant-numeric:tabular-nums}
.translation-source{display:flex;flex-direction:column}
.translation-source>textarea{order:1}
.translation-source>.translation-voice-bar{order:2}
.translation-source>.translation-speech-credit{order:3}
.translation-source>.translation-input-bottom{order:4}
/* A card is as tall as its translation; the set scrolls. */
.translation-results{grid-auto-rows:minmax(150px,auto)}
.translation-results:not([data-count="1"]) .translation-result>p{font-size:16px;line-height:1.5}

/* V6.7: one title, a short input with the microphone at its right edge, and
   compact cards so twenty languages fit on one screen. */
.translation-page{height:auto;min-height:var(--translation-height,calc(100svh - 120px));display:block;overflow:visible;padding:20px 2.6% 30px}
.translation-toolbar{padding-bottom:10px}
.translation-toolbar h1.translation-kicker{font:13px var(--translation-mono);letter-spacing:1.6px;font-weight:400;color:var(--translation-muted);margin:0}
.playground-is-expanded .translation-toolbar{display:none}
.translation-source{padding:10px 14px 10px}
.translation-input-row{display:flex;align-items:center;gap:12px}
.translation-input-row textarea{flex:1;min-width:0;order:0;font-size:24px;line-height:1.35;height:62px;min-height:62px;max-height:170px;resize:vertical;border:0;outline:0;background:transparent;color:var(--translation-ink);padding:6px 0}
.translation-input-row .translation-voice-bar{order:0;flex:none;display:flex;align-items:center;gap:8px;border:0;margin:0;padding:0;min-height:0}
.translation-input-row .translation-voice-bar[hidden]{display:none}
.translation-spoken-select{font:12px var(--translation-mono);color:var(--translation-muted);background:#fff;border:1px solid var(--translation-line);border-radius:6px;padding:6px;max-width:128px}
.translation-input-row .translation-microphone{width:44px;height:44px;min-height:44px;padding:0;border-radius:50%;display:grid;place-items:center;background:#fff;color:var(--translation-ink);border:1px solid var(--translation-line);font-size:0}
.translation-input-row .translation-microphone:hover{border-color:var(--translation-cobalt);color:var(--translation-cobalt)}
.translation-page[data-speech=listening] .translation-microphone,.translation-page[data-speech=transcribing] .translation-microphone,.translation-page[data-speech=starting] .translation-microphone,.translation-page[data-speech=loading] .translation-microphone{background:#d92d20;border-color:#d92d20;color:#fff}
.translation-speech-row{display:none;align-items:center;gap:12px;padding-top:6px;font-size:13px;line-height:1.4;color:var(--translation-muted)}
.translation-page[data-speech-issue=true] .translation-speech-row,.translation-page[data-speech=listening] .translation-speech-row,.translation-page[data-speech=transcribing] .translation-speech-row,.translation-page[data-speech=starting] .translation-speech-row,.translation-page[data-speech=loading] .translation-speech-row,.translation-page[data-speech=preparing] .translation-speech-row,.translation-page[data-speech=stopping] .translation-speech-row,.translation-page[data-speech=recovery] .translation-speech-row{display:flex}
.translation-speech-credit{display:none!important}
.translation-output-stage{display:block}
.translation-results{display:grid;grid-template-columns:repeat(auto-fill,minmax(232px,1fr));grid-auto-rows:auto;gap:10px;overflow:visible}
.translation-results[data-count="1"]{grid-template-columns:1fr}
.translation-results:not([data-count="1"]){grid-template-columns:repeat(auto-fill,minmax(232px,1fr))}
.translation-results:not([data-count="1"]) .translation-result{padding:10px 12px 4px;min-height:0}
.translation-results:not([data-count="1"]) .translation-language{margin-bottom:4px}
.translation-results:not([data-count="1"]) .translation-result>p{font-size:16px;line-height:1.45;margin:2px 0 4px}
.translation-results:not([data-count="1"]) .translation-card-footer{font-size:11px}
.translation-results:not([data-count="1"]) .translation-card-footer button{font-size:12px;min-height:24px;padding:2px 0}
/* V6.7.3 phone width: the text box has a row of its own, the spoken-language
   menu and the microphone share the next one, and results are two to a row. */
@media(max-width:560px){
.translation-input-row{flex-wrap:wrap;gap:4px 10px}
.translation-input-row textarea{flex:1 1 100%;font-size:20px}
.translation-input-row .translation-voice-bar{flex:1 1 100%;flex-wrap:nowrap;justify-content:space-between}
.translation-input-row .translation-spoken-select{flex:0 1 auto;min-width:0;max-width:70%}
.translation-page .translation-results:not([data-count="1"]):not([data-count="2"]){grid-template-columns:repeat(2,minmax(0,1fr))}
.translation-language{flex-wrap:wrap;row-gap:0}
.translation-language>b{overflow-wrap:anywhere}
}

/* V6.8.0 phone width: nothing is cut off. The status wraps instead of ending
   in an ellipsis, and the echo of the sentence (it is on screen, just above) is left out. */
@media(max-width:560px){
.translation-page .translation-output-context{display:none}
.translation-page .translation-state{white-space:normal;overflow:visible;text-overflow:clip}
}