/* p-works-home.css — 火力坊站首页（W2，2026-10-13）。版式照 hitk-ai 首页（HitkLanding.vue），VI 照驭火LAB：宣纸、墨、朱红。
   10-26 起是「质感」版，样子照样稿 ~/claude-workbench/outputs/2026-10-26-皮肤样稿.html 的火力坊首页（首屏、03 接入、04 模型墙），内容不变：
   首屏大标题、小字照样稿的 .hero-title / .eyebrow；托管一节照 .h2 / .lead / .features；模型卡照 .model（悬停时光跟着指针、标识微微倾斜，works-home.js；减少动态效果时不做）。
   托管一节右边 10-30 起是接入页签（照 hitk 的 HitkIntegrations，见下面那一段）；以前是照样稿预览窗口 .pv 画的接入示意窗口（服务地址、三把示例密钥、朱色小开关），10-30 删了。
   10-30 晚 Leon 在首页样稿（~/claude-workbench/outputs/2026-10-30-火力坊首页样稿/，_src/make.cjs 生成）里「用方案乙」：
   首屏照驭火LAB 首页左右排（.page-hero.home-hero，见下面第一段），四个卖点和六张模型卡都进了首屏；托管一节左边只留三条；第三屏「支持的模型」连它自己的样式一起删了。
   原来首屏居中（.page-hero.is-center，基本写法在 site-works.css）的大标题、两级小字 .title-sub 的样式随之删掉；居中版的写法在 git 历史里。
   名字以 p- 开头：tools/serif-font.py 只读 fyro.css、fig.css 和 p-*.css 里的宋体选择器（质感版这页不再用宋体）。 */

/* ---------- 首屏（10-30 晚方案乙，同驭火LAB 首页 .hero 的左右排；样稿 make.cjs 的 .mk-split、.mk-bw、.mk-cells.is-grid、.mk-wall 改成这里的名字） ----------
   左边 .home-hero-copy：两行大标题（10-30 晚去掉上面的小字「FyroWorks · 火力坊」，页头 logo 下已有）「大模型接入 / 企业级服务」（第二行「企业级」底下一笔朱色 .brush，落在最后一行，下面是空的）、导语、四个卖点 2×2（.home-pillars：墨色图标块 + 词 + 一句）、「会员登录」；
   右边 .home-hero-models：小字「支持的模型」、六张模型卡 3×2（原来第三屏的 .home-model 原样搬来，卡面常显底色和细边）、「以及更多模型。」。
   宽屏左 6 份、右 5 份，上下居中；900 以下上下排，文字在上、模型在下，都靠左。
   满屏：连页头占满一屏，内容上下居中，底下正中三点 .hero-cue；底边距（--hero-pb）给三点留位置，内容不压它。
   1440×900、1440×780、1280×720、390×844 四档三点都在第一屏里；手机（639 以下）按真 iPhone Safari 能看见的高度收进一屏，字号、间距、图标块收一档，模型卡改一行六张小卡（见那一段）。 */
.page-hero.home-hero { --hero-pb: clamp(92px, 12vh, 112px); display: flex; flex-direction: column; justify-content: center; min-height: calc(100svh - var(--header-h)); padding-block: clamp(28px, 6vh, 72px) var(--hero-pb); }
.home-hero .page-hero-text { display: grid; grid-template-columns: minmax(0, 6fr) minmax(0, 5fr); gap: 40px clamp(40px, 5vw, 88px); align-items: center; max-width: none; }
.page-hero.home-hero h1 { font-size: clamp(44px, 5vw, 70px); font-weight: var(--w-display); letter-spacing: var(--track-display); line-height: 1.2; }
.home-hero .page-lead { max-width: none; margin-top: 30px; font-size: 17px; line-height: 1.65; }
.home-hero .actions { margin-top: 34px; }

/* 朱笔：照驭火LAB p-home.css 的 .hero h1 .w-cs / .brush（Leon 10-29「标语用朱笔」），进页面时从左往右写出来；这里压在字底下（z-index -1，.w-ent 自成一层）。
   写法跟驭火LAB 差一点：不用 forwards、用 backwards（等的那 .35s 里先藏着），写完动画就结束了，document.getAnimations() 里不留着它，样子一样。
   终点要写成 inset(0 0 0 0)、不能省成 none：inset 到 none 不能插值，会在一半时一下子冒出来。减少动态效果时不写，直接显示 */
