:root {
  --ink:#17283f; --body-ink:#33465f; --muted:#61738c;
  --blue:#2563eb; --blue-bright:#3b82f6; --glass:#fff; --glass-strong:#fff;
  --glass-faint:#fff; --edge:#dce5f2; --edge-soft:#e8edf6;
  --inner-hi:transparent; --shadow-soft:none; --radius:12px; --radius-sm:8px;
  --sans:'DM Sans',Arial,sans-serif; --mono:'DM Sans',Arial,sans-serif;
}
html { scroll-behavior:smooth; }
body { margin:0; background:#f7f7f2; color:var(--ink); font:16px/1.5 var(--sans); }
body::before { display:none; }
*,*::before,*::after { box-sizing:border-box; }
button,input { font:inherit; } button { cursor:pointer; } a { text-decoration:none; }
:focus-visible { outline:3px solid var(--blue); outline-offset:3px; }
.sr-only { position:absolute; width:1px; height:1px; padding:0; margin:-1px; overflow:hidden; clip:rect(0,0,0,0); white-space:nowrap; border:0; }
.skip-link { position:absolute; top:-100px; left:16px; z-index:100; padding:10px; background:#fff; }
.skip-link:focus { top:12px; }
.site-header { max-width:960px; margin:auto; padding:27px 24px; display:flex; align-items:center; justify-content:space-between; gap:16px; }
.wordmark { color:var(--ink); font-size:18px; font-weight:700; letter-spacing:-.055em; }
.wordmark span { color:var(--blue); }
.wordmark-outloud { font-style:normal; background:var(--irid-text); -webkit-background-clip:text; background-clip:text; -webkit-text-fill-color:transparent; color:#A63A5E; margin-left:2px; padding-right:.12em; }
.brand-lockup { display:inline-flex; align-items:center; gap:10px; }
.brand-logo { width:34px; height:34px; display:block; object-fit:contain; }
.header-note { display:inline-flex; align-items:center; gap:8px; color:var(--muted); font-size:11px; font-weight:700; }
.live-dot { display:inline-block; width:7px; height:7px; background:var(--blue); border-radius:50%; }
main { padding:0 20px; }
.intro { max-width:740px; margin:18px auto 14px; text-align:center; }
.intro h1 { margin:0 0 8px; font:400 clamp(32px,5.5vw,54px)/1.05 'Newsreader',Georgia,serif; letter-spacing:-.045em; display:flex; align-items:center; justify-content:center; gap:18px; flex-wrap:wrap; }

.headline-mark { width:.95em; height:.95em; display:inline-block; object-fit:contain; filter:drop-shadow(0 2px 6px rgba(23,45,50,.22)); }
.intro h1 em { background:var(--irid-text); -webkit-background-clip:text; background-clip:text; -webkit-text-fill-color:transparent; font-weight:400; padding-right:.14em; }
.intro p { margin:0; color:#61716e; font-size:15px; }
.experience { max-width:680px; margin:0 auto 40px; padding:18px; border:1px solid #dce5f2; border-radius:14px; background:#fff; box-shadow:0 16px 48px rgba(23,45,50,.07); position:relative; overflow:hidden; }
.experience::before { content:''; position:absolute; top:0; left:0; right:0; height:3px; background:var(--blue); }
.avatar-area { display:grid; place-items:center; min-height:260px; padding:10px 0 2px; background:#edf3ff; border-radius:9px; overflow:hidden; }
.experience .ol-avatar-stage,.experience .ol-avatar-stage.video-mode { width:280px; height:286px; margin:0; filter:none; }
.experience .ol-simli-video,.experience .ol-tap-gate { border-radius:9px; }
.experience .ol-tap-gate { background:#15366e; border:0; text-align:center; padding:16px; }
.experience .ol-gate-word { font-size:16px; }.experience .ol-gate-sub { font-size:11px; }
.state-line { margin-top:4px; min-height:24px; }
.experience .ol-state { border:0; background:transparent; color:#61738c; font:600 11px/1.3 var(--sans); letter-spacing:0; padding:0; }
.conversation-area { padding:15px 4px 2px; }
.experience .ol-chips { justify-content:center; gap:7px; margin:0 0 13px; }
.experience .ol-chip { border:1px solid var(--edge); background:#f4f7ff; color:var(--blue); border-radius:999px; padding:7px 12px; font:600 11px/1.2 var(--sans); }
.experience .ol-chip:hover { background:#e8f0ff; transform:none; }
.ask-row { display:flex; gap:7px; align-items:stretch; }
.experience .ol-text { flex:1; min-width:0; min-height:49px; background:#fafbf8; border:1px solid #dce5f2; border-radius:8px; padding:12px; color:var(--ink); font-size:13px; }
.experience .ol-text:focus { border-color:var(--blue); background:#fff; }
.experience .ol-mic,.experience .ol-send { min-height:49px; border:0; border-radius:8px; background:var(--blue); color:#fff; box-shadow:none; padding:0 14px; font:700 12px/1 var(--sans); }
.experience .ol-mic:hover,.experience .ol-send:hover { background:#174bad; color:#fff; }
.experience .ol-mic.on { background:#174bad; color:#fff; }
.mic-symbol { font-size:10px; }.experience .ol-send { min-width:46px; font-size:21px; }
.utility-row { display:flex; align-items:center; flex-wrap:wrap; gap:12px; min-height:34px; margin-top:5px; }
.experience .ol-sound,.stop-button { min-height:29px; padding:4px 0; border:0; background:transparent; box-shadow:none; color:var(--blue); font:600 11px/1.2 var(--sans); }
.stop-button { color:var(--blue); }.stop-button[hidden] { display:none; }
.hint { margin-left:auto; color:#9aa5a0; font-size:10px; }
.response-space { min-height:0; color:#6a7974; font-size:12px; }
.response-space:not(:empty) { padding:8px 0; }
.experience .ol-screen { display:none; max-width:none; min-height:0; margin:9px 0; border:0; border-radius:8px; background:#f6f8ff; box-shadow:none; }
.experience .ol-screen.panel-live { display:block; }.experience .ol-screen-body { padding:10px; }
.experience .ol-screen-standby[hidden] { display:none; }
.experience .ol-host-screen { min-height:0; margin:0; }
.experience .ol-panel { background:#fff; border:1px solid #dce5f2; border-radius:8px; padding:13px; box-shadow:none; }
.experience .ol-panel-title { font-size:15px; margin-bottom:8px; }
.experience .ol-panel-rows { gap:6px; }.experience .ol-panel-row { border-radius:6px; padding:9px; }
.experience .ol-row-name { font-size:12px; }.experience .ol-row-desc,.experience .ol-row-price { font-size:10px; }
.experience .ol-input { font-size:12px; min-height:36px; padding:7px; }
.experience .ol-submit { min-height:36px; padding:7px 12px; font-size:12px; }
.experience .ol-console { margin-top:4px; }.experience .ol-log { min-height:0; max-height:132px; padding:0; gap:6px; }
.experience .ol-log:empty { display:none; }.experience .ol-log:not(:empty) { border-top:1px solid #e8edf6; padding-top:9px; }
.experience .ol-msg { display:grid; grid-template-columns:62px 1fr; gap:8px; }
.experience .ol-stamp { display:none; }.experience .ol-who { font-size:9px; }
.experience .ol-talk { font-size:12px; line-height:1.4; margin:0; }
.site-footer { max-width:960px; margin:auto; padding:0 24px 28px; display:flex; justify-content:space-between; color:#87928d; font-size:11px; }
@media (max-width:600px) {
  .site-header { padding:19px 20px; }.intro { margin:14px auto 12px; }
  .intro h1 { font-size:clamp(30px,11vw,48px); }
  .experience { padding:10px; margin-bottom:40px; }.avatar-area { min-height:230px; }
  .experience .ol-avatar-stage,.experience .ol-avatar-stage.video-mode { width:250px; height:260px; }
  .hint { flex-basis:100%; margin:-5px 0 0; }.experience .ol-mic { padding:0 11px; }
  .experience .ol-msg { grid-template-columns:52px 1fr; }
}
@media (prefers-reduced-motion:reduce) { html { scroll-behavior:auto; } *,*::before,*::after { animation-duration:.01ms!important; transition-duration:.01ms!important; } }

/* ---------- avatar picker ---------- */
.ol-avatar-picker { display: flex; gap: 8px; flex-wrap: wrap; justify-content: center; margin-top: 12px; }
.ol-avatar-opt {
  border: 1px solid rgba(14, 59, 46, .18); background: #fff; border-radius: 999px;
  padding: 7px 14px; font: 500 12px/1 'DM Sans', sans-serif; color: #33465f;
  cursor: pointer; transition: background .15s ease, color .15s ease;
}
.ol-avatar-opt:hover { border-color: var(--blue); }
.ol-avatar-opt.sel { background: var(--blue); color: #fff; border-color: var(--blue); }
.ol-avatar-picker { max-height: 180px; overflow-y: auto; }
.ol-avatar-opt img { width: 28px; height: 28px; border-radius: 50%; object-fit: cover; margin-right: 6px; vertical-align: middle; }
.ol-book-cta.ol-pulse { animation: olPulse 1s ease-in-out 4; } @keyframes olPulse { 50% { transform: scale(1.12); } }

/* ---------- stage row: avatar + info screen side by side, above the fold (mobile-first) ---------- */
.intro { margin:6px auto 8px; } .intro p { font-size:13px; }
.intro h1 { font-size:clamp(24px,7vw,40px); gap:10px; }
.headline-mark { width:1em; height:1em; }
.site-header { padding:12px 14px; }
.header-note { display:none; }
main { padding:0 10px; }
.experience { max-width:1100px; padding:10px; margin-bottom:24px; }
.stage-row { display:grid; grid-template-columns:1fr 1fr; gap:8px; margin-bottom:10px; }
.stage-row .avatar-area { min-height:0; aspect-ratio:3/4; padding:0; position:relative; }
.experience .stage-row .ol-avatar-stage,.experience .stage-row .ol-avatar-stage.video-mode { width:100%; height:100%; }
.stage-row .state-line { position:absolute; bottom:6px; left:0; right:0; text-align:center; }
.experience .stage-row .ol-screen,.experience .stage-row .ol-screen.panel-live,.experience .stage-row .ol-screen.deck-live { display:flex; flex-direction:column; margin:0; aspect-ratio:3/4; overflow:hidden; border:1px solid #dce5f2; border-radius:9px; }
.experience .stage-row .ol-screen-body { flex:1; overflow-y:auto; padding:8px; }
.experience .stage-row .ol-screen.panel-live .ol-screen-standby,.experience .stage-row .ol-screen.deck-live .ol-screen-standby { display:none; }
.ol-standby-sign { height:100%; display:flex; flex-direction:column; align-items:center; justify-content:center; text-align:center; gap:6px; color:#61738c; font-size:12px; padding:10px; }
.ol-standby-sign strong { font:400 22px/1 'Newsreader',Georgia,serif; color:#17283f; }
.experience .ol-panel { padding:9px; }
@media (min-width:700px) {
  .site-header { padding:18px 24px; } .header-note { display:inline-flex; }
  main { padding:0 20px; }
  .experience { padding:16px; }
  .stage-row { gap:14px; }
  .stage-row .avatar-area,.experience .stage-row .ol-screen { aspect-ratio:auto; height:min(62vh,520px); }
  .experience .stage-row .ol-screen-body { padding:12px; }
  .conversation-area { max-width:760px; margin:0 auto; }
}
@media (max-width:600px) {
  .intro { margin:4px auto 6px; } .intro h1 { font-size:clamp(22px,7vw,32px); }
  .intro p { display:none; }
  .experience .stage-row .ol-avatar-stage,.experience .stage-row .ol-avatar-stage.video-mode { width:100%; height:100%; }
  .stage-row .avatar-area { min-height:0; }
}
/* keep the mascot sprite at its natural frame shape inside the larger stage; video still fills the box */
.stage-row .ol-avatar-face { inset:auto; left:50%; top:50%; transform:translate(-50%,-55%); width:min(100%, calc(100% * 0.92)); aspect-ratio:347/378; height:auto; max-height:85%; }
.stage-row .ol-avatar-face.speaking { transform:translate(-50%,-55%); }
.stage-row .ol-simli-video { border-radius:9px; }

/* ---------- Client-branded header ---------- */
.client-page .site-header { max-width:1040px; padding:16px 24px; border-bottom:1px solid var(--edge-soft); }
.client-page .brand-lockup { gap:12px; }
.client-page .client-logo { height:64px; width:auto; max-width:260px; object-fit:contain; display:block; }
.client-page .client-name { font:700 17px/1.1 var(--sans); letter-spacing:-.02em; color:var(--ink); }
.client-page .header-note { background:#f4f7ff; border:1px solid var(--edge); border-radius:999px; padding:7px 14px; color:var(--blue); font-size:11px; letter-spacing:.02em; }
.client-page .header-note .live-dot { background:#22c55e; }
.client-page .ol-book-cta { padding:11px 22px; font-size:.9rem; }
@media (max-width:640px) {
  .client-page .site-header { padding:12px 16px; gap:10px; }
  .client-page .client-logo { height:44px; max-width:150px; }
  .client-page .client-name { display:none; }
  .client-page .ol-book-cta { padding:9px 14px; font-size:.72rem; white-space:nowrap; }
}