:root{
    --bg: #0f1720;
    --card: #ffffff;
    --muted: #6b7280;
    --accent: #2563eb;
    --accent-2: #06b6d4;
    --radius: 12px;
    --max-width: 980px;
    --content-width: 680px;
    --gap: 28px;
    --reading-progress-height: 4px;
    color-scheme: light;
    font-family: "Inter", system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial;
  }

  *,*::before,*::after{box-sizing:border-box}
  html,body{height:auto}
  body{
    margin:0;
    background: linear-gradient(180deg, #f8fafc 0%, #f1f5f9 100%);
    color:#0b1220;
    -webkit-font-smoothing:antialiased;
    -moz-osx-font-smoothing:grayscale;
    line-height:1.6;
    padding:48px 20px;
    display:flex;
    justify-content:center;
    font-size:16px;
  }


  .site{
    width:100%;
    max-width:var(--max-width);
    display:grid;
    grid-template-columns: 1fr;
    gap:var(--gap);
  }

  header.site-header{
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:16px;
  }
  .brand{
    display:flex;
    align-items:center;
    gap:12px;
    text-decoration:none;
    color:inherit;
  }
  .logo {
    width:48px;
    height:48px;
    border-radius:10px;
    background: linear-gradient(135deg,var(--accent),var(--accent-2));
    display:flex;
    align-items:center;
    justify-content:center;
    color:white;
    font-weight:700;
    font-family: "Merriweather", serif;
    box-shadow: 0 6px 18px rgba(37,99,235,0.12);
  }
  .brand h1{font-size:1rem;margin:0}
  .brand p{margin:0;font-size:0.85rem;color:var(--muted)}
  .brand img {width: 50px; height: 50px;}

  nav.top-nav{
    display:flex;
    gap:14px;
    align-items:center;
  }
  nav.top-nav a{
    text-decoration:none;
    color:var(--muted);
    font-weight:600;
    font-size:0.95rem;
  }
  @media (max-width:500px){
    header {
      flex-wrap: wrap;
    }
    nav.top-nav {
      width: 100%;
      justify-content: center;
    }
  }


  .main{
    display:grid;
    grid-template-columns: 1fr 320px;
    gap:28px;
    align-items:start;
  }


  article.post{
    background:var(--card);
    border-radius:var(--radius);
    box-shadow: 0 6px 30px rgba(11,18,32,0.06);
    padding:28px;
    width:100%;
    max-width:var(--content-width);
    margin:0;
    overflow:hidden;
  }

  .post .eyebrow{
    display:flex;
    gap:12px;
    align-items:center;
    color:var(--muted);
    font-weight:600;
    font-size:0.85rem;
  }
  .post h2{
    margin:14px 0 8px;
    font-family:"Merriweather", serif;
    font-size:1.9rem;
    line-height:1.15;
    color: #071133;
  }
  .meta{
    display:flex;
    gap:12px;
    align-items:center;
    color:var(--muted);
    font-size:0.92rem;
    margin-bottom:18px;
  }
  .cover{
    width:100%;
    border-radius:10px;
    overflow:hidden;
    margin:18px 0;
    background:#e6eefb;
    display:block;
  }
  .cover img{width:100%;height:100%;object-fit:contain;display:block}

  .lead{
    color:#0b1220;
    margin:0 0 18px 0;
    font-size:1.05rem;
  }


  .post p{margin:0 0 16px 0;color:#0b1220}
  .post h3{font-size:1.1rem;margin:18px 0 10px 0;color:#071133}
  .post ul{padding-left:1.2rem;margin:0 0 16px 0}
  .post blockquote{
    margin:18px 0;padding:16px;border-left:4px solid rgba(37,99,235,0.14);
    background:linear-gradient(180deg, rgba(37,99,235,0.03), rgba(6,182,212,0.02));
    color:#0b1220;border-radius:8px;
  }
  .post pre{
    background:#0b1220;color:#f8fafc;padding:14px;border-radius:8px;overflow:auto;font-family:ui-monospace,SFMono-Regular,Menlo,Monaco,monospace;font-size:0.9rem;
  }
  .tags{display:flex;gap:8px;flex-wrap:wrap;margin-top:10px}
  .tag{background:#eef2ff;color:#1e3a8a;padding:6px 10px;border-radius:999px;font-weight:600;font-size:0.85rem}


  aside.sidebar{
    position:sticky;
    top:20px;
    align-self:start;
    height:max-content;
    display:flex;
    flex-direction:column;
    gap:16px;
  }
  .card{
    background:var(--card);
    border-radius:12px;
    padding:16px;
    box-shadow: 0 6px 20px rgba(11,18,32,0.04);
  }
  .author{
    display:flex;gap:12px;align-items:center;
  }
  .author img{
    width:56px;height:56px;border-radius:999px;object-fit:cover;
    flex-shrink:0;
  }
  .author .meta small{display:block;color:var(--muted)}
  .read-time{
    display:flex;gap:8px;align-items:center;color:var(--muted);
    font-weight:600;font-size:0.94rem;
  }


  .related-list{display:flex;flex-direction:column;gap:10px}
  .related-item{
    display:flex;gap:10px;align-items:center;text-decoration:none;color:inherit;padding:6px;border-radius:8px;
  }
  .related-item:hover{background:linear-gradient(90deg, rgba(37,99,235,0.03), rgba(6,182,212,0.02))}

  .related-item .thumb{width:64px;height:44px;border-radius:8px;overflow:hidden;flex-shrink:0}
  .related-item .thumb img{width:100%;height:100%;object-fit:cover}


  footer.site-footer{
    display:flex;
    justify-content:space-between;
    align-items:center;
    gap:12px;
    color:var(--muted);
    font-size:0.95rem;
  }


  @media (max-width:980px){
    .main{grid-template-columns:1fr}
    body{padding:28px 16px}
    .site{gap:18px}
    aside.sidebar{position:static}
    .author img{width:48px;height:48px}
  }


  #progress {
    position:fixed;
    left:0;right:0;top:0;
    height:var(--reading-progress-height);
    background:linear-gradient(90deg,var(--accent),var(--accent-2));
    transform-origin:0 50%;
    transform:scaleX(0);
    z-index:9999;
    transition:transform 120ms linear;
    border-bottom-left-radius:4px;border-bottom-right-radius:4px;
  }


  a:focus{outline:3px solid rgba(37,99,235,0.18);outline-offset:2px}