/* dtzsmart.com shared stylesheet - extracted from the v1.0.0 single-file page */
  :root{
    --navy:#1A3989; --navy-deep:#12295F; --navy-ink:#0D1A38;
    --bg:#F3F5F9; --card:#FFFFFF; --line:#E1E6F0; --line-soft:#EEF1F7;
    --ink:#16213A; --ink2:#5A6478; --ink3:#9AA3B5;
    --ok:#0F7B4F; --warn:#B45309;
    --mono:ui-monospace,"Cascadia Mono",Consolas,"Courier New",monospace;
    --sans:"Segoe UI","PingFang SC","Microsoft YaHei",system-ui,sans-serif;
  }
  *{box-sizing:border-box}
  html,body{margin:0}
  body{
    background:var(--bg); font-family:var(--sans); color:var(--ink);
    -webkit-font-smoothing:antialiased;
  }
  .site{max-width:1200px; margin:0 auto; background:var(--bg)}

  /* 顶栏 */
  header.top{
    height:60px; background:#fff; border-bottom:1px solid var(--line);
    display:flex; align-items:center; padding:0 32px; gap:34px;
    position:sticky; top:0; z-index:20;
  }
  .brand{display:flex; align-items:center; gap:10px; text-decoration:none}
  .brand svg{display:block}
  .brand-name{font-size:16px; font-weight:700; color:var(--ink); letter-spacing:.01em}
  .brand-sub{font-size:11px; color:var(--ink3); font-family:var(--mono); letter-spacing:.06em; margin-top:-2px}
  nav{display:flex; gap:26px; margin-left:6px}
  nav a{
    font-size:13.5px; color:var(--ink2); text-decoration:none; padding:4px 0;
    border-bottom:2px solid transparent; transition:.15s;
  }
  nav a:hover{color:var(--navy); border-bottom-color:var(--navy)}
  nav a.cur{color:var(--navy); font-weight:600; border-bottom-color:var(--navy)}
  .top-right{margin-left:auto; display:flex; align-items:center; gap:12px}
  .lang-switch{
    font-family:var(--mono); font-size:11.5px; letter-spacing:.06em; color:var(--ink2);
    text-decoration:none; border:1px solid var(--line); border-radius:6px; padding:3px 9px;
    transition:.15s;
  }
  .lang-switch:hover{color:var(--navy); border-color:var(--navy); background:#EDF1FB}
  .ver-tag{
    font-family:var(--mono); font-size:11.5px; color:var(--navy);
    background:#EDF1FB; border:1px solid #D6DFF4; border-radius:6px; padding:3px 8px;
  }

  /* 首屏 */
  .hero{
    padding:56px 32px 48px; display:grid; grid-template-columns:1fr 520px;
    gap:52px; align-items:center; background:#fff; border-bottom:1px solid var(--line);
  }
  .eyebrow{
    display:inline-flex; align-items:center; gap:7px; font-size:12px; font-weight:600;
    color:var(--navy); background:#EDF1FB; border-radius:999px; padding:5px 12px 5px 9px;
    margin-bottom:18px;
  }
  .eyebrow i{width:6px;height:6px;border-radius:50%;background:var(--navy);display:block}
  h1{
    margin:0 0 16px; font-size:42px; line-height:1.24; letter-spacing:-.02em;
    font-weight:700; color:var(--ink);
  }
  h1 em{font-style:normal; color:var(--navy)}
  .lede{margin:0 0 22px; font-size:15.5px; line-height:1.78; color:var(--ink2); max-width:30em}
  .facts{display:flex; flex-wrap:wrap; gap:0; margin:0 0 28px; padding:0; list-style:none}
  .facts li{
    font-size:12.5px; color:var(--ink2); padding:0 14px; border-left:1px solid var(--line);
  }
  .facts li:first-child{padding-left:0; border-left:0}
  .facts b{color:var(--ink); font-weight:600}
  .cta{display:flex; align-items:center; gap:12px; flex-wrap:wrap}
  .btn{
    display:inline-flex; align-items:center; justify-content:center; gap:8px;
    height:46px; padding:0 22px; border-radius:8px; font-size:14.5px; font-weight:600;
    text-decoration:none; border:1px solid transparent; transition:.15s; cursor:pointer;
  }
  .btn-primary{background:var(--navy); color:#fff; border-color:var(--navy)}
  .btn-primary:hover{background:var(--navy-deep)}
  .btn-ghost{background:#fff; color:var(--ink); border-color:#CBD4E4}
  .btn-ghost:hover{border-color:var(--navy); color:var(--navy)}
  .btn-note{font-size:12px; color:var(--ink3); margin-top:14px}
  .btn-note b{color:var(--ok); font-weight:600}

  /* 截图位 */
  .shot{
    border:1.5px dashed #BCC7DA; border-radius:10px; background:
      repeating-linear-gradient(135deg,#FAFBFE 0 10px,#F4F6FB 10px 20px);
    height:330px; display:flex; flex-direction:column; align-items:center;
    justify-content:center; gap:8px; color:#93A0B4; text-align:center;
  }
  .shot b{font-size:12.5px; font-weight:600; color:#6E7C92; letter-spacing:.04em}
  .shot span{font-family:var(--mono); font-size:11px}
  /* 真实界面截图 */
  .shot-real{
    border:1px solid var(--line); border-radius:10px; overflow:hidden;
    box-shadow:0 14px 36px rgba(22,33,58,.12); background:#fff;
  }
  .shot-real img{display:block; width:100%; height:auto}
  .prod-img{
    display:block; width:100%; height:auto; border-radius:8px;
    border:1px solid var(--line); margin-bottom:14px; background:#fff;
  }
  .chips{display:flex; gap:8px; margin-top:14px; flex-wrap:wrap}
  .chip{
    font-size:12px; color:var(--ink2); background:#fff; border:1px solid var(--line);
    border-radius:6px; padding:6px 11px; display:inline-flex; align-items:center; gap:6px;
  }
  .chip i{width:5px;height:5px;border-radius:50%;background:var(--ok);display:block}

  /* 区块通用 */
  section.block{padding:52px 32px}
  .sec-head{display:flex; align-items:baseline; gap:14px; margin-bottom:6px}
  .sec-head h2{margin:0; font-size:21px; font-weight:700; letter-spacing:-.01em}
  .sec-head .en{font-size:11px; color:var(--ink3); font-family:var(--mono); letter-spacing:.1em}
  .sec-desc{margin:0 0 26px; font-size:13.5px; color:var(--ink2); line-height:1.7}

  /* 产品三卡 */
  .prods{display:grid; grid-template-columns:repeat(3,1fr); gap:16px}
  .prod{
    background:var(--card); border:1px solid var(--line); border-radius:10px;
    padding:22px 20px 18px; display:flex; flex-direction:column; transition:.18s;
  }
  .prod:hover{border-color:#C3CEE4; box-shadow:0 6px 20px rgba(22,33,58,.06)}
  .prod-top{display:flex; align-items:flex-start; justify-content:space-between; margin-bottom:12px}
  .prod-ico{
    width:38px; height:38px; border-radius:9px; background:#EDF1FB; color:var(--navy);
    display:flex; align-items:center; justify-content:center;
  }
  .state{font-size:11px; font-weight:600; padding:3px 8px; border-radius:5px}
  .state.free{color:var(--ok); background:#EAF6F0}
  .state.contact{color:var(--warn); background:#FDF3E7}
  .prod h3{margin:0 0 7px; font-size:15.5px; font-weight:700}
  .prod p{margin:0 0 14px; font-size:13px; line-height:1.7; color:var(--ink2); flex:1}
  .prod ul{margin:0; padding:0; list-style:none; display:flex; flex-wrap:wrap; gap:6px}
  .prod ul li{font-size:11.5px; color:var(--ink2); background:#F6F8FC; border-radius:5px; padding:4px 8px}

  /* 版本区 */
  .release{background:#fff; border-top:1px solid var(--line); border-bottom:1px solid var(--line)}
  .rel-grid{display:grid; grid-template-columns:1fr 1fr; gap:40px; align-items:start}
  .ver-big{display:flex; align-items:baseline; gap:12px; margin:0 0 6px}
  .ver-big .num{font-size:30px; font-weight:700; font-family:var(--mono); color:var(--ink); letter-spacing:-.02em}
  .ver-big .date{font-size:12.5px; color:var(--ink3); font-family:var(--mono)}
  .ver-meta{display:grid; grid-template-columns:auto 1fr; gap:7px 16px; margin:18px 0 20px; font-size:12.5px}
  .ver-meta dt{color:var(--ink3)}
  .ver-meta dd{margin:0; color:var(--ink)}
  .hash{font-family:var(--mono); font-size:11px; color:var(--ink2); word-break:break-all; line-height:1.5}
  .rel-actions{display:flex; gap:10px; align-items:center; flex-wrap:wrap}
  .link-quiet{font-size:12.5px; color:var(--ink2); text-decoration:none; border-bottom:1px solid var(--line)}
  .link-quiet:hover{color:var(--navy); border-bottom-color:var(--navy)}
  .changelog{border-left:2px solid var(--line-soft); padding-left:22px}
  .changelog .cl-title{font-size:12px; color:var(--ink3); letter-spacing:.06em; margin:0 0 14px}
  .cl-item{display:flex; gap:12px; margin-bottom:16px}
  .cl-item .tag{
    flex:none; font-size:10.5px; font-weight:600; height:19px; line-height:19px;
    padding:0 7px; border-radius:4px; font-family:var(--mono);
  }
  .tag.new{color:#0B63C5; background:#EAF2FD}
  .tag.fix{color:var(--ok); background:#EAF6F0}
  .tag.opt{color:var(--warn); background:#FDF3E7}
  .cl-item p{margin:0; font-size:13px; line-height:1.65; color:var(--ink2)}
  .cl-item p b{color:var(--ink); font-weight:600}

  /* FAQ */
  .faq{display:grid; grid-template-columns:repeat(3,1fr); gap:14px}
  .faq-card{
    background:#fff; border:1px solid var(--line); border-radius:9px; padding:16px 18px;
    text-decoration:none; transition:.15s; display:block;
  }
  .faq-card:hover{border-color:#C3CEE4; background:#FCFDFF}
  .faq-card .q{font-size:13.5px; font-weight:600; color:var(--ink); margin-bottom:6px}
  .faq-card .a{font-size:12.5px; color:var(--ink2); line-height:1.6}
  .faq-card .go{font-size:11.5px; color:var(--navy); margin-top:9px; font-weight:600}

  /* 行业场景带（深色） */
  .scenes{background:var(--navy-ink); padding:52px 32px; color:#fff}
  .scenes .eyebrow{background:rgba(255,255,255,.09); color:#B9C8E8; margin-bottom:16px}
  .scenes .eyebrow i{background:#5C86D8}
  .scenes h2{margin:0 0 10px; font-size:24px; font-weight:700; letter-spacing:-.01em}
  .scenes .lead{margin:0 0 30px; font-size:14px; line-height:1.8; color:#9FB0CC; max-width:40em}
  .scene-grid{display:grid; grid-template-columns:repeat(3,1fr); gap:16px}
  .scene{
    background:rgba(255,255,255,.045); border:1px solid rgba(255,255,255,.1);
    border-radius:10px; padding:20px 20px 18px;
  }
  .scene .k{font-family:var(--mono); font-size:11px; color:#8FB0E8; letter-spacing:.1em}
  .scene h3{margin:9px 0 11px; font-size:15.5px; font-weight:600; color:#fff}
  .scene .pain{margin:0 0 12px; font-size:12.5px; line-height:1.7; color:#93A5C4}
  .scene .way{
    margin:0; padding-top:12px; border-top:1px solid rgba(255,255,255,.09);
    font-size:13px; line-height:1.7; color:#D6E0F0;
  }
  .scene .way b{color:#fff; font-weight:600}
  .scene-cta{margin-top:26px; display:flex; align-items:center; gap:16px; flex-wrap:wrap}
  .scene-cta span{font-size:12.5px; color:#8FA3C0}
  .btn-outline{background:transparent; color:#fff; border-color:rgba(255,255,255,.35)}
  .btn-outline:hover{border-color:#fff; background:rgba(255,255,255,.07)}

  /* 视频 / 教程 */
  .video-grid{display:grid; grid-template-columns:1fr 340px; gap:22px; align-items:start}
  .player{
    position:relative; aspect-ratio:16/9; border-radius:10px; overflow:hidden;
    background:linear-gradient(160deg,#16213A 0%,#0D1A38 100%);
    display:flex; flex-direction:column; align-items:center; justify-content:center; gap:10px;
    border:1px solid #22304E;
  }
  .player::after{
    content:""; position:absolute; inset:0;
    background:radial-gradient(120% 90% at 50% 0%,rgba(92,134,216,.16),transparent 62%);
    pointer-events:none;
  }
  .play{
    width:54px; height:54px; border-radius:50%; background:rgba(255,255,255,.94);
    display:flex; align-items:center; justify-content:center; margin-bottom:2px;
    box-shadow:0 8px 26px rgba(0,0,0,.35);
  }
  .play svg{margin-left:3px}
  .player b{font-size:12.5px; color:#C6D2E6; font-weight:600; letter-spacing:.04em; z-index:1}
  .player span{font-family:var(--mono); font-size:10.5px; color:#7C8CA8; z-index:1}
  .player .dur{
    position:absolute; right:10px; bottom:10px; z-index:1;
    font-family:var(--mono); font-size:11px; color:#fff; background:rgba(0,0,0,.55);
    border-radius:4px; padding:2px 6px;
  }
  .chapters{margin:0; padding:0; list-style:none; background:#fff; border:1px solid var(--line);
    border-radius:10px; overflow:hidden}
  .chapters li{
    display:flex; gap:12px; padding:11px 14px; border-bottom:1px solid var(--line-soft);
    align-items:center;
  }
  .chapters li:last-child{border-bottom:0}
  .chapters li.on{background:#F5F8FE; box-shadow:inset 3px 0 0 var(--navy)}
  .chapters .n{font-family:var(--mono); font-size:10.5px; color:var(--ink3); flex:none; width:34px}
  .chapters .t{font-size:12.5px; color:var(--ink); line-height:1.45}
  .chapters .t em{display:block; font-style:normal; font-size:11px; color:var(--ink3); margin-top:2px}
  .tuts{display:grid; grid-template-columns:repeat(3,1fr); gap:14px; margin-top:20px}
  .tut{
    background:#fff; border:1px solid var(--line); border-radius:9px; padding:15px 16px 13px;
    text-decoration:none; transition:.15s; display:block;
  }
  .tut:hover{border-color:#C3CEE4; background:#FCFDFF}
  .tut .th{display:flex; align-items:center; justify-content:space-between; margin-bottom:8px}
  .tut .kind{font-size:10.5px; font-weight:600; color:#0B63C5; background:#EAF2FD; border-radius:4px; padding:2px 6px}
  .tut .steps{font-family:var(--mono); font-size:10.5px; color:var(--ink3)}
  .tut .q{font-size:13.5px; font-weight:600; color:var(--ink); margin-bottom:5px}
  .tut .a{font-size:12px; color:var(--ink2); line-height:1.6}
  .play-link{
    display:inline-flex; align-items:center; gap:7px; font-size:13px; color:var(--navy);
    text-decoration:none; font-weight:600; margin-left:2px;
  }
  .play-link:hover{color:var(--navy-deep)}
  .play-link i{
    width:20px; height:20px; border-radius:50%; border:1.5px solid currentColor;
    display:flex; align-items:center; justify-content:center; flex:none;
  }

  /* 页脚 */
  footer{background:#fff; padding:32px; border-top:1px solid var(--line)}
  .foot-grid{display:grid; grid-template-columns:1fr auto; gap:32px; align-items:start}
  .foot-brand{display:flex; align-items:center; gap:10px; margin-bottom:10px}
  .foot-note{font-size:12px; color:var(--ink3); line-height:1.9}
  .foot-note a{color:var(--ink2); text-decoration:none}
  .foot-note a:hover{color:var(--navy); text-decoration:underline}
  .beian{margin-top:18px; padding-top:16px; border-top:1px solid var(--line-soft);
    font-size:11.5px; color:var(--ink3); display:flex; gap:20px; flex-wrap:wrap}
  .beian a{color:var(--ink3); text-decoration:none}
  .beian a:hover{color:var(--navy)}

  @media (max-width: 900px){
    .hero{grid-template-columns:1fr; gap:28px}
    .prods,.faq,.scene-grid,.tuts{grid-template-columns:1fr}
    .rel-grid,.video-grid,.foot-grid{grid-template-columns:1fr}
    nav{display:none}
  }