@font-face{font-family:Noto;src:url('/fonts/thai.woff2') format('woff2');font-display:swap;unicode-range:U+0E00-0E7F}@font-face{font-family:Noto;src:url('/fonts/latin.woff2') format('woff2');font-display:swap}@font-face{font-family:Fredoka;src:url('/fonts/fredoka.woff2') format('woff2');font-weight:600;font-display:swap}
:root{--cream:#fff7ed;--ink:#503940;--rose:#f5b8c5;--pink:#fff0f3;--berry:#84334c;--blue:#eaf3f7}*{box-sizing:border-box}html{scroll-behavior:smooth;scroll-padding-top:24px}body{margin:0;background:var(--cream);color:var(--ink);font-family:Noto,system-ui,sans-serif;font-size:16px;line-height:1.8}a{color:inherit;text-underline-offset:4px}header{max-width:1100px;margin:auto;padding:25px 28px;display:flex;align-items:center;justify-content:space-between;gap:16px}header>a{text-decoration:none}header>a:last-child{font-size:14px;border-bottom:1px solid var(--ink)}.brand{font-family:Fredoka,system-ui,sans-serif;font-size:25px}.brand span{color:var(--berry)}main{max-width:1060px;margin:auto;padding:0 28px}.intro{text-align:center;padding:38px 0 36px}.small{font-size:14px;color:var(--berry);margin:0 0 12px}h1{font-size:clamp(36px,5.7vw,62px);line-height:1.32;font-weight:400;letter-spacing:-1.6px;margin:0 0 20px}.intro>p:not(.small){margin:0 0 24px}.pair-link{display:inline-flex;flex-wrap:wrap;justify-content:center;gap:8px 15px;align-items:center;background:var(--berry);color:white;border-radius:30px;padding:13px 24px;text-decoration:none}.pair-link span{font-size:12px;opacity:.85}.pets{display:grid;grid-template-columns:1fr 1fr;gap:30px}.pet{border-radius:110px 110px 28px 28px;overflow:hidden;background:var(--pink);border:1px solid #efd9d8}.tofu{background:var(--blue);border-color:#d6e5e8}.pet-stage{position:relative;display:flex;justify-content:center;align-items:center;min-height:330px;padding:10px 35px 0}.pet-stage img{width:min(100%,320px);height:auto;object-fit:contain}.pet-note{position:absolute;bottom:13px;right:25px;font-size:12px;background:#fff9;padding:3px 12px;border-radius:16px;transform:rotate(-5deg)}.tofu .pet-note{transform:rotate(4deg)}.pet-info{padding:16px 34px 25px}h2{line-height:1.35} .pet-info h2{font-family:Fredoka,system-ui,sans-serif;font-size:36px;margin:0 0 6px;font-weight:600}.pet-info h2 span{font-family:Noto,system-ui,sans-serif;font-size:18px;margin-left:8px;font-weight:400}.pet-info p{margin:0 0 20px}.download{display:flex;justify-content:space-between;align-items:center;background:#fff9;border:1px solid #c18f9b;padding:10px 18px;border-radius:12px;text-decoration:none;color:var(--berry)}.tofu .download{color:#375966;border-color:#8ba8b3}.download:hover{background:white}.download span{font-size:23px}.pet-info .file-info{font-size:12px;margin:9px 0 0;color:#6c5b60}.install{margin:76px 0 50px;display:grid;grid-template-columns:1fr 1.45fr;gap:55px;border-top:1px solid #e7d7cc;padding-top:48px}.install-heading h2{font-weight:400;font-size:32px;margin:0 0 18px}.install-heading p{font-size:14px}.steps ol{padding-left:24px;margin:0}.steps li{padding-left:9px;margin-bottom:24px}.steps li::marker{color:var(--berry)}.steps p{font-size:14px;margin:7px 0 12px}.steps strong{font-size:18px;font-weight:600}code,kbd{background:#f2e9e0;border-radius:4px;padding:2px 5px;font-size:13px;overflow-wrap:anywhere}pre{white-space:pre-wrap;overflow-wrap:anywhere;background:#fff;border:1px solid #e8d9cd;padding:12px 16px;border-radius:8px;font-size:14px;margin:8px 0 12px}details{border-top:1px solid #e7d7cc;padding:14px 0}summary{cursor:pointer;font-size:14px}.source{font-size:12px;color:#775c65}footer{text-align:center;padding:30px 22px 40px;background:#f8e9e6;font-size:12px}footer p:first-child{font-size:16px}footer p{margin:4px 0 12px}a:focus-visible,summary:focus-visible{outline:3px solid var(--berry);outline-offset:5px}@media(max-width:640px){header{padding:20px}.brand{font-size:21px}main{padding:0 20px}.intro{padding-top:22px}h1{letter-spacing:-.6px}.pets{grid-template-columns:1fr;gap:24px}.pet{border-radius:90px 90px 25px 25px}.pet-stage{min-height:280px}.pet-stage img{max-width:285px}.pet-info{padding:16px 26px 24px}.install{grid-template-columns:1fr;gap:20px;margin-top:48px;padding-top:30px}.install-heading h2 br{display:none}}@media(prefers-reduced-motion:reduce){html{scroll-behavior:auto}.pet-stage img{display:none}.pet-stage{background-repeat:no-repeat;background-position:center;background-size:240px}.sugar .pet-stage{background-image:url('/previews/sugar-still.png')}.tofu .pet-stage{background-image:url('/previews/tofu-still.png')}}