.home-hero h1 .w-ent { position: relative; isolation: isolate; }
.home-hero h1 .brush { position: absolute; z-index: -1; left: -5%; bottom: -.2em; width: 110%; height: .34em; fill: var(--accent); animation: hero-brush .7s cubic-bezier(.6, .05, .3, 1) .35s backwards; }
@keyframes hero-brush { from { clip-path: inset(0 100% 0 0); } to { clip-path: inset(0 0 0 0); } }

/* 四个卖点（Leon 10-30 晚「快、稳定、经济、安全」）：两列两行，每格墨色图标块（同托管一节的 .home-icon）+ 词 + 一句 */
.home-pillars { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 20px 28px; max-width: 520px; margin-top: 32px; }
.home-pillars li { display: flex; align-items: center; gap: 14px; }
.home-pillars b { display: block; color: var(--ink); font-size: 17px; font-weight: var(--w-strong); letter-spacing: 0.04em; line-height: 1.4; }
.home-pillars b + span { display: block; margin-top: 1px; color: var(--ink-soft); font-size: 13.5px; line-height: 1.55; }

/* 支持的模型（10-30 晚从第三屏搬来，原来是样稿「04 模型墙」.model）：一张卡一个（标识 + 模型名 + 厂商），三列两行，各卡一样高、内容上下居中。
   卡面常显：底色（--surface-card）和细边。悬停：细边加深、短而软的影浮出来，卡里一团淡光跟着指针，标识、模型名、厂商一组一起微微倾斜、挪一点
   （works-home.js 写 --mx/--my/--tx/--ty/--rx/--ry；Leon 10-27「模型logo和名字应该是一起随动的」）。
   卡宽不到 170px，「Seedream · Seedance」一律折成两行，中点换成换行（.home-model-dot），两个名字上下排 */
.home-hero-models { min-width: 0; text-align: center; }
.home-models-title { color: var(--muted); font-size: 12px; font-weight: var(--w-label); letter-spacing: var(--track-eyebrow); line-height: 1.5; }
.home-model-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); grid-auto-rows: 1fr; gap: 12px; margin-top: 18px; }
.home-model {
  position: relative;
  isolation: isolate;
  display: flex;
  min-width: 0;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 22px 6px 18px;
  border: 1px solid var(--edge-soft);
  border-radius: var(--r-xl);
  background: var(--surface-card);
  box-shadow: var(--shadow-card);
  text-align: center;
  transition: border-color 180ms ease, box-shadow 180ms ease;
}
.home-model::before { content: ""; position: absolute; inset: 0; z-index: -1; border-radius: inherit; background: radial-gradient(110px circle at var(--mx, 50%) var(--my, 50%), rgb(var(--ink-rgb) / 0.05), transparent 75%); opacity: 0; transition: opacity 180ms ease; }
.home-model-body { display: flex; width: 100%; min-width: 0; flex-direction: column; align-items: center; transition: transform 200ms ease-out; }
.home-model-mark { width: 34px; height: 34px; margin-block: 7px; color: var(--ink); }   /* 占位同样稿的 48px 格 */
.home-model-name { margin-top: 10px; color: var(--ink); font-size: 14.5px; font-weight: var(--w-strong); letter-spacing: var(--track-tight); line-height: 1.35; }
.home-model-dot { display: block; height: 0; overflow: hidden; }
.home-model-maker { margin-top: 2px; color: var(--muted); font-size: 12.5px; line-height: 1.5; }
@media (hover: hover) and (pointer: fine) {
  .home-model:hover { border-color: var(--edge); box-shadow: var(--shadow-card-hover); }
  .home-model:hover::before { opacity: 1; }
  .home-model:hover .home-model-body { transform: perspective(600px) translate3d(var(--tx, 0px), calc(-2px + var(--ty, 0px)), 0) rotateX(var(--rx, 0deg)) rotateY(var(--ry, 0deg)) scale(1.04); }
}
.home-models-more { margin-top: 18px; color: var(--muted); font-size: 13px; }

