:root{color:#f6f3ed;background:#171a1d;font-family:Inter,ui-sans-serif,system-ui,-apple-system,BlinkMacSystemFont,Segoe UI,sans-serif;font-synthesis:none;text-rendering:optimizeLegibility;-webkit-font-smoothing:antialiased;--frame: #101418;--panel: #181d21;--panel-soft: #20262b;--line: #303840;--text: #f6f3ed;--muted: #aeb5b9;--green: #39d98a;--green-dark: #11633d;--amber: #f0b84a;--red: #ff6b66;--cyan: #6fd4ff}*{box-sizing:border-box}html,body,#root{min-height:100%;margin:0}body{min-height:100vh;background:linear-gradient(180deg,#ffffff08,#fff0 220px),#171a1d}button,select{font:inherit}button{border:0}select{width:100%;min-width:0;border:1px solid var(--line);border-radius:8px;color:var(--text);background:#0f1316;min-height:42px;padding:0 12px}select:disabled,button:disabled{cursor:not-allowed;opacity:.5}.app-shell{min-height:100vh;display:grid;place-items:center;padding:max(12px,env(safe-area-inset-top)) 12px max(12px,env(safe-area-inset-bottom))}.phone-frame{width:min(100%,430px);height:min(100vh - 24px,920px);min-height:680px;display:grid;grid-template-rows:auto auto 1fr auto;overflow:hidden;border:1px solid #343c44;border-radius:28px;background:var(--frame);box-shadow:0 24px 80px #00000061}.topbar{display:flex;align-items:center;justify-content:space-between;padding:16px 16px 12px;border-bottom:1px solid rgba(255,255,255,.06)}.brand{display:flex;align-items:center;gap:10px}.brand svg{width:24px;height:24px;color:var(--green)}.brand strong,.brand span{display:block}.brand strong{font-size:15px;line-height:1.1}.brand span{color:var(--muted);font-size:12px;margin-top:3px}.icon-button,.swap-button{width:42px;height:42px;display:grid;place-items:center;border-radius:8px;color:var(--text);background:var(--panel-soft)}.icon-button svg,.swap-button svg,.action-row svg{width:19px;height:19px}.notice-stack{display:grid;gap:8px;padding:10px 12px 0}.notice{display:flex;align-items:center;gap:8px;border:1px solid rgba(255,255,255,.08);border-radius:8px;padding:9px 10px;font-size:12px;line-height:1.35}.notice svg{flex:0 0 auto;width:16px;height:16px}.notice.warning{color:#ffe2a0;background:#f0b84a1f}.notice.danger{color:#ffd1cf;background:#ff6b661f}.panes{display:grid;grid-template-rows:1fr auto 1fr;gap:0;min-height:0;padding:10px 12px 0}.pane{min-height:0;display:grid;grid-template-rows:auto 1fr auto;border:1px solid var(--line);background:var(--panel);overflow:hidden}.pane.output{border-radius:14px 14px 8px 8px}.pane.input{border-radius:8px 8px 14px 14px}.pane-heading{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:12px;border-bottom:1px solid rgba(255,255,255,.06)}.pane-heading span{color:var(--muted);font-size:12px;text-transform:uppercase}.pane-heading strong{min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;color:var(--text);font-size:13px;font-weight:700}.transcript{min-height:0;overflow:auto;padding:14px 12px}.transcript p{margin:0 0 12px;color:var(--text);font-size:clamp(20px,3.8vh,30px);line-height:1.18;overflow-wrap:anywhere}.transcript p:last-child{margin-bottom:0}.transcript .placeholder{color:#7f8a90;font-size:18px}.live-line{color:#dcfff0}.heard-line{min-height:48px;display:grid;grid-template-columns:auto 1fr;gap:8px;align-items:start;padding:10px 12px;border-top:1px solid rgba(255,255,255,.06);background:#ffffff05}.heard-line span{color:var(--cyan);font-size:11px;text-transform:uppercase}.heard-line p{min-width:0;max-height:34px;overflow:hidden;margin:0;color:var(--muted);font-size:12px;line-height:1.35}.divider{display:grid;place-items:center;min-height:44px;position:relative}.divider:before{content:"";position:absolute;left:16px;right:16px;top:50%;height:1px;background:var(--line)}.swap-button{position:relative;z-index:1}.controls{display:grid;gap:12px;padding:12px;border-top:1px solid rgba(255,255,255,.06);background:#0000001f}.select-grid{display:grid;grid-template-columns:1fr 1fr;gap:10px}.select-grid.single{grid-template-columns:1fr}.select-grid label{min-width:0}.select-grid label span{display:block;margin-bottom:6px;color:var(--muted);font-size:12px}.mode-row,.action-row,.connection-row{display:flex;align-items:center;justify-content:space-between;gap:12px}.switch{display:inline-flex;align-items:center;gap:8px;color:var(--text);font-size:13px}.switch input{position:absolute;opacity:0;pointer-events:none}.switch span{width:42px;height:24px;border-radius:999px;border:1px solid var(--line);background:#0c1013;position:relative}.switch span:after{content:"";position:absolute;width:18px;height:18px;left:2px;top:2px;border-radius:50%;background:#879198;transition:transform .16s ease,background .16s ease}.switch input:checked+span{border-color:#39d98a99;background:#39d98a26}.switch input:checked+span:after{transform:translate(18px);background:var(--green)}.meter{flex:1;height:9px;max-width:150px;overflow:hidden;border-radius:999px;background:#0c1013;border:1px solid var(--line)}.meter span{display:block;width:100%;height:100%;transform-origin:left center;background:var(--green);transition:transform 70ms linear}.action-row button{min-height:48px;display:inline-flex;align-items:center;justify-content:center;gap:8px;border-radius:8px;color:var(--text);font-weight:700}.secondary-button{width:112px;background:var(--panel-soft)}.start-button,.stop-button{flex:1}.start-button{background:var(--green-dark)}.stop-button{background:#8f2827}.connection-row{color:#879198;font-size:11px}audio{display:none}@media(max-width:520px){.app-shell{padding:0;place-items:stretch}.phone-frame{width:100%;height:100dvh;min-height:100dvh;border:0;border-radius:0}.transcript p{font-size:clamp(19px,4.2vh,29px)}}@media(max-height:740px){.phone-frame{min-height:100dvh}.transcript p{font-size:20px}.heard-line{min-height:42px;padding-block:8px}}