:root {
  font-family:'Avenir Next','Helvetica Neue',Arial,sans-serif;
  color:#184c40;
  background:#edf5ef;
  font-synthesis:none
}
* { box-sizing:border-box }
body { margin:0; overflow:hidden }
button { font:inherit; cursor:pointer; color:inherit; -webkit-tap-highlight-color:transparent }
button:focus-visible { outline:3px solid #5bab87; outline-offset:4px }
svg { width:21px; height:21px; fill:none; stroke:currentColor; stroke-width:1.6; stroke-linecap:round; stroke-linejoin:round }
main { height:100vh; height:100dvh; background:linear-gradient(180deg,#c9e5f7 0%,#e3f2fa 56%,#f5faff 100%) }
#avatar-stage { position:absolute; inset:0 }
#avatar { width:100%; height:100%; display:block; touch-action:none; cursor:grab }
#avatar:active { cursor:grabbing }
#model-loading { position:absolute; inset:0; display:grid; place-items:center; font-size:13px; color:#698778; background:#edf5efc9 }
#model-loading[hidden] { display:none }
.voice-dock { position:absolute; bottom:26px; right:28px; text-align:right; pointer-events:none; z-index:4 }
.voice-dock>button { pointer-events:auto }
#avatar-state { position:absolute; bottom:70px; right:0; white-space:nowrap; font-size:11px; margin:0; color:#718d7e }
#talk { display:inline-flex; align-items:center; justify-content:center; background:#205542; color:#f0faed; width:56px; height:56px; padding:0; border:1px solid #1a4b3b; border-radius:50%; box-shadow:0 4px 18px #1b554318; transition:background .2s,box-shadow .2s,transform .2s }
#talk:hover { background:#286c52; box-shadow:0 6px 20px #1b55432a; transform:translateY(-1px) }
#talk.active { background:#f3f9ef; color:#205542; border-color:#b8d3c3 }
#talk.listening { box-shadow:0 0 0 7px #ffffff45,0 0 0 8px #a7d0b940 }
#talk.speaking { box-shadow:0 0 0 5px #afd8bc38 }
#feedback { position:absolute; right:0; bottom:92px; width:min(300px,calc(100vw - 48px)); font-size:12px; color:#526c60; line-height:1.5; margin:0 }
#feedback:empty { display:none }
.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 }
@media(max-width:800px) { .voice-dock { bottom:22px; right:18px } }
@media(prefers-reduced-motion:reduce) { *,*::before,*::after { animation:none!important; transition:none!important } }
.sky {
  position:absolute;
  inset:0;
  overflow:hidden;
  pointer-events:none
}
.cloud {
  position:absolute;
  width:520px;
  height:200px;
  background:radial-gradient(ellipse at 24% 63%,#fff 0 23%,transparent 34%),radial-gradient(ellipse at 45% 42%,#fff 0 25%,transparent 39%),radial-gradient(ellipse at 67% 61%,#fff 0 25%,transparent 39%),radial-gradient(ellipse at 50% 74%,#fff 0 37%,transparent 49%);
  filter:blur(9px);
  opacity:.65;
  animation:cloud-drift 45s ease-in-out infinite alternate
}
.cloud-one {
  left:-150px;
  top:13%;
  transform:scale(.95)
}
.cloud-two {
  right:-180px;
  top:38%;
  animation-delay:-18s;
  opacity:.6
}
.cloud-three {
  left:8%;
  bottom:-70px;
  width:680px;
  height:240px;
  animation-duration:60s;
  opacity:.9
}
.cloud-four {
  right:13%;
  top:-100px;
  animation-duration:70s;
  opacity:.45
}
@keyframes cloud-drift {
  from {
    translate:-30px 0
  }
  to {
    translate:70px -15px
  }
}
@media(max-width:800px) {
  .cloud {
    width:350px;
    height:150px
  }
  .cloud-three {
    left:-100px;
    width:520px;
    bottom:-45px
  }
}