#wonder-ui .app{min-height:calc(100dvh - 60px)}
#wonder-ui .main{overflow:clip}
#wonder-ui .hero{padding:70px 0 10px}
#wonder-ui .hero>.scene,#wonder-ui .work-scene,#wonder-ui .pet-card .scene{display:none}
#wonder-ui .voice-stage .scene{display:none}
#wonder-ui .screen{padding-bottom:28px;min-height:360px}
#wonder-ui .composer-wrap{position:relative;margin-top:100px;isolation:isolate}
#wonder-ui .composer{position:relative;z-index:5;box-shadow:0 9px 35px #583a7212;background:var(--panel)}
#wonder-ui .pet-dock{position:absolute;right:35px;top:-168px;width:200px;height:220px;z-index:3;transition:width .35s,height .35s,top .35s,right .35s;pointer-events:none}
#wonder-ui .dock-aura{position:absolute;inset:15px -20px 10px;background:radial-gradient(ellipse,color-mix(in srgb,var(--glow) 65%,transparent),transparent 70%);filter:blur(8px)}
#wonder-ui #pet-canvas{position:absolute;inset:0}
#wonder-ui #pet-canvas canvas{display:block;width:100%;height:100%}
#wonder-ui #pet-interact{position:absolute;inset:15px 15px 46px;pointer-events:auto;background:transparent;border-radius:50%;padding:0;z-index:2}
#wonder-ui #pet-interact:focus-visible{outline:2px dashed var(--sub);outline-offset:-10px}
#wonder-ui #pet-loading{position:absolute;bottom:65px;left:5px;right:5px;text-align:center;font-size:11px;color:var(--sub)}
#wonder-ui .dock-controls{position:relative;display:flex;gap:12px;align-items:center;min-height:36px;margin:-40px 0 4px;z-index:6;padding-right:180px}
#wonder-ui .dock-controls button{font-size:11px;color:var(--sub);padding:6px 8px;white-space:nowrap}
#wonder-ui #pet-state-label{font-size:11px;color:var(--sub)}
#wonder-ui #pet-menu{position:absolute;right:24px;bottom:calc(100% + 80px);z-index:20;width:280px;background:var(--panel);border:1px solid var(--line);border-radius:20px;box-shadow:0 18px 60px #31243a25;padding:16px;text-align:left}
#wonder-ui .pet-menu-head{display:flex;align-items:center;justify-content:space-between;margin-bottom:8px}
#wonder-ui .pet-menu-head button{font-size:20px;padding:0 9px}
#wonder-ui .pet-field{font-size:12px;display:grid;gap:6px;color:var(--sub)}
#wonder-ui #dock-character{width:100%;padding:9px 10px;color:var(--ink);background:var(--paper);border:1px solid var(--line);border-radius:10px;font:inherit;margin-top:6px}
#wonder-ui .pet-actions{display:flex;flex-wrap:wrap;gap:4px;margin:12px 0}
#wonder-ui .pet-actions button{font-size:11px;background:var(--wash);padding:8px 10px}
#wonder-ui .pet-check{display:flex;gap:8px;align-items:center;font-size:12px;padding:8px 0}
#wonder-ui #pet-menu p{font-size:11px;color:var(--sub);margin:10px 0 0}
#wonder-ui .friend-photo{display:block;width:100%;height:200px;object-fit:cover;object-position:center 42%;border-radius:15px;margin-bottom:16px}
#wonder-ui .is-typing .pet-dock{width:138px;height:160px;top:-104px;right:35px}
#wonder-ui .is-typing .dock-controls{padding-right:125px}
#wonder-ui .pet-hidden .pet-dock{visibility:hidden}
#wonder-ui .pet-hidden .composer-wrap{margin-top:35px}
#wonder-ui .pet-hidden .dock-controls{padding-right:0}
#wonder-ui .pet-paused .pet-dock{transition:none}
#wonder-ui .stage-working .dock-aura{opacity:1}
#wonder-ui .stage-working .composer{border-color:var(--pet-low)}
@media(max-width:650px){body{padding:8px}#wonder-ui .app{min-height:calc(100dvh - 90px)}#wonder-ui .hero{padding:40px 0 0}#wonder-ui .screen{min-height:290px}#wonder-ui h1{font-size:32px}#wonder-ui .composer-wrap{margin-top:125px}#wonder-ui .pet-dock{right:16px;top:-147px;width:172px;height:195px}#wonder-ui .dock-controls{padding-right:145px;margin-top:-37px;min-height:33px;gap:0}#wonder-ui #pet-state-label{display:none}#wonder-ui .is-typing .pet-dock{right:15px;top:-91px;width:121px;height:145px}#wonder-ui .is-typing .dock-controls{padding-right:105px}#wonder-ui .is-typing .composer-wrap{margin-top:72px}#wonder-ui #pet-menu{right:14px;bottom:calc(100% + 65px);width:min(280px,calc(100% - 28px))}#wonder-ui .friend-photo{height:220px}}
@media(prefers-reduced-motion:reduce){#wonder-ui .pet-dock,#wonder-ui .composer{transition:none}}