@font-face{font-family:'Patrick Hand';src:url(/assets/fonts/patrick-hand.woff2) format('woff2');font-display:swap}
@font-face{font-family:'ZCOOL KuaiLe';src:url(/assets/fonts/zcool-kuaile-sub.woff2) format('woff2');font-display:swap}
/* One Drop English — notebook paper, ink outlines, sea-blue + sunshine accents. One light look by design. */
:root{
  --paper:#FAFAF5; --grid:rgba(70,110,160,.11); --ink:#2B2A33; --muted:#5E6170;
  --sea:#6EC3F4; --deep:#3E9BD6; --link:#1F6FA3; --sun:#FFC94A; --hi:#FFE066; --pink:#FF8FA3; --grass:#8CC66D; --card:#FFFFFF; --sky:#CFE9F8;
  --hand:'Patrick Hand','ZCOOL KuaiLe','PingFang SC','Hiragino Sans GB','Microsoft YaHei',sans-serif;
  --kuai:'ZCOOL KuaiLe','PingFang SC','Hiragino Sans GB','Microsoft YaHei',sans-serif;
  --body:-apple-system,'PingFang SC','Hiragino Sans GB','Microsoft YaHei','Segoe UI',Roboto,sans-serif;
  color-scheme:light;
}
*{box-sizing:border-box}
html{background:var(--paper)}
body{margin:0;background-color:var(--paper);background-image:linear-gradient(var(--grid) 1px,transparent 1px),linear-gradient(90deg,var(--grid) 1px,transparent 1px);
  background-size:26px 26px;color:var(--ink);font-family:var(--body);font-size:16px;line-height:1.7;-webkit-text-size-adjust:100%}
img,svg{max-width:100%}
[hidden]{display:none!important}
a{color:var(--link);text-underline-offset:3px}
button:focus-visible,a:focus-visible,summary:focus-visible,input:focus-visible{outline:3px solid var(--deep);outline-offset:3px;border-radius:6px}
.gutter{padding-left:max(16px,env(safe-area-inset-left,0px));padding-right:max(16px,env(safe-area-inset-right,0px))}
.inner{max-width:1040px;margin:0 auto}
/* header */
.site-head{position:sticky;top:0;z-index:20;background:rgba(250,250,245,.94);backdrop-filter:blur(6px);border-bottom:2.5px solid var(--ink)}
.site-head .inner{display:flex;align-items:center;gap:16px;min-height:64px;flex-wrap:wrap;padding-block:6px}
.brand{display:flex;align-items:center;gap:10px;color:var(--ink);text-decoration:none;margin-right:auto}
.brand img{width:42px;height:42px;border-radius:50%;border:2.5px solid var(--ink)}
.brand b{font-family:var(--kuai);font-weight:400;font-size:22px;line-height:1}
.brand span{display:block;font-family:'Patrick Hand',sans-serif;font-size:15px;color:var(--muted);line-height:1.1}
.nav{display:flex;gap:4px;flex-wrap:wrap}
.nav a{font-family:var(--kuai);font-size:17px;color:var(--ink);text-decoration:none;padding:6px 12px;border-radius:12px}
.nav a:hover{background:var(--sky)}
.nav a[aria-current="page"]{background:linear-gradient(transparent 55%,var(--hi) 55%)}
/* type */
h1,h2,h3{font-family:var(--hand);font-weight:400;text-wrap:balance;margin:0}
.eyebrow{margin:0;font-size:13.5px;letter-spacing:.1em;color:var(--muted)}
.mark{background:linear-gradient(transparent 58%,var(--hi) 58%,var(--hi) 92%,transparent 92%);padding:0 .08em}
.lede{color:var(--muted);max-width:60ch;margin:0}
a.btn{display:inline-flex;align-items:center;gap:8px;min-height:48px;padding:0 20px;border:2.5px solid var(--ink);border-radius:14px 18px 13px 16px;background:var(--card);
  color:var(--ink);font-family:var(--kuai);font-size:18px;text-decoration:none;box-shadow:3px 4px 0 var(--ink);cursor:pointer}
a.btn:active{transform:translate(2px,2px);box-shadow:1px 1px 0 var(--ink)}
a.btn.primary{background:var(--sun)}
.card{background:var(--card);border:2.5px solid var(--ink);border-radius:16px 20px 14px 18px;box-shadow:4px 5px 0 var(--ink)}
section{scroll-margin-top:84px}
.sec-title{display:flex;align-items:baseline;gap:12px;flex-wrap:wrap;margin-bottom:16px}
.sec-title h2{font-size:clamp(28px,4vw,36px)}
.sec-title small{font-family:'Patrick Hand',sans-serif;font-size:20px;color:var(--muted)}
/* footer */
.site-foot{border-top:2.5px dashed var(--ink);margin-top:56px}
.site-foot .inner{padding-block:24px 36px;display:flex;flex-wrap:wrap;gap:8px 24px;justify-content:space-between;font-size:13.5px;color:var(--muted)}
.site-foot p{margin:0}
@media (prefers-reduced-motion:reduce){*{animation:none!important;transition:none!important}}