/* home-20261004 (Lei 10-04): the new header -- five items on the right, menus that open on hover -- the home hero's
   four doors into the model market, and the contact card. Colours are flowith.css's own tokens; /static/* is cached
   for a year, so a change here ships under a new file name. */
:root{--hd-fade:250,248,244;--hd-save:#16a34a;--hd-red:#E5484D;
  --hd-mizi:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='56' height='56' viewBox='0 0 56 56'%3E%3Cg fill='none' stroke='%231C2226' stroke-opacity='.10'%3E%3Crect x='.5' y='.5' width='55' height='55'/%3E%3Cpath d='M28 0v56M0 28h56M0 0l56 56M56 0L0 56' stroke-dasharray='2.5 3'/%3E%3C/g%3E%3C/svg%3E")}
:root[data-theme="dark"]{--hd-fade:15,20,23;--hd-save:#4ade80;
  --hd-mizi:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='56' height='56' viewBox='0 0 56 56'%3E%3Cg fill='none' stroke='%23E8EAE7' stroke-opacity='.10'%3E%3Crect x='.5' y='.5' width='55' height='55'/%3E%3Cpath d='M28 0v56M0 28h56M0 0l56 56M56 0L0 56' stroke-dasharray='2.5 3'/%3E%3C/g%3E%3C/svg%3E")}

/* ---------------- header ---------------- */
.topbar .nav2 .nav-link,.topbar .nav2 .nav-trigger{font-weight:500;letter-spacing:.01em}
.topbar .nav2 .nav-trigger .caret{opacity:.6;transition:transform .2s}
.topbar .nav2 .dropdown.open>.nav-trigger .caret{transform:rotate(180deg)}
.topbar .nav2 .dropdown>.dropdown-menu{transition:opacity .16s .12s,transform .16s .12s,visibility 0s .28s}
.topbar .nav2 .dropdown>.dropdown-menu::before{content:"";position:absolute;left:0;right:0;top:-16px;height:16px}
.topbar .nav2 .dropdown.open>.dropdown-menu{transition:opacity .16s,transform .16s,visibility 0s}
@media (hover:hover) and (min-width:861px){
  .topbar .nav2 .dropdown:hover>.dropdown-menu,.topbar .hd-bell:hover>.dropdown-menu{opacity:1;visibility:visible;transform:none;transition:opacity .16s,transform .16s,visibility 0s}
  .topbar .nav2 .dropdown:hover>.nav-trigger{color:var(--ink);background:var(--bg-2)}
  .topbar .nav2 .dropdown:hover>.nav-trigger .caret{transform:rotate(180deg)}
}
/* 模型市场 */
.topbar .nav2 .hd-mm{width:470px;padding:8px}
.topbar .nav2 .hd-mm>a.hd-mm-row{display:grid;grid-template-columns:64px minmax(0,1fr);gap:14px;align-items:center;padding:9px 10px;border-radius:12px}
.hd-mm-th{width:64px;height:46px;border-radius:9px;border:1px solid var(--line);background:var(--bg-2) center/cover no-repeat}
.topbar .nav2 .hd-mm-row b{display:block;font-size:14.5px;font-weight:700}
.topbar .nav2 .hd-mm-row span.hd-mm-d{display:block;font-size:12.5px;color:var(--muted);line-height:1.45;margin-top:2px}
.hd-mm-ft{display:flex;justify-content:space-between;gap:12px;padding:11px 12px 6px;margin-top:4px;border-top:1px solid var(--line)}
.topbar .nav2 .hd-mm-ft a{display:inline;padding:0;font-size:13.5px;font-weight:700;color:var(--accent);background:none}
/* 资源: a wide panel of cards on 米字格 paper */
.topbar .nav2 .dropdown.hd-wide{position:static}
.topbar .nav2 .hd-wide>.dropdown-menu{left:0;right:0;margin-inline:auto;top:calc(100% + 6px);width:min(1160px,calc(100% - 48px));min-width:0;padding:16px 18px 14px}
.hd-res-h{font-size:13px;font-weight:600;color:var(--muted);letter-spacing:.04em;margin:0 0 12px 2px}
.hd-cards{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:14px}
.topbar .nav2 .hd-cards>a{display:flex;flex-direction:column;gap:0;padding:0;border:1px solid var(--line);border-radius:14px;overflow:hidden;background:var(--bg);
  transition:border-color .2s,transform .2s,box-shadow .2s}
.topbar .nav2 .hd-cards>a:hover{background:var(--bg);border-color:var(--accent-line);transform:translateY(-2px);box-shadow:var(--shadow)}
.hd-ill{position:relative;height:108px;background:var(--bg-2) var(--hd-mizi) center/56px 56px;border-bottom:1px solid var(--line);display:grid;place-items:center}
.hd-ico{width:52px;height:52px;border-radius:12px;background:var(--surface);border:1px solid var(--line-2);display:grid;place-items:center;color:var(--ink-2);box-shadow:var(--shadow-sm);transition:color .2s}
.hd-cards>a:hover .hd-ico{color:var(--accent)}
.hd-ico svg{width:24px;height:24px}
.hd-tag{position:absolute;top:10px;right:10px;font:600 10.5px/1 var(--mono);letter-spacing:.08em;padding:5px 7px;border:1px solid var(--line-2);border-radius:6px;background:var(--surface);color:var(--ink-2)}
.hd-new{position:absolute;top:10px;left:10px;width:9px;height:9px;border-radius:50%;background:var(--hd-red);box-shadow:0 0 0 3px var(--bg-2)}
.hd-bd{display:flex;flex-direction:column;gap:5px;padding:13px 15px 14px;flex:1}
.topbar .nav2 .hd-bd b{font-size:15.5px;font-weight:700}
.topbar .nav2 .hd-bd span.hd-d{font-size:13px;color:var(--muted);line-height:1.55;flex:1}
.topbar .nav2 .hd-bd span.hd-go{font:600 12px var(--mono);color:var(--ink-2);margin-top:6px}
.hd-cards>a:hover .hd-go{color:var(--accent)!important}
.hd-strip{display:flex;flex-wrap:wrap;align-items:center;gap:6px 20px;margin-top:12px;padding:11px 4px 0;border-top:1px solid var(--line);font-size:13px;color:var(--muted)}
.topbar .nav2 .hd-strip a{display:inline;padding:0;font-weight:600;color:var(--ink-2);background:none}
.topbar .nav2 .hd-strip a:hover{color:var(--accent)}
/* 支持 */
.topbar .nav2 .hd-sup{width:320px;padding:6px;left:auto;right:0}
.topbar .nav2 .hd-sup .hd-it{display:flex;flex-direction:row;align-items:center;justify-content:space-between;gap:12px;width:100%;padding:10px;border-radius:10px;
  font-size:14px;font-weight:500;line-height:1.3;font-family:inherit;color:var(--ink);background:none;border:0;cursor:pointer;text-align:left}
.topbar .nav2 .hd-sup .hd-it:hover{background:var(--bg-2)}
.hd-l{display:flex;align-items:center;gap:10px;min-width:0}
.hd-l>span:last-child{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.hd-si{width:30px;height:30px;border-radius:8px;display:grid;place-items:center;background:var(--bg-2);color:var(--ink-2);flex:none}
.hd-si svg{width:16px;height:16px}
.topbar .nav2 .hd-sup small{font-size:12px;color:var(--soft);font-weight:500;white-space:nowrap}
.hd-sup hr{border:0;border-top:1px solid var(--line);margin:4px 8px}
.hd-wx{display:grid;grid-template-columns:104px minmax(0,1fr);gap:12px;align-items:center;margin:0 4px 6px;padding:10px;border-radius:12px;background:var(--bg)}
.hd-wx[hidden]{display:none}
.hd-wx img{width:104px;height:104px;border-radius:10px;border:1px solid var(--line);background:#fff;object-fit:cover}
.hd-wx-k{font-size:12px;color:var(--muted)}
.hd-wx-id{font:600 14px var(--mono);margin:2px 0 6px;overflow-wrap:anywhere;color:var(--ink)}
.hd-wx-h{font-size:12px;color:var(--muted);line-height:1.5;margin-top:6px}
.hd-cp{font-size:12px;font-weight:700;line-height:1;font-family:inherit;color:var(--accent);background:none;border:1px solid var(--accent-line);border-radius:8px;padding:5px 9px;cursor:pointer;white-space:nowrap}
.hd-cp:hover{background:var(--accent-soft)}
/* 网站公告 bell */
.hd-bell{position:relative}
.hd-bell .ann-dot{position:absolute;top:8px;right:8px;width:8px;height:8px;border-radius:50%;background:var(--hd-red);box-shadow:0 0 0 2px var(--bg)}
.hd-bell .ann-dot[hidden]{display:none}
.topbar .hd-bell>.dropdown-menu{left:auto;right:0;width:360px;min-width:0;padding:6px}
.topbar .hd-bell>.dropdown-menu::before{content:"";position:absolute;left:0;right:0;top:-16px;height:16px}
.hd-ann-h{display:flex;justify-content:space-between;align-items:center;padding:9px 10px 7px;font-size:13.5px;font-weight:700}
.topbar .hd-ann-h a{display:inline;padding:0;font-size:13px;font-weight:600;color:var(--accent);background:none}
.topbar .hd-bell .hd-ann{display:grid;grid-template-columns:auto minmax(0,1fr);gap:3px 10px;padding:10px;border-radius:10px;flex-direction:row}
.hd-ann-t{font-size:11px;font-weight:700;line-height:1;padding:5px 7px;border-radius:6px;margin-top:2px;white-space:nowrap;background:var(--bg-2);color:var(--ink-2)}
.hd-ann-t.t-launch{background:var(--jade-soft);color:var(--jade)}
.hd-ann-t.t-price_down,.hd-ann-t.t-soon{background:var(--accent-soft);color:var(--accent)}
.hd-ann-t.t-price_up{background:rgba(229,138,0,.12);color:#B26A00}
.hd-ann-t.t-unavailable,.hd-ann-t.t-retire{background:rgba(229,72,77,.12);color:var(--hd-red)}
.topbar .hd-bell .hd-ann b{font-size:13.5px;font-weight:600;line-height:1.5}
.hd-ann time{grid-column:2;font:12px var(--mono);color:var(--soft)}

/* ---------------- the four doors (home hero) ---------------- */
.collage[data-doors]{columns:auto;display:grid;grid-template-columns:var(--c1,1fr) var(--c2,1fr);grid-template-rows:var(--r1,1fr) var(--r2,1fr);gap:14px;
  transition:grid-template-columns .85s cubic-bezier(.22,.7,.18,1),grid-template-rows .85s cubic-bezier(.22,.7,.18,1)}
.collage[data-doors]>.door{position:relative;margin:0;grid-area:auto;width:auto;height:auto;min-width:0;min-height:0;border-radius:18px;overflow:hidden;
  border:1px solid var(--line);background:var(--bg-2);box-shadow:var(--shadow-sm);isolation:isolate;container-type:inline-size}
.collage[data-doors]>.door picture{position:absolute;inset:0;display:block}
.collage[data-doors]>.door img{width:100%;height:100%;object-fit:cover;transform:scale(1.02);transition:transform 6.5s cubic-bezier(.2,.6,.2,1)}
.collage[data-doors]>.door.is-on img,.collage[data-doors]>.door:hover img{transform:scale(1.09)}
.collage[data-doors]>.door[data-door="chat"] img{object-position:center 22%}
.collage[data-doors]>.door[data-door="image"] img{object-position:center 40%}
.collage[data-doors]>.door[data-door="video"] img{object-position:center 28%}
.collage[data-doors]>.door[data-door="all"] img{object-position:center 42%}
.collage[data-doors] .nzm-pill{top:12px;bottom:auto}
.door-a{position:absolute;inset:0;z-index:4;display:block;color:var(--ink);text-decoration:none;border-radius:inherit}
.door-a:focus-visible{outline:2px solid var(--accent);outline-offset:-4px}
.door-sh{position:absolute;inset:0;background:linear-gradient(to top,rgba(var(--hd-fade),.97) 0%,rgba(var(--hd-fade),.86) 26%,rgba(var(--hd-fade),0) 62%)}
/* an open door carries more text: a deeper wash keeps it readable over the painting (both themes) */
.door-sh::after{content:"";position:absolute;inset:0;background:linear-gradient(to top,rgba(var(--hd-fade),.97) 0%,rgba(var(--hd-fade),.92) 50%,rgba(var(--hd-fade),.55) 74%,rgba(var(--hd-fade),0) 92%);
  opacity:0;transition:opacity .6s}
.door.is-on .door-sh::after{opacity:1}
.door-go{position:absolute;top:14px;right:14px;width:36px;height:36px;border-radius:50%;background:var(--surface);border:1px solid var(--line);display:grid;place-items:center;
  color:var(--ink);opacity:0;transform:translate(-6px,6px);transition:opacity .4s,transform .4s}
.door-go svg{width:16px;height:16px}
.door.is-on .door-go,.door:hover .door-go{opacity:1;transform:none}
.door-tx{position:absolute;left:18px;right:18px;bottom:16px;display:flex;flex-direction:column;gap:3px}
.door-k{font-size:11.5px;font-weight:700;line-height:1;letter-spacing:.14em;text-transform:uppercase;color:var(--accent)}
:lang(zh) .door-k,:lang(ja) .door-k,:lang(ko) .door-k{letter-spacing:.06em;font-size:12px}
.door-n{display:flex;align-items:baseline;gap:6px;margin-top:4px;white-space:nowrap;min-width:0}
.door-n b{font-size:38px;font-weight:900;letter-spacing:-.04em;line-height:1;font-variant-numeric:tabular-nums}
.door-n span{font-size:14px;font-weight:600;color:var(--ink-2);overflow:hidden;text-overflow:ellipsis}
.door-v{font-size:12.5px;color:var(--muted);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.door-ls{display:grid;max-height:0;opacity:0;overflow:hidden;transition:max-height .7s cubic-bezier(.22,.7,.18,1),opacity .45s,margin .5s}
.door.is-on .door-ls{max-height:120px;opacity:1;margin-top:8px}
.door-li{display:flex;justify-content:space-between;align-items:baseline;gap:12px;font-size:13px;padding:5px 0;border-top:1px dashed var(--line-2);min-width:0}
.door-li b{font-weight:600;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;min-width:0}
.door-li em{font:600 12.5px var(--mono);font-style:normal;color:var(--ink-2);white-space:nowrap}
.door-li i{font-style:normal;color:var(--hd-save);font-weight:800;font-size:11.5px;margin-left:6px}
.door-fr{font:600 12px var(--mono);color:var(--ink-2);margin-top:2px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
@container (max-width:250px){.door-v{display:none}.door-n b{font-size:32px}.door-tx{left:14px;right:14px}}
@media (min-width:981px){.collage[data-doors]{max-height:680px}}
/* tall screens only: a capped door column sits in the middle of the hero. On a laptop it keeps the old collage's top
   edge, so a long language's taller copy cannot push the doors below the fold (ru at 1366x650 did). */
@media (min-width:981px) and (min-height:901px){.collage[data-doors]{align-self:center}}
@media (max-width:980px){
  .collage[data-doors]{grid-template-columns:1fr 1fr!important;grid-template-rows:210px 210px!important;height:auto;gap:12px}
  .door-ls,.door-go{display:none!important}
}
@media (max-width:640px){
  .collage[data-doors]{grid-template-rows:150px 150px!important;gap:10px}
  .door-v{display:none}
  .door-tx{left:12px;right:12px;bottom:11px}
  .door-n b{font-size:28px}.door-n span{font-size:12.5px}.door-fr{font-size:11px}
}
@media (prefers-reduced-motion:reduce){.collage[data-doors],.collage[data-doors] *{transition:none!important}}

/* ---------------- contact card ---------------- */
#contact-modal .modal.ct2{max-width:540px;text-align:left;padding:26px 26px 16px;position:relative}
#contact-modal .ct2 h2{text-align:left;font-size:22px;font-weight:800;letter-spacing:-.02em;margin:0 0 4px}
#contact-modal .ct2 .sub{text-align:left;margin:0}
.ct2-wx{display:grid;grid-template-columns:150px minmax(0,1fr);gap:20px;align-items:center;margin-top:18px;padding:16px;border-radius:16px;background:var(--bg);border:1px solid var(--line)}
.ct2-wx img,.ct2-wx .ct2-ph{width:150px;height:150px;border-radius:12px;background:#fff;border:1px solid var(--line);object-fit:cover}
.ct2-ph{display:grid;place-items:center;color:var(--soft);font-size:12px;text-align:center;padding:10px}
.ct2-lb{display:flex;align-items:center;gap:8px;font-size:13px;font-weight:700;color:#07A35A}
.ct2-lb svg{width:18px;height:18px}
.ct2-id{display:flex;align-items:center;gap:10px;flex-wrap:wrap;margin:8px 0}
.ct2-id code{font:700 18px var(--mono);letter-spacing:.02em;color:var(--ink);background:none;padding:0;overflow-wrap:anywhere}
.ct2-wx p{font-size:13px;color:var(--muted);line-height:1.6;margin:0}
.ct2-ch{list-style:none;margin:12px 0 0;padding:0;display:grid}
.ct2-ch li{display:grid;grid-template-columns:36px minmax(0,1fr) auto;gap:12px;align-items:center;padding:11px 4px;border-bottom:1px solid var(--line)}
.ct2-ch .ct2-ic{width:36px;height:36px;border-radius:10px;display:grid;place-items:center;background:var(--bg-2);color:var(--ink-2)}
.ct2-ch .ct2-ic svg{width:17px;height:17px}
.ct2-ch b{display:block;font-size:14.5px;font-weight:700}
.ct2-ch small{display:block;font-size:13px;color:var(--muted);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.ct2-ext{font-size:13px;font-weight:700;color:var(--accent);white-space:nowrap}
.ct2-ft{display:flex;gap:18px;justify-content:center;padding-top:14px;font-size:13.5px;font-weight:600;color:var(--muted)}
.ct2-ft a:hover{color:var(--accent)}
@media (max-width:520px){
  .ct2-wx{grid-template-columns:1fr;justify-items:center;text-align:center}
  .ct2-id{justify-content:center}
  #contact-modal .modal.ct2{padding:22px 16px 14px}
}

/* home-20261004b (Lei's screenshot 10-04): the motion layer (.fx-nav, every visitor without reduced motion) makes .nav a
   positioned box for its sliding hover pill, so the wide 资源 panel measured itself against the nav (~400px) and
   squeezed its cards into a column. While 资源 is open the nav steps back to static -- the panel measures against the
   whole header again -- and the pill steps aside (the trigger keeps its own tint). The panel closes at once rather than
   fading, so it never re-lays out narrow on its way out. */
.fx-nav .topbar .nav2:has(> .hd-wide:hover),.fx-nav .topbar .nav2:has(> .hd-wide.open){position:static}
.fx-nav .topbar .nav2:has(> .hd-wide:hover) .nzm-navpill,.fx-nav .topbar .nav2:has(> .hd-wide.open) .nzm-navpill{opacity:0;transition:none}
.fx-nav .topbar .nav2 .hd-wide:hover>.nav-trigger,.fx-nav .topbar .nav2 .hd-wide.open>.nav-trigger{background:var(--bg-2);color:var(--ink)}
.fx-nav .topbar .nav2 .hd-wide>.dropdown-menu{transition:none}
.fx-nav .topbar .nav2 .hd-wide:hover>.dropdown-menu,.fx-nav .topbar .nav2 .hd-wide.open>.dropdown-menu{transition:opacity .16s,transform .16s,visibility 0s}

/* nav-20261005 (Lei 10-05: 支持 -> 资源 sometimes flickers; 模型市场 -> 支持 leaves two menus on screen). Measured with
   motion on (6 languages x 8 widths): every small menu opens 10px below the trigger row, the 资源 panel 23.5-25px
   below it (it hangs from the whole header). Three causes:
   1. A menu the pointer leaves stays up 0.28s (so a diagonal move into it does not drop it) while the next one opens
      at once: two menus showed together. Now, while the pointer is on one header menu, every other one is gone at
      once; the 0.28s grace stays for a pointer that leaves to nowhere.
   2. A small menu's hover bridge (::before, 16px tall, as wide as the menu) covered the 10px gap plus 6px of the
      trigger row, i.e. the lower edge of the neighbouring triggers: on 资源's lower edge the pointer still counted as on
      支持. The bridge is now exactly the 10px gap, and only while that menu is in use.
   3. With motion on, the 资源 panel closes the instant the pointer leaves (home-20261004b, so it never re-lays out
      narrow), and its bridge stops 7.5-9px short of the trigger row: a slow move down -- or any slanted one -- dropped
      the panel. home-20261005.js now marks 资源 .hd-keep for 0.28s after the pointer leaves it (the grace the other
      menus get from their transition); while it is kept, the panel and the static nav stay exactly as they were. */
@media (hover:hover) and (min-width:861px){
  .topbar:has(.dropdown:hover) .dropdown:not(:hover)>.dropdown-menu{opacity:0;visibility:hidden;transition:none}
  .topbar .nav2 .dropdown:not(.hd-wide)>.dropdown-menu::before,.topbar .hd-bell>.dropdown-menu::before{content:none}
  .topbar .nav2 .dropdown:not(.hd-wide):hover>.dropdown-menu::before,.topbar .hd-bell:hover>.dropdown-menu::before{content:"";position:absolute;left:0;right:0;top:-10px;height:10px}
  .fx-nav .topbar .nav2:has(> .hd-wide.hd-keep){position:static}
  .fx-nav .topbar .nav2:has(> .hd-wide.hd-keep) .nzm-navpill{opacity:0;transition:none}
  .topbar .nav2 .hd-wide.hd-keep>.dropdown-menu{opacity:1;visibility:visible;transform:none;transition:none}
  .topbar .nav2 .hd-wide.hd-keep>.nav-trigger{background:var(--bg-2);color:var(--ink)}
}