@font-face {
  font-family: "DM Sans";
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url("assets/fonts/dm-sans-400.woff2") format("woff2");
}
@font-face {
  font-family: "DM Sans";
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url("assets/fonts/dm-sans-500.woff2") format("woff2");
}
@font-face {
  font-family: "DM Sans";
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url("assets/fonts/dm-sans-600.woff2") format("woff2");
}
@font-face {
  font-family: "DM Sans";
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url("assets/fonts/dm-sans-700.woff2") format("woff2");
}
@font-face {
  font-family: "DM Mono";
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url("assets/fonts/dm-mono-400.woff2") format("woff2");
}
@font-face {
  font-family: "DM Mono";
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url("assets/fonts/dm-mono-500.woff2") format("woff2");
}
@font-face {
  font-family: "Noto Sans SC";
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url("assets/fonts/noto-sans-sc-400.woff2") format("woff2");
}
@font-face {
  font-family: "Noto Sans SC";
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url("assets/fonts/noto-sans-sc-500.woff2") format("woff2");
}
@font-face {
  font-family: "Noto Sans SC";
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url("assets/fonts/noto-sans-sc-600.woff2") format("woff2");
}
@font-face {
  font-family: "Noto Sans SC";
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url("assets/fonts/noto-sans-sc-700.woff2") format("woff2");
}

