*{box-sizing:border-box;-webkit-tap-highlight-color:transparent}html,body{margin:0;background:#f7f3e8;color:#344b3b;font-family:system-ui,-apple-system,sans-serif}body{overflow:hidden}button,select{font:inherit;touch-action:manipulation}button{cursor:pointer}button:disabled{cursor:default}#home{height:100vh;height:100svh;min-height:220px;max-width:520px;margin:auto;display:grid;grid-template-rows:35px minmax(95px,1fr) 64px 43px 23px;padding:8px 15px 4px;text-align:center;overflow:hidden}header{display:flex;align-items:center;justify-content:space-between}header button{width:42px;height:32px;border:0;background:transparent;font-size:25px;color:#6b786d;border-radius:12px}.wordmark{font-size:16px;font-weight:750;letter-spacing:2px;display:flex;align-items:center;gap:7px}.wordmark>i{width:8px;height:8px;background:#9db581;border-radius:50%}.friend-space{display:grid;place-items:center;min-height:0}#friend{height:100%;max-height:225px;aspect-ratio:1;width:auto;max-width:80vw;position:relative;border:0;background:transparent;padding:0;outline-offset:4px}.halo{position:absolute;inset:4%;border:1px solid #dce5cf;border-radius:50%;background:#eaf0dd}.bean{position:absolute;inset:15% 12% 10%;background:#b6ce8d;border-radius:46% 48% 44% 45%;box-shadow:inset -7px -8px 0 #a8c27d,0 9px 0 #dbe4c7;transform:rotate(-5deg)}.sprout{position:absolute;top:-15%;left:49%;width:5%;height:20%;background:#718e51;border-radius:6px;transform:rotate(13deg)}.sprout i{position:absolute;width:230%;height:50%;background:#8eae67;top:-5%;border-radius:80% 0 80% 0}.sprout i:first-child{left:-180%;transform:rotate(60deg)}.sprout i:last-child{left:40%;transform:rotate(-12deg)}.eyes{position:absolute;left:22%;right:22%;top:35%;display:flex;justify-content:space-between}.eyes i{width:13%;height:17px;max-height:4vw;background:#344b3b;border-radius:50%}.cheeks{position:absolute;left:12%;right:12%;top:52%;display:flex;justify-content:space-between}.cheeks i{width:16%;height:9px;background:#e9b59d;border-radius:50%;opacity:.8}.mouth{position:absolute;top:51%;left:43%;width:17%;height:13%;border:3px solid #344b3b;border-top:0;border-radius:0 0 20px 20px;transform:rotate(4deg)}.caption h1{font-size:22px;line-height:1.2;margin:4px 0 5px;font-weight:750}.caption p{font-size:12px;margin:0;color:#75816f}#rest{border:1px solid #d7deca;border-radius:18px;background:#eeefdf;color:#53644c;max-width:230px;width:100%;margin:3px auto;font-size:15px}#rest:disabled{opacity:.45}footer{font-size:10px;color:#818975;display:flex;align-items:center;justify-content:center;gap:5px}#dot{width:5px;height:5px;background:#a6af97;border-radius:50%}[data-state=listening] .halo{animation:breathe 3s ease-in-out infinite}[data-state=connecting] .halo,[data-state=reconnecting] .halo{animation:breathe 1.2s ease-in-out infinite}[data-state=talking] .bean{background:#c5dba2}[data-state=talking] .mouth{animation:chat .65s ease-in-out infinite alternate}[data-state=resting] .eyes i,[data-state=idle] .eyes i{height:4px;border-radius:8px;margin-top:7px}[data-state=offline] .bean,[data-state=error] .bean{background:#c9cdbb;box-shadow:inset -7px -8px 0 #bcc3ac,0 9px 0 #e0e3d5}[data-state=listening] #dot,[data-state=talking] #dot,[data-state=resting] #dot{background:#7f9c61}[data-state=reconnecting] #dot,[data-state=offline] #dot{background:#c28d60}#panel{position:fixed;inset:0;background:#f7f3e8;overflow:auto;padding:13px 16px 24px;z-index:5}#panel[hidden]{display:none}#panel header{position:sticky;top:-13px;background:#f7f3e8;padding-bottom:5px}h2{font-size:18px;margin:0}.note{font-size:12px;line-height:1.65;color:#6d7a66}#status,#wakeStatus{font-size:13px;line-height:1.5;color:#3c6037}#error{font-size:12px;line-height:1.5;color:#9c4b38;overflow-wrap:anywhere}.actions{display:grid;grid-template-columns:1fr 1fr;gap:7px}.actions button,.setting{min-height:42px;border:1px solid #d3dcc6;background:#e8eddd;color:#344b3b;border-radius:12px;font-size:13px}.actions button:disabled{opacity:.4}.actions #allOff{background:#f0e4d9}.setting{display:flex;align-items:center;justify-content:space-between;padding:8px 12px;margin-top:12px}.setting select{background:#f7f3e8;border:0;color:#344b3b}details{font-size:12px;border-top:1px solid #d9dfcd;padding-top:12px}summary{min-height:32px}#metrics{font-size:11px;white-space:pre-wrap}#transcript p{font-size:12px;line-height:1.5;overflow-wrap:anywhere}#transcript b{display:block;font-size:10px;color:#839078}audio{width:100%;height:35px}@keyframes breathe{50%{transform:scale(.94);opacity:.6}}@keyframes chat{to{height:7%;width:12%;left:45%}}@media(prefers-reduced-motion:reduce){*{animation:none!important}}@media(max-height:280px){#home{grid-template-rows:28px minmax(75px,1fr) 48px 35px 19px;padding-top:3px}.caption h1{font-size:18px}.caption p{font-size:11px}.eyes i{height:11px}}
/* Quiet detail: movement stays on compositor transforms and opacity. */
html,body{background:radial-gradient(ellipse at 14% 13%,#fffaf0 0,transparent 48%),radial-gradient(ellipse at 91% 85%,#e8edda 0,transparent 44%),#f7f3e8}.wordmark{color:#526744}.friend-space{position:relative}.friend-space::before,.friend-space::after{content:'✦';position:absolute;color:#c6d2b0;font-size:13px;left:13%;top:22%;pointer-events:none}.friend-space::after{font-size:9px;left:auto;right:15%;top:60%;color:#decbb0}.halo{border:1px solid #dce5cf;background:radial-gradient(circle at 40% 30%,#f4f6e8,#e7eed7);box-shadow:0 0 0 8px #ecf0df55}.bean{background:radial-gradient(ellipse at 31% 22%,#d7e7b7 0,#b7d08c 55%,#a5be79 100%);box-shadow:inset -5px -7px 0 #9db97370,inset 2px 3px 0 #e2efc7bb,0 7px 0 #d4dfbe90}.bean::before,.bean::after{content:'';position:absolute;width:15%;height:22%;background:#b1c986;top:57%;border-radius:70%;z-index:-1}.bean::before{left:-6%;transform:rotate(30deg)}.bean::after{right:-6%;transform:rotate(-30deg)}.eyes i{position:relative;box-shadow:inset 1px 1px 0 #233c2f}.eyes i::after{content:'';position:absolute;width:30%;height:28%;left:20%;top:14%;border-radius:50%;background:#f6fae8;opacity:.85}.cheeks i{background:#e1aa91;opacity:.6}.caption h1{letter-spacing:1px}.caption p{letter-spacing:.2px}#rest{box-shadow:0 2px 0 #d8dfc999;background:linear-gradient(#f2f3e7,#e9eddb)}#rest:active{transform:translateY(2px);box-shadow:none}#friend:active .bean{transform:rotate(-3deg) scale(.97)}[data-state=listening] .bean{animation:sway 4s ease-in-out infinite}[data-state=talking] .bean{background:radial-gradient(ellipse at 31% 22%,#e0edc4 0,#bed599 55%,#adc780 100%)}[data-state=resting] .eyes i::after,[data-state=idle] .eyes i::after{opacity:0}[data-state=resting] .mouth,[data-state=idle] .mouth{height:8%;width:12%;left:46%;border-width:2px}[data-state=connecting] .eyes,[data-state=reconnecting] .eyes{transform:translateX(4%)}[data-state=offline] .bean,[data-state=error] .bean{background:radial-gradient(ellipse at 31% 22%,#e2e5d4,#c2cab2);box-shadow:inset -5px -7px 0 #aebc9c55,0 7px 0 #dce2cf}@keyframes sway{50%{transform:rotate(-2deg) translateY(-2px)}}@media(prefers-reduced-motion:reduce){.bean,.halo,.mouth{animation:none!important}}