:root{color-scheme:dark;--bg:#080e16;--panel:#111c2b;--panel-top:#11252b;--ink:#f0f5fa;--muted:#91a5b9;--line:#273849;--teal:#79e3ce;--blue:#a6c7ff;--button:#1b2a3b;--caption:26px;--top:1fr;--bottom:1fr;--radius:24px;font-family:system-ui,-apple-system,"Segoe UI","Noto Sans KR","Noto Sans JP",sans-serif}
*{box-sizing:border-box}body{margin:0;background:var(--bg);color:var(--ink);overscroll-behavior:none}button,input,select{font:inherit}button,select{cursor:pointer}button{color:inherit}button:disabled,select:disabled{cursor:default;opacity:.6}button{touch-action:manipulation;-webkit-tap-highlight-color:transparent}button:focus-visible,select:focus-visible,input:focus-visible,[tabindex]:focus-visible{outline:2px solid var(--teal);outline-offset:3px}button:active{filter:brightness(1.15)}button,select{border:1px solid var(--line)}svg{width:22px;height:22px;fill:none;stroke:currentColor;stroke-width:1.7;stroke-linecap:round;stroke-linejoin:round;flex-shrink:0}.svg-defs{position:absolute;width:0;height:0;overflow:hidden}.app{height:100vh;height:100dvh;width:min(100%,1160px);margin:auto;padding:max(10px,env(safe-area-inset-top)) max(12px,env(safe-area-inset-right)) max(10px,env(safe-area-inset-bottom)) max(12px,env(safe-area-inset-left));display:grid;grid-template-rows:minmax(0,var(--top)) auto minmax(0,var(--bottom));gap:10px}
.face{min-height:0;display:flex;flex-direction:column;gap:12px;padding:20px 24px 13px;background:var(--panel);border:1px solid var(--line);border-radius:var(--radius);overflow:hidden;position:relative}.guest{transform:rotate(180deg);background:var(--panel-top);border-color:#2b4a50;--accent:var(--teal)}.owner{--accent:var(--blue)}.face-header{display:flex;align-items:center;justify-content:space-between;flex-shrink:0;gap:10px}.identity{display:flex;align-items:center;gap:10px}.identity b{display:block;font-size:17px;font-weight:650;letter-spacing:.02em}.identity span:not(.lang-code){display:block;font-size:11px;color:var(--muted);margin-top:1px}.lang-code{display:grid;place-items:center;width:36px;height:36px;border-radius:11px;font-size:12px;font-weight:750;letter-spacing:.09em;color:var(--accent);background:color-mix(in srgb,var(--accent) 11%,transparent);border:1px solid color-mix(in srgb,var(--accent) 20%,transparent)}.icon-button{width:40px;height:40px;display:inline-flex;align-items:center;justify-content:center;border-radius:12px;background:transparent;color:var(--muted);flex-shrink:0}.face-header .icon-button{border-color:transparent}.header-actions{display:flex;align-items:center;gap:5px}.caption-area{min-height:0;flex:1;display:flex;flex-direction:column;gap:7px}.eyebrow{display:flex;align-items:center;gap:7px;font-size:11px;font-weight:650;letter-spacing:.03em;color:var(--accent,var(--muted));flex-shrink:0}.tiny-dot{display:inline-block;width:5px;height:5px;border-radius:50%;background:var(--accent)}.stream-tag{margin-left:auto;opacity:.8;font-size:10px}.caption-scroll{min-height:0;overflow:auto;scrollbar-width:thin;scrollbar-color:var(--line) transparent;overscroll-behavior:contain;flex:1}.translation{margin:0;font-size:var(--caption);font-weight:700;line-height:1.38;letter-spacing:-.035em;white-space:pre-wrap;word-break:normal;overflow-wrap:anywhere}.guest .translation{letter-spacing:-.02em}.translation.placeholder{color:color-mix(in srgb,var(--ink) 78%,var(--muted));font-weight:550}.source-box{flex-shrink:0;border-top:1px solid var(--line);padding-top:9px;display:flex;flex-direction:column;gap:4px;min-height:62px;max-height:110px}.source-label{font-size:10px;font-weight:650;color:var(--muted)}.source-text{margin:0;color:var(--muted);font-size:20px;line-height:1.5;white-space:pre-wrap;overflow:auto;overscroll-behavior:contain}.face-hint{flex-shrink:0;margin:0;color:var(--muted);font-size:10px;line-height:1.35;opacity:.8}.bridge{padding:0 6px;position:relative;min-width:0}.bridge-top{display:flex;align-items:center;gap:10px;min-height:31px}.bridge-top>.icon-button{width:31px;height:31px;border:0;margin-left:auto}.brand{display:flex;gap:6px;align-items:center;font-size:14px;font-weight:750;white-space:nowrap}.brand-mark{height:17px;display:flex;gap:2px;align-items:center;color:var(--teal)}.brand-mark i{width:3px;border-radius:2px;background:currentColor;height:6px}.brand-mark i:nth-child(2){height:15px}.brand-mark i:nth-child(3){height:11px}.brand-mark i:nth-child(4){height:5px}.status{font-size:11px;color:var(--muted);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.status.live{color:var(--teal)}.status.demo{color:#f4cb85}.controls{display:flex;align-items:center;gap:8px;padding:4px 0 5px}.controls .icon-button{height:43px;width:43px;background:var(--button)}.start-button{background:var(--teal);border:0;border-radius:13px;color:#073c37;display:inline-flex;align-items:center;justify-content:center;gap:8px;font-size:16px;font-weight:750;min-height:45px;padding:10px 24px;flex-shrink:0}.start-button.stopping{background:#ffd4ce;color:#632c23}.start-button svg{width:19px;height:19px}.language-select{flex:1;min-width:0}.language-select select{color:var(--ink);background:var(--button);height:45px;width:100%;border-radius:13px;padding:0 12px;font-size:13px;font-weight:600;max-width:100%}.bridge-bottom{display:flex;align-items:center;gap:9px;min-height:21px;color:var(--muted);font-size:10px;font-variant-numeric:tabular-nums}.bridge-bottom #cost{margin-left:auto;white-space:nowrap}.bridge-bottom #timer{font-weight:700;color:var(--ink)}.idle-warning,.ambiguous{font-size:11px;background:#503e1e;color:#ffe0a7;padding:7px 10px;border-radius:7px;margin:3px 0}.ambiguous{background:var(--button);color:var(--muted)}[hidden]{display:none!important}.text-button{background:transparent;border:0;color:var(--muted);font-size:11px;padding:8px;border-radius:8px}.text-button:hover{color:var(--ink)}
.sheet{background:var(--panel);color:var(--ink);border:1px solid var(--line);border-radius:24px;padding:25px;width:min(94vw,560px);max-height:90dvh;overflow:auto;box-shadow:0 25px 100px #0008}.sheet::backdrop,.reader::backdrop{background:#02070dc9;backdrop-filter:blur(5px)}.sheet-heading{display:flex;align-items:center;justify-content:space-between;margin-bottom:17px;gap:15px}.sheet h2{font-size:23px;font-weight:650;letter-spacing:-.04em;margin:4px 0 0}.kicker{font-size:9px;color:var(--teal);letter-spacing:.2em;font-weight:700}.setting-row{display:flex;align-items:center;justify-content:space-between;gap:20px;padding:15px 0;border-bottom:1px solid var(--line);font-size:13px}.setting-row label{flex:1}.setting-row small{display:block;font-size:10px;color:var(--muted);margin-top:5px;line-height:1.5}.setting-row select,.sheet input[type=password]{padding:10px;background:var(--bg);color:var(--ink);border:1px solid var(--line);border-radius:9px}.setting-row input[type=range]{width:130px;accent-color:var(--teal)}.setting-row input[type=checkbox]{width:20px;height:20px;accent-color:var(--teal)}.setting-actions{display:flex;gap:7px;flex-wrap:wrap;margin:16px 0}.secondary-button{border-radius:10px;padding:10px 12px;background:var(--button);font-size:12px}.danger-text{color:#edb2a9}.note{background:var(--bg);padding:13px 15px;border-radius:13px;font-size:11px;color:var(--muted);line-height:1.7}.note b{color:var(--ink)}.note p{margin:6px 0 0}.sheet details{font-size:12px;margin-top:19px}.sheet summary{cursor:pointer;color:var(--muted)}.details-body{font-size:11px;line-height:1.7;color:var(--muted)}pre{white-space:pre-wrap;word-break:break-word;background:var(--bg);padding:14px;border-radius:10px}.version{opacity:.6;font-size:10px}.compact-sheet{max-width:440px}.compact-sheet p{font-size:13px;color:var(--muted);line-height:1.7}.field-label{display:block;font-size:12px;margin-bottom:8px}.sheet input[type=password]{width:100%;font-size:16px;min-height:47px}.form-error{min-height:1em;color:#f3b2a7!important}.compact-sheet .start-button{width:100%}.tabs{display:flex;gap:8px;margin:18px 0}.tabs button{background:var(--button);padding:9px 14px;border-radius:100px;font-size:12px}.tabs button.selected{background:var(--teal);color:#073c37;border-color:var(--teal)}.phrase-list{display:grid;gap:9px}.phrase-card{text-align:left;background:var(--bg);padding:15px;border-radius:13px}.phrase-card b{font-size:14px;display:block;line-height:1.5}.phrase-card small{font-size:12px;display:block;color:var(--muted);margin-top:8px;line-height:1.5}.toast{position:fixed;bottom:max(28px,env(safe-area-inset-bottom));left:50%;transform:translateX(-50%);z-index:999;background:#25364a;color:#fff;padding:13px 19px;border-radius:14px;font-size:12px;width:max-content;max-width:90vw;box-shadow:0 10px 40px #0007;line-height:1.6}.reader{background:var(--panel);color:var(--ink);width:94vw;height:90dvh;max-width:1100px;max-height:90dvh;border:1px solid var(--line);border-radius:25px;padding:35px;overflow:auto}.reader-close{float:right}.reader>p:first-of-type{font-size:clamp(32px,6vw,64px);white-space:pre-wrap;line-height:1.5;font-weight:650;letter-spacing:-.03em}.reader .eyebrow{margin-top:14px}.reader.rotated{transform:rotate(180deg)}.sr-only{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0,0,0,0)}
body.light{color-scheme:light;--bg:#e8edf0;--panel:#fafcff;--panel-top:#eef9f5;--ink:#102431;--muted:#5a7280;--line:#cbd9df;--teal:#176c60;--blue:#244d80;--button:#f7fafc}body.light .start-button{background:#185e55;color:white}body.light .guest{border-color:#c0dcd1}body.light .note{background:#e8eef1}body.light .status.demo{color:#8c5f1d}body.light .start-button.stopping{background:#f0c4bd;color:#632c23}body.light .tabs button.selected{color:white}
@media(min-width:700px){.app{padding:16px;gap:12px}.face{padding:22px 30px 15px;gap:12px}.bridge{padding:0 18px}.controls{gap:12px}.start-button{min-width:180px}.language-select{max-width:290px}#phraseButton{margin-left:auto}.brand{font-size:16px}.status{margin-left:9px}.face-hint{font-size:11px}.identity b{font-size:19px}.source-text{font-size:22px}.source-label{font-size:11px}.eyebrow{font-size:12px}}
@media(max-width:420px){.face{padding:14px 16px 10px;gap:9px;--radius:20px}.app{padding-left:8px;padding-right:8px;gap:7px}.translation{font-size:calc(var(--caption)*.85)}.controls{gap:5px}.start-button{padding:10px 14px;font-size:14px}.language-select select{font-size:11px;padding:0 7px}.controls .icon-button{width:36px}.status{font-size:10px}.bridge-bottom{font-size:9px;gap:6px}.source-text{font-size:18px}.face-hint{font-size:9px}.lang-code{width:30px;height:30px}.identity b{font-size:15px}.identity span:not(.lang-code){font-size:10px}.sheet{padding:20px}.setting-row{gap:12px}.setting-row input[type=range]{width:100px}.header-actions{gap:0}}
@media(max-height:650px){.app{gap:5px;padding-top:5px;padding-bottom:5px}.face{padding:10px 17px 8px;gap:6px}.face-hint{display:none}.face-header{height:28px}.lang-code{height:27px;width:27px}.identity b{font-size:14px}.identity span:not(.lang-code){display:none}.source-box{min-height:47px;max-height:72px;padding-top:5px;gap:2px}.source-text{font-size:18px}.translation{font-size:calc(var(--caption)*.85)}.bridge-top{min-height:25px}.bridge-bottom{min-height:17px}.controls{padding:2px 0}.start-button,.language-select select{min-height:38px;height:38px}.controls .icon-button{height:38px}.icon-button{height:30px;width:30px}}
@media(prefers-reduced-motion:reduce){*{scroll-behavior:auto!important}}

.bridge svg{stroke-width:1.25}.brand{font-weight:650}.brand-mark i{width:2px}

.controls{flex-wrap:wrap}.controls .start-button{flex:1 1 calc(50% - 8px);min-width:0;padding:9px 10px;font-size:14px}.controls .language-select{flex:1 1 calc(100% - 112px);min-width:120px;max-width:none}.partner-button{background:var(--blue);color:#102431}body.light .partner-button{background:#244d80;color:white}body.light .partner-button.stopping{background:#f0c4bd;color:#632c23}

.controls .start-button{flex:1 1 calc(33.333% - 8px)}
#startButton,#partnerButton{background:var(--button);color:var(--muted);border:1px solid var(--line)}
#startButton.selected,#partnerButton.selected{background:var(--teal);color:white;border-color:var(--teal)}
.source-text{font-size:16px;line-height:1.4}
.translation{line-height:1.4}
.face.speaking .caption-area{display:none}
.face.speaking .source-box{flex:1;min-height:0;max-height:none;border:0;padding-top:0}
.face.speaking .source-text{flex:1;font-size:18px;overflow:auto}
.face.listening .source-box{display:none}