:root{
  color-scheme:dark;
  --cyan:#78effb;
  --ink:#090e18;
  --cyan-soft:#3fdaf0;
}
*{box-sizing:border-box}
html,body{margin:0;width:100%;height:100%;overflow:hidden;background:var(--ink);font-family:Inter,ui-sans-serif,system-ui,-apple-system,Segoe UI,Roboto,sans-serif}
button{font:inherit;cursor:pointer}
.app{
  position:relative;
  width:100%;
  height:100dvh;
  overflow:hidden;
  display:grid;
  place-items:center;
  isolation:isolate;
  background:radial-gradient(ellipse at 50% 37%,#10283c 0,#0b1726 32%,#090e18 72%);
}
.ambient{position:absolute;z-index:-1;pointer-events:none;border-radius:50%;filter:blur(75px);opacity:.22}
.ambient-a{width:360px;height:360px;background:#1379ad;left:-180px;top:20%}
.ambient-b{width:400px;height:400px;background:#0f4c80;right:-210px;bottom:-150px}
.stage{position:relative;display:grid;place-items:center;width:100%;height:100%}
.face-glow{position:absolute;width:min(60vw,390px);height:min(40vh,260px);border-radius:50%;background:#2bd1ef;opacity:.10;filter:blur(66px);animation:breathe 5s ease-in-out infinite}
.face{position:relative;width:min(56vw,420px);height:clamp(140px,28vh,275px);display:flex;flex-direction:column;align-items:center;justify-content:center;animation:float 6s ease-in-out infinite;filter:drop-shadow(0 0 30px #63e5f820)}
.eyes{display:flex;justify-content:center;align-items:center;gap:clamp(35px,6vw,74px);width:100%;transform:translateY(8px)}
.eye-slot{overflow:visible}
.eye{position:relative;background:var(--cyan);width:clamp(58px,8vw,106px);height:clamp(50px,9vh,88px);border-radius:40% 40% 44% 44%;box-shadow:0 0 12px #70edff9a,0 0 45px #50cceb55;transform-origin:center;animation:blink 7.3s infinite;transform:translate(var(--look-x,0px),var(--look-y,0px))}
.eyelid{position:absolute;inset:0;background:var(--ink);border-radius:inherit;transform:scaleY(0);transform-origin:top}
.mouth-wrap{display:grid;place-items:center;width:100%;margin-top:clamp(18px,4vh,30px)}
.mouth-svg{width:clamp(92px,18vw,150px);overflow:visible;filter:drop-shadow(0 0 10px #78effb50)}
.mouth-svg *{fill:none;stroke:var(--cyan);stroke-linecap:round;stroke-linejoin:round;stroke-width:8}
.mouth-talk,.mouth-happy,.mouth-neutral{display:none}
.thoughts{position:absolute;right:7%;top:7%;display:flex;gap:8px;opacity:0;transition:opacity .25s ease}
.thoughts i{display:block;width:10px;height:10px;border-radius:50%;background:var(--cyan-soft);box-shadow:0 0 12px #53eaff6e}
.thoughts i:nth-child(2){width:8px;height:8px;transform:translateY(-9px)}
.thoughts i:nth-child(3){width:6px;height:6px;transform:translateY(-16px)}

.app[data-state="idle"] .mouth-smile{display:block}
.app[data-state="greeting"] .mouth-happy{display:block}
.app[data-state="speaking"] .mouth-talk{display:block;animation:talkPulse .18s alternate infinite}
.app[data-state="thinking"] .mouth-neutral{display:block}
.app[data-state="thinking"] .thoughts{opacity:1}
.app[data-state="sleep"] .eye{transform:scaleY(.12)}
.app[data-state="sleep"] .mouth-neutral{display:block}
.app[data-state="sleep"] .mouth-smile{display:none}

.debug-actions{position:fixed;left:50%;bottom:max(14px,env(safe-area-inset-bottom));transform:translateX(-50%);display:flex;gap:10px;padding:10px 12px;border:1px solid rgba(120,239,251,.15);background:rgba(7,12,20,.55);backdrop-filter:blur(8px);border-radius:18px;z-index:3}
.debug-actions button{border:none;border-radius:12px;padding:10px 14px;background:#12253a;color:#dff9ff}

@keyframes float{0%,100%{transform:translateY(0)}50%{transform:translateY(-7px)}}
@keyframes breathe{0%,100%{transform:scale(1);opacity:.10}50%{transform:scale(1.06);opacity:.16}}
@keyframes blink{0%,46%,48%,100%{transform:translate(var(--look-x,0px),var(--look-y,0px)) scaleY(1)}47%{transform:translate(var(--look-x,0px),var(--look-y,0px)) scaleY(.06)}}
@keyframes talkPulse{from{transform:scale(1,.90)}to{transform:scale(.92,1.12)}}

@media (max-width:640px){
  .face{width:min(74vw,400px)}
  .debug-actions{scale:.9}
}