@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; align-items: baseline; 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); text-decoration: underline; }
/* 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; }
}

/* Entrance reveal: every block outside the header rises and fades in on first view.
   The hidden state only applies once the head script confirms IntersectionObserver,
   and the inline stylesheet keeps existing hover transitions untouched. */
.reveal-ready :is(
  .hero__copy > *,
  .hero__visual > *,
  .section-heading > *,
  .feature-grid > *,
  .companions__heading > *,
  .companion-grid > *,
  .routine__heading > *,
  .routine__list > li,
  .closing > *,
  .site-footer > *
) {
  opacity: 0;
  translate: 0 32px;
}

.reveal-ready :is(
  .hero__copy > *,
  .hero__visual > *,
  .section-heading > *,
  .feature-grid > *,
  .companions__heading > *,
  .companion-grid > *,
  .routine__heading > *,
  .routine__list > li,
  .closing > *,
  .site-footer > *
).is-revealed,
.reveal-ready.reveal-done :is(
  .hero__copy > *,
  .hero__visual > *,
  .section-heading > *,
  .feature-grid > *,
  .companions__heading > *,
  .companion-grid > *,
  .routine__heading > *,
  .routine__list > li,
  .closing > *,
  .site-footer > *
) {
  opacity: 1;
  translate: none;
  animation: reveal-up 760ms cubic-bezier(.22, .72, .26, 1) var(--reveal-delay, 0ms) both;
}

@keyframes reveal-up {
  from { opacity: 0; translate: 0 32px; }
  to { opacity: 1; translate: none; }
}

@media (prefers-reduced-motion: reduce) {
  .reveal-ready :is(
    .hero__copy > *,
    .hero__visual > *,
    .section-heading > *,
    .feature-grid > *,
    .companions__heading > *,
    .companion-grid > *,
    .routine__heading > *,
    .routine__list > li,
    .closing > *,
    .site-footer > *
  ) { opacity: 1; translate: none; animation: none; }
}

/* The closing block carries the light Sisymiro mark, sized up to read at a glance.
   Its alpha margin is already trimmed in the asset, so the mark is never padded away.
   Each width is scoped to its own range so the narrow-screen stacking stays intact. */
@media (min-width: 701px) {
  .closing { grid-template-columns: 104px minmax(0, 1fr) auto; }
  .closing > img { width: 100px; }
}
@media (max-width: 700px) and (min-width: 481px) {
  .closing { grid-template-columns: 72px 1fr; }
  .closing > img { width: 68px; }
}
@media (max-width: 480px) {
  .closing > img { width: 64px; }
}
.closing > img { height: auto; image-rendering: auto; }

/* First-screen brand line: display as typed, in DM Sans, linking to the company site. */
.kicker--brand {
  font-family: "DM Sans", "Noto Sans SC", sans-serif;
  font-size: 11px;
  font-weight: 700;
  text-transform: none;
}

.kicker--brand a:hover,
.kicker--brand a:focus-visible {
  text-decoration: underline;
  text-underline-offset: 3px;
}