:root{font-family:-apple-system,BlinkMacSystemFont,PingFang SC,Helvetica Neue,sans-serif;color:#5b4a3a;background:#fdf6ec;font-synthesis:none}*{box-sizing:border-box}body{margin:0;min-width:0}button{font:inherit}button,a{-webkit-tap-highlight-color:transparent}.showcase{width:min(100% - 40px,1040px);margin:0 auto;padding:clamp(32px,6vw,76px) 0 36px}.intro{max-width:670px;margin-bottom:38px}h1{margin:0;font-size:clamp(32px,5vw,56px);letter-spacing:-.055em;line-height:1.17}.lead{margin:20px 0 0;color:#866f5d;font-size:clamp(15px,2vw,18px);line-height:1.7}.demo{overflow:hidden;border:1px solid #e9d9c6;border-radius:24px;background:#fffaf2;box-shadow:0 22px 60px #6e4b2817}.demo-heading{display:flex;align-items:end;justify-content:space-between;gap:16px;padding:24px 28px 0}h2{margin:0;font-size:24px;line-height:1.2}h2 span{color:#a08c7a;font-size:14px;font-weight:500}.pet-switch,.actions{display:flex;flex-wrap:wrap;gap:8px}.pet-switch button,.actions button,.stage-message button{min-height:44px;padding:9px 17px;border:1px solid #dfcbb5;border-radius:999px;background:#fff;color:#5b4a3a;font-weight:600;cursor:pointer}.pet-switch button[aria-pressed=true]{background:#f8dfbe;border-color:#d4ab7b}button:hover{border-color:#b88962}button:focus-visible,a:focus-visible{outline:3px solid #db8b58;outline-offset:3px}.stage{position:relative;height:clamp(300px,45vw,450px);overflow:hidden;background:#fdf6ec;margin:20px 16px 0;border-radius:16px}.stage-still,.pet-canvas{position:absolute;top:0;right:0;bottom:0;left:0;width:100%;height:100%}.stage-still{object-fit:contain}.stage-still[hidden]{display:none}.pet-canvas{touch-action:manipulation}.stage-message{position:absolute;left:50%;bottom:18px;width:min(90%,360px);transform:translate(-50%);padding:13px 18px;border-radius:16px;background:#fffaf2f0;text-align:center;box-shadow:0 6px 25px #6e4b281f}.stage-message[hidden],.stage-message button[hidden]{display:none}.stage-message p{margin:0 0 10px;font-size:13px;line-height:1.5}.stage-message p:last-child{margin-bottom:0}.demo-footer{display:flex;align-items:center;justify-content:space-between;gap:16px;padding:18px 28px 24px}.status{margin:0;color:#866f5d;font-size:13px;line-height:1.5}.actions button{background:#fff4e4;white-space:nowrap}.actions button:disabled{opacity:.48;cursor:not-allowed}.site-footer{display:flex;justify-content:space-between;align-items:center;gap:16px;margin-top:26px;color:#866f5d;font-size:13px}.site-footer a{color:#8e5b39;font-weight:700;text-decoration:underline;text-underline-offset:4px}@media(max-width:700px){.showcase{width:min(100% - 24px,1040px);padding-top:28px}.intro{margin-bottom:26px}.demo-heading,.demo-footer,.site-footer{align-items:flex-start;flex-direction:column}.demo-heading{padding:20px 18px 0}.stage{height:clamp(300px,70vw,400px);margin:16px 10px 0}.demo-footer{padding:16px 18px 20px}.actions button{flex:1}.actions{width:100%}}@media(max-width:390px){.pet-switch{width:100%}.pet-switch button{flex:1;padding-inline:8px}.actions button{padding-inline:8px;font-size:13px}}@media(prefers-reduced-motion:reduce){*,*:before,*:after{scroll-behavior:auto!important;animation-duration:.01ms!important;transition-duration:.01ms!important}}html.embed,html.embed body{height:100%;overflow:hidden;background:#1a241e}.embed .showcase{width:100%;height:100%;padding:0}.embed .intro,.embed .site-footer,.embed .pet-switch{display:none}.embed .demo{height:100%;border:0;border-radius:0;background:#1a241e;color:#e8eadf;box-shadow:none}.embed .demo-heading{min-height:54px;padding:16px 20px 0}.embed .demo-heading h2{font-size:17px;font-weight:500}.embed .demo-heading h2 span{color:#a3afa5;font-size:11px}.embed .stage{height:calc(100% - 124px);min-height:210px;margin:0;border-radius:0;background:#1a241e}.embed .demo-footer{min-height:70px;padding:8px 20px 14px;background:#1a241e}.embed .status{max-width:230px;color:#a3afa5;font-size:10px}.embed .actions{flex-wrap:nowrap}.embed .actions button,.embed .stage-message button{min-height:38px;padding:7px 12px;border-color:#526159;background:#111815;color:#e8eadf;font-size:11px}.embed .actions button:hover,.embed .stage-message button:hover{border-color:#d9f18c;color:#d9f18c}.embed .stage-message{bottom:12px;background:#111815f0;color:#e8eadf}@media(max-width:700px){.embed .demo-heading{padding:14px 16px 0}.embed .stage{height:calc(100% - 154px);min-height:200px;margin:0}.embed .demo-footer{min-height:100px;padding:8px 16px 14px;gap:8px}.embed .status{max-width:none}.embed .actions button{padding-inline:7px;font-size:10px}}