:root{font-family:Inter,"Noto Sans TC","PingFang TC","Microsoft JhengHei",system-ui,sans-serif;color:#203c33;background:#f6f7f2;font-synthesis:none;--green:#1d5542;--muted:#718078;--line:#e2e7df}
*{box-sizing:border-box}body{margin:0}button,input,select{font:inherit}button,a,input,select,summary{-webkit-tap-highlight-color:transparent}button{cursor:pointer}button:disabled{cursor:not-allowed;opacity:.5}button:focus-visible,a:focus-visible,input:focus-visible,select:focus-visible,summary:focus-visible{outline:3px solid #a8c855;outline-offset:3px}[hidden]{display:none!important}button{transition:background .16s,transform .16s}button:active{transform:translateY(1px)}.topbar{height:86px;background:#fcfdf9;border-bottom:1px solid var(--line);display:flex;align-items:center;justify-content:space-between;padding:0 max(32px,calc((100vw - 1360px)/2))}.brand{display:flex;align-items:center;gap:10px;color:#184732;text-decoration:none;font-size:25px;font-weight:760;letter-spacing:-1px}.brand svg{width:35px;fill:#dcf0a4;stroke:#1d5542;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}.brand span{margin-left:14px;padding-left:24px;border-left:1px solid #d7e0d6;font-size:14px;letter-spacing:0;font-weight:500}.prototype{font-size:12px;border:1px solid #dce4d8;border-radius:20px;padding:7px 12px;display:flex;align-items:center;gap:7px;color:#65805a}.prototype i,.status i{width:6px;height:6px;display:inline-block;border-radius:50%;background:#a1b097}.prototype i{background:#83a94e}main{max-width:1360px;margin:auto;padding:40px 32px 0}.page-heading{display:flex;justify-content:space-between;align-items:center;margin:0 0 28px}.eyebrow{font-size:12px;font-weight:600;letter-spacing:2px;margin:0 0 10px;color:#708753}h1{font-size:31px;letter-spacing:-.8px;margin:0 0 11px;font-weight:680}.intro{font-size:14px;color:var(--muted);margin:0;line-height:1.8}.private-note{display:flex;align-items:center;gap:12px;font-size:12px;line-height:1.9;color:#4a6554}.private-note small{font-size:11px;color:#839182}.shield{font-size:29px;color:#73946d}.workspace{display:grid;grid-template-columns:minmax(0,1.55fr) minmax(340px,1fr);gap:22px}.call-panel,.transcript-panel{background:#fff;border:1px solid var(--line);border-radius:20px;overflow:hidden;min-width:0}.call-panel{background:#eef2e9;display:flex;flex-direction:column;min-height:590px}.panel-top{padding:21px 25px;display:flex;justify-content:space-between;align-items:center;font-size:12px;color:#829080}.status{display:flex;align-items:center;gap:8px;color:#58724f}.status.connected i{background:#589945;box-shadow:0 0 0 4px #59994515}#timer{font-variant-numeric:tabular-nums;letter-spacing:1px}.setup{margin:auto;width:min(100%,385px);padding:8px 26px 23px}.setup-symbol{background:#dde8cd;color:#47743d;border:1px solid #d1dfbd;width:50px;height:50px;display:grid;place-items:center;font-size:29px;border-radius:16px;margin:0 auto 18px}.setup h2{font-size:21px;text-align:center;font-weight:650;margin:0 0 9px}.setup>p{text-align:center;font-size:12px;color:#7e8c77;line-height:1.8;margin:0 0 20px}label{font-size:12px;display:block;font-weight:550;color:#53674d;margin:0 0 7px}input,select{width:100%;padding:11px 13px;border:1px solid #d7dfd1;border-radius:9px;color:#304c36;background:#fcfdf9;font-size:14px}select{margin-bottom:18px}#name{margin-bottom:15px}#access-field{margin-bottom:16px}.primary{width:100%;padding:13px 17px;border:0;border-radius:10px;background:#24573f;color:#fff;font-size:14px;font-weight:550;display:flex;align-items:center;justify-content:space-between}.primary:hover{background:#17462e}.setup .permission-note{font-size:11px;margin:14px 0 0;color:#8b9683}.call{padding:22px 26px 19px;margin:auto 0;width:100%}.participants{display:flex;align-items:center;justify-content:space-around;gap:8px;margin-bottom:31px}.participant{position:relative;text-align:center;width:42%;padding:22px 10px 20px;border:1px solid #d8e2ce;border-radius:17px;background:#f6f8f0;min-height:250px}.participant.peer{background:#e4ebdc;border-color:#d5dfca}.participant-tag{position:absolute;top:12px;left:13px;font-size:10px;color:#87967a}.avatar{width:72px;height:72px;margin:15px auto 14px;border-radius:50%;display:grid;place-items:center;background:#c5d5ac;color:#416138;font-size:27px;font-weight:600;border:5px solid #e7eddd}.peer .avatar{background:#31553f;color:#e1edbf;border-color:#d1ddc2}.participant h2{font-size:17px;margin:0 0 7px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.participant p{font-size:11px;color:#7f8c72;margin:0 0 16px}.participant-state{font-size:11px;color:#708363}.bridge{color:#7e9967;font-size:24px}.meter{height:4px;background:#e0e8d6;max-width:80px;margin:0 auto 12px;border-radius:8px;overflow:hidden}.meter span{display:block;height:100%;width:0;background:#80a94a;transition:width .08s}.wave{height:4px;display:flex;justify-content:center;gap:3px;margin-bottom:12px;align-items:center}.wave i{height:3px;width:3px;border-radius:2px;background:#8eac6b}.wave.playing i{animation:pulse .6s infinite alternate}.wave.playing i:nth-child(2n){animation-delay:.2s}.wave.playing i:nth-child(3){animation-delay:.4s}@keyframes pulse{to{height:17px}}.invite{padding:13px 14px;background:#f9fbf4;border:1px dashed #cbd8bc;border-radius:10px;display:flex;align-items:center;gap:10px}.invite>div{min-width:0;flex:1}.invite small{font-size:10px;color:#80916e;display:block;margin-bottom:5px}.invite span{display:block;overflow:hidden;white-space:nowrap;text-overflow:ellipsis;font-size:11px;color:#647e50}.soft-button{border:1px solid #cbd7bd;background:#eef4e4;border-radius:7px;padding:9px 11px;color:#4b6739;font-size:11px;white-space:nowrap}.call-controls{display:flex;justify-content:center;gap:30px;margin-top:25px}.round-control{background:none;border:0;font-size:10px;color:#6b805e;min-width:65px;padding:0}.round-control>span{width:43px;height:43px;border-radius:50%;background:#fafcf6;border:1px solid #d5dfca;display:grid;place-items:center;margin:0 auto 8px;font-size:22px;color:#4c6a3b}.round-control[aria-pressed=true]>span{background:#d4dfc8}.round-control.end>span{background:#fbe6de;border-color:#f0d5c9;color:#b86d54;font-size:29px}.call-footer{border-top:1px solid #dfe6d8;display:flex;justify-content:space-between;padding:15px 23px;font-size:10px;color:#8a967e;gap:15px;margin-top:auto}.transcript-panel{display:flex;flex-direction:column;height:590px}.transcript-heading{height:65px;flex-shrink:0;border-bottom:1px solid #edf0e8;padding:0 22px;display:flex;align-items:center;justify-content:space-between}.transcript-heading>div{display:flex;align-items:center;gap:10px}.transcript-heading h2{font-size:14px;font-weight:600;margin:0}.caption-icon{color:#729060;font-size:23px;line-height:1}#message-count{font-size:10px;color:#89957f;border:1px solid #e4eadd;border-radius:15px;padding:4px 8px}.transcript{flex:1;overflow-y:auto;min-height:0;padding:20px;scroll-behavior:smooth}.empty{height:100%;display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center;padding-bottom:14px}.empty>div{font-family:Georgia,serif;font-size:78px;color:#d9e2ce;line-height:1;margin-bottom:-12px}.empty h3{font-size:16px;font-weight:550;color:#708262;margin:0 0 11px}.empty p{font-size:12px;color:#9ca590;line-height:1.9;margin:0 0 25px}.empty>span{font-size:10px;color:#a2ad97;letter-spacing:1px}.text-form{padding:15px;border-top:1px solid #edf0e8;display:flex;gap:8px}.text-form input{border:0;background:#f6f8f2;font-size:12px}.text-form button{border:0;border-radius:8px;background:#e5eddc;color:#4c753b;font-size:21px;width:38px;flex-shrink:0}.caption{border-bottom:1px solid #edf0e8;padding:0 0 18px;margin-bottom:18px}.caption:last-child{border:0;margin:0}.caption-head{display:flex;justify-content:space-between;gap:10px;font-size:11px;color:#90a180;margin-bottom:12px}.caption-name{color:#496540;font-weight:600}.caption-label{font-size:10px;color:#9da894;margin:0 0 5px}.caption-original{font-size:12px;color:#7b8c70;line-height:1.7;margin:0 0 12px;white-space:pre-wrap;overflow-wrap:anywhere}.caption-translation{font-size:15px;font-weight:500;line-height:1.8;margin:0 0 10px;color:#314b2f;white-space:pre-wrap;overflow-wrap:anywhere}.caption-bottom{display:flex;align-items:center;justify-content:space-between;font-size:10px;color:#92a083;gap:8px}.replay{border:0;background:#edf3e5;border-radius:5px;padding:5px 8px;color:#65814d;font-size:10px}.caption-error{color:#b07250!important}.settings{background:#fff;border:1px solid var(--line);border-radius:14px;margin-top:20px;padding:21px 24px;display:flex;align-items:center;gap:23px}.settings>div{margin-right:auto}.settings h2{font-size:13px;font-weight:600;margin:0 0 7px}.settings p{font-size:11px;color:#8b9682;margin:0}.toggle{font-size:11px;font-weight:400;white-space:nowrap;display:flex;align-items:center;gap:7px;cursor:pointer;margin:0}.toggle input{position:absolute;opacity:0;width:1px}.toggle>span{width:29px;height:17px;border-radius:10px;background:#d8dfd2;position:relative}.toggle>span:after{content:"";width:11px;height:11px;background:#fff;border-radius:50%;position:absolute;top:3px;left:3px;transition:transform .15s}.toggle input:checked+span{background:#5d8050}.toggle input:checked+span:after{transform:translateX(12px)}.toggle input:focus-visible+span{outline:3px solid #a8c855;outline-offset:3px}.advanced{font-size:11px;color:#8b9783;margin-top:18px}.advanced summary{cursor:pointer;padding:7px 2px}.advanced>div{padding:12px 15px;max-width:800px;line-height:1.9}.advanced input{max-width:230px;display:block;padding:0}.advanced p{margin:10px 0}footer{display:flex;justify-content:space-between;color:#8d9b81;font-size:12px;border-top:1px solid #e4e9df;margin-top:29px;padding:22px 0 28px;font-weight:600}footer span{font-size:10px;font-weight:400;letter-spacing:1px}.notice{background:#fff3df;border:1px solid #eddbb5;border-radius:9px;padding:12px 16px;font-size:12px;line-height:1.7;color:#87633c;margin-bottom:18px;overflow-wrap:anywhere}.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}
@media(min-width:1450px){main{padding-top:48px}.call-panel{min-height:630px}.transcript-panel{height:630px}}
@media(max-width:1050px){.settings{flex-wrap:wrap;gap:18px}.settings>div{width:100%}.private-note{display:none}.workspace{grid-template-columns:minmax(0,1.3fr) minmax(300px,1fr)}.call{padding:20px 17px}.call-controls{gap:20px}.participant{padding-inline:5px}.call-footer{padding-inline:15px;font-size:9px}}
@media(max-width:760px){.topbar{height:70px;padding:0 20px}.brand{font-size:22px}.brand span{font-size:12px;margin-left:6px;padding-left:16px}.prototype{font-size:10px;padding:6px 9px}main{padding:28px 17px 0}h1{font-size:25px}.intro{font-size:12px}.page-heading{margin-bottom:22px}.workspace{grid-template-columns:1fr;gap:17px}.call-panel{min-height:520px}.transcript-panel{height:460px}.participant{min-height:225px}.participants{margin-bottom:23px}.settings{padding:19px;gap:18px}.settings p{line-height:1.8}.toggle{font-size:10px}.call-footer{font-size:10px}.advanced{font-size:10px}footer{margin-top:20px}.notice{font-size:11px}}
@media(prefers-reduced-motion:reduce){*,*:before,*:after{animation:none!important;transition:none!important;scroll-behavior:auto!important}}
.text-only-option{display:flex;align-items:center;gap:7px;font-size:11px;font-weight:400;margin:0 0 16px}.text-only-option input{width:14px;height:14px;margin:0;accent-color:#24573f}
.topbar-tools{display:flex;align-items:center;gap:12px}.topbar-tools select{width:auto;max-width:150px;margin:0;padding:7px 10px;font-size:12px}.language-pair{display:grid;grid-template-columns:1fr 1fr;gap:12px}.language-pair:has(#target-field[hidden]){grid-template-columns:1fr}.setup{width:min(100%,460px)}.setup>p,.try-panel p{line-height:1.8}.round-control b,.toggle b{font:inherit}.round-control{max-width:90px;white-space:normal;line-height:1.6}.call-controls{gap:18px}.try-panel{border-top:1px solid #d8e2ce;margin-top:20px;padding-top:15px;font-size:12px;color:#617657}.try-panel summary{cursor:pointer;font-weight:600}.try-panel p{font-size:11px}.try-panel form{display:flex;gap:7px;margin-top:12px}.try-panel form input{font-size:12px;min-width:0}.try-panel audio{width:100%;margin-top:8px}.try-panel #demo-original{color:#7a8875;overflow-wrap:anywhere}.try-panel #demo-translation{color:#304c36;font-size:13px;overflow-wrap:anywhere}.browser-help{padding:14px 17px;background:#edf3e6;border:1px solid #d5e1c9;border-radius:10px;font-size:12px;margin-bottom:18px;line-height:1.8}.browser-help p{margin:0 0 8px}.quota-status{font-size:11px;color:#76856d;text-align:right;min-height:14px}.feedback-panel{background:#fff;border:1px solid var(--line);border-radius:14px;padding:20px 24px;margin-top:20px}.feedback-panel h2{font-size:14px;font-weight:600;margin:0 0 18px}.feedback-panel form{display:flex;gap:16px;align-items:end}.feedback-panel form>div{flex:1}.feedback-panel select{margin:0;font-size:12px}.feedback-panel button{min-height:40px}.feedback-panel p{font-size:12px;color:#5d7952}.language-request{display:flex;align-items:center;gap:10px;flex-wrap:wrap;font-size:11px;color:#76856d;margin-top:20px}.language-request label{margin:0}.language-request input{max-width:180px;padding:8px 10px;font-size:12px}.language-request span{font-size:11px}.invite{flex-wrap:wrap}.invite>div{flex-basis:150px}.transcript .empty p{max-width:260px}.settings .toggle{white-space:normal;line-height:1.7}.toggle>span{flex-shrink:0}.call-panel{min-height:650px}.transcript-panel{height:650px}.try-panel[open]{padding-bottom:5px}#demo-status{min-height:18px}.call-footer span{overflow-wrap:anywhere}html:lang(ja) .round-control,html:lang(ko) .round-control{word-break:keep-all}
@media(max-width:760px){.topbar{padding:0 17px}.topbar-tools{gap:6px}.topbar-tools select{max-width:100px;font-size:11px;padding:7px}.brand span{display:none}.prototype{font-size:9px}.setup{padding-inline:23px}.call-panel{min-height:610px}.transcript-panel{height:460px}.feedback-panel{padding:19px}.feedback-panel form{flex-wrap:wrap;gap:13px}.feedback-panel form>div{flex-basis:100%}.feedback-panel button{width:100%}.call-controls{gap:7px}.round-control{min-width:58px;font-size:10px}.language-request{align-items:start}.language-request label{width:100%}.language-request input{max-width:calc(100% - 130px);flex:1}.invite>div{flex-basis:100%}.invite button{flex:1}.settings{gap:15px}.settings .toggle{max-width:100%}.language-pair{gap:9px}.language-pair label{min-height:30px;display:flex;align-items:end}.call-footer{font-size:9px}}
.language-request select{max-width:200px;padding:8px 10px;font-size:12px;margin:0}@media(max-width:760px){.language-request select{max-width:calc(100% - 130px);flex:1;min-width:110px}}
.caption-bottom{flex-wrap:wrap;align-items:start}.caption-progress{line-height:1.7}
.settings{flex-wrap:wrap}.settings .original-audio-help{flex-basis:100%;width:100%;display:flex;align-items:center;gap:14px;border-top:1px solid var(--line);padding-top:14px;margin:0}.original-audio-help p{flex:1;line-height:1.8}.toggle:has(input:disabled){opacity:.55;cursor:default}.call-footer{flex-wrap:wrap}@media(max-width:760px){.settings .original-audio-help{align-items:start;flex-wrap:wrap}.original-audio-help p{flex-basis:100%}}