/* 900 以下上下排：文字在上、模型在下，都靠左；模型那块最宽 560px。上下排比左右排高，顶边距、模型卡的内边距和标识收一点（768×1024 三点在第一屏里） */
@media (max-width: 899px) {
  .page-hero.home-hero { padding-top: clamp(24px, 4vh, 48px); }
  .home-hero .page-hero-text { grid-template-columns: minmax(0, 1fr); gap: 32px; }
  .home-hero-models { max-width: 560px; text-align: left; }
  .home-model { padding: 16px 6px 14px; }
  .home-model-mark { width: 28px; height: 28px; margin-block: 0; }
  .home-model-name { margin-top: 8px; }
}
/* 手机（639 以下）：首屏要收进一屏。10-30 晚 Leon「手机上改小」：按真 iPhone 的 Safari 量（地址栏、工具栏占掉一截，390 宽时看得见的只有约 664 高），
   不是按 390×844 的浏览器窗口——大标题 34px，导语、卖点、按钮上下间距再收一档，卖点图标块 28px，按钮从大号改常规高度；
   模型卡改成一行六张小卡（标识 22px + 10.5px 的名字，不要厂商那行，各卡一样高），原来 3×2 太占高度。
   底边距 80px 给三点留位置（三点的盒子贴底 14–25px、高 56px） */
@media (max-width: 639px) {
  .page-hero.home-hero { --hero-pb: 80px; padding-top: 12px; }
  .home-hero .page-hero-text { gap: 22px; }
  .page-hero.home-hero h1 { font-size: 34px; line-height: 1.16; }
  .home-hero .page-lead { margin-top: 16px; font-size: 14px; line-height: 1.55; }
  .home-pillars { gap: 10px 14px; margin-top: 16px; }
  .home-pillars li { gap: 9px; }
  .home-pillars .home-icon { width: 28px; height: 28px; border-radius: var(--r-md); }
  .home-pillars .home-icon .i { width: 14px; height: 14px; }
  .home-pillars b { font-size: 14px; line-height: 1.35; }
  .home-pillars b + span { margin-top: 0; font-size: 12px; line-height: 1.45; }
  .home-hero .actions { margin-top: 18px; }
  .home-hero .btn-lg { min-height: 42px; padding-block: 0.5em; font-size: 15px; }
  .home-model-grid { grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 5px; margin-top: 10px; }
  .home-model { padding: 9px 2px 8px; border-radius: var(--r-lg); }
  .home-model-mark { width: 22px; height: 22px; margin-block: 0; }
  .home-model-name { margin-top: 5px; font-size: 10.5px; line-height: 1.25; letter-spacing: 0; }
  .home-model-maker { display: none; }
  .home-models-more { margin-top: 8px; font-size: 12px; }
}
/* 390 以下一张小卡只剩约 50px 宽，「DeepSeek」顶到两边，名字再小半号 */
@media (max-width: 389px) { .home-model-name { font-size: 10px; } }
/* 系统设了「减少动态效果」：朱笔不写，直接显示；模型卡悬停不过渡、不倾斜 */
@media (prefers-reduced-motion: reduce) {
  .home-hero h1 .brush { animation: none; }
  .home-model-body, .home-model::before { transition: none; }
  .home-model:hover .home-model-body { transform: none; }
}

/* ---------- 首屏底下的下滑提示：照驭火LAB site/src/static/p-home.css 的 .hero-cue（Leon 10-29 定的三点），一字不改 ----------
   竖着三颗 6px 的点，从上往下依次亮，最下面一颗是朱色；点它滑到托管一节；往下滚了就淡掉（works-home.js 加 .is-gone），同时把动画撤掉，回到顶上再出来、再亮 */
