:root{
    --bg:#f6f7fb;
    --card:#ffffff;
    --muted:#445566;
    --accent:#007aff; /* macOS/iOS 蓝 */
    --glass:rgba(255,255,255,0.6);
    --border:rgba(15,23,42,0.06);
}

*{box-sizing:border-box}
html,body{height:100%}
body{
    margin:0;
    font-family: -apple-system, BlinkMacSystemFont, "SF Pro Text", "Segoe UI", Roboto, "Helvetica Neue", Arial;
    color:var(--muted);
    background:linear-gradient(180deg, #f7f8fb 0%, #eef2f6 100%);
    -webkit-font-smoothing:antialiased;
}

.container{max-width:1000px;margin:0 auto;padding:1rem}

.site-header{background:transparent;color:var(--muted);backdrop-filter:blur(8px);}
.header-inner{display:flex;align-items:center;justify-content:space-between;padding:0.75rem 1rem}
.site-title{font-weight:700;color:var(--accent);text-decoration:none;font-size:1.15rem}
.site-nav a{color:var(--muted);text-decoration:none;margin-left:1rem}
.site-nav a:hover{color:var(--accent)}

.hero{padding:2rem;border-radius:12px;margin:1rem 0;background:linear-gradient(180deg, rgba(255,255,255,0.8), rgba(250,250,252,0.6));border:1px solid var(--border);box-shadow:0 8px 24px rgba(18,38,63,0.06)}
.hero h2{margin:0 0 .5rem;font-size:1.6rem;color:#0b1220}
.hero p{margin:.25rem 0;color:var(--muted)}
.btn{display:inline-block;margin-top:.75rem;padding:.5rem .9rem;background:var(--accent);color:#fff;border-radius:8px;text-decoration:none;box-shadow:0 6px 18px rgba(0,122,255,0.12)}

.terminal{
    background:linear-gradient(180deg, rgba(250,250,252,1), rgba(245,246,250,1));
    border:1px solid var(--border);
    color:#0b1220;
    padding:1rem;border-radius:10px;font-family: "SF Mono", "SFMono-Regular", Menlo, Monaco, Consolas, monospace;font-size:.95rem;overflow:auto
}
.terminal .prompt{color:var(--muted);font-weight:600;margin-bottom:6px}

.recent-posts{margin:1.25rem 0}
.posts-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:1rem}
.post-card{background:var(--card);padding:1rem;border-radius:12px;border:1px solid var(--border);box-shadow:0 6px 18px rgba(18,38,63,0.04)}
.post-card h4{margin:0 0 .5rem;font-size:1.05rem;color:#0b1220}
.post-card a{color:var(--accent);text-decoration:none}
.post-card .meta{font-size:.85rem;color:var(--muted);margin-bottom:.5rem}

.site-footer{padding:1rem 0;margin-top:2rem;border-top:1px solid rgba(11,18,32,0.04);background:transparent}
.site-footer p{margin:0;color:var(--muted);font-size:.95rem}

@media (max-width:900px){
    .posts-grid{grid-template-columns:1fr}
    .header-inner{flex-direction:column;align-items:flex-start}
    .site-nav{margin-top:.5rem}
    .site-nav a{margin-left:0;margin-right:.75rem}
}

/* code block styles */
pre, code {font-family: "SF Mono", Menlo, Monaco, Consolas, "Liberation Mono", monospace;color:#0b1220}
pre{background:linear-gradient(180deg, rgba(250,250,252,1), rgba(245,246,250,1));padding:1rem;border-radius:8px;border:1px solid var(--border);overflow:auto}

/* Code toolbar and copy button */
.code-toolbar{position:absolute;top:8px;right:8px;display:flex;gap:8px;align-items:center}
.copy-btn{background:rgba(11,18,32,0.04);border:1px solid rgba(11,18,32,0.04);color:#0b1220;padding:6px 8px;border-radius:8px;font-size:.85rem;cursor:pointer}
.copy-btn:hover{background:rgba(11,18,32,0.06)}
.code-lang{background:rgba(11,18,32,0.03);border-radius:6px;padding:4px 6px;font-size:.75rem;color:var(--muted);border:1px solid rgba(11,18,32,0.03)}
pre{position:relative}

/* Article styles */
.article{background:var(--card);padding:1.25rem;border-radius:12px;border:1px solid var(--border);box-shadow:0 8px 24px rgba(18,38,63,0.04)}
.article h1{margin-top:0;color:#0b1220}
.article .meta{color:var(--muted);font-size:.9rem;margin-bottom:1rem}
.article p{line-height:1.6;color:var(--muted)}

/* Article styles */
.article{background:var(--card);padding:1.25rem;border-radius:8px;box-shadow:0 6px 18px rgba(15,23,42,0.06)}
.article h1{margin-top:0}
.article .meta{color:var(--muted);font-size:.9rem;margin-bottom:1rem}
.article p{line-height:1.6;color:#10202a}