:root {
  color-scheme: light;
  --ink: #233f4b;
  --muted: #526873;
  --paper: #edf2f1;
  --serif: 'Instrument Serif', Georgia, serif;
  --sans: 'DM Sans', system-ui, sans-serif;
  --scene-inset: 10px;
  font-family: var(--sans);
  color: var(--ink);
  background: var(--paper);
  font-synthesis: none;
}
* { box-sizing: border-box; }
body { margin: 0; min-width: 320px; }
a { color: inherit; text-underline-offset: .25em; }
button { font: inherit; }
button, a { -webkit-tap-highlight-color: transparent; }
:focus-visible { outline: 3px solid #476b84; outline-offset: 5px; }
[hidden] { display: none !important; }
companion-panel, tavus-companion, ambient-background { display: block; }
ambient-background {
  position: fixed;
  inset: 0;
  z-index: -1;
  pointer-events: none;
  background: radial-gradient(ellipse at 75% 10%, #e6cbb5 0, transparent 65%), radial-gradient(ellipse at 5% 60%, #b8d5de 0, #e4eceb 75%);
}
ambient-background canvas { display: block; width: 100%; height: 100%; }
.page-shell { max-width: 1480px; height: 100svh; min-height: 580px; margin: auto; padding: clamp(20px, 4vh, 42px) 4%; }
main { height: 100%; }
.main-layout {
  position: relative;
  isolation: isolate;
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  grid-template-rows: auto minmax(min-content, 1fr);
  gap: clamp(12px, 2vh, 22px);
  height: 100%;
  min-height: min-content;
  padding: clamp(24px, 2.5vh, 28px) clamp(24px, 5vw, 68px);
  border: 1px solid #ffffffb0;
  border-radius: 34px;
  background: #ffffff48;
  box-shadow: 0 24px 80px -38px #325c7142, inset 0 1px 0 #ffffff80;
  backdrop-filter: blur(16px);
}
.landscape { position: absolute; z-index: -1; inset: var(--scene-inset); margin: 0; border-radius: 24px; overflow: hidden; }
.landscape img { display: block; width: 100%; height: 100%; object-fit: cover; object-position: 50% 50%; }
.landscape::after { content: ''; position: absolute; inset: 0; background: linear-gradient(180deg, #f2f3ecd9 0%, #f2f3ec73 28%, transparent 55%, #142f4699 100%); }
.welcome { min-width: 0; }
.welcome-content { position: relative; text-align: center; }
.scene-wordmark { position: absolute; top: 0; left: 0; display: flex; width: fit-content; align-items: center; gap: 10px; font-family: var(--serif); font-size: 2.5rem; line-height: 1; white-space: nowrap; }
.scene-logo { display: block; width: 34px; height: 34px; flex: none; }
h1 { font-family: var(--serif); font-size: clamp(3.25rem, 5.5vw, 4.75rem); line-height: 1; font-weight: 400; letter-spacing: -.025em; margin: 0; }
h1 em { font-weight: 400; color: #456673; }
.welcome-copy { font-size: 1rem; line-height: 1.65; max-width: 520px; margin: 16px auto 0; color: var(--ink); }
companion-panel { min-width: 0; min-height: min-content; }
.companion-card { height: 100%; display: flex; flex-direction: column; align-items: center; justify-content: center; }
.embed-frame { position: relative; width: min(100%, 672px); flex: 1; min-height: 300px; max-height: 624px; overflow: hidden; border: 1px solid #ffffff9c; border-radius: 22px; background: #eaf0f4; box-shadow: 0 24px 60px -22px #142f4680, 0 4px 14px #142f4626; }
.embed-frame > tavus-companion { position: absolute; inset: 0; }
tavus-companion, tavus-embed { display: block; width: 100%; height: 100%; }
.embed-loading, .embed-error { height: 100%; display: flex; align-items: center; justify-content: center; flex-direction: column; padding: 28px; text-align: center; background: #ffffff50; }
.embed-loading p, .embed-error p { color: var(--muted); font-size: .9375rem; line-height: 1.7; }
.loading-ring { width: 32px; height: 32px; border-radius: 50%; border: 1px solid #b7cbd7; border-top-color: var(--ink); animation: rotate 1.5s linear infinite; }
.embed-error h3 { font-size: 1.375rem; font-family: var(--serif); font-weight: 400; margin: 0; }
.reload-button { cursor: pointer; border: 0; border-radius: 8px; min-height: 44px; padding: 11px 18px; background: var(--ink); color: white; }
.reload-button:hover { background: #3a5d72; }
.companion-footnote { display: flex; gap: 10px; align-items: center; justify-content: center; padding-top: 18px; flex: none; }
.companion-footnote svg { width: 19px; height: 19px; flex-shrink: 0; color: #f1f5f7; }
.companion-footnote p { font-size: .875rem; color: #fff; margin: 0; line-height: 1.6; text-shadow: 0 1px 8px #142f4680; }
.visually-hidden { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; border: 0; }
.skip-link { position: fixed; z-index: 10; top: 10px; left: 10px; padding: 12px 18px; background: var(--ink); color: #fff; border-radius: 8px; transform: translateY(-150%); }
.skip-link:focus { transform: translateY(0); }
.noscript-message { padding: 16px; text-align: center; color: var(--ink); }
@keyframes rotate { to { transform: rotate(360deg); } }
@media (max-width: 1100px) {
  .page-shell { padding-left: 3%; padding-right: 3%; }
  .scene-wordmark { font-size: 2.125rem; }
  .welcome-copy { margin-top: 12px; }
}
@media (max-width: 47.5em) {
  :root { --scene-inset: 7px; }
  .page-shell { padding: 12px; min-height: 600px; }
  .main-layout { gap: 12px; padding: 26px 24px 24px; border-radius: 25px; }
  .landscape { border-radius: 18px; }
  .landscape img { object-position: 48% 50%; }
  .landscape::after { background: linear-gradient(180deg, #f2f3ece6 0%, #f2f3ec7a 27%, transparent 58%, #142f46a6 100%); }
  .scene-wordmark { position: static; font-size: 1.875rem; margin: 0 auto 14px; }
  .scene-logo { width: 28px; height: 28px; }
  h1 { font-size: 2.625rem; line-height: 1.04; letter-spacing: -.02em; }
  .welcome-copy { margin-top: 10px; font-size: .9375rem; line-height: 1.6; max-width: 310px; }
  .embed-frame { min-height: 264px; max-height: 576px; border-radius: 16px; }
  .companion-footnote { padding-top: 14px; gap: 8px; max-width: 310px; text-align: center; }
  .companion-footnote p { font-size: .8125rem; }
  .companion-footnote svg { width: 17px; height: 17px; }
}
@media (max-width: 380px) {
  .main-layout { padding: 22px 20px; }
  h1 { font-size: 2.25rem; }
}
@media (max-height: 700px) and (min-width: 47.5625em) {
  .main-layout { padding-top: 23px; padding-bottom: 23px; gap: 12px; }
  h1 { font-size: 3.5rem; }
  .welcome-copy { margin-top: 10px; }
  .companion-footnote { padding-top: 14px; }
}
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation: none !important; transition: none !important; }
}