.hero-cue { position: absolute; left: 50%; bottom: clamp(14px, 3vh, 30px); translate: -50% 0; display: flex; align-items: center; justify-content: center; width: 44px; height: 56px; color: var(--ink-soft); transition: opacity .3s ease, color .2s ease; }
@media (hover: hover) and (pointer: fine) { .hero-cue:hover { color: var(--ink); } }
.hero-cue.is-gone { opacity: 0; pointer-events: none; }
.cue-dots { display: flex; flex-direction: column; align-items: center; gap: 8px; }
.cue-dots i { width: 6px; height: 6px; border-radius: 50%; background: currentColor; opacity: .3; animation: cue-dot 1.8s ease-in-out infinite; }
.cue-dots i:nth-child(2) { animation-delay: .22s; }
.cue-dots i:nth-child(3) { animation-delay: .44s; background: var(--accent); }
.hero-cue.is-gone .cue-dots i { animation: none; }
@keyframes cue-dot { 0%, 55%, 100% { opacity: .3; } 22% { opacity: 1; } }
@media (prefers-reduced-motion: reduce) { .cue-dots i { animation: none; } .cue-dots i:first-child { opacity: 1; } }

/* ---------- 托管：左文字、右接入页签（样稿「03 接入」：.eyebrow、.h2、.lead、.features）；10-30 晚起左边三条（前四条挪进首屏） ---------- */
.sec.home-hosted { padding-bottom: clamp(48px, 5.5vw, 72px); }
.home-split { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 40px clamp(40px, 5.5vw, 64px); align-items: center; }
.home-kicker { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 14px; color: var(--muted); font-size: 12px; font-weight: var(--w-label); letter-spacing: var(--track-eyebrow); line-height: 1.5; }
.home-kicker .status-pill { letter-spacing: var(--track-label); }
.home-title { margin-top: 12px; color: var(--ink); font-family: var(--font-head); font-size: clamp(28px, 3.2vw, 38px); font-weight: var(--w-title); letter-spacing: var(--track-title); line-height: 1.22; text-wrap: balance; }
.home-lead { max-width: 34em; margin-top: 14px; color: var(--ink-soft); font-size: 16px; line-height: 1.75; text-wrap: pretty; }
.home-points { display: grid; gap: 22px; margin-top: 34px; }
.home-points li { display: flex; gap: 16px; align-items: flex-start; }
/* 图标方块：样稿的墨色圆角方块 .tile（夜里是骨白的珍珠方块，图标跟着换深）；首屏四个卖点（.home-pillars）也用它 */
.home-icon { display: inline-grid; flex-shrink: 0; place-items: center; width: 40px; height: 40px; border-radius: var(--r-lg); color: var(--on-ink); background: var(--surface-ink); box-shadow: var(--ink-sheen), 0 1px 2px rgb(var(--shadow-rgb) / 0.12); }
.home-icon .i { width: 19px; height: 19px; }
.home-points b { display: block; color: var(--ink); font-size: 16px; font-weight: var(--w-strong); letter-spacing: var(--track-tight); line-height: 1.5; }
.home-points b + span { display: block; margin-top: 3px; color: var(--ink-soft); font-size: 14px; line-height: 1.7; text-wrap: pretty; }
.home-actions { gap: 12px 22px; margin-top: 36px; }

/* ---------- 接入页签（10-30）：照 hitk 的 HitkIntegrations 和火力坊内核的 FyroIntegrations / FyroTerminal / FyroSlidingIndicator ----------
   上面一行小标题，一条凹槽里四个页签（选中那格浮起来，.home-int-ind 由 works-home.js 量好位置后滑过去），下面一扇窗（fyro.css 的 .window）、一句说明。
   各面板、各句说明都叠在同一格里（grid-area 1/1），按最高的留高度，切页签页面不跳。只用 transition，静止时没有在跑的动画。 */
