:root{--bg:#fff;--ink:#0b1220;--muted:#5b6876;--line:#e9eef3;--brand:#0077ff;--brand-2:#3dbbff;--max:1080px;--r:16px;--shadow:0 14px 36px rgba(2,8,20,.08);--t:.25s ease}
    *{box-sizing:border-box;margin:0;padding:0}
    body{font-family:Inter,system-ui,Segoe UI,Roboto,Arial,sans-serif;background:var(--bg);color:var(--ink);line-height:1.72}
    a{color:inherit;text-decoration:none}
    img{max-width:100%;display:block}
    .wrap{width:92%;max-width:var(--max);margin:auto}
    .btn{display:inline-block;padding:.75rem 1rem;border-radius:999px;font-weight:800}
    .btn--primary{background:linear-gradient(90deg,var(--brand),var(--brand-2));color:#fff}

    /* Header */
    .header{position:sticky;top:0;z-index:20;background:#fff;border-bottom:1px solid var(--line)}
    .header .wrap{display:flex;justify-content:space-between;align-items:center;padding:.75rem 0}
    .brand{display:flex;align-items:center;gap:.6rem;font-weight:900}
    .brand img{width:40px;height:40px;border-radius:10px}
    .nav ul{display:flex;gap:.5rem;list-style:none}
    .nav a{padding:.55rem .85rem;border-radius:10px}
    .nav a:hover{background:#f5f9ff}

    /* Hero of article */
    .hero{position:relative;border-bottom:1px solid var(--line)}
    .hero__bg{height:min(42vh,380px);position:relative;overflow:hidden}
    .hero__bg img{width:100%;height:100%;object-fit:cover}
    .hero__bg:after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,rgba(0,0,0,.45),rgba(0,0,0,.25),rgba(255,255,255,0))}
    .hero__content{position:absolute;inset:0;display:grid;place-items:center;text-align:center;color:#fff;padding:1rem}
    .hero h1{font-size:clamp(28px,4vw,44px);line-height:1.1}

    /* Breadcrumb */
    .crumbs{font-size:.95rem;color:#4b5563;padding:.6rem 0}
    .crumbs a{color:#1e40af}

    /* Layout */
    .grid{display:grid;grid-template-columns:3fr 1.2fr;gap:22px}
    @media(max-width:980px){.grid{grid-template-columns:1fr}}

    /* Article */
    article{background:#fff;border:1px solid var(--line);border-radius:16px;box-shadow:var(--shadow)}
    .post{padding:22px}
    .meta{color:#6b7280;margin-bottom:12px}
    .toc{background:#f8fbff;border:1px dashed #cfe5ff;border-radius:12px;padding:14px;margin:10px 0 18px}
    .toc b{display:block;margin-bottom:6px}
    .toc ul{list-style:none;display:grid;gap:.35rem}
    .toc a{color:#0b1220}
    .post h2{font-size:1.35rem;margin:18px 0 8px}
    .post h3{font-size:1.1rem;margin:14px 0 6px}
    .post p{margin:8px 0}
    .note{background:#f5f9ff;border-left:4px solid var(--brand);padding:12px;border-radius:8px}
    .tags{display:flex;flex-wrap:wrap;gap:8px;margin-top:12px}
    .tag{background:#eef6ff;color:#0b3a7a;border:1px solid #dbeafe;border-radius:999px;padding:.25rem .6rem;font-weight:700}

    /* Aside */
    aside{position:sticky;top:84px;height:max-content}
    .widget{background:#fff;border:1px solid var(--line);border-radius:16px;padding:16px;box-shadow:var(--shadow);margin-bottom:14px}
    .widget ul{list-style:none;display:grid;gap:.45rem}

    /* Prev/Next */
    .pn{display:flex;gap:12px;margin-top:16px}
    .pn a{flex:1;border:1px solid var(--line);border-radius:12px;padding:12px;display:block}

    /* Footer */
    .footer{margin-top:30px;border-top:1px solid var(--line);padding:24px 0;color:#6b7280}

    /* Floating buttons (keep consistent with site) */
    .fabs{position:fixed;right:16px;bottom:16px;display:flex;flex-direction:column;gap:12px;z-index:90}
    .fab{width:56px;height:56px;border-radius:50%;display:grid;place-items:center;background:#fff;border:2px solid var(--brand);box-shadow:0 10px 24px rgba(0,0,0,.12)}
    .fab--primary{background:linear-gradient(180deg,var(--brand),var(--brand-2));border:none;color:#fff}