:root {
      --paper: #f7f4ed;
      --paper-subtle: #f0ecdf;
      --surface: #fcfbfa;
      --surface-hover: #f5f2e8;
      --ink: #1f2925;
      --ink-muted: #5c6662;
      --ink-faint: #8c9691;
      --pine: #3b5a4f;
      --pine-dark: #274037;
      --pine-light: rgba(59, 90, 79, 0.08);
      --gold: #9b763c;
      --gold-light: rgba(155, 118, 60, 0.1);
      --cinnabar: #a84338;
      --rule: #e5ded0;
      --rule-light: #f0ebd9;
      --shadow: 0 12px 32px rgba(45, 38, 28, 0.05);
      --shadow-hover: 0 20px 48px rgba(45, 38, 28, 0.09);
      --radius-sm: 4px;
      --radius-md: 8px;
      --font-serif: "Noto Serif SC", "Songti SC", SimSun, serif;
      --font-sans: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
      --font-mono: "JetBrains Mono", monospace;
    }

    * { box-sizing: border-box; margin: 0; padding: 0; }
    html { scroll-behavior: smooth; background: var(--paper); color: var(--ink); font-family: var(--font-sans); }

    body {
      min-height: 100vh;
      background: var(--paper);
      color: var(--ink);
      line-height: 1.65;
      font-size: 15px;
      background-image: radial-gradient(circle at 50% 0%, rgba(59, 90, 79, 0.03) 0%, transparent 60%);
    }

    .mono { font-family: var(--font-mono); }
    .serif { font-family: var(--font-serif); }

    /* 顶部导航 */
    header {
      position: fixed;
      top: 0; left: 0; right: 0;
      height: 76px;
      display: flex;
      align-items: center;
      justify-content: space-between;
      padding: 0 clamp(24px, 5vw, 80px);
      background: rgba(247, 244, 237, 0.88);
      backdrop-filter: blur(12px);
      -webkit-backdrop-filter: blur(12px);
      border-bottom: 1px solid var(--rule);
      z-index: 100;
    }

    .brand {
      display: flex;
      align-items: center;
      gap: 14px;
      text-decoration: none;
      color: inherit;
    }
    .brand-seal {
      width: 36px; height: 36px;
      border: 1px solid var(--pine);
      color: var(--pine);
      display: grid;
      place-items: center;
      font-family: var(--font-serif);
      font-weight: 700;
      font-size: 14px;
      
      background: var(--surface);
    }
    .brand-title {
      font-family: var(--font-serif);
      font-size: 20px;
      font-weight: 700;
      letter-spacing: 0.05em;
    }
    .brand-sub {
      font-size: 11px;
      color: var(--ink-faint);
      letter-spacing: 0.15em;
      text-transform: uppercase;
    }

    nav {
      display: flex;
      align-items: center;
      gap: 32px;
    }
    nav a {
      color: var(--ink-muted);
      text-decoration: none;
      font-size: 14px;
      transition: color 0.2s;
    }
    nav a:hover { color: var(--pine); }

    .nav-actions {
      display: flex;
      align-items: center;
      gap: 12px;
    }

    /* 按钮规范 */
    .btn {
      display: inline-flex;
      align-items: center;
      justify-content: center;
      gap: 8px;
      padding: 9px 20px;
      border-radius: var(--radius-sm);
      font-size: 14px;
      font-weight: 500;
      cursor: pointer;
      transition: all 0.2s ease;
      text-decoration: none;
      border: 1px solid var(--rule);
      background: var(--surface);
      color: var(--ink);
    }
    .btn:hover {
      border-color: var(--pine);
      background: var(--surface-hover);
      color: var(--pine-dark);
    }
    .btn-primary {
      border-color: var(--pine);
      background: var(--pine);
      color: #faf9f5;
    }
    .btn-primary:hover {
      background: var(--pine-dark);
      border-color: var(--pine-dark);
      color: #ffffff;
    }
    .btn-ghost {
      border-color: transparent;
      background: transparent;
      color: var(--ink-muted);
    }
    .btn-ghost:hover {
      background: var(--paper-subtle);
      color: var(--ink);
    }
    .btn-danger {
      border-color: rgba(168, 67, 56, 0.3);
      color: var(--cinnabar);
      background: rgba(168, 67, 56, 0.04);
    }
    .btn-danger:hover {
      border-color: var(--cinnabar);
      background: var(--cinnabar);
      color: #fff;
    }

    /* Hero 区块 - 留白艺术 */
    .hero {
      padding: 160px clamp(24px, 5vw, 80px) 100px;
      max-width: 1160px;
      margin: 0 auto;
      text-align: center;
    }

    .pill-status {
      display: inline-flex;
      align-items: center;
      gap: 8px;
      padding: 5px 14px;
      border: 1px solid var(--rule);
      background: var(--surface);
      border-radius: 20px;
      font-size: 12px;
      color: var(--ink-muted);
      margin-bottom: 28px;
    }
    .dot-ok {
      width: 7px; height: 7px;
      border-radius: 50%;
      background: var(--pine);
      box-shadow: 0 0 0 3px rgba(59, 90, 79, 0.15);
    }

    .hero h1 {
      font-family: var(--font-serif);
      font-size: clamp(34px, 5vw, 54px);
      font-weight: 700;
      line-height: 1.25;
      letter-spacing: 0.02em;
      color: var(--ink);
      margin-bottom: 24px;
    }
    .hero h1 span {
      color: var(--pine);
      border-bottom: 2px solid rgba(59, 90, 79, 0.3);
      padding-bottom: 2px;
    }

    .hero p {
      max-width: 720px;
      margin: 0 auto 40px;
      font-size: 16px;
      color: var(--ink-muted);
      line-height: 1.8;
    }

    .hero-actions {
      display: flex;
      align-items: center;
      justify-content: center;
      gap: 16px;
      flex-wrap: wrap;
    }

    /* 用户专属控制台 (User Portal Container) */
    .user-portal {
      display: none;
      text-align: left;
      margin-top: 50px;
    }
    .user-portal.active { display: block; }

    .portal-banner {
      background: var(--surface);
      border: 1px solid var(--rule);
      padding: 32px;
      border-radius: var(--radius-md);
      box-shadow: var(--shadow);
      display: flex;
      align-items: center;
      justify-content: space-between;
      gap: 24px;
      margin-bottom: 32px;
      flex-wrap: wrap;
    }
    .portal-welcome {
      font-family: var(--font-serif);
      font-size: 24px;
      font-weight: 700;
      display: flex;
      align-items: center;
      gap: 12px;
    }
    .tier-badge {
      font-family: var(--font-sans);
      font-size: 11px;
      font-weight: 600;
      padding: 2px 8px;
      border-radius: 2px;
      background: var(--pine-light);
      color: var(--pine);
      border: 1px solid rgba(59, 90, 79, 0.2);
    }
    .tier-badge.pro {
      background: var(--gold-light);
      color: var(--gold);
      border-color: rgba(155, 118, 60, 0.3);
    }

    .balance-display {
      margin-top: 8px;
      font-size: 14px;
      color: var(--ink-muted);
    }
    .balance-val {
      font-family: var(--font-mono);
      font-size: 28px;
      font-weight: 700;
      color: var(--pine-dark);
      margin-right: 6px;
    }
    .balance-val.unknown { font-size: 18px; color: var(--cinnabar); }
    .balance-meta { margin-top: 6px; font-size: 12px; color: var(--ink-muted); display: flex; flex-wrap: wrap; gap: 12px; }
    .balance-meta .faint { color: var(--ink-faint); }

    /* 充值订单状态卡 */
    .order-card {
      margin-top: 20px;
      border: 1px solid var(--rule);
      border-left: 3px solid var(--gold);
      background: var(--paper);
      border-radius: var(--radius-sm);
      padding: 18px 20px;
      font-size: 13px;
      color: var(--ink-muted);
    }
    .order-card.paid { border-left-color: var(--pine); }
    .order-card.failed { border-left-color: var(--cinnabar); }
    .order-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap; }
    .order-head .mono { font-size: 13px; color: var(--ink); }
    .order-state { font-size: 12px; font-weight: 600; padding: 2px 8px; border-radius: 2px; border: 1px solid var(--rule); background: var(--surface); color: var(--ink-muted); }
    .order-state.pending { border-color: rgba(162, 122, 67, .38); color: var(--gold); background: var(--gold-light); }
    .order-state.paid { border-color: rgba(59, 90, 79, .32); color: var(--pine); background: var(--pine-light); }
    .order-state.failed { border-color: rgba(168, 67, 56, .38); color: var(--cinnabar); background: rgba(168, 67, 56, .06); }
    .order-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); gap: 8px 16px; margin-top: 12px; font-size: 12px; }
    .order-grid b { color: var(--ink); font-weight: 600; }
    .order-note { margin-top: 12px; padding: 12px 14px; border-radius: var(--radius-sm); font-size: 12px; line-height: 1.7; }
    .order-note.warn { background: var(--gold-light); color: var(--gold); border: 1px solid rgba(162, 122, 67, .3); }
    .order-note.bad { background: rgba(168, 67, 56, .06); color: var(--cinnabar); border: 1px solid rgba(168, 67, 56, .3); }
    .order-note.ok { background: var(--pine-light); color: var(--pine); border: 1px solid rgba(59, 90, 79, .28); }
    .order-actions { display: flex; gap: 8px; margin-top: 14px; flex-wrap: wrap; }
    .order-actions .btn { min-height: 30px; padding: 4px 12px; font-size: 12px; }

    /* Tab 功能选项卡 */
    .portal-tabs {
      display: flex;
      gap: 8px;
      border-bottom: 1px solid var(--rule);
      margin-bottom: 28px;
    }
    .portal-tab {
      padding: 12px 20px;
      background: transparent;
      border: 1px solid transparent;
      border-bottom: none;
      font-size: 14px;
      font-weight: 500;
      color: var(--ink-muted);
      cursor: pointer;
      transition: all 0.2s;
    }
    .portal-tab:hover { color: var(--pine); }
    .portal-tab.active {
      background: var(--surface);
      border-color: var(--rule);
      color: var(--pine-dark);
      font-weight: 600;
      box-shadow: 0 -3px 0 var(--pine) inset;
    }

    .portal-panel {
      display: none;
      background: var(--surface);
      border: 1px solid var(--rule);
      border-radius: var(--radius-md);
      padding: 32px;
      box-shadow: var(--shadow);
    }
    .portal-panel.active { display: block; }

    /* API 代码方块 */
    .code-box {
      background: #1e2623;
      color: #e2e8e5;
      padding: 16px 20px;
      border-radius: var(--radius-sm);
      font-family: var(--font-mono);
      font-size: 13px;
      overflow-x: auto;
      position: relative;
      margin: 12px 0 20px;
    }
    .copy-btn {
      position: absolute;
      top: 12px; right: 12px;
      padding: 4px 10px;
      font-size: 11px;
      background: rgba(255,255,255,0.1);
      border: 1px solid rgba(255,255,255,0.15);
      color: #fff;
      border-radius: 2px;
      cursor: pointer;
    }
    .copy-btn:hover { background: rgba(255,255,255,0.2); }

    /* 架构特性 - 留白网格 */
    .section-wrap {
      max-width: 1160px;
      margin: 0 auto;
      padding: 80px clamp(24px, 5vw, 80px);
    }
    .section-head {
      text-align: center;
      margin-bottom: 64px;
    }
    .section-head h2 {
      font-family: var(--font-serif);
      font-size: 32px;
      font-weight: 700;
      color: var(--ink);
      margin-bottom: 12px;
    }
    .section-head p {
      color: var(--ink-muted);
      font-size: 15px;
    }

    .grid-3 {
      display: grid;
      grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
      gap: 32px;
    }
    .card {
      background: var(--surface);
      border: 1px solid var(--rule);
      border-radius: var(--radius-md);
      padding: 32px;
      box-shadow: var(--shadow);
      transition: all 0.25s ease;
    }
    .card:hover {
      transform: translateY(-3px);
      box-shadow: var(--shadow-hover);
      border-color: rgba(59, 90, 79, 0.3);
    }
    .card-idx {
      font-family: var(--font-serif);
      font-size: 18px;
      color: var(--pine);
      margin-bottom: 14px;
      font-weight: 700;
    }
    .card h3 {
      font-size: 18px;
      font-weight: 600;
      margin-bottom: 10px;
      color: var(--ink);
    }
    .card p {
      font-size: 14px;
      color: var(--ink-muted);
      line-height: 1.7;
    }

    /* 客户端下载 */
    .download-grid {
      display: grid;
      grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
      gap: 24px;
    }
    .dl-card {
      background: var(--surface);
      border: 1px solid var(--rule);
      border-radius: var(--radius-md);
      padding: 28px 24px;
      text-align: center;
      box-shadow: var(--shadow);
    }
    .dl-icon {
      font-size: 32px;
      margin-bottom: 12px;
    }
    .dl-card h3 {
      font-size: 17px;
      margin-bottom: 4px;
    }
    .dl-meta {
      font-size: 12px;
      color: var(--pine);
      margin-bottom: 14px;
    }

    /* 设备互联卡片 */
    .device-grid {
      display: grid;
      grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
      gap: 16px;
      margin-top: 16px;
    }
    .device-card {
      padding: 16px;
      background: var(--paper);
      border: 1px solid var(--rule);
      border-radius: var(--radius-sm);
      display: flex;
      flex-direction: column;
      justify-content: space-between;
      gap: 12px;
    }

    /* 充值套餐卡片：列数不写死——等级由运营增删，三列网格会在 4 档时留出一个空格 */
    .recharge-grid {
      display: grid;
      grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
      gap: 16px;
      margin: 20px 0;
    }
    .tier-item {
      border: 1px solid var(--rule);
      background: var(--paper);
      padding: 20px 16px;
      border-radius: var(--radius-sm);
      cursor: pointer;
      text-align: center;
      transition: all 0.2s;
    }
    .tier-item.selected {
      border-color: var(--pine);
      background: var(--surface);
      box-shadow: 0 0 0 2px var(--pine);
    }

    /* 模态窗 */
    .modal-backdrop {
      position: fixed; inset: 0;
      background: rgba(31, 41, 37, 0.4);
      backdrop-filter: blur(6px);
      display: grid;
      place-items: center;
      padding: 20px;
      z-index: 200;
      opacity: 0;
      pointer-events: none;
      transition: opacity 0.2s;
    }
    .modal-backdrop.open { opacity: 1; pointer-events: auto; }
    .modal {
      width: min(440px, 100%);
      background: var(--surface);
      border: 1px solid var(--rule);
      border-radius: var(--radius-md);
      padding: 36px;
      box-shadow: 0 24px 60px rgba(0,0,0,0.12);
      position: relative;
    }

    .form-group { margin-bottom: 20px; }
    .form-group label {
      display: block; font-size: 12px; font-weight: 600; color: var(--ink-muted); margin-bottom: 6px;
    }
    .form-group input {
      width: 100%; padding: 10px 14px;
      border: 1px solid var(--rule);
      border-radius: var(--radius-sm);
      background: var(--paper);
      font-size: 14px; outline: none;
    }
    .form-group input:focus { border-color: var(--pine); box-shadow: 0 0 0 3px var(--pine-light); }

    /* Toast */
    .toast {
      position: fixed; bottom: 32px; right: 32px;
      background: var(--ink); color: #fff;
      padding: 12px 24px; border-radius: var(--radius-sm);
      font-size: 13px; z-index: 300;
      opacity: 0; transform: translateY(12px);
      transition: all 0.25s;
      pointer-events: none;
    }
    .toast.show { opacity: 1; transform: translateY(0); }

    footer {
      border-top: 1px solid var(--rule);
      padding: 40px clamp(24px, 5vw, 80px);
      max-width: 1160px; margin: 0 auto;
      display: flex; justify-content: space-between; align-items: center;
      color: var(--ink-faint); font-size: 13px;
    }

    @media (max-width: 768px) {
      nav { display: flex; }
      .recharge-grid { grid-template-columns: 1fr; }
      .portal-banner { flex-direction: column; align-items: flex-start; }
    }
  /* 门户：以工作记录、细线与留白组织内容。 */
