:root{--bg:#f8f7f4;--ink:#15171c;--mute:#5c636e;--card:#ffffff;--line:#e3e0d9;--shadow:0 1px 2px rgba(20,20,30,.06),0 18px 40px -12px rgba(20,20,30,.16);color-scheme:light dark}
@media (prefers-color-scheme:dark){:root{--bg:#0c0e13;--ink:#f1f2f4;--mute:#a3a9b4;--card:#161921;--line:#262b35;--shadow:0 1px 2px rgba(0,0,0,.4),0 18px 40px -12px rgba(0,0,0,.6)}}
[hidden]{display:none !important}
/* Quick taps on a button stay taps, instead of zooming the page */
button{touch-action:manipulation}
body{margin:0;height:100vh;height:100dvh;display:flex;flex-direction:column;background:var(--bg);color:var(--ink);font-family:system-ui,-apple-system,"Segoe UI",sans-serif;-webkit-font-smoothing:antialiased;-webkit-text-size-adjust:100%}
/* Since iOS 26 a Home Screen app's top edge is blurred unless a fixed or sticky box of a plain colour spans it */
.bar{position:sticky;top:0;display:flex;align-items:center;gap:10px;box-sizing:border-box;min-height:calc(56px + env(safe-area-inset-top));padding:env(safe-area-inset-top) max(16px,env(safe-area-inset-right)) 0 max(16px,env(safe-area-inset-left));background:#05061a;color:#ffffff}
.bar img{height:30px;width:auto}
/* make-launch-images.sh draws the same screen for the iPhone Home Screen app to show before the page arrives */
.launch{position:fixed;inset:0;z-index:100;display:grid;place-items:center;background:linear-gradient(90deg,#000000,#3533cc)}
.launch img{width:min(64vw,300px);height:auto}
.bar .beta{border:0;background:none;padding:0;cursor:pointer;position:relative;top:9px;margin-inline-start:-4px;line-height:1;font-size:12px;font-weight:600;letter-spacing:.04em;color:#c9ccd6}
.contact{font-size:13px;color:var(--ink)}
.contact a{color:inherit}
.bar .style-switch{margin-inline-start:auto;color:#c9ccd6}
.bar .style-icon{background:transparent;border-color:rgba(255,255,255,.28);color:#c9ccd6}
.open-home{display:flex;align-items:center;justify-content:center;box-sizing:border-box;text-decoration:none}
.time{margin-inline-start:auto;padding:5px 10px;border-radius:999px;background:rgba(255,255,255,.12);font-size:14px;font-weight:600;white-space:nowrap}
.add-credit{padding:5px 10px;border:0;border-radius:999px;background:#6366f1;color:#ffffff;font:600 14px system-ui,-apple-system,"Segoe UI",sans-serif;white-space:nowrap;cursor:pointer}
main{flex:1;min-height:0;overflow-y:auto;box-sizing:border-box;display:flex;flex-direction:column;align-items:center;gap:14px;padding:24px max(16px,env(safe-area-inset-right)) calc(24px + env(safe-area-inset-bottom)) max(16px,env(safe-area-inset-left))}
.card{width:100%;max-width:420px;box-sizing:border-box;background:var(--card);border:1px solid var(--line);border-radius:22px;box-shadow:var(--shadow);padding:22px;display:flex;flex-direction:column;gap:18px}
h1{margin:0;font-size:26px;font-weight:800;letter-spacing:-.03em}
.sub{margin:-8px 0 0;font-size:15px;line-height:1.45;color:var(--mute)}
.primary{min-height:50px;border:0;border-radius:12px;background:#6366f1;color:#ffffff;font:600 16px/1 system-ui,-apple-system,"Segoe UI",sans-serif;cursor:pointer}
.primary:active{background:#5249f0}
.link:disabled{opacity:.5;cursor:default}
.link{border:0;background:none;padding:0;color:#2563eb;font:inherit;font-size:14px;cursor:pointer;white-space:nowrap}
.error,.notice{width:100%;max-width:420px;box-sizing:border-box;margin:0;padding:10px 12px;border-radius:10px;font-size:14px;line-height:1.4}
.error{position:fixed;top:calc(8px + env(safe-area-inset-top));left:50%;transform:translateX(-50%);z-index:20;width:min(420px,calc(100vw - 16px));background:#fdecec;color:#a61b1b;box-shadow:var(--shadow)}
.notice{background:#fff4e5;color:#8a4b00}
.notice .link{font-weight:600}
/* Messages cover the header until closed or replaced, and grow below it when they run long */
.bar .notice{position:fixed;top:calc(8px + env(safe-area-inset-top));left:12px;right:12px;z-index:25;width:auto;max-width:420px;min-height:48px;margin-inline:auto;padding:12px 14px;border-radius:14px;background:var(--card);color:var(--ink);box-shadow:var(--shadow);animation:toast-in .2s ease-out}
@keyframes toast-in{from{opacity:0;transform:translateY(-12px)}}
#notice{display:flex;align-items:center;gap:12px}
.notice #notice-text{flex:1}
.notice .close{border:0;background:none;padding:0 2px;color:inherit;font:400 24px/1 system-ui,-apple-system,"Segoe UI",sans-serif;cursor:pointer}
.sign-out{align-self:center;color:var(--mute)}
.version{margin:0;text-align:center;color:var(--mute);font-size:11px}
.legal{margin:0;text-align:center;color:var(--mute);font-size:12px;line-height:1.6}
.legal a{color:inherit}
.talk{flex:1;min-height:0;width:100%;max-width:560px;display:flex;flex-direction:column;gap:12px}
.pickers{position:relative;display:flex;gap:10px}
/* Over the gap between the two pickers, as in the extension's Both ways: the ring in the page's colour
   cuts it into them, and each select's own chevron and text keep clear of it */
.lang-arrow{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);display:grid;place-items:center;width:26px;height:26px;border-radius:50%;background:#6366f1;color:#ffffff;border:0;padding:0;cursor:pointer;z-index:1}
.lang-arrow svg{width:14px;height:14px;fill:none;stroke:currentColor;stroke-width:2.2;stroke-linecap:round;stroke-linejoin:round}
.picker{flex:1;min-width:0}
.lang-button{display:flex;flex-direction:column;align-items:flex-start;justify-content:center;gap:2px;width:100%;box-sizing:border-box;min-height:60px;padding:8px 38px 8px 14px;border:1.5px solid var(--line);border-radius:10px;background-color:var(--card);color:var(--ink);font:inherit;text-align:start;cursor:pointer;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 12'%3E%3Cpath d='M3 4.5l3 3 3-3' fill='none' stroke='%238a919c' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");background-repeat:no-repeat;background-size:12px;background-position:right 14px center}
.lang-button .caption{font-size:10px;font-weight:700;letter-spacing:.08em;text-transform:uppercase;color:#6366f1}
@media (prefers-color-scheme:dark){.lang-button .caption{color:#818cf8}}
.lang-button .value{max-width:100%;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font-size:17px;font-weight:600}
.lang-button[aria-expanded="true"]{border-color:#6366f1;box-shadow:0 0 0 3px rgba(99,102,241,.2)}
.pickers .picker:first-child .lang-button{padding-inline-end:46px;background-position:right 24px center}
.pickers .picker:nth-child(2) .lang-button{padding-inline-start:24px}
.lang-button:disabled{opacity:.6;cursor:default}
/* A sheet that slides up over the page, like Google Translate's language picker */
.lang-page{position:fixed;inset:0;z-index:30;box-sizing:border-box;display:flex;flex-direction:column;background:rgba(5,6,26,.45);animation:fade-in .2s}
.lang-sheet{flex:1 1 auto;min-height:0;box-sizing:border-box;display:flex;flex-direction:column;width:min(100%,640px);margin:calc(env(safe-area-inset-top) + 12px) auto 0;border-radius:20px 20px 0 0;overflow:hidden;background:var(--card);box-shadow:var(--shadow);animation:sheet-up .25s ease-out}
@keyframes sheet-up{from{transform:translateY(100%)}}
@keyframes fade-in{from{opacity:0}}
@media (prefers-reduced-motion:reduce){.lang-page,.lang-sheet{animation:none}}
.lang-head{flex:none;display:flex;flex-direction:column;align-items:stretch;gap:6px;box-sizing:border-box;padding:8px 12px 12px;background:var(--bg);border-bottom:1px solid var(--line)}
.lang-close{align-self:flex-start}
.lang-close svg{width:24px;height:24px;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
.lang-field{position:relative;color:var(--ink)}
.lang-field svg{position:absolute;left:14px;top:50%;width:22px;height:22px;transform:translateY(-50%);fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round;stroke-linejoin:round;pointer-events:none}
.lang-search{display:block;width:100%;box-sizing:border-box;min-height:48px;padding:0 12px 0 46px;border:1px solid var(--line);border-radius:12px;background-color:var(--card);color:var(--ink);font:500 17px system-ui,-apple-system,"Segoe UI",sans-serif}
.lang-scroll{flex:1 1 auto;min-height:0;overflow-y:auto;overscroll-behavior:contain;padding:0 max(8px,env(safe-area-inset-right)) env(safe-area-inset-bottom) max(8px,env(safe-area-inset-left))}
.lang-list{position:relative;max-width:560px;margin:0 auto;padding:4px 0;list-style:none}
.lang-empty{max-width:560px;margin:0 auto;padding:16px 14px;font-size:15px;color:var(--mute)}
.lang-list li{display:flex;align-items:baseline;gap:14px;padding:13px 14px;border-radius:7px;font-size:17px;cursor:pointer;white-space:nowrap}
.lang-list b{font-weight:800}
.lang-list li.lang-heading{padding:20px 14px 8px;font-size:14px;font-weight:800;letter-spacing:.06em;text-transform:uppercase;color:var(--ink);cursor:default}
.lang-list li.lang-heading:not(:first-child){margin-top:24px}
.lang-list .native{margin-left:auto;font-size:15px;color:var(--mute)}
.lang-list li[data-current]{background:rgba(99,102,241,.14);color:#6366f1;font-weight:600}
@media (prefers-color-scheme:dark){.lang-list li[data-current]{background:rgba(129,140,248,.2);color:#818cf8}}
.lang-list li[data-current] .native{color:inherit;opacity:.75}
.lang-list li[data-current]::after{content:'\2713'}
.lang-list li:focus-visible{outline:2px solid #2563eb;outline-offset:-2px}
.style-switch{display:flex;align-items:center;justify-content:flex-end;gap:8px;font-size:13px;font-weight:600;color:var(--mute)}
.style-icon{display:flex;gap:2px;height:36px;padding:2px;border:1px solid var(--line);border-radius:10px;background:var(--card);color:var(--mute);cursor:pointer}
.style-icon span{display:grid;place-items:center;width:32px;border-radius:8px}
.style-icon svg{width:20px;height:20px;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}
.style-icon[data-current="chat"] [data-style="chat"],.style-icon[data-current="subtitles"] [data-style="subtitles"]{background:#2563eb;color:#ffffff}
.cards{display:grid;grid-template-columns:1fr 1fr;gap:10px}
.read-choices{display:flex;flex-direction:column;gap:10px}
.mode-card{display:flex;flex-direction:column;align-items:flex-start;gap:4px;padding:14px 12px;border:1px solid var(--line);border-radius:14px;background:var(--card);color:var(--ink);font:inherit;text-align:start;cursor:pointer}
.mode-card svg{width:28px;height:28px;margin-bottom:4px;fill:none;stroke:#2563eb;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}
.mode-card .name{font-size:16px;font-weight:700}
.mode-card .line{font-size:13px;line-height:1.3;color:var(--mute)}
.mode-card[data-chosen]{border-color:#2563eb;box-shadow:0 0 0 1px #2563eb}
/* Before anything is said, the cards sit a little above midway between the style switch and Start */
body[data-screen="setup"] .talk > :is(.chat,.subtitles){flex:0}
body[data-screen="setup"] .cards{margin-block:auto;padding-bottom:96px}
.controls{display:flex;gap:10px}
.controls .primary{flex:1}
.primary:disabled{opacity:.5;cursor:default}
.primary[data-running="true"]{background:#15171c}
.start[data-connecting]::before,.mic-line[data-connecting]::before{content:'';display:inline-block;width:.9em;height:.9em;margin-inline-end:.5em;border:2px solid currentColor;border-top-color:transparent;border-radius:50%;vertical-align:-.15em;animation:spin .8s linear infinite}
@keyframes spin{to{transform:rotate(360deg)}}
@media (prefers-color-scheme:dark){.primary[data-running="true"]{background:#3a3f4b}}

/* Chat: each line one bubble in its language's colour, on the side where that language reads. A bubble whose
   text reads away from its side starts from a fixed indent, so it begins in the same place while it grows. */
:root{--first-language:#2563eb;--first-language-pale:#dce7fd;--first-language-ink:#1e3a8a;--first-language-soft:#3f5fa8;--second-language:#7c3aed;--second-language-pale:#ece4fd;--second-language-ink:#4c1d95;--second-language-soft:#6a4aa8}
@media (prefers-color-scheme:dark){:root{--first-language-pale:#1d2b57;--first-language-ink:#dbe5ff;--first-language-soft:#a9bcf0;--second-language-pale:#2e2358;--second-language-ink:#ebe2ff;--second-language-soft:#c4b3f2}}
.chat{flex:1;min-height:0;overflow-y:auto;display:flex;flex-direction:column;gap:10px;font-size:18px;line-height:1.35}
.pair{--solid:var(--first-language);--soft:var(--first-language-soft);display:flex;flex-direction:column;max-width:80%;padding:5px;border-radius:16px;background:var(--first-language-pale);color:var(--first-language-ink)}
.pair[data-side="b"]{--solid:var(--second-language);--soft:var(--second-language-soft);background:var(--second-language-pale);color:var(--second-language-ink)}
.pair[data-place="left"]:has(> .original[dir="ltr"]),.pair[data-place="right"]:has(> .original[dir="ltr"]){align-self:flex-start}
.pair[data-place="right"]:has(> .original[dir="ltr"]){margin-left:20%}
.pair[data-place="left"]:has(> .original[dir="rtl"]){align-self:flex-end;margin-right:20%}
.pair[data-place="right"]:has(> .original[dir="rtl"]){align-self:flex-end}
.chat .pair[data-place="left"][data-settled][data-side]{align-self:flex-start;margin:0}
.chat .pair[data-place="right"][data-settled][data-side]{align-self:flex-end;margin:0}
/* Until it's clear who said a line, it waits in the middle */
.chat .pair[data-waiting][data-place][data-side]:not([data-settled]){align-self:center;margin:0}
.pair .tag{display:none}
.pair .words{display:block;padding:4px 9px 6px;font-size:15px;color:var(--soft)}
.pair .translation{padding:6px 10px 7px;border-radius:11px;background:var(--solid);color:#ffffff;font-weight:600}
.pair .translation:empty{display:none}
/* With one language there's only the one box, so there's nothing for the paler bubble to hold together */
.pair:not(:has(> .original)){padding:0;background:none}
.pair:not(:has(> .original)) .translation{border-radius:16px}
/* The dot takes no room in the line, so text that just fits doesn't wrap it onto a line of its own */
.live > .words{padding-inline-end:1em}
.live > .words::after{content:'';display:inline-block;width:.35em;height:.35em;margin-inline-start:.25em;margin-inline-end:-.6em;border-radius:50%;background-color:currentColor;vertical-align:middle;animation:speaking 1.2s ease-in-out infinite}
@keyframes speaking{0%,100%{opacity:.2}50%{opacity:.8}}

.views{display:flex;gap:3px;padding:3px;border:1px solid var(--line);border-radius:12px;background:var(--card)}
.views button{flex:1;min-height:36px;border:0;border-radius:9px;background:none;color:var(--mute);font:600 14px system-ui,-apple-system,"Segoe UI",sans-serif;cursor:pointer}
.views button[aria-pressed="true"]{background:#2563eb;color:#ffffff}
.views button:disabled{opacity:.5;cursor:default}
/* The style: small, at the top of the conversation, with + New across from it */
.conversation-head{display:flex;align-items:center;gap:12px}
.jump-button{position:fixed;z-index:4;display:inline-flex;align-items:center;gap:6px;height:40px;padding:0 16px 0 12px;border:1px solid var(--line);border-radius:20px;background:var(--card);color:var(--ink);box-shadow:var(--shadow);font:600 15px/1 system-ui,-apple-system,"Segoe UI",sans-serif;cursor:pointer}
.jump-button[hidden]{display:none}
.jump-button svg{width:18px;height:18px;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
.past-search{flex:1;min-width:0;display:flex;align-items:center;gap:0}
/* The magnifier is drawn inside the field; taps go through it to the field */
.past-search{position:relative}
#past-search-open{position:absolute;inset-inline-start:10px;width:18px;height:18px;opacity:.45;pointer-events:none}
#past-search-open svg{width:18px;height:18px}
.past-search .search-field{padding-inline-start:34px}
/* The close button clears it, so the phone's own clear button would be a second X */
#past-search-input::-webkit-search-cancel-button{-webkit-appearance:none;appearance:none}
/* The panel is for searching the conversation, so the text behind stays clear and can be scrolled */
#past-scrim{background:none;pointer-events:none}
.past-head:not([data-searching]) :is(#past-search-count,#past-search-previous,#past-search-next,#past-search-close){display:none}
.past-head[data-searching] .style-switch{display:none}
.search-field{box-sizing:border-box;width:100%;min-width:0;min-height:40px;padding:0 12px;border:1px solid var(--line);border-radius:12px;background:var(--card);color:inherit;font:inherit;font-size:16px}
.past-search-count{flex:none;font-size:13px;color:var(--mute)}
/* Drawn inside the box, since a list that scrolls cuts off anything outside it */
[data-hit]{outline:1px solid rgba(250,204,21,.55);outline-offset:-1px}
[data-hit][data-current]{outline:2px solid #facc15;outline-offset:-2px}
.save-setting{display:flex;align-items:flex-start;justify-content:space-between;gap:12px;font-size:15px;color:var(--mute);cursor:pointer}
.save-setting>span{line-height:26px}
.save-setting small{display:block;font-size:13px;line-height:1.3}
#save-conversations{appearance:none;-webkit-appearance:none;position:relative;flex:none;width:44px;height:26px;margin:0;border-radius:13px;background:var(--line);cursor:pointer;transition:background .15s}
#save-conversations::before{content:'';position:absolute;top:2px;left:2px;width:22px;height:22px;border-radius:50%;background:#ffffff;transition:transform .15s}
#save-conversations:checked{background:#2563eb}
#save-conversations:checked::before{transform:translateX(18px)}

/* Subtitles: a card per line, newest at the bottom, tinted by the language it was said in */
.subtitles{flex:1;min-height:0;overflow-y:auto;display:flex;flex-direction:column;gap:10px;font-size:18px;line-height:1.35}
.subtitles > :first-child,.reader > :first-child{margin-top:auto}
/* The bubbles set their own margins, so an empty first item takes the space above them instead */
.chat::before{content:'';margin-top:auto}
.subtitle,.read{--pale:var(--first-language-pale);--soft:var(--first-language-soft);--ink:var(--first-language-ink)}
.subtitle[data-side="b"],.read[data-side="b"]{--pale:var(--second-language-pale);--soft:var(--second-language-soft);--ink:var(--second-language-ink)}
.subtitle{flex-shrink:0;overflow:hidden;border:1px solid var(--pale);border-radius:14px;background:color-mix(in srgb,var(--pale) 35%,var(--card))}
.subtitle .original{padding:6px 12px 7px;background:var(--pale);color:var(--soft);font-size:15px}
.subtitle .tag{display:block;font-size:11px;font-weight:700;letter-spacing:.02em;opacity:.8}
.subtitle .translation{padding:7px 12px 9px;color:var(--ink);font-weight:700}
.subtitle .translation:empty{display:none}

/* Face to face: the whole screen, in two halves that each read toward the person on that side of the phone. The
   top half is turned around for the person across, so its own top, where its oldest lines are, meets the seam. */
.face{position:fixed;inset:0;z-index:2;height:100dvh;box-sizing:border-box;display:grid;grid-template-rows:1fr 1fr;padding:env(safe-area-inset-top) env(safe-area-inset-right) env(safe-area-inset-bottom) env(safe-area-inset-left);background:var(--bg)}
.reader{min-height:0;overflow-y:auto;display:flex;flex-direction:column;gap:8px;padding:14px;font-size:20px;line-height:1.35;}
.reader.theirs{grid-area:1 / 1;transform:rotate(180deg);margin-bottom:10px}
.reader:not(.theirs){grid-area:2 / 1;margin-top:10px}
/* The halves are 20px apart, with one line through the gap. Text blurs only from the edge of the round button
   (32px from the middle) inward, more the closer it gets, by seven stacked layers of light blur that each reach a
   little less far; everything farther from the gap is untouched. */
.glass{grid-column:1;position:relative;height:24px;pointer-events:none}
.glass.theirs{grid-row:1;align-self:end;margin-bottom:8px;--toward:to top}
.glass.mine{grid-row:2;align-self:start;margin-top:8px;--toward:to bottom}
.glass i{position:absolute;inset:0;background:color-mix(in srgb,var(--bg) 7%,transparent);--reach:calc(100% * (8 - var(--k)) / 7);-webkit-backdrop-filter:blur(1.6px);backdrop-filter:blur(1.6px);-webkit-mask-image:linear-gradient(var(--toward),#000 calc(var(--reach) - 14%),transparent var(--reach));mask-image:linear-gradient(var(--toward),#000 calc(var(--reach) - 14%),transparent var(--reach))}
.seam::before{content:'';grid-row:2;grid-column:1 / -1;height:1px;background:var(--line)}
.read{flex-shrink:0;align-self:flex-start;max-width:85%;padding:8px 12px;border-radius:16px;background:var(--pale);color:var(--ink);font-weight:600}
.read[data-whose="mine"]{align-self:flex-end}
.read[data-waiting]{align-self:center}
[data-style="subtitles"] > .read{align-self:stretch;max-width:none;border-radius:12px}
.seam{grid-row:1 / 3;grid-column:1;align-self:center;justify-self:stretch;z-index:1;box-sizing:border-box;display:grid;grid-template-columns:1fr 64px 1fr;align-items:center;padding:0 16px}
.seam .notice{grid-row:1;grid-column:1 / -1;max-width:none;margin-bottom:10px}
.seam .exit,.seam .start,.seam .settings-icon{grid-row:2}
.seam .exit{grid-column:1;justify-self:start}
.seam .start{grid-column:2}
.seam .settings-icon{grid-column:3;justify-self:end}
body[data-running] .seam .exit{visibility:hidden}
/* Icons, so the buttons read the same from either side of the phone */
.seam .start{display:grid;place-items:center;width:64px;height:64px;padding:0;border-radius:50%}
.seam .start svg{width:28px;height:28px}
.seam .start[data-running="true"] .mic,.seam .start:not([data-running="true"]) .square,.seam .start[data-connecting] svg{display:none}
.seam .start[data-connecting]::before{width:24px;height:24px;margin:0;box-sizing:border-box}
.seam .exit{height:44px;padding:0 16px;border:1px solid var(--line);border-radius:22px;background:var(--card);color:var(--ink);font:600 15px/1 system-ui,-apple-system,"Segoe UI",sans-serif;white-space:nowrap;cursor:pointer}
.icon svg,.seam svg{fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
.square rect,.mic path{fill:currentColor;stroke:none}
#start:not([data-connecting])::before{content:'';display:inline-block;width:.8em;height:.8em;margin-inline-end:.55em;background:currentColor;vertical-align:-.05em;clip-path:polygon(0 0,100% 50%,0 100%)}
#start[data-running="true"]:not([data-connecting])::before{border-radius:2px;clip-path:none}

/* Calls between two phones: each phone reads in its own language, in Chat (bubbles, its own lines on its side) or
   Subtitles (full-width cards) */
.call{flex:1;min-height:0;display:flex;flex-direction:column;gap:10px}
.call-head{display:flex;align-items:center;justify-content:space-between;gap:12px;min-height:44px}
.call-status{margin:0;font-size:14px;color:var(--mute);text-align:center}
.call-status[data-declined],.call-status[data-large]{font-size:16px;color:var(--ink)}
.call-status[data-expired],body[data-video] .call-status[data-expired]{padding:10px 12px;border-radius:10px;background:#fff4e5;color:#8a4b00;text-shadow:none}
.call-lines{flex:1;min-height:0;overflow-y:auto;display:flex;flex-direction:column;gap:8px;font-size:20px;line-height:1.35}
.call-lines > :first-child{margin-top:auto}
.invite{width:min(340px,calc(100vw - 32px));box-sizing:border-box;padding:22px;border:0;border-radius:22px;background:var(--card);color:var(--ink);box-shadow:var(--shadow);text-align:center}
.invite[open]{display:flex;flex-direction:column;align-items:center;gap:14px;height:420px}
.invite::backdrop{background:rgba(5,6,26,.6)}
.invite h2{margin:0;font-size:20px}
.invite .history-head{align-self:stretch}
.invite-as{align-self:stretch;display:flex;align-items:center;gap:4px;margin:0;font-size:14px;color:var(--mute)}
.invite-as strong{color:var(--ink)}
.invite-as .icon{width:28px;height:28px;min-width:0;min-height:0;padding:4px}
.invite-as .icon svg{width:16px;height:16px}
.invite-contacts{align-self:stretch;flex:1;min-height:0;display:flex;flex-direction:column;gap:6px;margin:0;padding:0;list-style:none;overflow-y:auto}
.invite-contacts button{display:flex;align-items:center;gap:10px;width:100%;min-height:44px;padding:0 12px;border:1px solid var(--line);border-radius:10px;background:var(--card);color:var(--ink);font:inherit;font-size:15px;font-weight:600;text-align:start;cursor:pointer}
.invite-contacts span{flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.invite-contacts svg{flex:none;width:20px;height:20px;fill:none;stroke:#2563eb;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}
.contact-ways-label{margin-top:8px}
#contact-qr .sub,#app-qr .sub{margin:0}
#contact-qr .qr,#app-qr .qr{align-self:center}
.invite-ways{align-self:stretch;display:grid;grid-template-columns:1fr 1fr;gap:10px;margin-top:auto}
.invite-ways button{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:4px;min-height:64px;padding:8px}
.invite-ways svg,#app-qr-open svg,#app-share svg{width:22px;height:22px;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}
#app-qr-open,#app-share{display:flex;align-items:center;justify-content:center;gap:8px;flex:none}
.extension-banner{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:12px 14px;border-radius:12px;background:linear-gradient(90deg,#000 0%,#3331cb 100%);color:#ffffff;font-size:14px;line-height:1.35;text-decoration:none}
#install .sub{margin:0}
.install-steps{margin:0;padding-inline-start:22px;font-size:16px;line-height:1.45}
.install-steps li+li{margin-top:8px}
.install-steps svg{width:20px;height:20px;vertical-align:-4px;fill:none;stroke:#2563eb;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}
.extension-banner strong{display:block;font-size:15px}
.extension-logo{height:20px;width:auto;margin-inline-end:6px;vertical-align:-4px}
.extension-banner span span{display:block;margin-top:7px}
.extension-banner svg{flex:none;width:20px;height:20px;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
.invite .sub{margin:0}
.invite .primary{align-self:stretch}
.invite-name{align-self:stretch;display:flex;flex-direction:column;gap:6px;text-align:start;font-size:14px;color:var(--mute)}
.invite-name input{box-sizing:border-box;min-height:44px;padding:0 12px;border:1px solid var(--line);border-radius:10px;background:var(--card);color:var(--ink);font:500 16px system-ui,-apple-system,"Segoe UI",sans-serif}
.invite[data-answered] :is(.invite-name,.invite-as,.invite-contacts){display:none}
.alert{position:fixed;top:calc(8px + env(safe-area-inset-top));left:50%;transform:translateX(-50%);z-index:20;box-sizing:border-box;width:min(420px,calc(100vw - 16px));padding:14px;border-radius:16px;background:var(--card);color:var(--ink);box-shadow:var(--shadow)}
.alert p{margin:0 0 12px;font-size:16px;font-weight:600}
.alert-buttons{display:flex;gap:10px}
.alert-buttons button{flex:1;min-height:46px;padding:0 10px;font-size:15px}
.qr{padding:12px;border-radius:12px;background:#ffffff}
.qr svg{display:block;width:200px;height:200px}
.invite[data-qr] :is(.invite-name,.invite-as,.invite-contacts,.invite-contacts-loading,.invite-ways){display:none}
.invite .secondary{align-self:stretch}
.call-video{display:none}
/* With a camera on either phone: the picture fills the screen, and the page shrinks to its bottom half for the captions and the buttons */
body[data-video]{background:#000}
body[data-video] .bar{position:fixed;z-index:8;min-height:0;padding:0;background:none}
body[data-video] .bar > :not(.notice),body[data-video] .talk > .conversation-head,body[data-video] #styles{display:none}
/* The notch ends a little above the safe area's edge, so the handle tucks up to it */
body[data-video] .handle:not([data-open]),body[data-video]:not([data-running]) .handle:not([data-open]){top:calc(env(safe-area-inset-top) * .8);width:44px;height:16px;border-radius:0 0 8px 8px;background:rgba(0,0,0,.3)}
body[data-video] .handle:not([data-open]) svg{width:12px;height:12px}
body[data-video] .handle:not([data-open])::after{content:'';position:absolute;inset:calc(-6px - env(safe-area-inset-top)) -38px -30px}
body[data-video] .talk{position:fixed;z-index:0;top:50%;right:0;bottom:0;left:0;max-width:none;box-sizing:border-box;gap:8px;padding:0 max(12px,env(safe-area-inset-right)) calc(12px + env(safe-area-inset-bottom)) max(12px,env(safe-area-inset-left))}
body[data-video] .call-video{display:block;position:fixed;z-index:-1;inset:0;background:#15171c}
.video-note{position:absolute;z-index:1;top:calc(30% + 44px);left:50%;transform:translateX(-50%);margin:0;padding:6px 14px;border-radius:999px;background:rgba(0,0,0,.55);color:#ffffff;font-size:15px;white-space:nowrap}
body[data-captions-top] .video-name{top:60%}
body[data-captions-top] .video-note{top:calc(60% + 44px)}
.video-name{position:absolute;top:30%;left:0;right:0;margin:0;padding:0 24px;font-size:24px;font-weight:700;color:#ffffff;text-align:center}
#their-video{position:absolute;inset:0;width:100%;height:100%;background:#000;object-fit:fill}
body[data-video] .call-video:has(#their-video:not([hidden])){background:#000}
.own-view{position:absolute;top:calc(env(safe-area-inset-top) + 24px);right:max(12px,env(safe-area-inset-right));width:min(28vw,130px);height:calc(min(28vw,130px) * 4 / 3);overflow:hidden;border-radius:12px;pointer-events:none}
.own-view:has(#own-video:not([hidden])){background:#000;touch-action:none;pointer-events:auto}
body[data-captions-top] .own-view{top:auto;bottom:calc(env(safe-area-inset-bottom) + 72px)}
#own-video{position:absolute;inset:0;width:100%;height:100%;border-radius:12px;background:#000;object-fit:cover}
#own-video[data-mirrored]{transform:scaleX(-1)}
#own-video:not([data-playing]){opacity:0}
#own-video[hidden] + #flip{display:none}
#flip{position:absolute;z-index:1;right:4px;bottom:4px;display:grid;place-items:center;width:40px;height:40px;min-width:0;min-height:0;padding:0;border:0;border-radius:50%;background:rgba(0,0,0,.55);color:#ffffff;cursor:pointer;pointer-events:auto}
#flip svg{width:24px;height:24px;fill:none;stroke:currentColor;stroke-width:1.6;stroke-linecap:round;stroke-linejoin:round}
body[data-video] .call-lines{overflow:hidden;touch-action:none}
/* On top: the same captions in the top half, clear of the status bar, with the buttons staying at the bottom */
body[data-video][data-captions-top] .talk{top:0;padding-top:calc(env(safe-area-inset-top) + 24px)}
body[data-video][data-captions-top] .call-lines{flex:0 0 calc(50dvh - env(safe-area-inset-top) - 24px)}
body[data-video][data-captions-top] .controls{margin-top:auto}
body[data-video][data-captions-top] .call-lines > .read{order:var(--order);margin-top:0}
body[data-video] .call-lines > .read{opacity:var(--fade,1);transition:opacity .2s;align-self:flex-start;max-width:85%;border-radius:16px;background:color-mix(in srgb,var(--first-language) 20%,rgba(5,6,26,.2));-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);color:#ffffff;text-shadow:0 1px 3px rgba(0,0,0,.85)}
body[data-video] .call-lines > .read[data-side="b"]{background:color-mix(in srgb,var(--second-language) 20%,rgba(5,6,26,.2))}
body[data-video] .call-lines > .read[data-whose="mine"]{align-self:flex-end}
body[data-video] .call-lines > .read[data-waiting]{align-self:center}
body[data-video] :is(.call-status,.mic-line){color:#ffffff;text-shadow:0 1px 3px #000}
body[data-video] .controls{flex:none;gap:6px}
body[data-video] .controls .secondary{min-height:48px;padding:0 8px;font-size:13px}
body[data-video] .controls .secondary:not(.danger,[aria-pressed="true"]){border-color:transparent;background:rgba(0,0,0,.55);color:#ffffff}
.call-icon{display:grid;place-items:center}
.call-icon svg{width:24px;height:24px;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}
.call-icon:not([data-off]) .slash{display:none}
.call-icon .hang-up{width:36px;height:36px;fill:currentColor;stroke:none}
.call-icon[data-voice] span,.call-icon:not([data-voice]) :is(.hang-up,.captions){display:none}
.mute{min-width:0;padding:0 16px}
.mute:only-child{flex:1}
.mute[aria-pressed="true"]{border-color:#dc2626;background:#dc2626;color:#ffffff}

/* From the Start tap until the session stops, only the conversation and Start/Stop show. The bar stays as an empty
   strip of the page's colour behind the status bar: a plain colour there is what keeps a Home Screen app's top edge
   from being blurred. Notices then hang below it, over the oldest lines. */
body[data-running] .bar{min-height:env(safe-area-inset-top);background:var(--bg)}
body[data-running] .bar > :not(.notice),body[data-running] .talk > .conversation-head{display:none}

.icon{display:grid;place-items:center;flex-shrink:0;width:36px;height:36px;padding:0;border:0;border-radius:50%;background:none;color:inherit;cursor:pointer}
.icon svg{width:24px;height:24px}

/* Past conversations: a list, newest first, and one at a time to read */
.history,.past{width:100%;max-width:560px;display:flex;flex-direction:column;gap:12px}
.past{position:relative;flex:1;min-height:0}
.history-head{display:flex;align-items:center;justify-content:space-between;gap:12px}
.history-head h2{margin:0;font-size:22px;font-weight:800;letter-spacing:-.02em}
.history-head .when{font-size:13px;color:var(--mute);text-align:end}
#past-back{flex:none}
/* The handle hangs over the top of the text, so the text starts below it */
main:has(#past:not([hidden])){padding-top:36px}
/* Back and Download sit level with the handle, which hangs between them */
.settings.past-panel{gap:10px;padding-top:calc(env(safe-area-inset-top) + 2px);padding-bottom:16px}
.past-top{display:flex;align-items:center;justify-content:space-between;min-height:40px}
.past-title{margin:-4px 0 0;font-size:14px;line-height:1.35;color:var(--ink);text-align:center;overflow-wrap:anywhere}
/* The live screen's handle stays put while past conversations show over it */
main:has(#signed-in[hidden]) ~ #handle{display:none}
:is(#past-search-previous,#past-search-next,#past-search-close){width:28px}
#past-search-count{margin-inline:4px 2px}
.past-search .icon:disabled{opacity:.3;cursor:default}
.history .sub{margin:0}
.history-list{margin:0;padding:0;list-style:none;display:flex;flex-direction:column;gap:8px}
.history-list li:not(.swipe-holder),.swipe-row{display:flex;align-items:center;gap:4px;padding-inline-end:6px;border:1px solid var(--line);border-radius:14px;background:var(--card)}
.swipe-holder{position:relative;overflow:hidden;border-radius:14px;touch-action:pan-y pinch-zoom}
.swipe-holder[data-swiping]{background:#dc2626}
.swipe-holder[data-swiping]::after{content:'Delete';position:absolute;top:50%;right:16px;transform:translateY(-50%);color:#ffffff;font-size:15px;font-weight:600}
.swipe-row{position:relative;z-index:1;user-select:none;-webkit-user-select:none}
.history-list .open{flex:1;min-width:0;display:flex;flex-direction:column;gap:2px;padding:10px 12px;border:0;background:none;color:inherit;font:inherit;text-align:start;cursor:pointer}
.history-list .when{font-size:13px;color:var(--mute)}
.history-list .name{font-size:15px;font-weight:600}
.history-list .languages{font-size:14px;color:var(--mute)}
.history-list .first{overflow:hidden;font-size:14px;color:var(--mute);text-overflow:ellipsis;white-space:nowrap}
.history-list .contact-name{flex:1;min-width:0;padding:12px;overflow:hidden;font-size:15px;font-weight:600;text-overflow:ellipsis;white-space:nowrap}
.history-list button.contact-name{border:0;background:none;color:inherit;font-family:inherit;text-align:start;cursor:pointer}
.history-list .request-answer{padding:8px;font-size:15px;font-weight:600}
.history-list .delete{color:var(--mute)}
.blocked-head{margin:20px 0 8px;font-size:15px}
.history-list .unblock{margin-inline-end:6px}
.history-list .delete svg{width:20px;height:20px}
.link.danger{align-self:center;color:#dc2626}

.sheet{width:min(340px,calc(100vw - 32px));box-sizing:border-box;padding:0;border:0;border-radius:22px;background:var(--card);color:var(--ink);box-shadow:var(--shadow)}
.sheet::backdrop{background:rgba(5,6,26,.6);opacity:var(--backdrop,1)}
.sheet[data-leaving]::backdrop{opacity:0;transition:opacity .3s ease-out}
.sheet-body{display:flex;flex-direction:column;gap:14px;padding:22px}
.sheet h2{margin:0;font-size:20px}
.sheet p{margin:0}
.email{font-weight:600;overflow-wrap:anywhere}
.menu-name{display:flex;align-items:center;gap:4px;margin:0;font-size:15px;color:var(--mute)}
.menu-name strong{color:var(--ink)}
.menu-name .icon{width:28px;height:28px;min-width:0;min-height:0;padding:4px}
.menu-name .icon svg{width:16px;height:16px}
.times{display:grid;grid-template-columns:1fr auto;gap:6px 12px;margin:0;font-size:15px}
.times dt{color:var(--mute)}
.times dd{margin:0;font-weight:600}
.sheet .history-head .email{flex:1;min-width:0}
.no-time{font-size:15px;color:var(--mute)}
.confirm-buttons{display:flex;gap:10px}
.confirm-buttons button{flex:1}
.secondary{min-height:50px;border:1px solid var(--line);border-radius:12px;background:var(--card);color:var(--ink);font:600 16px/1 system-ui,-apple-system,"Segoe UI",sans-serif;cursor:pointer}
.primary.danger{background:#dc2626}

/* A call's own buttons share the row, and the red one ends it */
.controls .secondary{flex:1 1 auto;padding:0 10px;font-size:15px;white-space:nowrap}
.controls{flex-wrap:wrap}
.controls #back{flex:1 1 0}
.secondary.danger{border-color:#dc2626;background:#dc2626;color:#ffffff}
.mic-line{margin:0;font-size:14px;text-align:center;color:var(--mute)}

/* The settings that hang from the handle while running: a short bar a little below the status bar, never at the
   screen's top edge, where the phone's own pull-down starts */
.handle{position:fixed;z-index:7;top:calc(env(safe-area-inset-top) + 6px);left:50%;transform:translateX(-50%);display:grid;place-items:center;width:64px;height:28px;padding:0;border:0;border-radius:14px;background:var(--line);color:var(--ink);touch-action:none;cursor:pointer}
/* Stopped, the bar's own buttons fill the top, so the closed handle hangs just below it */
body:not([data-running]) .handle:not([data-open]){top:calc(env(safe-area-inset-top) + 60px)}
.handle svg{width:20px;height:20px;fill:none;stroke:currentColor;stroke-width:2.5;stroke-linecap:round;stroke-linejoin:round;transition:transform .2s}
.handle[data-open] svg{transform:rotate(180deg)}
.settings-scrim{position:fixed;inset:0;z-index:5;background:rgba(5,6,26,.35)}
.settings{position:fixed;z-index:6;top:0;left:0;right:0;box-sizing:border-box;display:flex;flex-direction:column;gap:12px;max-height:100dvh;overflow-y:auto;padding:calc(env(safe-area-inset-top) + 44px) max(16px,env(safe-area-inset-right)) 16px max(16px,env(safe-area-inset-left));border-radius:0 0 22px 22px;background:var(--bg);box-shadow:var(--shadow);transform:translateY(-110%);visibility:hidden;transition:transform .2s,visibility .2s;touch-action:none}
.settings[data-open]{transform:none;visibility:visible}
.settings > *{width:100%;max-width:560px;align-self:center}
.face > #new{position:absolute;left:50%;bottom:calc(20px + env(safe-area-inset-bottom));transform:translateX(-50%);z-index:3;height:44px;padding:0 20px;border:1px solid var(--line);border-radius:22px;background:var(--card);color:var(--ink);font:600 15px/1 system-ui,-apple-system,"Segoe UI",sans-serif}
body[data-running] .face > #new{visibility:hidden}
.settings .call-head{justify-content:space-between}
.settings .call-status{text-align:start}
.seam .settings-icon{display:grid;place-items:center;width:44px;height:44px;padding:0;border:1px solid var(--line);border-radius:50%;background:var(--card);color:var(--ink);cursor:pointer}
.seam .settings-icon svg{width:20px;height:20px}
.conversation-head:empty{display:none}

body[data-screen="setup"] .controls{display:none}

.spinner{display:inline-block;width:1em;height:1em;box-sizing:border-box;border:2px solid currentColor;border-top-color:transparent;border-radius:50%;animation:spin .8s linear infinite}
.loading{display:flex;align-items:center;gap:10px;margin:40px 0 0;font-size:16px;color:var(--mute)}
#add-contact .loading,#contacts .loading,.invite .loading{margin:0}
.invite .loading{align-self:stretch;font-size:14px}
.time[data-loading]{min-width:34px;min-height:1.4em;box-sizing:border-box;display:inline-flex;align-items:center;justify-content:center}
.time[data-loading]::before{content:'';width:.9em;height:.9em;box-sizing:border-box;border:2px solid currentColor;border-top-color:transparent;border-radius:50%;animation:spin .8s linear infinite}
.add-credit[data-busy],.link[data-busy],#edit-name-save[data-busy],#add-contact-add[data-busy],#add-host[data-busy],.icon[data-busy]{position:relative;color:transparent !important}
.add-credit[data-busy]::before,.link[data-busy]::before,#edit-name-save[data-busy]::before,#add-contact-add[data-busy]::before,#add-host[data-busy]::before,.icon[data-busy]::before{content:'';position:absolute;left:50%;top:50%;width:.9em;height:.9em;margin:-.45em 0 0 -.45em;box-sizing:border-box;border:2px solid #ffffff;border-top-color:transparent;border-radius:50%;animation:spin .8s linear infinite}
.link[data-busy]::before,#add-host[data-busy]::before,.icon[data-busy]::before{border-color:var(--mute);border-top-color:transparent}
.icon[data-busy] svg{visibility:hidden}
.history-list li[data-busy]{pointer-events:none}
.history-list li[data-busy] > :not([data-busy]){opacity:.5}
.cards[inert] .mode-card{animation:placeholder 1.4s ease-in-out infinite}
.cards[inert] .mode-card[data-chosen]{border-color:var(--line);box-shadow:none}
.cards[inert] .mode-card svg{stroke:transparent;border-radius:8px;background:var(--line)}
.cards[inert] .mode-card :is(.name,.line){display:block;border-radius:999px;background:var(--line);color:transparent;user-select:none}
.cards[inert] .mode-card .name{width:70%;height:16px;margin-bottom:2px}
.cards[inert] .mode-card .line{width:90%;height:12px}
@keyframes placeholder{50%{opacity:.55}}
[data-pending] :is(.lang-button,.style-switch,.primary){animation:placeholder 1.4s ease-in-out infinite}
[data-pending] .lang-button{background-image:none}
[data-pending] .lang-button :is(.caption,.value){display:block;border-radius:999px;background:var(--line);color:transparent;user-select:none}
[data-pending] .lang-button .caption{width:40%;height:10px}
[data-pending] .lang-button .value{width:70%;height:16px}
[data-pending] .page-link{animation:placeholder 1.4s ease-in-out infinite}
[data-pending] .page-link svg{stroke:transparent;border-radius:6px;background:var(--line)}
[data-pending] .page-link span{border-radius:999px;background:var(--line);color:transparent;user-select:none}
[data-pending] .lang-arrow{display:none}
[data-pending] .style-icon>*{visibility:hidden}
[data-pending] .style-label{color:transparent;border-radius:999px;background:var(--line);user-select:none}
[data-pending] .style-icon{border-color:var(--line);background:var(--line)}
[data-pending] .primary{background:var(--line);color:transparent;user-select:none}
.invite:focus,#install:focus,#terms:focus{outline:none}
#terms a{color:var(--ink)}
.page-links{display:none;grid-template-columns:1fr 1fr;gap:10px}
.page-link{display:flex;align-items:center;justify-content:center;gap:8px;min-height:48px;padding:0 8px;border:1px solid var(--line);border-radius:5px;background:var(--card);color:var(--ink);font:inherit;font-size:15px;font-weight:600;cursor:pointer}
.page-link svg{flex:none;width:20px;height:20px;fill:none;stroke:#2563eb;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}
body[data-screen="setup"] .page-links{display:grid}
#menu #app-qr-open,#menu .extension-banner{margin-top:11px}
#menu .sign-out{margin-top:22px}
.beta-link{align-self:center;color:var(--mute)}
/* The X is drawn 11px inside its round button, so this lines the X itself up with the text below */
#menu-close{margin-inline-end:-11px}
.pair .translation .stamp{padding:2px 0 0;color:#ffffff;font-weight:400;text-align:end}
.stamp{align-self:flex-end;padding:2px 9px 0;font-size:11px;line-height:1.2;color:var(--soft);opacity:.75;font-variant-numeric:tabular-nums}
.pair .stamp{padding-bottom:2px}
.subtitle .stamp{padding:0 12px 7px;text-align:end}
[data-copy]{-webkit-touch-callout:none;-webkit-user-select:none;user-select:none;transition:opacity .15s}
[data-copy].holding{opacity:.55}
.copy-offer{position:fixed;z-index:20;transform:translate(-50%,-115%);padding:8px 16px;border:0;border-radius:999px;background:#111827;color:#ffffff;font:600 15px system-ui,-apple-system,"Segoe UI",sans-serif;box-shadow:0 4px 14px rgba(0,0,0,.25);cursor:pointer}
.copied-note{position:fixed;z-index:20;transform:translate(-50%,-115%);padding:6px 12px;border-radius:999px;background:#111827;color:#ffffff;font:600 14px system-ui,-apple-system,"Segoe UI",sans-serif;pointer-events:none;animation:copied 1.2s ease forwards}
@keyframes copied{0%{opacity:0;transform:translate(-50%,-100%)}12%{opacity:1;transform:translate(-50%,-115%)}75%{opacity:1}100%{opacity:0}}
.elapsed{font-size:13px;font-weight:600;line-height:28px;color:var(--mute);font-variant-numeric:tabular-nums;white-space:nowrap}
.talk > .elapsed{position:fixed;z-index:4;top:calc(env(safe-area-inset-top) + 74px);right:max(16px,calc(50vw - 280px))}
body[data-running] .talk > .elapsed{top:calc(env(safe-area-inset-top) + 6px)}
body[data-video] .talk > .elapsed{top:calc(env(safe-area-inset-top) * .8);line-height:16px;color:#ffffff;text-shadow:0 1px 3px #000}
body[data-screen="setup"] .talk > .elapsed,body:has(.face:not([hidden])) .talk > .elapsed{display:none}
.seam .elapsed{grid-row:2;grid-column:3;justify-self:start;margin-inline-start:6px;padding:0 2px;background:var(--bg)}
.bar .elapsed{margin-inline-start:auto;color:#c9ccd6}
.bar .elapsed:not([hidden]) + .style-switch{margin-inline-start:12px}
.history-list .when{display:flex}
.history-list .when .date{min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.history-list .when .length{flex:none;white-space:nowrap}
.history-list .when .length::before{content:'·';margin:0 .35em}
/* Signed out: a carousel of what the app does, with sign-in fixed below it */
main:has(> .welcome:not([hidden])){padding:0;gap:0;overflow:hidden}
body:has(.welcome:not([hidden])) .bar{position:fixed;left:0;right:0;z-index:5;min-height:0;padding:0;background:none}
body:has(.welcome:not([hidden])) .bar > :not(.notice){display:none}
main:has(> .welcome:not([hidden])) > .notice{margin:12px auto 0;width:calc(100% - 32px)}
.welcome{--soft:rgba(255,255,255,.75);position:relative;flex:1;align-self:stretch;min-height:0;overflow:hidden;color:#ffffff;background:#05061a;color-scheme:dark}
.welcome .bg{position:absolute;inset:0;transition:opacity .6s ease}
.welcome .bg[data-k="0"]{background:radial-gradient(120% 70% at 80% 10%,#4b49e6 0%,transparent 60%),linear-gradient(160deg,#000 0%,#1b1a6b 55%,#3533cc 100%)}
.welcome .bg[data-k="1"]{background:radial-gradient(120% 70% at 20% 15%,#7c3aed 0%,transparent 60%),linear-gradient(160deg,#04020f 0%,#2a1466 60%,#5b2bd6 100%)}
.welcome .bg[data-k="3"]{background:radial-gradient(120% 70% at 15% 10%,#db2777 0%,transparent 55%),linear-gradient(160deg,#0a0210 0%,#3b1260 60%,#3533cc 100%)}
.welcome .bg[data-k="5"]{background:radial-gradient(120% 70% at 80% 12%,#3a3d8c 0%,transparent 55%),linear-gradient(160deg,#020309 0%,#12163a 60%,#262a78 100%)}
.welcome .bg:not([data-on]){opacity:0}
.welcome .track{position:absolute;inset:0;z-index:2;display:flex;touch-action:pan-y;user-select:none;-webkit-user-select:none}
.welcome .slide{position:relative;flex:0 0 100%;overflow:hidden;display:flex;flex-direction:column;align-items:center;box-sizing:border-box;padding:calc(24px + env(safe-area-inset-top)) 24px 0}
.welcome .copy{max-width:420px;text-align:center;z-index:1}
.welcome h1{margin:0 0 6px;font-size:30px;line-height:1.1;font-weight:800;letter-spacing:-.03em}
.welcome .copy p{margin:0;font-size:17px;line-height:1.35;color:var(--soft)}
.welcome .nb{white-space:nowrap}
.welcome .art{position:relative;flex:1;width:100%;margin-top:22px}
.welcome .fit{position:absolute;top:0;left:50%;width:390px;height:640px;margin-left:-195px;transform-origin:50% 0}
.welcome .where{position:absolute;left:0;right:0;top:436px;margin:0;text-align:center;font-size:17px;font-weight:600;color:#ffffff}
.welcome .bottom{position:absolute;left:0;right:0;bottom:0;z-index:4;padding:56px 24px calc(env(safe-area-inset-bottom) + 18px);display:flex;flex-direction:column;align-items:center;gap:14px;background:linear-gradient(rgba(5,6,26,0),rgba(5,6,26,.85) 45%,#05061a)}
.welcome .bottom .sub{margin:0;text-align:center;color:var(--soft)}
.welcome .dots{display:flex;gap:7px}
.welcome .dots button{width:7px;height:7px;padding:0;border:0;border-radius:99px;background:rgba(255,255,255,.35);cursor:pointer;transition:width .3s,background .3s}
.welcome .dots button[data-on]{width:22px;background:#ffffff}
.welcome .signin{width:100%;max-width:360px;min-height:54px;border:0;border-radius:14px;background:#6366f1;color:#ffffff;font:600 17px system-ui,-apple-system,"Segoe UI",sans-serif;display:flex;align-items:center;justify-content:center;gap:10px;box-shadow:0 10px 30px -8px rgba(99,102,241,.8);cursor:pointer}
.welcome .signin:active{background:#5249f0}
.welcome .signin svg{width:20px;height:20px;box-sizing:content-box;background:#ffffff;border-radius:50%;padding:3px}
.welcome .legal{line-height:normal;color:rgba(255,255,255,.55)}
/* A phone showing the app: it runs off the bottom, behind the button */
.welcome .phone{position:absolute;left:50%;top:0;width:262px;height:540px;margin-left:-131px;border-radius:40px;background:#0d0f16;box-shadow:0 0 0 4px #2b2f3a,0 0 0 6px #11131a,0 40px 80px -10px rgba(0,0,0,.8);overflow:hidden;display:flex;flex-direction:column}
.welcome .phone::before{content:'';position:absolute;z-index:3;top:10px;left:50%;width:76px;height:22px;margin-left:-38px;border-radius:99px;background:#000}
.welcome .appbar{flex:none;display:flex;align-items:last baseline;gap:4px;height:68px;box-sizing:border-box;padding:0 16px 10px;background:#05061a}
.welcome .appbar img{height:22px}
.welcome .appbar span{font-size:9px;font-weight:600;color:#c9ccd6;position:relative;top:-1px}
.welcome .screen{flex:1;display:flex;flex-direction:column;gap:9px;padding:14px 12px;background:#0c0e13}
.welcome .b{padding:9px 12px 10px;border-radius:18px;line-height:1.3;max-width:84%;font-size:15.5px;animation:welcome-pop .5s both}
.welcome .b .w{display:block;font-size:13.5px;color:var(--tr)}
.welcome .b small{display:block;margin-top:6px;padding-top:6px;border-top:1px solid rgba(255,255,255,.2);font-size:15.5px;color:#ffffff}
.welcome .b.a{--tr:#a9bcf0;align-self:flex-end;background:#23408f;border-bottom-right-radius:6px}
.welcome .b.c{--tr:#c4b3f2;align-self:flex-start;background:#4a2a8f;border-bottom-left-radius:6px}
@keyframes welcome-pop{from{opacity:0;transform:translateY(10px) scale(.96)}}
.welcome :is(.b,.rd,.cap):nth-child(2){animation-delay:.3s}
.welcome :is(.b,.cap):nth-child(3){animation-delay:.6s}
.welcome .b:nth-child(4){animation-delay:.9s}
.welcome .slide:not([data-on]) :is(.b,.rd,.cap){animation:none}
/* The opening call and the video call: two phones, each showing only its owner's language */
.welcome .phone.duo{width:178px;height:400px;border-radius:34px}
.welcome .phone.duo::before{top:8px;width:52px;height:15px;margin-left:-26px}
.welcome .phone.duo.left{margin-left:-184px;top:22px;transform:rotate(-1.5deg)}
.welcome .phone.duo.right{margin-left:6px;top:6px;transform:rotate(1.5deg)}
.welcome .phone.video.duo.left{top:14px;transform:perspective(900px) rotateY(22deg)}
.welcome .phone.video.duo.right{top:14px;transform:perspective(900px) rotateY(-22deg)}
.welcome .onc .appbar{height:48px;padding:0 14px 8px}
.welcome .onc .appbar img{height:18px}
.welcome .onc .screen{min-height:0;justify-content:flex-start;overflow:hidden;gap:7px;padding:8px 9px}
.welcome .onc .screen .rd{animation:none;max-width:88%;font-size:16px;padding:6px 9px;border-radius:12px}
.welcome .callhead{flex:none;display:flex;justify-content:center;gap:8px;padding:2px 0 6px;background:#0c0e13;font-size:11.5px;color:#a3a9b4}
.welcome .clock{font-variant-numeric:tabular-nums}
.welcome .callbar{flex:none;display:flex;justify-content:center;gap:4px;padding:6px 13px 16px;background:#0c0e13}
.welcome .cb{flex:1;display:grid;place-items:center;height:24px;box-sizing:border-box;border:1px solid #262b35;border-radius:6px;background:#161921;color:#ffffff}
.welcome .cb svg{width:11px;height:11px;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}
.welcome .cb.end{border-color:#dc2626;background:#dc2626}
.welcome .cb.end svg{width:17px;height:17px;fill:currentColor;stroke:none}
.welcome .video .callbar{position:relative;z-index:2;background:none}
.welcome .video .cb:not(.end){border-color:transparent;background:rgba(0,0,0,.55)}
/* Face to face: the phone lying flat, its top half facing the far side */
.welcome .flatwrap{position:absolute;inset:0;perspective:900px}
.welcome .flat{transform:rotateX(46deg) scale(.98);transform-origin:50% 40%;top:-10px}
.welcome .half{flex:1;display:flex;flex-direction:column;justify-content:flex-end;gap:8px;padding:12px}
.welcome .half.far{transform:rotate(180deg);background:#11131b;justify-content:flex-start}
.welcome .fold{height:2px;background:#2b2f3a}
/* The app's reader view: each person sees only their own language */
.welcome .rd{flex-shrink:0;align-self:flex-start;max-width:85%;padding:7px 10px;border-radius:14px;background:#23408f;color:#e3ebff;font-weight:600;font-size:15px;line-height:1.3;animation:welcome-pop .5s both}
.welcome .rd.b{background:#4a2a8f;color:#f0e8ff}
.welcome .rd.mine{align-self:flex-end}
/* Video call: captions as the app draws them, on frosted bubbles tinted by the speaker */
.welcome .video .screen{position:relative;padding:0;justify-content:flex-end;background:none}
.welcome .person{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:50% 0}
.welcome .video .screen::before{content:"";position:absolute;inset:0;z-index:1;pointer-events:none;background:radial-gradient(70% 45% at 50% 38%,transparent 40%,rgba(0,0,0,.35) 100%),linear-gradient(rgba(0,0,0,.12),rgba(0,0,0,.12))}
.welcome .own{position:absolute;z-index:2;top:34px;right:8px;width:28%;aspect-ratio:3/4;border-radius:10px;object-fit:cover}
.welcome .caps{position:relative;z-index:2;display:flex;flex-direction:column;gap:5px;padding:10px 8px 12px}
.welcome .cap{align-self:flex-start;max-width:85%;padding:5px 8px;border-radius:11px;font-size:14px;font-weight:600;line-height:1.3;color:#ffffff;text-shadow:0 1px 3px rgba(0,0,0,.85);background:color-mix(in srgb,#2563eb 20%,rgba(5,6,26,.2));-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);animation:welcome-pop .5s both}
.welcome .cap.b{background:color-mix(in srgb,#7c3aed 20%,rgba(5,6,26,.2))}
.welcome .cap.mine{align-self:flex-end}