:root { color:#211919; background:#fff5f6; font-family:ui-rounded,"PingFang SC","Microsoft YaHei",sans-serif; }
* { box-sizing:border-box; }
body { min-height:100vh; margin:0; overflow:hidden; background:radial-gradient(circle at 18% 18%,#fff 0 4%,transparent 4.2%),radial-gradient(circle at 82% 76%,#ffd9df 0 5%,transparent 5.2%),linear-gradient(135deg,#fff9f3,#ffe9ed); }
.welcome { width:min(480px,calc(100% - 48px)); padding-top:clamp(56px,12vh,150px); margin-left:clamp(24px,10vw,170px); }
.eyebrow { margin:0 0 16px; color:#d34d68; font-size:11px; font-weight:800; letter-spacing:.16em; }
h1 { margin:0; font-size:clamp(42px,7vw,78px); line-height:.98; letter-spacing:-.08em; }
.welcome>p:not(.eyebrow) { max-width:330px; margin:22px 0; color:#6e5a5d; font-size:15px; line-height:1.8; }
.hint-card { display:grid; gap:6px; max-width:340px; padding:17px; border:2px solid #211919; border-radius:18px; background:#fffdfa; box-shadow:5px 5px 0 #211919; font-size:13px; }
.hint-card span { color:#79686a; line-height:1.5; }
.pet-root { position:fixed; inset:0; pointer-events:none; }
.xiaobai { position:fixed; z-index:10; width:180px; height:180px; pointer-events:none; will-change:transform; }
.xiaobai__body { position:relative; width:180px; height:180px; padding:0; border:0; background:transparent; cursor:grab; pointer-events:auto; touch-action:none; -webkit-user-select:none; user-select:none; }
.xiaobai__body:focus-visible { outline:3px solid #e84f72; outline-offset:4px; border-radius:40%; }.xiaobai__body:active,.xiaobai.is-dragging .xiaobai__body { cursor:grabbing; }
.xiaobai__stage { position:absolute; inset:0; display:block; }
.xiaobai__frame { position:absolute; inset:0; width:100%; height:100%; object-fit:contain; visibility:hidden; filter:drop-shadow(0 7px 5px #1a14121a); }.xiaobai__frame.is-active { visibility:visible; }
.xiaobai__bubble { position:absolute; right:-18px; top:-35px; min-width:114px; max-width:180px; padding:8px 11px; border:2px solid #211919; border-radius:14px 14px 4px; background:#fffdfa; box-shadow:3px 4px 0 #211919; color:#211919; font-size:12px; font-weight:700; line-height:1.35; pointer-events:none; }.xiaobai__bubble::after { position:absolute; right:20px; bottom:-9px; width:14px; height:14px; border-right:2px solid #211919; border-bottom:2px solid #211919; background:#fffdfa; content:""; transform:rotate(45deg); }
.xiaobai__panel { position:absolute; left:50%; bottom:calc(100% - 18px); width:216px; padding:10px; border:2px solid #211919; border-radius:18px; background:#fffdfa; box-shadow:4px 5px 0 #211919; color:#211919; pointer-events:auto; transform:translateX(-50%); }.xiaobai.is-panel-below .xiaobai__panel { top:calc(100% - 18px); bottom:auto; }.xiaobai.is-panel-left .xiaobai__panel { left:8px; transform:none; }.xiaobai.is-panel-right .xiaobai__panel { right:8px; left:auto; transform:none; }
.xiaobai__stats { display:grid; grid-template-columns:repeat(3,1fr); gap:6px; padding:0 2px 9px; }.xiaobai__stats span { display:grid; grid-template-columns:18px 1fr; gap:4px; align-items:center; color:#6f6262; font-size:11px; font-weight:700; }.xiaobai__stats i { display:grid; width:18px; height:18px; place-items:center; border-radius:50%; background:#f7d4d9; color:#2a1e20; font-style:normal; }.xiaobai__stats b { height:7px; overflow:hidden; border-radius:99px; background:#eadfdd; }.xiaobai__stats b::after { display:block; width:var(--value); height:100%; border-radius:inherit; background:#f07083; content:""; transition:width .25s ease; }
.xiaobai__actions { display:grid; grid-template-columns:1fr 1fr; gap:6px; }.xiaobai__actions button { min-height:31px; border:1.5px solid #211919; border-radius:10px; background:#fff; color:#211919; font:700 12px inherit; cursor:pointer; }.xiaobai__actions button:hover,.xiaobai__actions button:focus-visible { background:#ffd8df; }
@media (max-width:599px) { .welcome { width:calc(100% - 40px); padding-top:48px; margin-left:20px; }.xiaobai,.xiaobai__body { width:142px; height:142px; }.xiaobai__panel { width:204px; } }