/* Bao the panda — copied from the app (ui/premium.css) */
:root { --font-d: "Segoe UI Variable Display", "Segoe UI", system-ui, -apple-system, Roboto, sans-serif; }
.bao { width: 100%; height: 100%; overflow: visible; display: block; cursor: pointer; stroke: none; fill: none; }
.bao .k { fill: #26242e; }
.bao .w { fill: #fdfcff; stroke: #dcd8e6; stroke-width: 1; }
.bao .belly { fill: #f3f0f9; }
.bao .pad, .bao .ear-in { fill: #4a4656; }
.bao .pad { fill: #f6a9c2; }
.bao .ew { fill: #fff; }
.bao .pupil { fill: #141219; }
.bao .hl { fill: #fff; }
.bao .nose-hl { fill: #6b6779; }
.bao .blush { fill: #ff9ab8; opacity: .5; transition: opacity .3s; }
.bao .b-shadow { fill: rgba(0, 0, 0, .35); }
.bao .eyes path, .bao .mouth path:not(.m-cav):not(.tongue), .bao .brows path { fill: none; stroke: #141219; stroke-width: 2.2; stroke-linecap: round; }
.bao .e-happy path, .bao .e-closed path { stroke: #fff; stroke-width: 2.6; }
.bao .m-cav { fill: #3a1e2c; }
.bao .tongue { fill: #ff7aa2; }
.bao .bam { fill: none; stroke: #7cc96d; stroke-width: 6.5; stroke-linecap: round; }
.bao .bam-n { fill: none; stroke: #4f9a44; stroke-width: 2; stroke-linecap: round; }
.bao .leaf { fill: #5fb653; }
.bao .lid { fill: url(#baoLid); stroke: #9aa3b5; stroke-width: 1; }
.bao .logo { fill: #ff9ec7; }
.bao .kbd { fill: #8f97a8; }
.bao .p-glow { fill: url(#baoGlow); mix-blend-mode: screen; }
.bao .gl { fill: rgba(110, 231, 255, .22); stroke: #d4dae6; stroke-width: 3.2; }
.bao .gl-h { stroke: #8b6b4f; stroke-width: 4.5; stroke-linecap: round; }
.bao .gl-s { fill: none; stroke: #fff; stroke-width: 1.6; stroke-linecap: round; opacity: .8; }
.bao .p-tear { fill: #7cc4ff; }
.bao .p-sweat { fill: #9bd7ff; }
.bao .p-hearts path { fill: #ff7aa2; }
.bao .p-zzz text { fill: #c4b5fd; font: 700 13px var(--font-d); }
.bao .p-zzz text:nth-child(2) { font-size: 16px; } .bao .p-zzz text:nth-child(3) { font-size: 19px; }
.bao .p-spark path { fill: #fde68a; }

/* parts that only show in some states */
.bao .p, .bao .e-happy, .bao .e-closed, .bao .brows, .bao .m-open, .bao .m-sad, .bao .m-munch { display: none; }
.bao .b-all, .bao .b-head, .bao .b-body, .bao .b-arm, .bao .paw, .bao .eye, .bao .pupil, .bao .p-glass, .bao .p-bamboo { transform-box: view-box; }
.bao .b-all { transform-origin: 80px 144px; }
.bao .b-head { transform-origin: 80px 90px; transition: transform .4s; }
.bao .b-body { transform-origin: 80px 140px; animation: breathe 3.2s ease-in-out infinite; }
.bao .b-arm-l { transform-origin: 54px 92px; transition: transform .35s; }
.bao .b-arm-r { transform-origin: 106px 92px; transition: transform .35s; }
.bao .e-open .eye { transform-origin: 80px 55px; animation: blink 4.6s infinite; }
.bao .pupil { transition: transform .3s; }
@keyframes breathe { 50% { transform: scale(1.012, 1.03); } }
@keyframes blink { 0%, 93%, 100% { transform: scaleY(1); } 95.5% { transform: scaleY(.1); } }

/* wave — hello! */
.bao.s-wave .b-arm-r { animation: wave 2.6s ease-in-out infinite; }
.bao.s-wave .p-spark { display: block; animation: twinkle 2.2s ease-in-out infinite; }
@keyframes wave { 0%, 40%, 100% { transform: rotate(0); } 50% { transform: rotate(-112deg); } 58% { transform: rotate(-92deg); } 66% { transform: rotate(-112deg); } 74% { transform: rotate(-92deg); } 85% { transform: rotate(-108deg); } }
@keyframes twinkle { 0%, 100% { opacity: .2; } 50% { opacity: 1; } }

/* excited — dragging a file over */
.bao.s-excited .b-all { animation: hop .45s ease-in-out infinite; }
.bao.s-excited .b-arm-l { transform: rotate(108deg); } .bao.s-excited .b-arm-r { transform: rotate(-108deg); }
.bao.s-excited .m-smile { display: none; } .bao.s-excited .m-open { display: block; }
.bao.s-excited .e-open .eye { animation: none; transform: scale(1.12); }
.bao.s-excited .blush { opacity: .85; }
@keyframes hop { 50% { transform: translateY(-9px) scaleY(1.02); } 85% { transform: translateY(0) scaleY(.96); } }

/* happy — a video just arrived */
.bao.s-happy .b-all { animation: hop .5s ease-in-out 3; }
.bao.s-happy .e-open { display: none; } .bao.s-happy .e-happy { display: block; }
.bao.s-happy .m-smile { display: none; } .bao.s-happy .m-open { display: block; }
.bao.s-happy .b-arm-l { transform: rotate(100deg); } .bao.s-happy .b-arm-r { transform: rotate(-100deg); }
.bao.s-happy .p-hearts, .bao.s-love .p-hearts { display: block; }
.bao .p-hearts path { transform-box: fill-box; transform-origin: center; animation: heart 2.2s ease-out infinite; }
.bao .p-hearts path:nth-child(2) { animation-delay: .5s; } .bao .p-hearts path:nth-child(3) { animation-delay: 1s; }
@keyframes heart { 0% { opacity: 0; transform: translateY(10px) scale(.4); } 25% { opacity: 1; transform: translateY(0) scale(1); } 100% { opacity: 0; transform: translateY(-22px) scale(.8); } }

/* think — looking at the frame */
.bao.s-think .b-head { transform: rotate(-7deg); }
.bao.s-think .p-glass { display: block; animation: scan 2.4s ease-in-out infinite; transform-origin: 112px 96px; }
.bao.s-think .b-arm-r { transform: rotate(-55deg); }
.bao.s-think .pupil { transform: translate(2px, -1px); }
.bao.s-think .brows { display: block; }
@keyframes scan { 0%, 100% { transform: rotate(0); } 50% { transform: rotate(-14deg) translateY(-2px); } }

/* munch — idle with a video loaded */
.bao.s-munch .p-bamboo { display: block; transform-origin: 104px 104px; animation: munchb 1.1s ease-in-out infinite; }
.bao.s-munch .b-arm-r { transform: rotate(-38deg); }
.bao.s-munch .m-smile { display: none; } .bao.s-munch .m-munch { display: block; }
.bao.s-munch .m-munch ellipse { transform-box: fill-box; transform-origin: center; animation: chew .55s ease-in-out infinite; }
.bao.s-munch .b-head { animation: nod 1.1s ease-in-out infinite; }
@keyframes munchb { 50% { transform: rotate(-4deg) translateY(-2px); } }
@keyframes chew { 50% { transform: scale(1.25, .45); } }
@keyframes nod { 50% { transform: rotate(1.5deg) translateY(1px); } }

/* work / setup — typing on the laptop while the video renders */
.bao.s-work .p-laptop, .bao.s-setup .p-laptop, .bao.s-work .p-glow, .bao.s-setup .p-glow { display: block; }
.bao.s-work .b-arm, .bao.s-setup .b-arm { display: none; }
.bao.s-work .pupil, .bao.s-setup .pupil { transform: translateY(1.8px); }
.bao.s-work .b-head { animation: type-head .5s ease-in-out infinite; }
.bao.s-work .paw-l { animation: tap .32s ease-in-out infinite; }
.bao.s-work .paw-r { animation: tap .32s ease-in-out .16s infinite; }
.bao.s-work .p-glow, .bao.s-setup .p-glow { animation: glow 1.6s ease-in-out infinite; }
.bao.s-setup .p-sweat { display: block; animation: sweat 1.4s ease-in infinite; }
.bao.s-setup .brows { display: block; }
.bao.s-setup .paw-l, .bao.s-setup .paw-r { animation: tap 1s ease-in-out infinite; }
.bao.s-setup .paw-r { animation-delay: .5s; }
@keyframes tap { 50% { transform: translateY(-3.5px); } }
@keyframes type-head { 50% { transform: translateY(1.2px) rotate(.8deg); } }
@keyframes glow { 0%, 100% { opacity: .55; } 40% { opacity: .9; } 70% { opacity: .65; } }
@keyframes sweat { 0% { opacity: 0; transform: translateY(-3px); } 30% { opacity: 1; } 100% { opacity: 0; transform: translateY(10px); } }

/* sleep — paused or idle for a while */
.bao.s-sleep .e-open { display: none; } .bao.s-sleep .e-closed { display: block; }
.bao.s-sleep .b-head { transform: rotate(8deg) translateY(2px); }
.bao.s-sleep .b-body { animation-duration: 4.4s; }
.bao.s-sleep .p-zzz { display: block; }
.bao.s-sleep .m-smile { display: none; } .bao.s-sleep .m-munch { display: block; }
.bao .p-zzz text { animation: zz 3s ease-in-out infinite; opacity: 0; }
.bao .p-zzz text:nth-child(2) { animation-delay: 1s; } .bao .p-zzz text:nth-child(3) { animation-delay: 2s; }
@keyframes zz { 0% { opacity: 0; transform: translate(0, 6px); } 30% { opacity: 1; } 100% { opacity: 0; transform: translate(6px, -8px); } }

/* party — render finished */
.bao.s-party .b-all { animation: hop .5s ease-in-out infinite; }
.bao.s-party .e-open { display: none; } .bao.s-party .e-happy { display: block; }
.bao.s-party .m-smile { display: none; } .bao.s-party .m-open { display: block; }
.bao.s-party .b-arm-l { animation: cheerl .5s ease-in-out infinite; } .bao.s-party .b-arm-r { animation: cheerr .5s ease-in-out infinite; }
.bao.s-party .p-confetti, .bao.s-party .p-spark { display: block; }
.bao.s-party .p-spark { animation: twinkle 1s ease-in-out infinite; }
.bao.s-party .blush { opacity: .9; }
.bao .p-confetti rect { transform-box: fill-box; transform-origin: center; animation: confetti 1.8s linear var(--d) infinite; }
@keyframes cheerl { 0%, 100% { transform: rotate(112deg); } 50% { transform: rotate(88deg); } }
@keyframes cheerr { 0%, 100% { transform: rotate(-112deg); } 50% { transform: rotate(-88deg); } }
@keyframes confetti { 0% { transform: translateY(0) rotate(0); opacity: 1; } 100% { transform: translateY(150px) rotate(var(--r)); opacity: 0; } }

/* sad — something went wrong / cancelled */
.bao.s-sad .b-head { transform: rotate(5deg) translateY(4px); }
.bao.s-sad .m-smile { display: none; } .bao.s-sad .m-sad { display: block; }
.bao.s-sad .pupil { transform: translateY(2px); }
.bao.s-sad .p-tear { display: block; animation: tear 1.8s ease-in infinite; }
.bao.s-sad .b-arm-l { transform: rotate(-8deg); } .bao.s-sad .b-arm-r { transform: rotate(8deg); }
.bao .p-tear { transform-box: fill-box; }
@keyframes tear { 0% { opacity: 0; transform: translateY(-2px); } 25% { opacity: 1; } 100% { opacity: 0; transform: translateY(16px); } }

/* love — thank you! */
.bao.s-love .e-open { display: none; } .bao.s-love .e-happy { display: block; }
.bao.s-love .blush { opacity: .95; }
.bao.s-love .b-all { animation: sway 2s ease-in-out infinite; }
.bao.s-love .b-arm-l { transform: rotate(-38deg); } .bao.s-love .b-arm-r { transform: rotate(38deg); }
@keyframes sway { 0%, 100% { transform: rotate(-3deg); } 50% { transform: rotate(3deg); } }

/* tickle — clicked */
.bao.tickle .b-all { animation: wiggle .16s ease-in-out 7 !important; }
.bao.tickle .e-open, .bao.tickle .e-closed { display: none !important; } .bao.tickle .e-happy { display: block !important; }
.bao.tickle .mouth { display: none !important; } .bao.tickle .m-open { display: block !important; }
.bao.tickle .blush { opacity: 1; }
@keyframes wiggle { 0%, 100% { transform: rotate(0); } 33% { transform: rotate(-6deg); } 66% { transform: rotate(6deg); } }

@media (prefers-reduced-motion: reduce) { .bao *, .bao { animation-duration: 0s !important; animation-iteration-count: 1 !important; } }