.home-int { justify-self: end; width: 100%; min-width: 0; max-width: 540px; }
.home-int-title { margin-bottom: 14px; color: var(--ink); font-family: var(--font-sans); font-size: 14px; font-weight: var(--w-strong); letter-spacing: var(--track-tight); line-height: 1.5; }
/* 页签：凹下去的槽（同 fyro.css 的 .seg）。一格的宽至少放得下自己的字，放得下时四格一样宽 */
.home-int-tabs { position: relative; isolation: isolate; display: grid; grid-auto-flow: column; grid-auto-columns: minmax(max-content, 1fr); gap: 4px; margin-bottom: 16px; padding: 4px; border: 1px solid var(--edge-soft); border-radius: var(--r-lg); background: var(--surface-well); box-shadow: var(--shadow-well); }
.home-int-tabs [role="tab"] { position: relative; z-index: 1; display: flex; min-width: 0; align-items: center; justify-content: center; gap: 7px; padding: 9px 10px; border: 1px solid transparent; border-radius: var(--r-sm); color: var(--muted); font-size: 12.5px; font-weight: var(--w-strong); line-height: 1.25; white-space: nowrap; transition: color var(--t-base) ease-out; }
.home-int-tabs [role="tab"][aria-selected="true"] { color: var(--ink); }
@media (hover: hover) and (pointer: fine) { .home-int-tabs [role="tab"]:hover { color: var(--ink); } }
.home-int-tabs [role="tab"] > span:last-child { overflow: hidden; text-overflow: ellipsis; }
.home-int-tabs .i { width: 15px; height: 15px; }
.home-int-logo { flex: none; width: 16px; height: 16px; object-fit: contain; }
/* Magpie 的标识当遮罩用，颜色跟着字色（同内核 tokens.css 的 .fyro-magpie-mark） */
.home-magpie-mark { display: inline-block; background-color: currentColor; -webkit-mask: url("works-magpie.svg") center / contain no-repeat; mask: url("works-magpie.svg") center / contain no-repeat; }
/* 浮起的那格（内核 FyroSlidingIndicator 的 raised）：量好以前不显示，由选中的页签自己画同样的格子；第一次就位不滑，下一帧才开过渡 */
.home-int-ind { position: absolute; z-index: 0; top: 0; left: 0; width: 0; height: 0; visibility: hidden; border: 1px solid var(--edge-strong); border-radius: var(--r-sm); background: var(--surface-raised); box-shadow: var(--shadow-raise); pointer-events: none; }
.home-int-ind.is-ready { visibility: visible; }
.home-int-ind.is-animated { transition: translate var(--t-slide) var(--ease-out), width var(--t-slide) var(--ease-out), height var(--t-slide) var(--ease-out); }
.home-int-tabs:not(:has(> .home-int-ind.is-ready)) [aria-selected="true"] { border-color: var(--edge-strong); background: var(--surface-raised); box-shadow: var(--shadow-raise); }

