:root{
  --ink:#15181d; --sub:#5c646f; --line:#e6e8ec; --bg:#fff; --soft:#f7f8fa;
  --brand:#0b5fff; --brand-soft:#eef3ff; --ok:#0a7a58; --warn:#a8401a;
  --max:760px;
}
*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%; scroll-behavior:smooth}
body{
  margin:0; background:var(--bg); color:var(--ink);
  font:17px/1.85 -apple-system,BlinkMacSystemFont,"PingFang SC","Hiragino Sans GB","Microsoft YaHei",system-ui,sans-serif;
}
a{color:var(--brand); text-decoration:none}
a:hover{text-decoration:underline}
.w{max-width:var(--max); margin:0 auto; padding:0 22px}
.wide{max-width:1080px; margin:0 auto; padding:0 22px}

/* header */
header{border-bottom:1px solid var(--line); position:sticky; top:0; background:rgba(255,255,255,.92); backdrop-filter:blur(8px); z-index:40}
header .wide{display:flex; align-items:center; justify-content:space-between; height:58px}
.brand{font-weight:800; font-size:17px; color:var(--ink); letter-spacing:-.01em}
.brand:hover{text-decoration:none}
.brand em{font-style:normal; color:var(--sub); font-weight:500; font-size:12.5px; margin-left:8px}
nav a{color:var(--sub); font-size:14px; margin-left:18px}
nav a:hover{color:var(--ink); text-decoration:none}

/* hero */
.hero{padding:54px 0 30px; border-bottom:1px solid var(--line)}
.hero h1{font-size:32px; line-height:1.3; margin:0 0 14px; letter-spacing:-.02em}
.hero p{color:var(--sub); margin:0; font-size:16.5px}
.tag{display:inline-block; font-size:12.5px; color:var(--brand); background:var(--brand-soft); padding:3px 10px; border-radius:999px; margin-bottom:16px}

/* article */
article{padding:34px 0 20px}
article h1{font-size:29px; line-height:1.35; margin:0 0 14px; letter-spacing:-.02em}
.meta{color:var(--sub); font-size:13.5px; margin:0 0 26px; padding-bottom:20px; border-bottom:1px solid var(--line)}
article h2{font-size:21px; margin:38px 0 12px; letter-spacing:-.01em}
article h3{font-size:17.5px; margin:26px 0 8px}
article p{margin:0 0 16px; color:#262b33}
article ul,article ol{padding-left:24px; margin:0 0 16px; color:#262b33}
article li{margin-bottom:7px}
article strong{font-weight:700}
blockquote{
  margin:22px 0; padding:14px 18px; background:var(--soft);
  border-left:3px solid var(--brand); border-radius:0 8px 8px 0; color:#2c333d; font-size:15.5px;
}
blockquote p:last-child{margin:0}
code{font-family:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace; font-size:.9em; background:#f2f4f7; padding:2px 5px; border-radius:4px}

/* prompt box */
.prompt{border:1px solid var(--line); border-radius:12px; overflow:hidden; margin:22px 0}
.prompt .ph{display:flex; align-items:center; justify-content:space-between; padding:10px 14px; background:var(--soft); border-bottom:1px solid var(--line)}
.prompt .ph b{font-size:13px; color:var(--sub); font-weight:600; letter-spacing:.02em}
.prompt .ph button{
  font:600 12.5px/1 inherit; color:var(--brand); background:#fff; border:1px solid var(--line);
  border-radius:7px; padding:6px 12px; cursor:pointer;
}
.prompt .ph button:hover{background:var(--brand-soft); border-color:#c9d8ff}
.prompt pre{margin:0; padding:16px; white-space:pre-wrap; word-break:break-word; font-size:14.5px; line-height:1.75; color:#1f242b; background:#fff; font-family:inherit}

/* cards */
.grid{display:grid; grid-template-columns:repeat(auto-fill,minmax(240px,1fr)); gap:14px; margin:22px 0}
.card{display:block; border:1px solid var(--line); border-radius:12px; padding:16px 18px; transition:.15s; background:#fff}
.card:hover{border-color:#c9d4e6; box-shadow:0 6px 20px rgba(16,24,40,.06); text-decoration:none; transform:translateY(-1px)}
.card b{display:block; font-size:15.5px; color:var(--ink); margin-bottom:5px}
.card span{display:block; font-size:13px; color:var(--sub); line-height:1.6}

/* cta */
.cta{border:1px solid #d9e3f7; background:linear-gradient(180deg,#f7faff,#fff); border-radius:14px; padding:22px 24px; margin:34px 0}
.cta b{display:block; font-size:16.5px; margin-bottom:6px}
.cta p{margin:0 0 0; color:var(--sub); font-size:14.5px}

/* toc */
.toc{background:var(--soft); border-radius:12px; padding:14px 20px; margin:0 0 28px; font-size:14.5px}
.toc b{display:block; font-size:12.5px; color:var(--sub); letter-spacing:.05em; margin-bottom:8px}
.toc ol{margin:0; padding-left:18px}
.toc li{margin-bottom:4px}

/* footer */
footer{border-top:1px solid var(--line); margin-top:50px; padding:28px 0 44px; color:var(--sub); font-size:13.5px; background:var(--soft)}
footer p{margin:0 0 7px}
footer a{color:var(--sub); text-decoration:underline; text-underline-offset:2px}

/* breadcrumb */
.crumb{font-size:13px; color:var(--sub); padding:20px 0 0}
.crumb a{color:var(--sub)}
.crumb i{font-style:normal; margin:0 7px; opacity:.5}

/* notice */
.notice{border:1px solid #f0dcc4; background:#fffaf4; color:#7a4a15; border-radius:10px; padding:12px 16px; font-size:14px; margin:20px 0}

@media(max-width:600px){
  body{font-size:16px}
  .hero{padding:38px 0 24px}
  .hero h1{font-size:25px}
  article h1{font-size:23px}
  article h2{font-size:19px}
  .w,.wide{padding:0 18px}
  nav a{margin-left:14px; font-size:13.5px}
  .brand em{display:none}
}