:root{font-family:system-ui,-apple-system,"Segoe UI",sans-serif;color:#173d38;background:#edf8f4;font-synthesis:none;color-scheme:light}*{box-sizing:border-box}body{margin:0}main{max-width:660px;margin:0 auto;padding:32px 20px max(24px,env(safe-area-inset-bottom))}header{display:flex;gap:14px;align-items:center}.mark{display:grid;place-items:center;flex-shrink:0;width:52px;height:52px;background:#d3eee3;color:#096e5f;border-radius:19px;font-size:30px}h1{font-size:clamp(23px,5.5vw,32px);line-height:1.2;margin:3px 0}h2{font-size:18px;margin:0 0 18px}.eyebrow{font-size:12px;letter-spacing:.06em;text-transform:uppercase;font-weight:650;color:#52716a;margin:0 0 6px}.intro{line-height:1.6;color:#52716a;margin:24px 0}.card{background:#fff;border:1px solid #dae9e2;border-radius:22px;padding:22px;margin:16px 0;box-shadow:0 6px 24px #153e3410}label{display:block;font-size:14px;font-weight:600;margin:0 0 8px}select,input{font:inherit;width:100%;min-width:0;background:#f5faf7;border:1px solid #bdd6cc;color:#173d38;border-radius:12px;padding:13px}select{margin-bottom:18px}button{font:inherit;font-weight:650;min-height:48px;border:0;border-radius:14px;padding:12px 18px;cursor:pointer;touch-action:manipulation}button:disabled{opacity:.45;cursor:default}.primary{color:white;background:#087b68;box-shadow:0 3px 9px #087b681c}.secondary{color:#116454;background:#e0f1e9;border:1px solid #c6e2d5}.textButton{color:#52716a;background:transparent;padding:7px 10px;min-height:40px}button:focus-visible,select:focus-visible,input:focus-visible{outline:3px solid #46bda6;outline-offset:3px}#connect{width:100%}.hint{font-size:13px;line-height:1.5;color:#60796f;margin:12px 0 0}.sectionHeading{display:flex;align-items:center;justify-content:space-between;gap:8px;margin-bottom:6px}.sectionHeading h2{margin:0}.invite label{margin-top:18px}.linkRow{display:flex;gap:8px}.linkRow input{font-size:13px}.linkRow button{flex-shrink:0;padding:10px 12px}.statusBox{display:flex;align-items:center;gap:10px;padding:10px 4px;font-size:15px;font-weight:600}.dot{width:10px;height:10px;flex-shrink:0;border-radius:50%;background:#a2b8b0}.dot.active{background:#087b68;box-shadow:0 0 0 5px #087b6814}.dot.recording{background:#bd4b39;box-shadow:0 0 0 5px #bd4b3914}.help{margin:0 4px 20px}.transcript{min-height:116px}.translated{background:#e1f2e9;border-color:#cbe7d9}.speechText{font-size:20px;line-height:1.5;overflow-wrap:anywhere;white-space:pre-wrap;max-height:240px;overflow:auto;margin:10px 0 0}.placeholder{font-size:16px;color:#6b837a}#repeat{margin-top:16px}.controls{position:sticky;bottom:0;background:linear-gradient(#edf8f400,#edf8f4 14px);padding:22px 0 12px;display:grid;grid-template-columns:1fr auto;gap:10px}.controls .hint{grid-column:1/-1;text-align:center;margin:0}.error{background:#fff0eb;border:1px solid #efd0c5;color:#853d2d;padding:15px;border-radius:14px;line-height:1.5;overflow-wrap:anywhere}footer{font-size:12px;line-height:1.6;color:#71867d;margin:24px 4px 0}[hidden]{display:none!important}@media(max-width:400px){main{padding:22px 14px}.card{padding:18px}.linkRow{flex-wrap:wrap}.linkRow button{width:100%}.controls{grid-template-columns:1fr}.controls .hint{grid-column:1}.controls button{width:100%}}
.searchStatus{margin:8px 0 18px;min-height:20px}.languageHint{margin:-6px 0 18px}#languageSearch{font-size:16px}#language{font-size:16px}select:disabled,input:disabled{opacity:.6}.speechText[dir=auto]{text-align:start;unicode-bidi:plaintext}

.presetSummary{font-size:19px;font-weight:650;margin:0 0 20px}details{margin:20px 0}summary{cursor:pointer;color:#116454;padding:8px 0;font-weight:600}details[open] summary{margin-bottom:16px}.controls:has(#record[hidden]){grid-template-columns:1fr}
.demo main{max-width:none;padding:14px 16px 18px}.demo header{gap:10px}.demo header .mark{width:36px;height:36px;border-radius:12px;font-size:23px}.demo h1{font-size:21px}.demo header .eyebrow{font-size:10px}.demo .intro,.demo .invite,.demo footer{display:none}.demo .card{margin:10px 0;padding:14px;border-radius:16px;box-shadow:none}.demo #setup .presetSummary{font-size:17px;margin:0 0 12px}.demo #setup>h2{margin-bottom:10px}.demo #setup>.hint{font-size:12px}.demo #setup details{margin:12px 0}.demo .statusBox{font-size:14px;padding:12px 2px 7px}.demo .help{font-size:12px;margin:0 2px 10px;line-height:1.4}.demo .transcript{min-height:98px}.demo .speechText{font-size:18px;line-height:1.4;margin-top:7px;max-height:148px}.demo .placeholder{font-size:15px}.demo #repeat{margin-top:12px;width:100%}.demo .controls{position:static;padding:10px 0 0;background:none;grid-template-columns:1fr auto}.demo .controls:has(#record[hidden]){grid-template-columns:1fr}.demo .controls .hint{font-size:11px}.demo .error{font-size:12px;line-height:1.4;padding:11px;margin:10px 0 0}.demo #setup #checkConnection{margin-top:10px}
.voiceBadge{margin:0 4px 8px;font-size:12px;font-weight:600;color:#116454}.demo .voiceBadge{margin:0 2px 7px}
.inviteButton{width:100%;margin-top:20px;min-height:56px}.invite details{margin:14px 0 0}.invite details summary{font-size:13px;font-weight:500}.invite details label{margin-top:0}.diagnostics{margin-bottom:0}.diagnostics summary{font-size:13px;font-weight:500}#conversation>.statusBox{background:#fff;border:1px solid #dae9e2;border-radius:18px;padding:18px;font-size:18px;margin:16px 0 12px;line-height:1.4}.demo #conversation>.statusBox{padding:12px;font-size:14px}.help{line-height:1.6}
.outgoing summary{font-size:14px;line-height:1.5;overflow-wrap:anywhere;padding:0;color:#52716a}.outgoing[open] summary{margin-bottom:18px}.outgoing .outgoingText{font-size:16px;line-height:1.5;white-space:pre-wrap;overflow-wrap:anywhere;text-align:start;unicode-bidi:plaintext;margin:7px 0 16px;max-height:160px;overflow:auto}.outgoing .outgoingText:last-child{margin-bottom:0}.demo .outgoing{padding:12px 14px}.demo .outgoing summary{font-size:13px}.demo .outgoing .outgoingText{font-size:15px;max-height:110px}