:root{
      --tech_bg:#0b1220;
      --tech_panel:#0f1b32;
      --tech_text:#e7eefc;
      --tech_muted:rgba(231,238,252,.72);
      --tech_line:rgba(231,238,252,.12);
      --tech_link:#8ab4ff;
      --tech_accent:#5eead4;

      --tech_radius:16px;
      --tech_shadow:0 10px 30px rgba(0,0,0,.35);
      --tech_max:1140px;

      --tech_h1:clamp(24px, 3vw, 36px);
      --tech_h2:clamp(18px, 2.2vw, 24px);
      --tech_body:16px;
      --tech_small:14px;
    }

    *{box-sizing:border-box}
    html,body{height:100%}
    body{
      margin:0;
      font:400 var(--tech_body)/1.75 system-ui,-apple-system,Segoe UI,Roboto,Helvetica,Arial,"PingFang SC","Microsoft YaHei",sans-serif;
      color:var(--tech_text);
      background:
        radial-gradient(900px 500px at 10% 10%, rgba(94,234,212,.12), transparent 60%),
        radial-gradient(700px 500px at 90% 0%, rgba(138,180,255,.12), transparent 55%),
        var(--tech_bg);
    }
    a{color:var(--tech_link);text-decoration:none}
    a:hover{text-decoration:underline}
    img{max-width:100%;height:auto}
    code,kbd,pre{font-family:ui-monospace,SFMono-Regular,Menlo,Monaco,Consolas,"Liberation Mono","Courier New",monospace}

    .tech_skip{
      position:absolute;left:-9999px;top:auto;width:1px;height:1px;overflow:hidden;
    }
    .tech_skip:focus{
      left:16px;top:16px;width:auto;height:auto;padding:10px 12px;
      background:#0b1220;border:1px solid var(--tech_line);border-radius:12px;z-index:9999;
    }

    .tech_topbar{
      position:sticky;top:0;z-index:50;
      backdrop-filter: blur(10px);
      background: rgba(11,18,32,.55);
      border-bottom:1px solid var(--tech_line);
    }
    .tech_topbar_in{
      max-width:var(--tech_max);
      margin:0 auto;
      padding:12px 16px;
      display:flex;
      align-items:center;
      justify-content:space-between;
      gap:12px;
    }
    .tech_brand{
      display:flex;align-items:center;gap:10px;
      min-width:160px;
    }
    .tech_logo{
      width:34px;height:34px;border-radius:12px;
      background: linear-gradient(135deg, rgba(94,234,212,.9), rgba(138,180,255,.9));
      box-shadow: var(--tech_shadow);
      flex:0 0 auto;
    }
    .tech_brand_name{
      font-weight:700;letter-spacing:.3px;
      line-height:1.2;
    }
    .tech_brand_tag{
      display:block;
      font-size:12px;color:var(--tech_muted);
      margin-top:2px;
    }

    .tech_nav{
      display:flex;align-items:center;gap:14px;flex-wrap:wrap;
      justify-content:flex-end;
    }
    .tech_nav a{
      font-size:14px;color:var(--tech_muted);
      padding:8px 10px;border-radius:12px;
    }
    .tech_nav a:hover{
      color:var(--tech_text);
      background:rgba(231,238,252,.06);
      text-decoration:none;
    }

    .tech_wrap{
      max-width:var(--tech_max);
      margin:0 auto;
      padding:18px 16px 56px;
    }

    .tech_breadcrumb{
      font-size:13px;color:var(--tech_muted);
      margin:10px 0 14px;
    }
    .tech_breadcrumb a{color:var(--tech_muted)}
    .tech_breadcrumb span{opacity:.7;margin:0 6px}

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

    .tech_card{
      background: linear-gradient(180deg, rgba(15,27,50,.92), rgba(15,27,50,.78));
      border:1px solid var(--tech_line);
      border-radius:var(--tech_radius);
      box-shadow: var(--tech_shadow);
    }

    .tech_article{
      padding:18px 18px 8px;
      overflow:hidden;
    }

    .tech_hero{
      border-radius:14px;
      border:1px solid var(--tech_line);
      overflow:hidden;
      margin:12px 0 16px;
      background: rgba(0,0,0,.15);
    }
    .tech_hero img{display:block;width:100%}

    .tech_title{
      font-size:var(--tech_h1);
      line-height:1.25;
      letter-spacing:.2px;
      margin:10px 0 10px;
    }

    .tech_meta{
      display:flex;
      flex-wrap:wrap;
      gap:10px 14px;
      font-size:13px;
      color:var(--tech_muted);
      align-items:center;
      margin-bottom:10px;
    }
    .tech_badge{
      display:inline-flex;align-items:center;gap:8px;
      padding:6px 10px;
      border-radius:999px;
      border:1px solid var(--tech_line);
      background:rgba(231,238,252,.06);
      color:var(--tech_muted);
    }
    .tech_dot{
      width:6px;height:6px;border-radius:99px;background:var(--tech_accent);
      box-shadow:0 0 0 4px rgba(94,234,212,.12);
    }

    .tech_excerpt{
      color:var(--tech_muted);
      font-size:15px;
      margin:6px 0 0;
    }

    .tech_content{
      padding:8px 0 6px;
    }
    .tech_content h2{
      font-size:var(--tech_h2);
      margin:24px 0 10px;
      line-height:1.35;
    }
    .tech_content h3{
      font-size:18px;
      margin:18px 0 8px;
    }
    .tech_content p{margin:10px 0}
    .tech_content ul,.tech_content ol{padding-left:18px}
    .tech_content li{margin:6px 0;color:var(--tech_text)}
    .tech_content blockquote{
      margin:14px 0;
      padding:12px 14px;
      border-left:3px solid rgba(94,234,212,.7);
      background:rgba(94,234,212,.06);
      border-radius:12px;
      color:var(--tech_muted);
    }
    .tech_content pre{
      margin:14px 0;
      padding:14px;
      border-radius:14px;
      border:1px solid var(--tech_line);
      background:rgba(0,0,0,.25);
      overflow:auto;
      line-height:1.6;
    }
    .tech_content :not(pre) > code{
      padding:.15em .45em;
      border-radius:10px;
      border:1px solid rgba(231,238,252,.16);
      background:rgba(231,238,252,.07);
      font-size:.95em;
    }

    .tech_divider{
      height:1px;background:var(--tech_line);
      margin:16px 0;
    }

    .tech_tags{
      display:flex;flex-wrap:wrap;gap:8px;
      padding:10px 0 6px;
    }
    .tech_tag{
      font-size:13px;
      padding:7px 10px;
      border-radius:999px;
      border:1px solid var(--tech_line);
      background:rgba(231,238,252,.06);
      color:var(--tech_muted);
    }
    .tech_tag:hover{color:var(--tech_text);text-decoration:none}

    .tech_actions{
      display:flex;flex-wrap:wrap;gap:10px;
      padding:10px 0 18px;
      align-items:center;
      justify-content:space-between;
    }
    .tech_btns{display:flex;gap:10px;flex-wrap:wrap}
    .tech_btn{
      display:inline-flex;align-items:center;justify-content:center;
      padding:10px 12px;
      border-radius:14px;
      border:1px solid var(--tech_line);
      background:rgba(231,238,252,.06);
      color:var(--tech_text);
      font-size:14px;
    }
    .tech_btn:hover{background:rgba(231,238,252,.10);text-decoration:none}
    .tech_btn_primary{
      border-color:rgba(94,234,212,.35);
      background:rgba(94,234,212,.10);
    }

    .tech_author{
      display:flex;gap:12px;align-items:flex-start;
      padding:14px;
      margin:0 0 10px;
    }
    .tech_avatar{
      width:42px;height:42px;border-radius:14px;
      background:rgba(138,180,255,.18);
      border:1px solid var(--tech_line);
      flex:0 0 auto;
    }
    .tech_author b{display:block}
    .tech_author p{margin:4px 0 0;color:var(--tech_muted);font-size:14px}

    .tech_pager{
      display:grid;
      grid-template-columns: 1fr 1fr;
      gap:12px;
      padding:12px 0 18px;
    }
    .tech_pager a{
      display:block;
      padding:12px;
      border-radius:16px;
      border:1px solid var(--tech_line);
      background:rgba(231,238,252,.05);
      color:var(--tech_text);
    }
    .tech_pager small{display:block;color:var(--tech_muted);margin-bottom:6px}
    .tech_pager a:hover{text-decoration:none;background:rgba(231,238,252,.08)}

    /* Sidebar */
    .tech_aside{
      position:sticky;
      top:74px;
      display:flex;
      flex-direction:column;
      gap:12px;
    }
    .tech_aside_box{padding:14px}
    .tech_aside_title{
      font-weight:700;
      margin:0 0 10px;
      letter-spacing:.2px;
    }

    .tech_toc{
      margin:0;
      padding:0;
      list-style:none;
      font-size:14px;
    }
    .tech_toc li{margin:8px 0}
    .tech_toc a{color:var(--tech_muted)}
    .tech_toc a:hover{color:var(--tech_text);text-decoration:none}
    .tech_toc .tech_toc_sub{
      margin:6px 0 0 12px;
      padding-left:10px;
      border-left:1px dashed rgba(231,238,252,.20);
    }

    .tech_newsletter input{
      width:100%;
      padding:10px 12px;
      border-radius:14px;
      border:1px solid var(--tech_line);
      background:rgba(0,0,0,.18);
      color:var(--tech_text);
      outline:none;
    }
    .tech_newsletter input::placeholder{color:rgba(231,238,252,.45)}
    .tech_newsletter .tech_btn{width:100%;margin-top:10px}

    .tech_related{
      display:grid;
      grid-template-columns:1fr;
      gap:10px;
      margin:0;
      padding:0;
      list-style:none;
    }
    .tech_related a{
      display:block;
      padding:12px;
      border-radius:14px;
      border:1px solid var(--tech_line);
      background:rgba(231,238,252,.05);
      color:var(--tech_text);
    }
    .tech_related a:hover{text-decoration:none;background:rgba(231,238,252,.08)}
    .tech_related small{display:block;color:var(--tech_muted);margin-top:6px}

    .tech_footer{
      max-width:var(--tech_max);
      margin:0 auto;
      padding:22px 16px 30px;
      color:var(--tech_muted);
      border-top:1px solid var(--tech_line);
      font-size:14px;
    }

    /* Responsive */
    @media (max-width: 980px){
      .tech_grid{grid-template-columns:1fr}
      .tech_aside{position:static}
      .tech_topbar_in{gap:8px}
      .tech_nav{gap:8px}
    }
    @media (max-width: 520px){
      .tech_article{padding:16px 14px 6px}
      .tech_pager{grid-template-columns:1fr}
      .tech_nav a{padding:6px 8px}
      .tech_brand{min-width:auto}
      .tech_brand_tag{display:none}
    }