.social-demos{text-align:center}.social-demo-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:24px;margin-top:36px}.social-demo{text-align:left;min-width:0}.social-demo h3{font-size:21px;margin:22px 0 10px}.social-demo p{font-size:16px;line-height:1.55;margin:0 0 12px}.social-demo .demo-hint,.demo-disclosure{font-size:13px;color:#70786c}.social-stage{height:230px;background:#eeeede;border:1px solid #dedfce;border-radius:28px;position:relative;display:flex;align-items:center;justify-content:center;overflow:hidden}.demo-mascot{display:block;width:112px;height:112px;background:url('/status-mascots-v2/claude-touching_grass.png') center/contain no-repeat;image-rendering:pixelated}.demo-tickle{border:0;background:none;padding:12px;cursor:pointer}.demo-tickle.ticking .demo-mascot{background-image:url('/demo-tickle.png');background-size:400% 100%;animation:tickle-frames 1s steps(4) infinite}.demo-thought{position:absolute;top:28px;left:calc(50% + 26px);border:2px solid #bab294;border-radius:50%;background:#fffbea;color:#5d624d;width:40px;height:34px;font-size:24px;line-height:20px;cursor:pointer;animation:thought-bob 2s ease-in-out infinite;z-index:2}.demo-thought:before{content:'';position:absolute;width:7px;height:7px;background:#fffbea;border:1px solid #bab294;border-radius:50%;bottom:-10px;left:-5px}.demo-voice{position:absolute;bottom:14px;background:#fffdf4;border-radius:24px;padding:8px 14px;font-size:12px}.demo-wave{color:#c77050;margin-right:7px}.demo-voice.playing .demo-wave{animation:thought-bob .45s ease-in-out infinite alternate}.demo-reaction{position:absolute;top:14px;font-size:13px}.demo-home{position:absolute;inset:0;background:#f4dfb9 url('/playground-room.webp') center/cover;opacity:.25;transition:opacity .4s}.demo-home-title{position:absolute;top:16px;left:18px;font-size:14px;background:#fff8e6;padding:6px 10px;border-radius:12px}.demo-visitor{position:absolute;bottom:48px;left:calc(50% - 45px);width:90px;height:90px;background:url('/status-mascots-v2/codex-couch_potato.png') center/contain no-repeat;transform:translateX(180px);transition:transform .6s}.visit-stage.visiting .demo-home{opacity:1}.visit-stage.visiting .demo-visitor{transform:translateX(0)}.demo-visit{z-index:1;border:1px solid #ccc7b0;border-radius:22px;padding:12px 16px;background:#fffdf4;color:#424a3b;cursor:pointer}.visit-stage.visiting .demo-visit{transform:translateY(76px)}.demo-visit-note{position:absolute;bottom:14px;font-size:12px}.visit-stage.visiting .demo-visit-note{top:56px;bottom:auto}.demo-helpers{display:flex;justify-content:center;width:100%;gap:0}.demo-helpers>div{text-align:center;width:33.33%}.demo-helper{display:block;width:100%;aspect-ratio:1;background-image:url('/demo-helpers.png');background-size:400% 600%;animation:helper-frames 1s steps(4) infinite;image-rendering:pixelated}.demo-helper.working{background-position-y:60%}.demo-helper.waiting{background-position-y:80%}.demo-helper.finished{background-position-y:100%}.demo-helpers small{font-size:12px}.demo-disclosure{margin-top:20px}button:focus-visible{outline:3px solid #b76343;outline-offset:4px}@keyframes tickle-frames{to{background-position-x:133.333%}}@keyframes helper-frames{to{background-position-x:133.333%}}@keyframes thought-bob{50%{transform:translateY(-3px)}}@media(max-width:760px){.social-demo-grid{grid-template-columns:1fr;gap:28px}.social-stage{height:220px}.demo-helper{width:100px;max-width:100%;margin:auto}.social-demo h3{margin-top:16px}}@media(prefers-reduced-motion:reduce){.social-demos *{animation:none!important;transition:none!important}}
.demo-visitor{background-image:url('/couch-codex-v2.png');background-size:400% 100%;background-position:0 0;animation:helper-frames 3s steps(4) infinite;image-rendering:pixelated}.visit-stage.visiting .demo-visit-note{background:#fff8e6;padding:4px 8px;border-radius:10px}