/* Miray's animated guide and installable phone layout. */
body{-webkit-text-size-adjust:100%}
button{touch-action:manipulation}
.hero-buttons{display:flex;gap:10px;flex-wrap:wrap;position:relative;z-index:4}
.hero-buttons .btn{white-space:nowrap}
.hero-person{animation:miray-idle 3.2s ease-in-out infinite;transform-origin:50% 92%}
.hero-person.is-speaking,.inline-miray.is-speaking,.guide-avatar img.is-speaking{animation:miray-talk .28s ease-in-out infinite alternate}
.hero-person.is-celebrating,.inline-miray.is-celebrating,.guide-avatar img.is-celebrating,.result-miray.is-celebrating{animation:miray-cheer .65s ease-in-out infinite alternate}
.hero-bubble{position:absolute;z-index:5;right:26%;top:23px;max-width:186px;padding:12px 16px;border:2px solid #fff7da;border-radius:19px 19px 7px 19px;background:#fff;color:#6d55ba;font-size:12px;font-weight:900;line-height:1.35;box-shadow:0 8px 18px #33236e30;opacity:0;transform:translateY(12px) scale(.94);pointer-events:none;transition:.22s}
.hero-bubble.bubble-active{opacity:1;transform:translateY(0) scale(1)}
.hero-bubble::after{content:"";position:absolute;border:8px solid transparent;border-top-color:#fff;right:15px;bottom:-15px}
.guide-strip{margin:24px auto 0;max-width:700px;display:flex;align-items:center;gap:15px;position:relative;min-height:100px;background:linear-gradient(100deg,#f1eaff,#fef3ff);border:1px solid #e9ddfa;border-radius:21px;padding:15px 17px 15px 98px;overflow:visible}
.guide-avatar{position:absolute;bottom:0;left:9px;display:grid;place-items:end center;overflow:visible;width:81px;height:115px;padding:0;border:0;background:transparent;filter:drop-shadow(0 5px 4px #5e39973b)}
.guide-avatar img{width:100%;height:100%;object-fit:contain;object-position:bottom;animation:miray-idle 3.5s ease-in-out infinite;transform-origin:50% 92%}
.guide-message{min-width:0;flex:1}
.guide-label{font-size:10px;font-weight:900;letter-spacing:1.2px;color:#ab84d8}
.guide-message [data-miray-bubble]{font-size:14px;line-height:1.35;font-weight:900;color:#6647b4;margin-top:6px;transition:color .3s}
.guide-message .bubble-active{color:#e56e90}
.guide-button{box-shadow:none;flex:0 0 auto}
.install-card{display:flex;align-items:center;gap:14px;margin-top:18px;border:1px solid #dceafe;background:linear-gradient(110deg,#eaf6ff,#f5f0ff);border-radius:21px;padding:13px 17px;box-shadow:0 8px 22px #8598c717}
.install-symbol{display:grid;place-items:center;font-size:32px;width:52px;height:52px;border-radius:16px;background:#fff}
.install-card>div{flex:1;min-width:0}.install-card b{font-size:15px;color:#5e50a0}
.install-card p{font-size:12px;color:#827c9e;margin:4px 0 0}
.install-card .btn{white-space:nowrap;box-shadow:none}
.install-dialog{max-height:calc(100dvh - 40px);overflow-y:auto}
.install-steps{display:grid;gap:12px;margin:19px 0}
.install-step{display:flex;align-items:start;gap:13px;border:1px solid #e9e2f6;background:#faf8ff;border-radius:17px;padding:15px}
.install-step>span{font-size:25px}.install-step b{color:#6652a6;font-size:14px}
.install-step p{margin:7px 0 0;font-size:13px}
.install-notice{background:#fff3d7;padding:12px;border-radius:12px}
.install-dialog .btn{width:100%;margin-top:8px}
.result-miray{height:245px;width:245px;object-fit:contain;margin:-12px auto 18px;animation:miray-cheer .85s ease-in-out infinite alternate;transform-origin:50% 90%}
@keyframes miray-idle{0%,100%{transform:translateY(0) rotate(-1deg)}50%{transform:translateY(-7px) rotate(1deg)}}
@keyframes miray-talk{from{transform:translateY(0) rotate(-1deg) scale(1)}to{transform:translateY(-5px) rotate(1.2deg) scale(1.025)}}
@keyframes miray-cheer{from{transform:translateY(2px) rotate(-3deg) scale(.99)}to{transform:translateY(-16px) rotate(4deg) scale(1.04)}}
@media(max-width:880px){
  .guide-strip{max-width:600px}
  .install-card{margin-top:14px}
}
@media(max-width:570px){
  .hero{min-height:415px}
  .hero-copy{width:100%;padding:25px 22px 205px}
  .hero h2{font-size:29px;max-width:340px;margin:14px 0 8px}
  .hero p{max-width:330px;font-size:12px}
  .hero-person{height:54%;width:57%;right:-10px;bottom:-22px}
  .hero-buttons{position:absolute;left:22px;bottom:19px;display:flex;flex-direction:column;align-items:stretch;width:170px;gap:8px}
  .hero-buttons .btn{min-height:39px;padding:9px 10px;font-size:12px}
  .hero-bubble{top:auto;right:6px;bottom:172px;max-width:150px;font-size:11px;padding:9px 11px}
  .install-card{gap:9px;padding:12px;flex-wrap:wrap}
  .install-symbol{width:44px;height:44px;font-size:27px}
  .install-card b{font-size:13px}.install-card p{font-size:11px}
  .install-card .btn{margin-left:auto;font-size:11px;min-height:39px}
  .guide-strip{min-height:94px;margin:24px 0 2px;padding:13px 11px 13px 77px;gap:8px}
  .guide-avatar{height:98px;width:70px;left:3px}
  .guide-label{font-size:9px}
  .guide-message [data-miray-bubble]{font-size:12px}
  .guide-button{display:none}
  .result-miray{height:190px;width:190px}
  .install-step{padding:12px}
}
@media(max-width:350px){
  .hero{min-height:450px}
  .hero h2{font-size:26px}
  .hero-copy{padding:22px 17px 205px}
  .hero-buttons{left:17px;width:160px}
  .hero-person{width:60%}
  .hero-bubble{right:2px;bottom:165px;max-width:128px}
}
@media(prefers-reduced-motion:reduce){
  .hero-person,.guide-avatar img,.result-miray,.is-speaking,.is-celebrating{animation:none!important}
}