:root { --ink: #082B22; --soft: #3d5a51; --line: #cfdad6; --paper: #ffffff; }
* { box-sizing: border-box; }
html, body { margin: 0; background: var(--paper); color: var(--ink); }
body { font-family: "Libre Caslon Text", Georgia, "Times New Roman", serif; font-size: 18px; line-height: 1.55; }
.page { max-width: 560px; margin: 0 auto; padding: 48px 20px 64px; text-align: center; }
h1 { font-family: "Bodoni Moda", "Didot", Georgia, serif; font-weight: 400; font-size: 44px; letter-spacing: 0.02em; margin: 0; }
.tag { margin: 4px 0 36px; color: var(--soft); font-style: italic; }
.hello { font-size: 22px; }
.small { font-size: 15px; color: var(--soft); }
button { font: inherit; border-radius: 999px; padding: 12px 28px; cursor: pointer; }
button.primary { background: var(--ink); color: var(--paper); border: 1px solid var(--ink); }
button.secondary { background: transparent; color: var(--ink); border: 1px solid var(--line); }
button:focus-visible { outline: 3px solid #7fa79a; outline-offset: 3px; }
button[disabled] { opacity: .5; cursor: default; }
.orb { width: 96px; height: 96px; margin: 12px auto 20px; border-radius: 50%; background: var(--ink); opacity: .85; transition: transform .25s ease, opacity .25s ease; }
.orb.speaking { transform: scale(1.12); opacity: 1; }
.orb.listening { transform: scale(0.94); opacity: .6; }
@media (prefers-reduced-motion: reduce) { .orb { transition: none; } }
.state { font-size: 20px; margin: 0 0 6px; }