@import url('https://fonts.googleapis.com/css2?family=Manrope:wght@400;500;600;700;800&display=swap');
:root{color-scheme:dark;font-family:Manrope,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;color:#f1f1ef;background:#15191b;font-synthesis:none;-webkit-font-smoothing:antialiased}
*{box-sizing:border-box}body{margin:0}button,a,input{-webkit-tap-highlight-color:transparent}button{font:inherit;color:inherit;cursor:pointer}button:focus-visible,a:focus-visible,input:focus-visible{outline:2px solid #e3e9e9;outline-offset:6px}button{border:0}button:disabled{cursor:wait}a{color:inherit;text-decoration:none}[hidden]{display:none!important}
.atmosphere{position:fixed;inset:0;overflow:hidden;pointer-events:none;background:radial-gradient(ellipse at 50% 46%,#27343b33 0,transparent 54%),linear-gradient(116deg,#343a3e 0%,#141719 26%,#1b2328 48%,#131617 74%,#353a3b 100%)}.atmosphere:after{content:"";position:absolute;inset:0;box-shadow:inset 0 0 100px 15px #c6cbca19;background:radial-gradient(ellipse at 0% 54%,#dbe4e22c,transparent 25%),radial-gradient(ellipse at 100% 2%,#c3c9c92c,transparent 25%)}.mist{position:absolute;width:80vw;height:100vh;filter:blur(55px);opacity:.32;will-change:transform;border-radius:50%}.mist-one{left:-36%;top:0;background:radial-gradient(ellipse,#b5c3c744,transparent 65%);animation:drift 24s ease-in-out infinite alternate}.mist-two{left:35%;top:5%;background:radial-gradient(ellipse,#84a7bb36,transparent 64%);animation:drift 31s ease-in-out infinite alternate-reverse}.mist-three{left:0;top:38%;background:radial-gradient(ellipse,#6e8f9c3b,transparent 65%);animation:drift 27s ease-in-out infinite alternate}.grain{position:absolute;inset:0;opacity:.045;background-image:url("data:image/svg+xml,%3Csvg viewBox='0 0 180 180' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.75' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Cpath fill='%23fff' filter='url(%23n)' opacity='.65' d='M0 0h180v180H0z'/%3E%3C/svg%3E")}
.app{position:relative;width:min(100%,720px);min-height:100svh;margin:auto;display:flex;flex-direction:column;padding:clamp(26px,5vh,56px) clamp(24px,5vw,48px) max(20px,env(safe-area-inset-bottom));isolation:isolate}.header{display:flex;align-items:center;justify-content:space-between;z-index:5;height:32px}.wordmark{font-size:clamp(17px,3.3vw,23px);letter-spacing:.16em;font-weight:800;display:flex;align-items:center}.wordmark span{font-weight:400;opacity:.72}.wordmark i{height:4px;width:4px;margin-left:8px;border-radius:50%;background:#d6e2dc;box-shadow:0 0 9px #c0e3cd66}.menu-button{height:44px;width:44px;margin-right:-8px;background:none;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:7px}.menu-button span{width:24px;height:1.5px;background:#e1e4e3;border-radius:4px;transition:transform .3s}.menu-button[aria-expanded=true] span:first-child{transform:translateY(4.25px) rotate(45deg)}.menu-button[aria-expanded=true] span:last-child{transform:translateY(-4.25px) rotate(-45deg)}.glass{background:#242a2cf0;border:1px solid #ffffff26;box-shadow:0 16px 60px #0005;backdrop-filter:blur(24px)}.settings{position:absolute;top:100px;right:clamp(24px,5vw,48px);left:clamp(24px,5vw,48px);padding:22px;border-radius:22px;z-index:10}.settings-title{font-size:12px;letter-spacing:.12em;color:#afb8bc;text-transform:uppercase;margin-bottom:15px}.mood-options{display:flex;gap:6px}.mood-options button{flex:1;padding:12px 6px;font-size:12px;border-radius:12px;background:#ffffff06;color:#a5adaf;transition:background .2s}.mood-options button[aria-pressed=true]{background:#ffffff19;color:#fff}.auto-option{display:flex;align-items:center;justify-content:space-between;font-size:12px;color:#bec5c7;margin-top:20px;cursor:pointer}.auto-option input{accent-color:#b5ccbf;width:17px;height:17px}
.stage{position:relative;flex:1;display:flex;flex-direction:column;align-items:center;justify-content:center;min-height:320px;padding-top:5vh}.halo{position:absolute;width:75%;height:45%;border-radius:50%;background:radial-gradient(ellipse,#a9c3ce0b,transparent 68%);filter:blur(18px)}.creature{position:relative;width:clamp(260px,75vw,410px);aspect-ratio:1;background:none;padding:0;z-index:1;touch-action:manipulation}.creature-float{position:relative;width:100%;height:100%;animation:float 3.3s ease-in-out infinite;transform-origin:50% 75%;filter:drop-shadow(0 15px 25px #0003)}.pose{position:absolute;inset:0;width:100%;height:100%;object-fit:contain;opacity:0;transition:opacity .42s ease,transform .55s ease;pointer-events:none;user-select:none}.pose-typing{animation:type .65s ease-in-out infinite}.app[data-state=typing] .pose-typing,.app[data-state=thinking] .pose-thinking,.app[data-state=joy] .pose-joy{opacity:1}.app[data-state=thinking] .creature-float{animation:ponder 4.2s ease-in-out infinite}.app[data-state=joy] .creature-float{animation:celebrate 1.05s ease-in-out infinite}.state-caption{display:flex;align-items:center;gap:8px;margin-top:0;font-size:10px;letter-spacing:.08em;color:#adb7bb;opacity:.75;min-height:20px}.status-dot,.live-dot{height:4px;width:4px;border-radius:50%;background:#bfcbc5;box-shadow:0 0 9px #c3e2cd55}.status-dot{animation:pulse 3s ease-in-out infinite}.sparkles{position:absolute;inset:20% 10%;pointer-events:none;opacity:0;transition:opacity .4s}.sparkles i{position:absolute;color:#e2eae5;font-style:normal;animation:twinkle 1.4s ease-in-out infinite}.sparkles i:nth-child(1){left:20%;top:30%;font-size:23px}.sparkles i:nth-child(2){right:20%;top:17%;font-size:12px;animation-delay:.5s}.sparkles i:nth-child(3){right:12%;top:63%;font-size:27px;animation-delay:.8s}.sparkles i:nth-child(4){left:15%;top:69%;font-size:11px;animation-delay:1.2s}.app[data-state=joy] .sparkles{opacity:1}
.bottom-controls{position:relative;z-index:3;display:flex;flex-direction:column;align-items:center;padding-top:24px}.dictation-area{position:relative;display:flex;flex-direction:column;align-items:center;margin-bottom:30px}.mic-button{position:relative;display:grid;place-items:center;width:52px;height:52px;border-radius:50%;border:1px solid #e0e5e333;background:linear-gradient(140deg,#ffffff0d,#ffffff03);box-shadow:inset 0 1px 1px #ffffff0c,0 4px 18px #0002;transition:background .25s,border-color .25s,box-shadow .25s,transform .25s}.mic-button:hover{background:#ffffff16;border-color:#ffffff70;transform:translateY(-2px)}.mic-icon{width:20px;height:20px;stroke:#d2dbda;stroke-width:1.4;stroke-linecap:round;stroke-linejoin:round}.mic-label{font-size:10px;letter-spacing:.035em;color:#8e9b9f;margin-top:10px}.mic-button[aria-pressed=true]{border-color:#cfdfd1;box-shadow:0 0 0 7px #d9e9dd09,0 0 25px #cbdfce18;animation:listen 2s ease-in-out infinite}.mic-button[aria-pressed=true] .mic-icon{display:none}.recording-bars{display:none;align-items:center;gap:3px;height:22px}.recording-bars i{width:2px;height:8px;background:#e2ebe4;border-radius:3px;animation:wave .8s ease-in-out infinite alternate}.recording-bars i:nth-child(2){animation-delay:.25s}.recording-bars i:nth-child(3){animation-delay:.45s}.recording-bars i:nth-child(4){animation-delay:.15s}.mic-button[aria-pressed=true] .recording-bars{display:flex}.earn-button{width:100%;height:clamp(62px,8.5vh,82px);border:1px solid #e8eae9bc;box-shadow:inset 0 0 3px 1px #ffffff25,0 0 18px #ffffff0b;background:linear-gradient(150deg,#ffffff12,#ffffff03 50%,#ffffff0b);border-radius:100px;position:relative;display:flex;align-items:center;justify-content:center;gap:12px;overflow:hidden;transition:background .3s,box-shadow .3s,transform .3s}.earn-button:before{content:"";position:absolute;width:55%;height:200%;background:linear-gradient(90deg,transparent,#fff2,transparent);transform:translateX(-250%) skewX(-25deg)}.earn-button:hover:before{animation:shine 1.2s ease}.earn-button:hover{background:#ffffff12;box-shadow:0 0 24px #ffffff17}.earn-button:active{transform:scale(.985)}.earn-button span{font-size:24px;font-weight:400;letter-spacing:-.04em}.earn-button svg{width:18px;height:18px;stroke:#d1d9d7;stroke-width:1.2;stroke-linecap:round;stroke-linejoin:round;position:absolute;right:27px;opacity:.55}.footer-note{display:flex;align-items:center;gap:7px;color:#788589;font-size:8px;letter-spacing:.16em;margin-top:21px;margin-bottom:7px}.live-dot{width:3px;height:3px;opacity:.65}.transcript{position:absolute;bottom:100%;width:min(86vw,470px);padding:18px 20px;border-radius:20px;margin-bottom:18px;max-height:230px;overflow-y:auto}.transcript-heading{display:flex;align-items:center;justify-content:space-between;font-size:10px;color:#a6b4b8;letter-spacing:.04em}.transcript-heading button{background:none;font-size:22px;line-height:22px;color:#a8b2b5;min-width:32px;min-height:32px}.transcript p{font-size:14px;line-height:1.65;margin:10px 0;color:#e3e8e7;white-space:pre-wrap;overflow-wrap:anywhere}.transcript #copy-transcript{background:#ffffff0c;border:1px solid #ffffff1c;padding:8px 12px;border-radius:9px;font-size:10px;color:#c5d0d2;margin-top:6px}.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}
@keyframes float{0%,100%{transform:translateY(5px) rotate(-.5deg)}50%{transform:translateY(-7px) rotate(.5deg)}}@keyframes type{0%,100%{transform:rotate(-.15deg) translateY(0)}30%{transform:rotate(.15deg) translateY(.8px)}65%{transform:rotate(-.1deg) translateY(-.5px)}}@keyframes ponder{0%,100%{transform:translateY(2px) rotate(-2deg)}50%{transform:translateY(-6px) rotate(1deg)}}@keyframes celebrate{0%,100%{transform:translateY(0) rotate(-2deg) scale(1)}40%{transform:translateY(-18px) rotate(3deg) scale(1.03)}65%{transform:translateY(-3px) rotate(-1deg)}}@keyframes drift{0%{transform:translate(-5%,0) rotate(-15deg)}100%{transform:translate(18%,-12%) rotate(15deg)}}@keyframes twinkle{0%,100%{opacity:.15;transform:translateY(8px) scale(.7)}50%{opacity:.8;transform:translateY(-5px) scale(1)}}@keyframes pulse{0%,100%{opacity:.4}50%{opacity:1}}@keyframes wave{from{height:5px}to{height:20px}}@keyframes listen{0%,100%{box-shadow:0 0 0 5px #d9e9dd06}50%{box-shadow:0 0 0 10px #d9e9dd0b,0 0 25px #cbdfce18}}@keyframes shine{to{transform:translateX(250%) skewX(-25deg)}}
html.reduced-motion *,html.reduced-motion *:before,html.reduced-motion *:after{animation:none!important;transition:none!important} @media(prefers-reduced-motion:reduce){*,*:before,*:after{animation:none!important;transition:none!important}}@media(min-width:800px){.app{max-width:640px}.stage{padding-top:4vh}.creature{width:min(43vh,410px)}.dictation-area{margin-bottom:28px}.bottom-controls{padding-top:12px}}@media(max-height:690px){.app{padding-top:22px}.stage{min-height:245px;padding-top:8px}.creature{width:240px}.dictation-area{margin-bottom:18px}.bottom-controls{padding-top:10px}.mic-button{width:45px;height:45px}.footer-note{margin-top:14px}.state-caption{font-size:9px}}

.pose.mesh-source{opacity:0!important;animation:none!important}