:root{--paper:#f6f5f1;
--paper-subtle:#eeefea;
--surface:#fff;
--surface-hover:#f6f8f5;
--ink:#182a2a;
--ink-muted:#5e716d;
--ink-faint:#74857f;
--pine:#22736a;
--pine-dark:#18564f;
--pine-light:#eaf2ee;
--gold:#a16f4d;
--rule:#d7dfd8;
--rule-light:#e8ece7;
--shadow:none;
--shadow-hover:none;
--radius-md:3px;
--font-serif:Georgia,'Noto Serif SC','Songti SC',SimSun,serif;
--font-sans:Inter,-apple-system,BlinkMacSystemFont,'Segoe UI','PingFang SC','Microsoft YaHei',sans-serif}

body{background-image:none;
font-size:15px}
a{color:var(--pine)}
button,input,select{font:inherit}
button,a,input,summary{touch-action:manipulation}
:focus-visible{outline:2px solid var(--pine);
outline-offset:5px}
section[id],#userPortal{scroll-margin-top:100px}
header{height:84px;
padding:0 max(5vw,24px);
background:rgba(246,245,241,.97);
backdrop-filter:none;
gap:24px}
header nav{gap:24px}
header nav a{font-size:13px}
.brand{gap:12px}
.brand-seal{background:var(--ink);
color:#fff;
border:0;
width:38px;
height:38px;
font-size:16px}
.brand-title{font-family:var(--font-serif);
font-size:24px;
letter-spacing:.01em}
.brand-sub{font-size:10px;
letter-spacing:.06em}
.btn{border-radius:3px;
box-shadow:none;
min-height:40px;
padding:9px 17px;
font-size:13px;
font-weight:500}
.btn:hover{transform:none;
box-shadow:none}
.btn-primary{background:var(--pine);
border-color:var(--pine);
color:white}
.mobile-menu{display:none}
.hero{max-width:1280px;
text-align:left;
margin:auto;
padding:140px 56px 72px;
min-height:0}
.pill-status{background:transparent;
border:0;
border-radius:0;
padding:0;
margin-bottom:35px;
font-size:11px;
color:var(--ink-muted)}
.dot-ok{width:6px;
height:6px}
.hero-layout{display:grid;
grid-template-columns:1.2fr 1fr;
gap:8%;
align-items:center}
.eyebrow{font-size:10px;
letter-spacing:.15em;
color:var(--gold);
font-family:var(--font-sans);
font-weight:600;
margin-bottom:22px}
.hero h1{font-size:clamp(42px,4.8vw,64px);
font-weight:400;
line-height:1.35;
letter-spacing:-.045em;
margin:0 0 26px}
.hero h1 span{color:var(--pine)}
.hero-copy>p{font-size:15px;
line-height:1.95;
max-width:500px;
color:var(--ink-muted);
margin:0 0 26px}
.text-link{font-size:13px;
text-decoration:none;
display:inline-flex;
align-items:center;
gap:20px;
border-bottom:1px solid var(--rule);
padding-bottom:7px;
color:var(--pine)}
.text-link:hover{border-color:var(--pine)}
.delivery-sheet{background:var(--surface);
padding:26px 30px 18px;
border:1px solid var(--rule);
border-top:3px solid var(--pine);
position:relative}
.sheet-header{display:flex;
justify-content:space-between;
gap:12px;
font-size:8px;
letter-spacing:.08em;
color:var(--ink-muted);
padding-bottom:20px;
border-bottom:1px solid var(--rule-light)}
.delivery-sheet h2{font-family:var(--font-serif);
font-weight:400;
line-height:1.6;
font-size:26px;
margin:22px 0}
.sheet-flow{list-style:none}
.sheet-flow li{display:flex;
align-items:flex-start;
gap:20px;
border-top:1px solid var(--rule-light);
padding:14px 0}
.sheet-flow li>span{font-size:10px;
color:var(--gold);
padding-top:4px}
.sheet-flow b{font-weight:500;
font-size:13px}
.sheet-flow small{display:block;
color:var(--ink-muted);
font-size:11px;
margin-top:3px}
.sheet-footer{display:flex;
align-items:center;
gap:12px;
border-top:1px solid var(--rule);
padding-top:12px;
font-size:10px;
color:var(--ink-muted)}
.sheet-mark{font-size:25px;
color:var(--pine)}
.hero-actions{justify-content:flex-start;
gap:12px;
margin-top:32px}
.hero-actions .btn{font-size:13px!important;
padding:11px 20px!important}
.section-wrap{max-width:1280px;
margin:auto;
padding:76px 56px;
border-top:1px solid var(--rule)}
.section-head{text-align:left;
display:block;
margin-bottom:34px}
.section-head h2{font-family:var(--font-serif);
font-weight:400;
font-size:clamp(28px,3vw,39px);
line-height:1.5;
letter-spacing:-.03em;
margin:0 0 18px}
.section-head p{color:var(--ink-muted);
font-size:14px;
max-width:610px;
line-height:1.9}
.section-head .eyebrow{margin-bottom:18px}
.capability-list article{display:grid;
grid-template-columns:40px 1fr 1.65fr 115px;
gap:24px;
align-items:baseline;
border-top:1px solid var(--rule);
padding:25px 0}
.index{font-family:var(--font-mono);
font-size:10px;
letter-spacing:.05em;
color:var(--gold)}
.capability-list h3{font-size:16px;
font-weight:500}
.capability-list p{font-size:13px;
color:var(--ink-muted);
line-height:1.9}
.capability-tag{font-size:11px;
color:var(--pine);
text-align:right}
.workflow-section{background:var(--paper-subtle)}
.workflow-grid,.deployment-grid{display:grid;
grid-template-columns:repeat(3,minmax(0,1fr));
gap:30px;
margin:35px 0}
.workflow-grid article{border-top:2px solid var(--pine);
padding:22px 0 12px}
.workflow-top{font-size:10px;
letter-spacing:.1em;
color:var(--gold);
margin-bottom:18px}
.workflow-grid h3,.deployment-grid h3{font-family:var(--font-serif);
font-size:23px;
font-weight:400;
margin:12px 0 18px}
.workflow-grid p,.deployment-grid p{color:var(--ink-muted);
font-size:13px;
line-height:1.95}
.workflow-grid small{display:block;
border-top:1px solid var(--rule);
padding-top:18px;
margin-top:24px;
font-size:11px;
color:var(--ink-muted);
line-height:1.8}
.deployment-grid{gap:0}
.deployment-grid article{padding:10px 28px 10px 0}
.deployment-grid article+article{border-left:1px solid var(--rule);
padding-left:28px}
.deployment-grid ul{list-style:none;
padding:22px 0;
color:var(--ink-muted);
font-size:12px;
line-height:2.4}
.deployment-grid li:before{content:'—';
margin-right:8px;
color:var(--gold)}
.edition-note{display:grid;
grid-template-columns:200px 1fr;
border-top:1px solid var(--rule);
padding-top:24px;
gap:28px;
font-size:12px}
.edition-note b{font-weight:500}
.edition-note p{color:var(--ink-muted)}
.plans-section{background:var(--surface)}
.public-tier-grid{display:grid;
grid-template-columns:repeat(auto-fit,minmax(220px,1fr));
gap:24px}
.public-tier{border:1px solid var(--rule);
padding:27px 24px;
display:flex;
flex-direction:column}
.public-tier h3{font-family:var(--font-serif);
font-weight:400;
font-size:25px}
.public-tier .eyebrow{margin-bottom:8px}
.public-price{font-family:var(--font-serif);
font-size:30px;
color:var(--pine);
margin:20px 0}
.public-price small{font-family:var(--font-sans);
font-size:11px;
color:var(--ink-muted)}
.public-tier p{font-size:12px;
color:var(--ink-muted);
min-height:38px}
.public-tier ul{font-size:12px;
color:var(--ink-muted);
padding:15px 0 25px 16px;
flex:1;
line-height:2}
.tier-quota{border-top:1px solid var(--rule);
padding-top:14px;
margin-top:18px;
font-size:12px}
.plans-footnote{font-size:11px;
color:var(--ink-muted);
margin-top:24px;
line-height:1.8}
.download-grid{display:grid;
grid-template-columns:repeat(4,1fr);
gap:0}
.dl-card{background:transparent;
border:0;
border-top:1px solid var(--rule);
border-radius:0;
box-shadow:none;
padding:26px 18px 0 0;
text-align:left}
.dl-card+.dl-card{padding-left:20px;
border-left:1px solid var(--rule)}
.dl-card:hover{transform:none;
box-shadow:none;
border-color:var(--rule)}
.dl-card h3{font-size:19px;
font-weight:500;
margin:12px 0 6px}
.dl-card p{font-size:11px;
color:var(--ink-muted);
margin-bottom:22px}
.dl-card .btn{width:100%;
font-size:11px}
.dl-actions{display:grid;
gap:8px}
.platform-symbol{font-family:var(--font-mono);
font-size:28px;
color:var(--pine)}
.dl-card details{font-size:10px;
word-break:break-all;
margin-top:12px}
.dl-card details p{margin:8px 0}
.faq-section{display:grid;
grid-template-columns:1fr 1.6fr;
gap:60px}
.faq-list details{border-top:1px solid var(--rule);
padding:20px 0}
.faq-list summary{cursor:pointer;
list-style:none;
font-size:14px;
padding-right:25px;
position:relative}
.faq-list summary:after{content:'+';
position:absolute;
right:0;
color:var(--pine)}
.faq-list details[open] summary:after{content:'−'}
.faq-list p{color:var(--ink-muted);
font-size:13px;
line-height:1.9;
margin-top:16px}
.reading-invitation{max-width:1168px;
margin:0 auto 70px;
padding:46px 48px;
background:var(--ink);
color:var(--paper);
display:flex;
align-items:center;
justify-content:space-between;
gap:35px}
.reading-invitation .eyebrow{color:#c0cdbd}
.reading-invitation h2{font-family:var(--font-serif);
font-size:34px;
line-height:1.5;
font-weight:400}
.reading-invitation p{font-size:12px;
color:#bac7c1;
margin-top:18px}
.reading-invitation .btn{border:1px solid #78958b;
background:transparent;
white-space:nowrap}
.user-portal{text-align:left;
border-radius:3px;
box-shadow:none;
scroll-margin-top:110px;
margin-top:44px}
.portal-banner{border-radius:0;
background:var(--surface);
flex-wrap:wrap;
gap:20px}
.portal-tabs{overflow:auto}
.portal-tab{white-space:nowrap;
font-size:12px}
.balance-display .balance-val{font-size:32px}
.muted{color:var(--ink-muted);
font-size:13px;
line-height:1.9}
.portal-panel{padding:28px}
.portal-panel>h3{margin-bottom:12px}
.payment-options{border:0;
border-top:1px solid var(--rule);
margin-top:20px;
padding:12px 0;
display:flex;
gap:24px}
.payment-options legend{font-size:12px;
padding-right:15px;
color:var(--ink-muted)}
.payment-options label{font-size:13px;
display:flex;
gap:9px;
align-items:center}
.payment-options input{accent-color:var(--pine)}
.tier-item{border-radius:2px}
.tier-item:focus-visible{outline-offset:2px}
.account-form{max-width:600px;
margin:24px 0}
.account-security{display:flex;
justify-content:space-between;
align-items:center;
border-top:1px solid var(--rule);
padding-top:25px;
gap:20px}
.account-security b{font-size:13px}
.modal{position:relative;
border-radius:4px;
box-shadow:0 20px 80px #182a2a22}
.modal-close{position:absolute;
right:16px;
top:10px;
border:0;
background:transparent;
font-size:28px;
color:var(--ink-muted);
cursor:pointer}
.code-box{border-radius:2px;
word-break:break-all}
.code-box pre{white-space:pre-wrap;
font-size:12px}
.order-card{border-radius:3px}
.order-note{font-size:12px}
.toast{max-width:calc(100vw - 30px);
white-space:normal;
border-radius:3px}
.footer-links{display:flex;
gap:25px}
.footer-links a{text-decoration:none;
font-size:12px;
color:var(--ink-muted)}
footer{max-width:1280px;
margin:auto;
padding:25px 56px 35px;
font-size:11px}
.btn:disabled{opacity:.5;
cursor:not-allowed}
.model-list{display:flex;
flex-wrap:wrap;
gap:8px;
margin:16px 0}
.model-label{border:1px solid var(--rule);
padding:5px 8px;
font-size:11px}
.portal-panel .account-actions{display:flex;
gap:10px;
flex-wrap:wrap}

@media(min-width:1450px){.hero{padding-top:155px;
padding-bottom:90px}
.hero-layout{gap:12%}
.hero h1{font-size:68px}
.section-wrap{padding-top:90px;
padding-bottom:90px}
}

@media(max-width:1000px){header{padding:0 24px;
gap:15px}
header nav{gap:14px}
.brand-sub{display:none}
.nav-actions .btn{padding:7px 10px}
.hero{padding:125px 30px 55px}
.hero-layout{gap:5%}
.hero h1{font-size:43px}
.delivery-sheet{padding:20px}
.delivery-sheet h2{font-size:23px}
.section-wrap{padding:60px 30px}
.capability-list article{grid-template-columns:25px 1fr 1.7fr;
gap:15px}
.capability-tag{display:none}
.reading-invitation{margin:0 30px 50px}
.workflow-grid,.deployment-grid{gap:20px}
.deployment-grid article{padding:10px 10px 10px 0}
.deployment-grid article+article{padding-left:20px}
.faq-section{gap:30px}
footer{padding:25px 30px}
.portal-banner{display:block}
.portal-banner>div+div{margin-top:18px}
}

@media(max-width:760px){header{height:72px;
padding:0 20px;
gap:12px}
.brand-title{font-size:21px}
.brand-seal{width:30px;
height:30px;
font-size:13px}
.brand{gap:8px}
.mobile-menu{display:block;
background:none;
border:0;
padding:8px;
color:var(--ink);
font-size:12px;
margin-left:auto}
header nav{display:none;
position:absolute;
top:71px;
left:0;
right:0;
background:var(--paper);
padding:20px;
border-bottom:1px solid var(--rule);
grid-template-columns:repeat(3,1fr);
gap:20px}
header nav.open{display:grid}
.nav-actions{margin:0}
.nav-actions #navGuest .btn-primary{display:none}
.nav-actions #navUser{gap:6px!important}
.nav-actions #navUserTier{display:none}
.nav-actions #navUsername{max-width:70px;
text-overflow:ellipsis;
overflow:hidden;
white-space:nowrap;
font-size:12px!important}
.nav-actions .btn{font-size:12px}
.hero{padding:105px 22px 42px}
.pill-status{margin-bottom:26px;
font-size:10px}
.hero-layout{display:block}
.hero h1{font-size:46px}
.hero-copy>p{font-size:14px}
.delivery-sheet{margin-top:35px;
padding:22px 24px}
.delivery-sheet h2{font-size:23px}
.sheet-flow{display:grid;
grid-template-columns:repeat(3,1fr);
gap:14px}
.sheet-flow li{display:block;
padding:12px 0}
.sheet-flow li>span{font-size:9px}
.sheet-flow b{display:block;
font-size:12px;
margin-top:8px}
.sheet-flow small{font-size:10px}
.sheet-header{font-size:8px}
.hero-actions{flex-wrap:wrap;
margin-top:24px;
gap:8px}
.hero-actions .btn{font-size:12px!important;
padding:10px 14px!important}
.hero-actions .btn-ghost{padding-left:0!important}
.section-wrap{padding:48px 22px}
.section-head{margin-bottom:28px}
.section-head h2{font-size:32px}
.section-head p{font-size:13px}
.eyebrow{font-size:9px}
.capability-list article{grid-template-columns:24px 1fr;
gap:8px 14px;
padding:21px 0}
.capability-list p{grid-column:2;
font-size:12px}
.capability-list h3{font-size:16px}
.workflow-grid,.deployment-grid{grid-template-columns:1fr;
gap:25px}
.workflow-grid h3,.deployment-grid h3{font-size:24px}
.workflow-grid small{margin-top:15px;
padding-top:12px}
.deployment-grid article,.deployment-grid article+article{border-left:0;
border-top:1px solid var(--rule);
padding:22px 0 6px}
.deployment-grid ul{padding:15px 0}
.edition-note{grid-template-columns:1fr;
gap:10px}
.public-tier-grid{grid-template-columns:1fr;
gap:15px}
.public-tier{padding:23px}
.public-tier ul{min-height:0}
.public-price{margin:15px 0}
.download-grid{grid-template-columns:repeat(2,minmax(0,1fr));
gap:25px 18px}
.dl-card,.dl-card+.dl-card{padding:20px 0 0;
border-left:0}
.dl-card h3{font-size:18px}
.dl-card p{font-size:10px}
.faq-section{display:block}
.reading-invitation{margin:0 22px 45px;
padding:32px 24px;
display:block}
.reading-invitation h2{font-size:30px}
.reading-invitation .btn{margin-top:25px}
.user-portal{margin-top:30px}
.portal-panel{padding:20px 16px}
.portal-banner{padding:22px 16px}
.portal-welcome{font-size:16px}
.balance-display{font-size:13px}
.balance-meta{font-size:11px;
flex-wrap:wrap}
.balance-display .balance-val{font-size:28px}
.balance-display small{display:block}
.portal-tab{padding:14px 12px}
.recharge-grid{grid-template-columns:1fr}
.portal-panel h3{font-size:19px!important}
.portal-panel>div[style*="justify-content: space-between"]{flex-wrap:wrap;
gap:14px}
.order-grid{grid-template-columns:1fr;
font-size:12px}
.account-security{display:block}
.account-security .btn{margin-top:15px}
.code-box{overflow:auto}
.code-box>span{font-size:11px}
.modal{width:calc(100vw - 32px);
max-width:420px;
padding:30px 25px}
footer{padding:24px 22px;
display:block}
.footer-links{margin-top:18px;
gap:20px}
.desktop-break{display:none}
}

@media(prefers-reduced-motion:reduce){html{scroll-behavior:auto}
*,*:before,*:after{animation:none!important;
transition:none!important}
}


.hero>p{max-width:none}
header nav{display:flex}
@media(max-width:760px){header nav{display:none}
header nav.open{display:grid}
}


#healthDot{animation:none;box-shadow:none;background:var(--ink-faint)}
#healthDot[data-state="ready"]{background:var(--pine)}
#healthDot[data-state="unavailable"]{background:var(--gold)}
#healthDot[data-state="checking"],#healthDot[data-state="unknown"]{background:#939f98}
.auth-switch{border:0;background:transparent;color:var(--pine);font-weight:600;cursor:pointer;padding:4px}
#relayResult{white-space:pre-wrap;overflow-wrap:anywhere;margin-bottom:16px}
/* 统一品牌标：与桌面客户端「精简轨道」同一几何。 */
.brand-seal svg{display:block;width:28px;height:28px}