:root { --ink: #201a17; --paper: #f7f2e8; --clay: #b75e37; --apricot: #f0c4a0; --sun: #e8ce51; --line: rgba(32, 26, 23, .18); --radius: 16px; }
* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body { margin: 0; background: var(--paper); color: var(--ink); font-family: "DM Sans", "Noto Sans SC", sans-serif; }
a { color: inherit; text-decoration: none; } button { font: inherit; }
.site-header, .hero, .features, .companions, .routine, .closing, .site-footer { width: min(100% - 64px, 1440px); margin: 0 auto; }
.site-header { display: flex; min-height: 88px; align-items: center; border-bottom: 1px solid var(--line); }
.brand { display: inline-flex; align-items: center; gap: 9px; font-size: 21px; font-weight: 700; }.brand img { width: 48px; height: 48px; object-fit: contain; }
.site-nav { display: flex; gap: 30px; margin-left: auto; margin-right: 28px; font-size: 14px; font-weight: 500; }.site-nav a:hover { color: var(--clay); }
.language-switch { display: flex; gap: 2px; padding: 3px; border: 1px solid var(--line); border-radius: 999px; }.language-switch__button { width: 31px; height: 29px; border: 0; border-radius: 50%; background: transparent; cursor: pointer; font-family: "DM Mono", "Noto Sans SC", monospace; font-size: 10px; }.language-switch__button[aria-pressed="true"] { background: var(--ink); color: var(--paper); }.language-switch__button:not([aria-pressed="true"]):hover { color: var(--clay); }
.kicker { margin: 0; color: var(--clay); font-family: "DM Mono", "Noto Sans SC", monospace; font-size: 11px; font-weight: 500; letter-spacing: .04em; text-transform: uppercase; } h1, h2, h3, p { margin-top: 0; } h1, h2 { font-weight: 600; letter-spacing: 0; } h1 em, h2 em { font-family: Georgia, "Noto Serif SC", serif; font-weight: 400; } html[lang="zh-CN"] h1 em, html[lang="zh-CN"] h2 em { font-family: "Noto Sans SC", sans-serif; font-style: normal; font-weight: 600; white-space: nowrap; }
.hero { display: grid; grid-template-columns: minmax(0, .85fr) minmax(460px, 1.15fr); gap: clamp(50px, 9vw, 150px); min-height: 720px; padding: 94px 5vw 100px; align-items: center; }.hero__copy { max-width: 570px; }.hero h1 { margin: 24px 0 26px; font-size: clamp(56px, 6.3vw, 96px); line-height: .94; }.hero__lede { max-width: 400px; margin-bottom: 31px; color: rgba(32, 26, 23, .72); font-size: 16px; line-height: 1.7; }.hero__actions { display: flex; align-items: center; gap: 20px; }.hero__actions p { max-width: 155px; margin: 0; color: rgba(32, 26, 23, .62); font-size: 12px; line-height: 1.5; } html[lang="zh-CN"] .hero h1 { font-size: clamp(52px, 5.8vw, 88px); }
.button { display: inline-flex; min-height: 46px; align-items: center; justify-content: center; gap: 10px; padding: 0 17px; border: 1px solid transparent; border-radius: 999px; font-size: 13px; font-weight: 600; transition: transform 180ms ease, background-color 180ms ease, color 180ms ease; }.button svg { width: 17px; height: 17px; flex: 0 0 17px; }.button:hover { transform: translateY(-2px); }.button--dark { background: var(--ink); color: var(--paper); }.button--dark:hover { background: var(--clay); }
.hero__visual { position: relative; min-width: 0; min-height: 468px; overflow: hidden; border: 2px solid var(--ink); border-radius: var(--radius); background: var(--apricot); }.hero__wordmark { position: absolute; top: 32px; left: 34px; margin: 0; color: rgba(32, 26, 23, .12); font-size: clamp(90px, 13vw, 186px); font-weight: 700; line-height: .8; }.hero__bubble { position: absolute; z-index: 2; top: 100px; right: calc(15px + clamp(46.875px, 5.625vw, 73.75px)); margin: 0; padding: 13px 16px; border: 2px solid var(--ink); border-radius: 12px; background: #fffdf8; font-size: 14px; font-weight: 600; box-shadow: 5px 5px 0 var(--ink); }.hero__bubble::after { position: absolute; right: 24px; bottom: -9px; width: 14px; height: 14px; border-right: 2px solid var(--ink); border-bottom: 2px solid var(--ink); background: #fffdf8; content: ""; transform: rotate(45deg); }.hero__desk { position: absolute; right: 32px; bottom: 73px; left: 32px; height: 4px; background: var(--ink); }.sprite-frame { display: block; overflow: hidden; image-rendering: pixelated; }.sprite-frame img { display: block; max-width: none; height: 100%; image-rendering: pixelated; }.hero__sprite { position: absolute; z-index: 1; right: calc(32px - clamp(28.125px, 3.375vw, 44.25px)); bottom: 72px; width: clamp(150px, 18vw, 236px); height: clamp(150px, 18vw, 236px); }.hero__sprite > img { width: 200%; animation: frame-two 800ms steps(2, end) infinite; }
.features { padding: 118px 0 126px; border-top: 1px solid var(--line); }.section-heading { display: grid; grid-template-columns: minmax(0, .95fr) minmax(0, 1.05fr); align-items: end; }.section-heading .kicker { align-self: start; }.section-heading h2 { justify-self: end; text-align: right; } h2 { margin-bottom: 0; font-size: clamp(46px, 5vw, 78px); line-height: .96; }.feature-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px; margin-top: 62px; }.feature-card { min-height: 300px; padding: 23px; border: 1px solid var(--line); border-radius: 10px; background: #fffdf8; transition: transform 180ms ease, box-shadow 180ms ease; }.feature-card:hover { transform: translateY(-6px); box-shadow: 0 15px 23px rgba(32, 26, 23, .12); }.feature-card > p:first-child { color: var(--clay); font-family: "DM Mono", monospace; font-size: 11px; }.feature-card h3 { margin: 76px 0 16px; font-size: clamp(25px, 2vw, 33px); font-weight: 600; line-height: 1.05; }.feature-card > p:last-child { max-width: 250px; margin-bottom: 0; color: rgba(32, 26, 23, .66); font-size: 14px; line-height: 1.65; }
.companions {
  display: grid;
  grid-template-columns: minmax(0, .85fr) minmax(0, 1.15fr);
  gap: clamp(32px, 4vw, 64px);
  padding: clamp(40px, 4.4vw, 64px);
  border-radius: var(--radius);
  background: var(--ink);
  color: var(--paper);
}
.companions .kicker { color: var(--sun); }
.companions h2 { margin: 28px 0 25px; font-size: clamp(44px, 4.2vw, 66px); }
.title-line { display: inline-block; white-space: nowrap; }
.companions__heading { min-width: 0; container-type: inline-size; }
.companions__heading > p:last-child { max-width: 350px; margin-bottom: 0; color: rgba(247, 242, 232, .68); font-size: 15px; line-height: 1.7; }
.companion-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 14px;
  min-width: 0;
  align-self: center;
}
.companion {
  display: flex;
  width: 100%;
  min-width: 0;
  min-height: 340px;
  padding: 20px;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  border-radius: 10px;
  overflow: hidden;
}
.companion__sprite { width: min(100%, 160px); aspect-ratio: 1; flex: none; }
.companion p { margin: 29px 0 0; font-family: "DM Mono", "Noto Sans SC", monospace; font-size: 11px; }
.companion--goldie { background: #b78c4f; }
.companion__sprite--goldie { transform: translateY(12.5%); }.companion__sprite--goldie > img { width: 200%; animation: frame-two 800ms steps(2, end) infinite; }
.companion--shan { background: #b98196; }
/* Cat sheet: row 19, five 64px cells, seated front-facing tail loop.
   Row 0 contains direction previews, not consecutive idle animation frames. */
.companion__sprite--shan { transform: translateY(17.5%) scale(1.3); }.companion__sprite--shan > img { width: 500%; animation: frame-five 900ms steps(5, end) infinite; }
.companion--bird { background: #7d8d54; }
.companion__sprite--bird > img { width: 1200%; animation: frame-twelve 1.92s steps(12, end) infinite; }
.routine { display: grid; grid-template-columns: minmax(260px, .76fr) minmax(0, 1.24fr); gap: clamp(52px, 10vw, 165px); padding: 128px 0; }.routine__heading h2 { margin: 28px 0 0; }.routine__list { margin: 0; padding: 0; list-style: none; border-top: 1px solid var(--line); }.routine__list li { display: grid; grid-template-columns: 52px 1fr; gap: 20px; min-height: 148px; padding: 29px 0; border-bottom: 1px solid var(--line); }.routine__list span { padding-top: 5px; color: var(--clay); font-family: "DM Mono", monospace; font-size: 11px; }.routine__list h3 { margin-bottom: 11px; font-size: clamp(25px, 2.5vw, 35px); font-weight: 500; line-height: 1.05; }.routine__list p { max-width: 385px; margin-bottom: 0; color: rgba(32, 26, 23, .68); font-size: 14px; line-height: 1.65; }
.closing { display: grid; grid-template-columns: 100px minmax(0, 1fr) auto; gap: 25px; padding: 52px; align-items: center; border-radius: var(--radius); background: var(--clay); color: #fff8ef; }.closing > img { width: 74px; height: auto; image-rendering: pixelated; }.closing .kicker { color: var(--sun); }.closing h2 { margin: 16px 0 0; font-size: clamp(42px, 4.8vw, 72px); }.button--light { border-color: rgba(255, 248, 239, .5); color: #fff8ef; }.button--light:hover { border-color: #fff8ef; background: #fff8ef; color: var(--clay); }.site-footer { display: flex; gap: 30px; padding: 31px 0 29px; color: rgba(32, 26, 23, .65); font-family: "DM Mono", "Noto Sans SC", monospace; font-size: 11px; }.site-footer p { margin: 0; }.site-footer p:last-child { margin-left: auto; }.site-footer a:hover { color: var(--clay); }
/* Percentages refer to the whole strip. N steps over its full width advance
   exactly one cell at a time. The loop resets before the off-strip endpoint. */
@keyframes frame-two { from { transform: translateX(0); } to { transform: translateX(-100%); } }
@keyframes frame-five { from { transform: translateX(0); } to { transform: translateX(-100%); } }
@keyframes frame-twelve { from { transform: translateX(0); } to { transform: translateX(-100%); } }
@media (max-width: 1200px) { .companions { grid-template-columns: minmax(0, 1fr); } }
@media (max-width: 1050px) { .hero { grid-template-columns: 1fr; min-height: auto; padding: 80px 7vw 92px; }.hero__copy { max-width: 670px; }.hero__visual { width: min(100%, 650px); justify-self: end; }.companions { grid-template-columns: 1fr; }.companions__heading, .routine__heading { max-width: 560px; }.routine { grid-template-columns: 1fr; } }
@media (max-width: 700px) { .site-header, .hero, .features, .companions, .routine, .closing, .site-footer { width: min(100% - 36px, 1440px); }.site-header { min-height: 67px; }.brand { font-size: 18px; }.brand img { width: 38px; height: 38px; }.site-nav { display: none; }.language-switch { margin-left: auto; }.hero { gap: 54px; padding: 69px 0 76px; }.hero h1, html[lang="zh-CN"] .hero h1 { font-size: clamp(46px, 13vw, 66px); }.hero__lede { font-size: 14px; }.hero__actions { align-items: flex-start; flex-direction: column; }.hero__actions p { max-width: none; }.hero__visual { min-height: 330px; }.hero__wordmark { top: 22px; left: 22px; }.hero__bubble { top: 73px; left: 64%; padding: 10px 11px; font-size: 12px; }.hero__desk { right: 22px; bottom: 47px; left: 22px; }.hero__sprite { bottom: 46px; left: 33%; width: 152px; height: 152px; }.features { padding: 77px 0 82px; }.section-heading { display: block; }.section-heading h2 { margin-top: 22px; }.feature-grid { grid-template-columns: 1fr; gap: 9px; margin-top: 39px; }.feature-card { min-height: 220px; }.feature-card h3 { margin-top: 45px; }.companions { gap: 45px; padding: 50px 22px; }.companions h2 { margin-top: 23px; font-size: clamp(34px, 11vw, 52px); }.companion-grid { gap: 7px; }.companion { min-height: 205px; padding: 11px; }.companion__sprite { width: 100px; height: 100px; flex-basis: 100px; }.companion p { margin-top: 18px; font-size: 10px; }.routine { gap: 47px; padding: 78px 0; }.routine__heading h2 { margin-top: 22px; }.routine__list li { min-height: 132px; grid-template-columns: 34px 1fr; gap: 12px; padding: 25px 0; }.routine__list h3 { font-size: 25px; }.closing { grid-template-columns: 62px 1fr; gap: 18px; padding: 28px 23px; }.closing > img { width: 55px; }.closing .button { grid-column: 1 / -1; justify-self: start; }.site-footer { flex-wrap: wrap; gap: 10px 20px; padding: 25px 0; }.site-footer p:last-child { margin-left: 0; } }
@media (prefers-reduced-motion: reduce) { *, *::before, *::after { scroll-behavior: auto !important; animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; } }

/* Let the crop shrink with its card, retaining square cells at every width. */
@media (max-width: 700px) {
  .companion__sprite { width: min(100%, 100px); height: auto; flex-basis: auto; }
}
html[lang="zh-CN"] .companions h2 { font-size: min(66px, 13.5cqi); line-height: 1.15; }
.hero__copy { min-width: 0; container-type: inline-size; }
html[lang="zh-CN"] .hero h1 { font-size: min(88px, 16cqi); line-height: 1.08; }
@media (max-width: 480px) {
  .closing { grid-template-columns: minmax(0, 1fr); }
  .closing h2 { font-size: clamp(32px, 9vw, 42px); }
}
@media (prefers-reduced-motion: reduce) {
  .sprite-frame img { animation: none; transform: none; }
}

@media (max-width: 700px) {
  .hero__bubble { right: 52.5px; left: auto; }
  .hero__sprite { right: -6.5px; left: auto; }
}

/* Keep the header logo at the established desktop and mobile heights. */
.brand img { width: 38px; height: 38px; }
@media (max-width: 700px) {
  .brand img { width: 30px; height: 30px; }
}