:root{--bg:#231b4d;--outline:#1b1233;--mic:#5fe1c1;--senku:#a98bff;--start:#36d67e;--end:#ff5470}html,body{background:var(--bg);overscroll-behavior:none;-webkit-tap-highlight-color:transparent;-webkit-user-select:none;user-select:none;height:100%;margin:0;overflow:hidden}#app{background:var(--bg);grid-template-rows:14% 1fr 16%;display:grid;position:fixed;inset:0}#band{position:relative}#band>*{opacity:0;transition:opacity .12s;position:absolute;top:59.4%;left:50%;transform:translate(-50%,-50%)}#app[data-band=mic] .wave,#app[data-band=voice] .wave,#app[data-band=dots] .dots,#app[data-band=pause] .pause,#app[data-band=offline] .linkoff{opacity:1}.wave{align-items:center;gap:7px;height:64px;display:flex}.wave span{background:var(--senku);border-radius:4px;width:8px;height:64px;transform:scaleY(.12)}#app[data-band=mic] .wave span{background:var(--mic)}.dots{gap:14px;display:flex}.dots span{background:var(--senku);border-radius:50%;width:16px;height:16px;animation:1s ease-in-out infinite dot}.dots span:nth-child(2){animation-delay:.15s}.dots span:nth-child(3){animation-delay:.3s}@keyframes dot{0%,to{opacity:.4;transform:translateY(0)}40%{opacity:1;transform:translateY(-12px)}}.pause{gap:12px;display:flex}.pause span{background:var(--senku);border-radius:4px;width:11px;height:38px}#app[data-band=pause] .pause{animation:3s ease-in-out infinite breathe}#app[data-band=pause] #band{cursor:pointer;touch-action:manipulation}@keyframes breathe{0%,to{opacity:.45}50%{opacity:.25}}.linkoff{width:44px;height:44px}#app[data-band=offline] .linkoff{opacity:.45}#dino{box-sizing:border-box;min-height:0;padding:7px 12px 0}#rig{transform-origin:50% 100%;width:100%;height:100%;transform:scaleY(var(--stretch,1));transition:transform .2s ease-out,opacity .3s ease-out}#rig svg{transform-origin:50% 100%;width:100%;height:100%;display:block}#rig[data-pose=listen],#rig[data-pose=paused]{transform:translateY(-1%) scale(1.03) scaleY(var(--stretch,1))}#rig[data-pose=listen] svg{animation:2.5s ease-in-out infinite alternate sway}#rig[data-pose=listen][data-from=talk]{transition-duration:.1s}#rig[data-pose=greet] svg{animation:.25s ease-out pop}#rig[data-pose=think] svg{animation:.3s ease-out dip}#rig[data-pose=offline]{opacity:.35}@keyframes sway{0%{transform:rotate(-2deg)}to{transform:rotate(2deg)}}@keyframes pop{50%{transform:scale(1.06)}}@keyframes dip{50%{transform:translateY(1%)}}#controls{padding-bottom:calc(28px + env(safe-area-inset-bottom,0px));box-sizing:border-box;justify-content:center;align-items:center;display:flex}.btn-wrap{width:88px;height:88px;position:relative}#btn{background:var(--start);cursor:pointer;touch-action:manipulation;border:none;border-radius:50%;justify-content:center;align-items:center;width:88px;height:88px;padding:0;transition:transform .1s;display:flex;position:relative;box-shadow:0 0 0 4px #ffffff24}#btn:active{transform:scale(.94)}#btn svg{width:36px;height:36px;display:none}#app[data-button=start] .g-start,#app[data-button=reload] .g-reload{display:block}#app[data-button=end] #btn{background:var(--end)}#app[data-button=end] .g-end{width:30px;height:30px;display:block}.halo{background:var(--start);opacity:0;border-radius:50%;position:absolute;inset:0}#app[data-button=start] .halo{animation:2.4s ease-out infinite halo}@keyframes halo{0%{opacity:.45;transform:scale(1)}to{opacity:0;transform:scale(1.6)}}