/* 窗口：fyro.css 的 .window；命令行那页标题栏跟着终端换深色 */
.home-int-win .window-title { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.home-int-win .window-meta { flex: none; }
.home-int-win.is-terminal .window-bar { border-color: var(--term-line); background: var(--term-bar); color: var(--term-dim); }
.home-int-win.is-terminal .window-title { color: var(--term-ink); }
.home-int-win.is-terminal .window-dots i { background: var(--term-dim); opacity: 0.55; }
.home-int-stage, .home-int-captions { display: grid; grid-template-columns: minmax(0, 1fr); }
.home-int-panel { grid-area: 1 / 1; min-width: 0; visibility: hidden; opacity: 0; translate: 0 4px; transition: opacity var(--t-base) ease, translate var(--t-base) ease, visibility 0s linear var(--t-base); }
.home-int-panel.is-active { visibility: visible; opacity: 1; translate: 0 0; transition: opacity var(--t-base) ease, translate var(--t-base) ease; }
.home-int-panel > * { height: 100%; }
.home-int-panel:focus-visible { outline: 2px solid var(--focus-ring); outline-offset: -2px; }
.home-int-captions { margin-top: 16px; }
.home-int-captions p { grid-area: 1 / 1; visibility: hidden; color: var(--muted); font-size: 13px; line-height: 1.75; text-wrap: pretty; }
.home-int-captions p.is-active { visibility: visible; }

/* 命令行（内核 FyroTerminal）：不管昼夜都是深色；格式切换是几枚扁平的小签，选中的提亮一档 */
.home-term { display: flex; min-height: 380px; min-width: 0; flex-direction: column; background: var(--term-bg); color: var(--term-ink); }
.home-term-bar { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 8px 12px; padding: 14px 16px 12px 20px; border-bottom: 1px solid var(--term-line); }
.home-term-switch { display: flex; flex-wrap: wrap; gap: 4px; }
.home-term-switch button, .home-term-copy { display: inline-flex; min-height: 28px; align-items: center; gap: 6px; padding: 3px 9px; border-radius: var(--r-xs); color: var(--term-dim); font-family: var(--font-sans); font-size: 11.5px; line-height: 1.4; transition: color var(--t-base) ease-out, background-color var(--t-base) ease-out; }
.home-term-switch button[aria-pressed="true"] { background: rgb(255 255 255 / 0.08); box-shadow: inset 0 1px 0 rgb(255 255 255 / 0.06); color: var(--term-ink); }
@media (hover: hover) and (pointer: fine) {
  .home-term-switch button:hover, .home-term-copy:hover { color: var(--term-ink); }
  .home-term-copy:hover { background: rgb(255 255 255 / 0.06); }
}
.home-term-copy .i { width: 14px; height: 14px; }
.home-term-copy .i-done, .home-term-copy.is-done .i-copy { display: none; }
.home-term-copy.is-done .i-done { display: block; }
.home-term :is(button, pre):focus-visible { outline: 2px solid var(--term-dim); outline-offset: 2px; }
.home-term-code { flex: 1; min-width: 0; margin: 0; padding: 18px 20px 22px; overflow-x: auto; color: var(--term-ink); font-family: var(--font-mono); font-size: 12px; line-height: 1.85; white-space: pre; tab-size: 2; }
.home-term-code .t-comment { color: var(--term-dim); }
.home-term-code .t-url { color: var(--term-url); }
.home-term-code .t-var { color: var(--term-accent); }
.home-term-code .t-str { color: var(--term-str); }

/* CC Switch、Magpie、企业专属网关三页的示意（内核 FyroIntegrations 的 .app-preview） */
.home-app { display: flex; min-height: 380px; min-width: 0; flex-direction: column; padding: 20px 24px 22px; color: var(--ink); font-size: 12px; line-height: 1.5; }
.home-app .is-mono { font-family: var(--font-mono); font-size: 11.5px; }
.home-app .is-muted { color: var(--muted); }
.home-app-strip { display: flex; flex-wrap: wrap; gap: 4px; margin-bottom: 18px; color: var(--muted); font-size: 11px; }
.home-app-strip span { padding: 5px 10px; border-radius: var(--r-xs); }
.home-app-strip .is-on { background: var(--surface-ink); box-shadow: var(--ink-sheen); color: var(--on-ink); }
.home-app-heading { margin-bottom: 14px; font-size: 13.5px; font-weight: var(--w-strong); }
.home-app-fields { display: grid; gap: 11px; }
.home-app-fields dt { margin-bottom: 4px; color: var(--muted); font-size: 11px; }
.home-app-fields dd { display: flex; min-height: 34px; align-items: center; gap: 8px; padding: 6px 10px; border: 1px solid var(--edge); border-radius: var(--r-sm); background: var(--field); box-shadow: var(--shadow-well); overflow-wrap: anywhere; }
/* 印章图四周有透明边（看得见的印面约占八成）：21px 的图，印面约 16px */
.home-app-fseal { flex: none; width: 21px; margin: -2px -2px -2px -3px; }
.home-app-note { display: flex; align-items: center; gap: 7px; margin-top: auto; padding-top: 16px; color: var(--muted); font-size: 11.5px; }
.home-app-note .i { width: 14px; height: 14px; color: var(--pine); }
/* Magpie 上面那条凹槽里浮起「供应商」 */
.home-app-nav { display: flex; align-self: flex-start; gap: 3px; margin-bottom: 18px; padding: 3px; border: 1px solid var(--edge-soft); border-radius: var(--r-sm); background: var(--surface-well); box-shadow: var(--shadow-well); color: var(--muted); font-size: 11px; }
.home-app-nav span { padding: 4px 10px; border: 1px solid transparent; border-radius: var(--r-xs); }
.home-app-nav .is-on { border-color: var(--edge-strong); background: var(--surface-raised); box-shadow: var(--shadow-raise); color: var(--ink); font-weight: var(--w-strong); }
/* 供应商卡、模型来源卡和下面的列表：一张更白的卡 */
.home-app-card, .home-app-list { border: 1px solid var(--edge-soft); border-radius: var(--r-md); background: var(--sheet-hi); }
:root[data-theme="dark"] :is(.home-app-card, .home-app-list) { background: var(--sheet); }
.home-app-card { display: flex; min-width: 0; align-items: center; gap: 12px; padding: 14px; }
/* 34px 的图，印面约 26px（同内核的 26px 印章） */
.home-app-seal { flex: none; width: 34px; margin: -4px -2px -4px -4px; }
.home-app-name { display: flex; min-width: 0; flex-direction: column; gap: 3px; font-size: 13.5px; }
.home-app-name b { font-weight: var(--w-strong); }
.home-app-name .is-mono { overflow-wrap: anywhere; }
.home-app-ok { flex: none; width: 16px; height: 16px; margin-left: auto; color: var(--pine); stroke-width: 2; }
.home-app-link { display: flex; height: 34px; flex-direction: column; align-items: center; justify-content: center; color: var(--muted); }
.home-app-link span { height: 9px; border-left: 1px dashed currentColor; }
.home-app-link .i { width: 14px; height: 14px; }
.home-app-label { margin: 0 0 6px; color: var(--muted); font-size: 11px; }
.home-app-list { overflow: hidden; }
.home-app-row { display: flex; align-items: center; justify-content: space-between; gap: 8px; padding: 10px 12px; }
.home-app-row + .home-app-row { border-top: 1px solid var(--edge-soft); }
.home-app-model, .home-app-key, .home-app-dept { display: flex; min-width: 0; align-items: center; gap: 8px; white-space: nowrap; }
.home-app-dept { gap: 9px; }
.home-app-key { gap: 12px; }
/* 模型标识、钥匙的小方块 */
.home-app-mark { display: grid; flex: none; place-items: center; width: 22px; height: 22px; border: 1px solid var(--edge-soft); border-radius: 6px; background: var(--surface-well); color: var(--ink); }
.home-app-mark svg { width: 13px; height: 13px; }
/* 「已启用」：前面一个松绿的小点 */
.home-app-on { display: inline-flex; align-items: center; gap: 6px; color: var(--ink-soft); font-size: 11.5px; }
.home-app-on::before { content: ""; flex: none; width: 6px; height: 6px; border-radius: 50%; background: var(--pine); }

@media (max-width: 1023px) {
  .home-split { grid-template-columns: minmax(0, 1fr); }
  .home-int { justify-self: start; max-width: 600px; }
}
/* fyro.css 的手机版式把 h3 一律压成 20px（!important）；这一行是页签上面的小标题（hitk 的 text-sm），手机上照旧 14px */
@media (max-width: 639px) { .home-int-title { font-size: 14px !important; line-height: 1.5 !important; } }
/* 手机：四个页签一行放下——压内边距、字号和图标，各格按自己的字宽排（放不下时最宽的那格先收，不会顶出槽外）；
   390 以下（不到 iPhone 的 390）收起页签里的图标 */
@media (max-width: 479px) {
  .home-int-tabs { grid-auto-columns: auto; gap: 2px; padding: 3px; }
  .home-int-tabs [role="tab"] { gap: 4px; padding: 7px 5px; font-size: 11.5px; }
  .home-int-tabs .i, .home-int-logo { width: 13px; height: 13px; }
  .home-app { padding: 16px; }
  .home-term-bar { padding: 12px 12px 10px 14px; }
  /* 三枚格式签和复制放一行：复制只留图标（读屏照旧读「复制这段命令 / 已复制」，复制好了图标换成勾） */
  .home-term-switch { gap: 2px; }
  .home-term-switch button { padding-inline: 7px; }
  .home-term-copy { padding-inline: 7px; }
  .home-term-copy span { display: none; }
  .home-term-code { padding: 16px 14px 18px; font-size: 11.5px; }
}
@media (max-width: 389px) {
  .home-int-tabs .i, .home-int-logo { display: none; }
}
@media (prefers-reduced-motion: reduce) {
  .home-int-panel, .home-int-panel.is-active, .home-int-tabs [role="tab"], .home-int-ind.is-animated, .home-term-switch button, .home-term-copy { transition: none; }
  .home-int-panel { translate: none; }
}