@font-face{
  font-family:"Noto Serif CJK TC";
  src:url("../fonts/NotoSerifCJK-Bold.ttc") format("collection");
  font-weight:700;
  font-display:swap;
}
@font-face{
  font-family:"Noto Serif Display";
  src:url("../fonts/NotoSerifDisplay-VariableFont_wdth,wght.ttf") format("truetype");
  font-weight:100 900;
  font-stretch:50% 100%;
  font-display:swap;
}
@font-face{
  font-family:"InterUI";
  src:url("../fonts/Inter-VariableFont_opsz,wght.ttf") format("truetype");
  font-weight:100 900;
  font-display:swap;
}
:root{
  --shell:#f7f7f4; --line:#dcdcd6;
  --steady:#456484; --ink:#3f3a33; --muted:#5c564c;
  --ui:InterUI,Inter,system-ui,"Noto Sans CJK TC","PingFang HK","Microsoft JhengHei",sans-serif;
}
*{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:auto;background:var(--shell)}
body{font:13px/1.45 var(--ui);color:var(--ink);background:var(--shell)}
.chrome{
  position:sticky;top:0;z-index:2;
  font:650 13px/1 var(--ui);color:var(--ink);letter-spacing:.08em;
  padding:22px 64px 14px;border-bottom:1px solid var(--line);
  background:var(--shell);
}
.hero{
  min-height:calc(100vh - 51px);
  padding:36px 64px 48px;
  display:flex;flex-direction:column;justify-content:center;gap:22px;
}
html[lang="zh-Hant"] .claim{
  font-family:"Noto Serif CJK TC","Noto Serif CJK",serif;
  font-weight:700;
  font-size:32px;line-height:1.4;
  max-width:26em;transform:scaleX(0.88);transform-origin:left center;
}
html[lang="en"] .claim{
  font-family:"Noto Serif Display",Georgia,serif;
  font-weight:900;
  font-variation-settings:"wght" 900,"wdth" 80;
  font-size:32px;line-height:1.35;
  max-width:26em;transform:scaleX(0.88);transform-origin:left center;
}
.claim .l1,.claim .l2{display:block}
.claim .l2{color:var(--muted);margin-top:.2em}
.btn{
  align-self:flex-start;display:inline-block;text-decoration:none;
  background:var(--steady);color:#fff;
  font:600 13px/1 var(--ui);padding:12px 16px;border-radius:6px;
}
.btn:focus-visible{
  outline:2px solid var(--ink);
  outline-offset:3px;
}
.how{
  min-height:100vh;
  padding:72px 64px 96px;
  border-top:1px solid var(--line);
  display:flex;flex-direction:column;justify-content:center;
  max-width:42em;
}
.how h2{
  font:600 13px/1 var(--ui);color:var(--muted);letter-spacing:.06em;
  margin-bottom:18px;
}
.how p{
  font:500 18px/1.6 var(--ui);color:var(--ink);max-width:22em;
}
.how .usage{margin-top:24px}
br.only-m{display:none}
@media (prefers-reduced-motion:no-preference){
  .claim .l2{opacity:0;transform:translateY(8px)}
  .btn{opacity:0;visibility:hidden}
}
.claim .l2.is-shown{
  opacity:1;transform:none;
  transition:opacity 640ms cubic-bezier(.22,1,.36,1),transform 640ms cubic-bezier(.22,1,.36,1);
}
.btn.is-shown{
  opacity:1;visibility:visible;
  transition:opacity 420ms cubic-bezier(.22,1,.36,1);
}
@media (prefers-reduced-motion:reduce){
  .claim .l2,
  .claim .l2.is-pending,
  .claim .l2.is-shown,
  .btn,
  .btn.is-held,
  .btn.is-shown{
    opacity:1;transform:none;visibility:visible;
    transition:none;animation:none;
  }
}
@media (max-width:480px){
  br.only-m{display:block}
  .chrome{padding:18px 24px 12px}
  .hero{padding:28px 24px 40px;gap:18px}
  html[lang="zh-Hant"] .claim{font-size:24px;max-width:none;transform:none}
  html[lang="en"] .claim{font-size:22px;max-width:none;transform:none;font-variation-settings:"wght" 900,"wdth" 100}
  .how{padding:48px 24px 80px}
  .how p{font-size:16px}
  html[lang="en"] .how p{max-width:none}
}