:root { color-scheme: light; --ink: #163d35; --muted: #67766d; --paper: #f5f4ed; --line: #dce1d6; --accent: #dcedb9; }
* { box-sizing: border-box; } [hidden] { display: none !important; }
body { margin: 0; background: var(--paper); color: var(--ink); font-family: 'Segoe UI', sans-serif; -webkit-font-smoothing: antialiased; }
button, input { font: inherit; } button, a { -webkit-tap-highlight-color: transparent; }
button { padding: 15px 23px; border: 1px solid var(--ink); border-radius: 8px; background: var(--ink); color: white; cursor: pointer; font-weight: 600; }
button:hover { background: #285648; } button:disabled { opacity: .48; cursor: not-allowed; }
button span, .text-link span { margin-left: 16px; } button:focus-visible, a:focus-visible, input:focus-visible { outline: 3px solid #a1b85f; outline-offset: 4px; }
.secondary { color: var(--ink); background: transparent; border-color: #becabd; } .secondary:hover { background: #e5ebde; }
.end { color: #8e3929; background: #fff3ed; border-color: #e2bbae; } .end:hover { background: #f7dfd3; }
.masthead { max-width: 1320px; margin: auto; padding: 29px 54px; display: flex; align-items: center; justify-content: space-between; border-bottom: 1px solid var(--line); }
.brand { font-size: 30px; font-weight: 700; color: var(--ink); text-decoration: none; letter-spacing: -1.8px; } .brand span { font-size: 12px; font-weight: 500; letter-spacing: 0; vertical-align: super; margin-left: 7px; }
.private-label { font-size: 10px; letter-spacing: 1.7px; color: var(--muted); }
main { max-width: 1320px; margin: auto; padding: 53px 54px 25px; }
.heading { display: flex; align-items: flex-end; justify-content: space-between; gap: 60px; margin-bottom: 37px; }
.eyebrow { font-size: 10px; font-weight: 650; letter-spacing: 1.7px; line-height: 1.6; margin: 0 0 17px; }
h1 { font-family: Georgia, serif; font-weight: 400; font-size: clamp(36px, 4.6vw, 61px); letter-spacing: -2px; line-height: 1.07; margin: 0; }
.intro { color: var(--muted); font-size: 16px; line-height: 1.7; max-width: 340px; margin: 0 0 5px; }
.workspace-grid { display: grid; grid-template-columns: 1.15fr 1fr; gap: 23px; }
.call-card, .result-card { border: 1px solid var(--line); border-radius: 18px; padding: 25px 29px; min-width: 0; }
.call-card { background: #eaf0e1; text-align: center; position: relative; overflow: hidden; }
.result-card { background: #fffefa; display: flex; flex-direction: column; }
.card-top { display: flex; align-items: center; justify-content: space-between; gap: 12px; font-size: 12px; } .card-top .eyebrow { margin: 0; font-size: 9px; }
.badge { font-size: 8px; letter-spacing: 1px; border: 1px solid #c2ceba; border-radius: 30px; padding: 5px 9px; white-space: nowrap; }
.orb { width: 132px; height: 132px; margin: 38px auto 25px; border-radius: 50%; display: grid; place-items: center; background: radial-gradient(circle at 33% 23%, #496f52, #1b453c 62%); box-shadow: 0 0 0 12px #e0e9d5, 0 0 0 13px #d5e0ca; color: #e9eddb; }
.orb > span { font-family: Georgia, serif; font-style: italic; font-size: 62px; padding-right: 9px; }
.wave { display: none; align-items: center; height: 40px; gap: 5px; }.wave i { height: 16px; width: 4px; background: var(--accent); border-radius: 4px; animation: wave 1.4s ease-in-out infinite alternate; }.wave i:nth-child(2n) { animation-delay: .3s; height: 30px; }.wave i:nth-child(3) { animation-delay: .6s; height: 40px; }
.orb.active > span { display: none; }.orb.active .wave { display: flex; } @keyframes wave { to { transform: scaleY(.35); } }
h2 { font-family: Georgia, serif; font-weight: 400; letter-spacing: -.7px; font-size: 32px; margin: 0 0 12px; } .call-card .eyebrow { margin-bottom: 8px; }
#call-description { max-width: 320px; margin: 0 auto 18px; color: var(--muted); line-height: 1.6; font-size: 13px; }
.connection { font-size: 12px; margin: 18px 0; }.connection::before { content: ''; display: inline-block; width: 6px; height: 6px; border-radius: 50%; background: #648d55; margin-right: 7px; }
.controls { display: flex; justify-content: center; flex-wrap: wrap; gap: 10px; }.controls button { font-size: 12px; }
.small-note, .error { font-size: 11px; line-height: 1.65; }.small-note { color: var(--muted); }.error, #login-error { color: #9b3c28; } #mode-note { margin: 17px auto 0; max-width: 360px; }
.result-card h2 { margin-top: 29px; }.result-status { margin: 0; font-size: 12px; color: var(--muted); }.record-dot { height: 7px; width: 7px; border-radius: 50%; border: 1px solid #98a88e; }
#empty-result { padding: 22px 0 26px; max-width: 340px; } #empty-result p { font-size: 13px; line-height: 1.6; margin: 8px 0; }.empty-icon { font-size: 34px; font-family: Georgia,serif; color: #8ba07c; }.muted { color: var(--muted); }
dl { margin: 20px 0 10px; } .field-row { display: grid; grid-template-columns: 90px 1fr; gap: 15px; padding: 9px 0; border-bottom: 1px solid #edf0e8; font-size: 12px; line-height: 1.5; } dt { color: var(--muted); } dd { margin: 0; overflow-wrap: anywhere; }
.next-step { margin-top: auto; border-top: 1px solid var(--line); padding-top: 21px; }.next-step .eyebrow { margin-bottom: 8px; } h3 { font-family: Georgia,serif; font-weight: 400; font-size: 23px; margin: 0 0 8px; }.next-step > p:not(.eyebrow) { font-size: 12px; color: var(--muted); line-height: 1.5; }.text-link { font-size: 12px; font-weight: 600; color: var(--ink); text-underline-offset: 5px; }
.try-it { display: flex; flex-wrap: wrap; align-items: center; gap: 22px; padding: 25px 0 14px; font-size: 12px; color: var(--muted); }.try-it .eyebrow { margin: 0; color: var(--ink); font-size: 9px; }.try-it > p { margin: 0; } footer { border-top: 1px solid var(--line); margin-top: 12px; padding-top: 17px; font-size: 10px; color: var(--muted); line-height: 1.8; }
.login-panel { max-width: 620px; margin: 55px auto; }.login-panel .intro { margin: 25px 0; max-width: none; }.login-panel label { display: block; margin: 30px 0 10px; font-size: 13px; }.login-row { display: flex; gap: 12px; }.login-row input { min-width: 0; flex: 1; border: 1px solid #c4cfbd; border-radius: 8px; padding: 15px; background: #fffefa; }
@media(max-width: 780px) { .masthead { padding: 23px; } main { padding: 32px 22px; }.heading { display: block; }.heading .intro { margin-top: 22px; max-width: 460px; }.workspace-grid { grid-template-columns: 1fr; }.call-card, .result-card { padding: 24px; }.try-it { gap: 12px; }.try-it > span { display: none; }.try-it .eyebrow { flex-basis: 100%; }.private-label { font-size: 8px; }.login-row { flex-direction: column; } }
@media(prefers-reduced-motion: reduce) { .wave i { animation: none; } }
.retention { display: block; margin: 12px 0; }
#review { margin-top: 24px; }
#transcript-fragments { padding-left: 24px; max-height: 420px; overflow: auto; }
#transcript-fragments li { white-space: pre-wrap; overflow-wrap: anywhere; margin: 10px 0; font-size: 13px; }
#owner-tools { margin-top: 24px; }
#owner-tools pre { max-height: 420px; overflow: auto; white-space: pre-wrap; overflow-wrap: anywhere; font-size: 12px; }
#owner-tools select { max-width: 100%; } #invite-code { display: block; overflow-wrap: anywhere; }