:root { --ink:#3c4858; --muted:#6b7280; --accent:#9c27b0; --paper:#fff; --surface:#eee; }
* { box-sizing:border-box; }
html { scroll-behavior:smooth; scroll-padding-top:80px; }
body { margin:0; color:var(--ink); background:var(--surface); font:16px/1.8 -apple-system,BlinkMacSystemFont,"Segoe UI","Noto Sans CJK SC","Microsoft YaHei",sans-serif; overflow-wrap:break-word; }
a { color:var(--accent); text-decoration:none; }
a:hover { text-decoration:underline; }
a:focus-visible,summary:focus-visible { outline:3px solid #ffbd59; outline-offset:5px; border-radius:3px; }
img { max-width:100%; height:auto; }
.container { width:min(1140px,calc(100% - 64px)); margin-inline:auto; }
.skip-link { position:absolute; top:-70px; left:12px; z-index:100; padding:8px 16px; color:#fff; background:#333; }
.skip-link:focus { top:12px; }
.site-header { position:absolute; z-index:5; inset:0 0 auto; color:#fff; }
.nav-shell { width:min(1140px,calc(100% - 64px)); min-height:88px; margin:auto; display:flex; align-items:center; justify-content:space-between; gap:24px; }
.brand { color:inherit; font-size:20px; font-weight:400; letter-spacing:.2px; white-space:nowrap; }
.nav-links,.social-links { display:flex; align-items:center; gap:30px; list-style:none; margin:0; padding:0; }
.nav-links a { color:inherit; font-size:14px; display:block; padding:12px 2px; }
.nav-links [aria-current="page"] { border-bottom:2px solid currentColor; }
.nav-links li { position:relative; }
.nav-links li>ul { padding:12px 20px; list-style:none; background:#fff; color:var(--ink); }
.hero { min-height:640px; height:88vh; max-height:900px; display:grid; place-items:center; position:relative; overflow:hidden; text-align:center; color:#fff; }
.section-background { position:absolute; inset:0; width:100%; height:100%; object-fit:cover; z-index:0; }
.hero-shade,.about-shade { position:absolute; inset:0; background:rgba(0,0,0,.45); }
.hero-content { position:relative; z-index:1; padding:135px 0 150px; }
.hero h1 { font-size:clamp(48px,5.2vw,72px); line-height:1.15; font-weight:700; margin:0 0 20px; letter-spacing:-1px; }
.hero-subtitle { font-size:20px; font-weight:300; margin:0 0 38px; }
.button { display:inline-block; background:var(--accent); color:#fff; border-radius:3px; font-size:14px; padding:13px 30px; box-shadow:0 4px 15px #3e16475c; transition:transform .15s; }
.button:hover { transform:translateY(-2px); text-decoration:none; }
.home-sections { position:relative; margin:-60px 30px 0; background:#fff; border-radius:6px 6px 0 0; box-shadow:0 16px 38px -12px #0004; overflow:hidden; }
.about-section { position:relative; min-height:250px; display:grid; align-items:center; color:#fff; }
.about-shade { background:rgba(0,0,0,.5); }
.about-content { position:relative; z-index:1; padding:64px 0; font-size:20px; font-weight:300; }
.about-content p { margin:0; }
.blog-section { padding-top:70px; padding-bottom:90px; }
.blog-section>h2 { text-align:center; font-size:36px; font-weight:700; margin:0 0 48px; }
.post-grid { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:40px; }
.post-card { min-width:0; }
.post-category { color:var(--accent); font-size:12px; font-weight:600; margin:0 0 8px; }
.post-card h3 { font-size:20px; line-height:1.55; margin:0 0 14px; }
.post-card h3 a { color:var(--ink); }
.post-summary { color:var(--muted); font-size:14px; line-height:1.9; }
.post-meta { color:var(--muted); font-size:13px; margin-top:18px; }
.site-footer { padding:55px 0 22px; background:#323437; color:#ddd; font-size:14px; }
.site-footer a { color:#fff; }
.footer-columns { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:40px; }
.footer-column h2 { font-size:18px; margin:0 0 20px; color:#fff; }
.footer-text p { margin:0 0 12px; }
.tag-list { display:flex; flex-wrap:wrap; gap:8px 12px; }
.tag-list a { border:1px solid #ffffff40; border-radius:3px; padding:2px 10px; }
.footer-bottom { margin-top:35px; padding-top:22px; border-top:1px solid #ffffff1a; }
.social-links { gap:26px; flex-wrap:wrap; font-size:13px; }
.inner-page .site-header { position:relative; background:#fff; color:var(--ink); box-shadow:0 2px 10px #0001; }
.inner-page .nav-shell { min-height:76px; }
.article-shell,.list-shell { margin-top:45px; margin-bottom:60px; padding:48px 64px 60px; border-radius:6px; background:#fff; box-shadow:0 8px 30px #0001; }
.article { max-width:840px; margin:auto; }
.article-header { margin-bottom:34px; }
.article-header h1,.list-shell>h1 { font-size:clamp(28px,3.4vw,40px); line-height:1.45; margin:0 0 14px; }
.list-shell .post-grid { margin-top:36px; row-gap:50px; }
.prose { line-height:1.95; }
.prose h1,.prose h2,.prose h3 { color:#283342; line-height:1.55; margin:1.6em 0 .65em; }
.prose h1 { font-size:29px; }.prose h2 { font-size:25px; }.prose h3 { font-size:21px; }
.prose p { margin:0 0 1.1em; }
.prose img { display:block; margin:24px auto; border-radius:3px; }
.prose pre { overflow:auto; background:#f5f6f8; border:1px solid #e6e8ed; border-radius:4px; padding:18px 22px; line-height:1.65; font-size:13px; tab-size:4; }
.prose code { font-family:"SFMono-Regular",Consolas,"Liberation Mono",monospace; background:#f1f2f5; padding:.1em .25em; border-radius:3px; font-size:.88em; }
.prose pre code { background:none; padding:0; font-size:inherit; }
.prose table { display:block; overflow-x:auto; width:100%; border-collapse:collapse; margin:22px 0; font-size:14px; }
.prose th,.prose td { border:1px solid #ddd; padding:10px 14px; text-align:left; }
.prose th { background:#f5f6f8; }
.prose blockquote { margin-inline:0; border-left:4px solid var(--accent); padding-left:22px; color:var(--muted); }
.article-tags { margin-top:35px; display:flex; gap:10px; }
.article-tags span { border:1px solid #ddd; border-radius:3px; padding:2px 10px; font-size:12px; }
@media(max-width:800px) {
  .container,.nav-shell { width:calc(100% - 40px); }
  .post-grid { grid-template-columns:1fr; gap:34px; }
  .footer-columns { grid-template-columns:1fr; gap:26px; }
  .home-sections { margin:-35px 14px 0; }
  .hero { min-height:530px; height:78vh; }
  .hero-content { padding:140px 0; }
  .hero-subtitle { font-size:18px; }
  .about-content { font-size:18px; padding:50px 0; }
  .blog-section { padding-block:48px; }
  .article-shell,.list-shell { padding:28px 24px 40px; margin-top:24px; }
  .nav-links { gap:20px; }
}
@media(max-width:420px) {
  .nav-shell { gap:12px; flex-wrap:wrap; justify-content:center; padding:15px 0 10px; }
  .brand { width:100%; text-align:center; font-size:18px; }
  .nav-links { gap:30px; }
  .nav-links a { padding:5px 0; }
  .hero h1 { font-size:46px; }
}
@media(prefers-reduced-motion:reduce) { html { scroll-behavior:auto; }.button { transition:none; } }