.companion{display:grid;grid-template-columns:minmax(220px,1fr) 1fr;gap:32px;align-items:center;background:#fff9ec;border:1px solid #e7ddc8;border-radius:22px;padding:28px;margin:24px 0}
.face-screen{border:12px solid #254941;border-radius:30px;background:#102c29;box-shadow:0 12px 0 #dbd5c6;max-width:400px;width:100%;margin:auto;overflow:hidden}
.face-screen svg{display:block;width:100%;aspect-ratio:3/2}.face-screen .eye,.face-screen .talk-mouth{fill:#a9e9c9}.face-screen .glint{fill:#f2ffeb}.face-screen .mouth,.face-screen .brow{fill:none;stroke:#a9e9c9;stroke-width:7;stroke-linecap:round}.face-screen .talk-mouth,.face-screen .brow{display:none}
.face-eyes{transform-origin:120px 76px;animation:blink 6s infinite}.face-screen[data-state="listening"] .right{transform:translateY(-5px)}.face-screen[data-state="thinking"] .face-eyes{animation:ponder 2s ease-in-out infinite}.face-screen[data-state="speaking"] .mouth{display:none}.face-screen[data-state="speaking"] .talk-mouth{display:block;transform-origin:120px 122px;animation:talk .45s ease-in-out infinite alternate}.face-screen[data-state="confirmation"] .brow{display:block}.face-screen[data-state="warning"] .eye{fill:#ffcb70}.face-screen[data-state="warning"] .mouth{d:path("M105 126 Q120 114 135 126");stroke:#ffcb70}.face-screen[data-state="offline"] .eye,.face-screen[data-state="muted"] .eye{height:10px;transform:translateY(24px)}.face-screen[data-state="offline"] .glint,.face-screen[data-state="muted"] .glint{display:none}
.face-copy h2{font-size:clamp(25px,4vw,36px);letter-spacing:-1px;line-height:1.2}.face-copy p{line-height:1.7}.face-copy select{width:100%;min-height:44px;margin:8px 0 16px;padding:10px;border:1px solid #a9bfba;border-radius:8px;background:#fff}.face-copy label{display:block}.face-screen[data-paused="true"] *{animation:none!important}
@keyframes blink{0%,44%,48%,100%{transform:scaleY(1)}46%{transform:scaleY(.08)}}@keyframes ponder{0%,100%{transform:translateX(-7px)}50%{transform:translateX(7px)}}@keyframes talk{from{transform:scaleY(.3)}to{transform:scaleY(1)}}
@media(prefers-reduced-motion:reduce){.face-screen *{animation:none!important}}@media(max-width:680px){.companion{grid-template-columns:1fr;padding:20px;gap:24px}.face-screen{max-width:310px}}
.page-nav{display:flex;flex-wrap:wrap;gap:12px;margin:20px 0}.page-nav a{padding:12px 16px;border:1px solid #b9cfc5;border-radius:10px;color:#20594d;font-weight:600;text-decoration:none;min-height:44px}.page-nav a:hover{background:#dceee6}