/* funnyaibox · 全站样式。白纸、墨字，品牌橙只给 f 盒子、hover 和当前导航；产品卡用各自的品牌色。 */
:root {
  --paper: #ffffff;
  --ink: #0a0a0a;
  --ink-2: #525252;
  --ink-3: #737373;
  --line: #e5e5e5;
  --fill: #f5f5f5;
  --brand: #c2410c;
  --brand-2: #9a3412;
  --sans: "Inter", -apple-system, BlinkMacSystemFont, "PingFang SC", "Hiragino Sans GB", "Noto Sans SC", "Microsoft YaHei", sans-serif;
  --serif: "Songti SC", "STSong", "Noto Serif SC", "Source Han Serif SC", "SimSun", Georgia, serif;
  --mono: ui-monospace, "SF Mono", Menlo, Consolas, monospace;
  /* 一列居中。拼版也收在这一列里，所以左边只有一条轴。 */
  --page: 1240px;
  --gutter: 44px;
  --tile-pad: 36px;
}

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-padding-top: 24px; }
body {
  margin: 0;
  background: var(--paper);
  color: var(--ink);
  font-family: var(--sans);
  font-size: 16px;
  line-height: 1.7;
  -webkit-font-smoothing: antialiased;
  font-variant-numeric: tabular-nums;
}
a { color: inherit; text-decoration: none; }
a, h3, h4 { transition: color .12s ease; }
:focus-visible { outline: 2px solid var(--brand); outline-offset: 3px; }
@media (prefers-reduced-motion: reduce) { * { transition: none !important; animation: none !important; } }

.wrap { max-width: var(--page); margin: 0 auto; padding-left: var(--gutter); padding-right: var(--gutter); }

/* 顶栏。当前项不用细线，用标志里那块「中心块」来标：一块实心橙方块立在字前，
   意思和标志一样——「此刻在这」。方块绝对定位挂在项目左侧的间距里（离自己的字 8px、
   离前一项 15px），不占行内空间，所以三项文字的间距始终均匀；hover 时以墨色淡入。 */
.top { display: flex; align-items: center; justify-content: space-between; padding-top: 24px; padding-bottom: 24px; }
.brand { display: inline-flex; align-items: center; gap: 10px; font-weight: 700; letter-spacing: -0.01em; }
.mark { width: 26px; height: 26px; display: block; flex: none; }
.mark-core { fill: var(--brand); }
.top nav { display: flex; gap: 30px; font-size: 15px; font-weight: 500; color: var(--ink-2); }
.top nav a { position: relative; display: inline-block; padding: 8px 0; line-height: 1; }
.top nav a::before {
  content: ""; position: absolute; left: -15px; top: 50%; width: 7px; height: 7px; margin-top: -3.5px; border-radius: 0;
  background: var(--ink); opacity: 0; transform: scale(.6);
  transition: opacity .15s ease, transform .15s ease, background-color .15s ease;
}
.top nav a:hover { color: var(--ink); }
.top nav a:hover::before { opacity: .3; transform: none; }
.top nav a[aria-current="page"] { color: var(--ink); font-weight: 600; }
.top nav a[aria-current="page"]::before { background: var(--brand); border-radius: 0; opacity: 1; transform: none; }

/* 首屏 */
.hero { padding-top: 64px; padding-bottom: 36px; }
/* 700 不用 800：苹方最粗只到 Semibold，Inter 800 的「AI」会比旁边的汉字重一档。
   -0.025em：汉字经不起 -0.04em 那么紧。halt：64px 下全角逗号会留出半个字的洞，收成半宽。 */
.hero h1 {
  margin: 0 0 22px; font-size: min(clamp(38px, 4.4vw, 64px), 7.4vh); font-weight: 700;
  letter-spacing: -0.025em; line-height: 1.2; max-width: 15em; text-wrap: balance;
  font-feature-settings: "halt";
}
.hero .lede { margin: 0; font-size: 18px; line-height: 1.65; color: var(--ink-2); max-width: 40em; }

/* 分区 */
.section { padding-top: 64px; }
.section-head { display: flex; align-items: baseline; gap: 16px; margin-bottom: 20px; }
.section-head h2 { margin: 0; font-size: 22px; font-weight: 700; letter-spacing: -0.02em; }
.section-head p { margin: 0; font-size: 15px; color: var(--ink-3); }
.section-head .more { margin-left: auto; font-size: 14px; color: var(--ink-3); }
.section-head .more:hover { color: var(--brand); }
.page-head { padding-top: 32px; padding-bottom: 24px; }
.page-head h1 { margin: 0; font-size: clamp(30px, 3.6vw, 36px); font-weight: 700; letter-spacing: -0.03em; line-height: 1.2; font-feature-settings: "halt"; }
.page-head p { margin: 8px 0 0; color: var(--ink-2); max-width: 40em; }

/* 产品拼版：长短不一的矩形上下左右咬合成一个完整的大矩形（蒙德里安式）。
   6 列网格，每块占几列几行由 products.yaml 的 tile 决定，经 --cols / --rows 传进来。
   零间距、零圆角；hover 或聚焦时翻转露出背面。 */
.mosaic {
  display: grid;
  grid-template-columns: repeat(6, minmax(0, 1fr));
  grid-auto-rows: clamp(150px, 17vh, 200px);
  grid-auto-flow: dense;
  gap: 0;
}
.tile {
  position: relative; display: block; border-radius: 0; color: var(--card-fg);
  grid-column: span var(--cols, 1);
  grid-row: span var(--rows, 1);
}
/* 翻起来的那一块要压在邻块之上，否则 3D 旋转会被邻块切边 */
.tile:hover, .tile:focus-within { z-index: 2; }
.tile-inner {
  position: absolute; inset: 0;
  transform-style: preserve-3d;
  transition: transform .6s cubic-bezier(.2, .75, .2, 1);
}
.face {
  position: absolute; inset: 0;
  display: flex; flex-direction: column; justify-content: space-between; gap: 18px;
  padding: clamp(18px, 2.5vh, 28px); border-radius: 0;
  background: var(--card-bg);
  backface-visibility: hidden; -webkit-backface-visibility: hidden;
  overflow: hidden;
}
.face--back { transform: rotateY(180deg); }
@media (hover: hover) {
  .tile:hover .tile-inner, .tile:focus-within .tile-inner { transform: rotateY(180deg); }
}

/* 占位块：一块还没东西的格子。
   骨架跟真产品对齐——标志在上、名字在下——所以空格子和填满的格子结构同形。
   用的是品牌标志的框角，但**没有中心块**：标志里那一块表示「它此刻的状态」，
   还没做的东西没有状态。hover 时中心块以品牌橙淡入，意思是位置留着。 */
.tile--slot {
  display: flex; flex-direction: column; justify-content: space-between; gap: clamp(8px, 1.6vh, 16px);
  padding: clamp(16px, 2.2vh, 24px);
  background: var(--card-bg);
  box-shadow: inset 0 0 0 1px rgba(10, 10, 10, .05);
  transition: filter .2s ease;
}
.slot-mark { width: clamp(22px, 3vh, 30px); height: clamp(22px, 3vh, 30px); display: block; flex: none; opacity: .45; transition: opacity .2s ease; }
.slot-core { fill: var(--brand); opacity: 0; transition: opacity .2s ease; }
.slot-label { font-size: 13px; font-weight: 500; letter-spacing: .02em; transition: opacity .2s ease; opacity: .9; }
.tile--slot:hover { filter: brightness(.965); }
.tile--slot:hover .slot-mark { opacity: .8; }
.tile--slot:hover .slot-core { opacity: 1; }
.tile--slot:hover .slot-label { opacity: 1; }
/* 1x1 的小格子放不下 30px 的框角，收一档 */
.tile--slot[style*="--cols:1"][style*="--rows:1"] { padding: 20px; }
.tile--slot[style*="--cols:1"][style*="--rows:1"] .slot-mark { width: 24px; height: 24px; }

.tile-logo { width: clamp(32px, 4.4vh, 44px); height: clamp(32px, 4.4vh, 44px); display: block; flex: none; }
.tile-logo svg { width: 100%; height: 100%; display: block; }
.glyph { display: grid; place-items: center; width: 100%; height: 100%; font-size: 0.72em; font-weight: 800; letter-spacing: -0.05em; line-height: 1; }
.tile-text { display: block; }
.tile-name b { display: block; font-size: min(25px, 3.1vh); font-weight: 800; letter-spacing: -0.035em; line-height: 1.18; }
.tile-name small { display: block; margin-top: 7px; font-size: 13px; line-height: 1.5; opacity: .8; }
.tile-summary { display: block; margin-top: clamp(8px, 1.4vh, 14px); font-size: min(14px, 1.85vh); line-height: 1.6; opacity: .88; }
.tile[style*="--cols:3"] .tile-logo { width: clamp(40px, 5.6vh, 56px); height: clamp(40px, 5.6vh, 56px); }
.tile[style*="--cols:3"] .tile-name b { font-size: min(36px, 4.4vh); }
.tile[style*="--cols:3"] .tile-name small { font-size: 15px; }
.tile[style*="--cols:3"] .tile-summary { font-size: min(15.5px, 2vh); max-width: 30em; }
.tile-back-name { display: block; font-size: 20px; font-weight: 700; letter-spacing: -0.02em; opacity: .55; }
.tile-meta { display: flex; flex-direction: column; gap: 10px; }
.tile-stack { display: block; font-family: var(--mono); font-size: 11px; line-height: 1.7; opacity: .68; }
.tile-foot { display: flex; justify-content: space-between; align-items: center; gap: 10px; font-size: 12px; opacity: .92; }
.chip { padding: 5px 10px; border-radius: 999px; font-size: 12px; font-weight: 600; background: rgba(128, 128, 128, .22); background: color-mix(in srgb, var(--card-fg) 14%, transparent); }

/* 首页叙事段 */
.reasons { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 32px; }
.reasons > div { padding-top: 18px; border-top: 2px solid var(--ink); }
.reasons h3 { margin: 0 0 8px; font-size: 17px; font-weight: 700; letter-spacing: -0.01em; }
.reasons p { margin: 0; font-size: 15px; color: var(--ink-2); }
/* 出处行：哪个产品的、走到哪一步。站点自己的规矩是不泛泛而谈。 */
.reasons .reason-src { margin-top: 10px; font-family: var(--mono); font-size: 11.5px; line-height: 1.6; color: var(--ink-3); }

/* 服务：三栏纯文字 */
.services { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 32px; padding-top: 8px; }
.services h3 { margin: 0 0 6px; font-size: 17px; font-weight: 600; }
.services p { margin: 0; font-size: 15px; color: var(--ink-2); }
.cta { margin: 28px 0 0; font-size: 15px; }
.cta a { color: var(--brand); text-decoration: underline; text-underline-offset: 3px; }
.cta a:hover { color: var(--brand-2); }

/* 工具：行 */
.tool { display: grid; grid-template-columns: 200px minmax(0, 1fr) auto; gap: 20px; align-items: baseline; padding: 16px 0; border-top: 1px solid var(--line); }
.tool h3 { margin: 0; font-size: 16px; font-weight: 600; }
.tool p { margin: 0; font-size: 15px; color: var(--ink-2); }
.tool code { font-family: var(--mono); font-size: 12.5px; background: var(--fill); padding: 4px 8px; border-radius: 4px; white-space: nowrap; }
a.tool:hover h3 { color: var(--brand); }

/* 内容列表：一本账。左栏日期与时长，右栏标题与摘要。
   首篇放大，但和其余各行走同一套栏宽（--ledger），标题全落在同一条轴上；
   之前首篇是 block、各行是两栏，量出来标题一个在 100px、一个在 307px，又是两条轴。
   baseline 对齐：日期的基线压在标题首行的基线上。 */
.posts { --ledger: 136px minmax(0, 1fr); border-bottom: 1px solid var(--line); }
.post-meta { margin: 0; display: flex; gap: 14px; font-size: 13px; line-height: 1.5; color: var(--ink-3); font-variant-numeric: tabular-nums; }
.posts .post-meta { flex-direction: column; gap: 2px; }
.post-lead { display: grid; grid-template-columns: var(--ledger); column-gap: 32px; align-items: baseline; padding: 30px 0 32px; border-top: 1px solid var(--line); }
.post-lead h3 { margin: 0 0 10px; font-size: clamp(24px, 2.4vw, 30px); font-weight: 700; letter-spacing: -0.025em; line-height: 1.25; max-width: 22em; text-wrap: balance; font-feature-settings: "halt"; }
.post-lead .post-summary { margin: 0; font-size: 17px; line-height: 1.7; color: var(--ink-2); max-width: 36em; }
.post-row { display: grid; grid-template-columns: var(--ledger); column-gap: 32px; align-items: baseline; padding: 20px 0 22px; border-top: 1px solid var(--line); }
.post-row h3 { margin: 0 0 4px; font-size: 18px; font-weight: 600; letter-spacing: -0.01em; line-height: 1.4; max-width: 30em; }
.post-row .post-summary { margin: 0; font-size: 15px; color: var(--ink-2); max-width: 40em; }
.post-lead:hover h3, .post-row:hover h3 { color: var(--brand); }
.empty { margin: 0; padding: 32px 0; color: var(--ink-3); border-top: 1px solid var(--line); }

/* 关于 */
.about { display: grid; grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); column-gap: 56px; padding-top: 8px; }
.about p { margin: 0 0 1.1em; color: var(--ink-2); }
.principles { margin: 8px 0 0; padding: 0; list-style: none; }
.principles li { padding: 14px 0; border-top: 1px solid var(--line); }
.principles b { display: block; font-weight: 600; color: var(--ink); }
.principles span { font-size: 15px; color: var(--ink-2); }
.quote { margin: 28px 0 0; padding: 0 0 0 20px; border-left: 1px solid var(--line); }
.quote blockquote { margin: 0; font-family: var(--serif); font-size: 19px; line-height: 1.6; }
.quote figcaption { margin-top: 6px; font-size: 13px; color: var(--ink-3); }
.contact { margin: 0; }
.contact div { display: flex; justify-content: space-between; align-items: baseline; gap: 6px 20px; flex-wrap: wrap; padding: 14px 0; border-bottom: 1px solid var(--line); }
.contact div:first-child { border-top: 1px solid var(--line); }
.contact dt { margin: 0; font-size: 14px; color: var(--ink-3); }
.contact dd { margin: 0 0 0 auto; font-size: 15px; text-align: right; }
.contact .dd-en { display: block; margin-top: 2px; font-size: 12px; line-height: 1.45; color: var(--ink-3); }
.contact a:hover { color: var(--brand); }

/* 文章页 */
.article { max-width: 720px; margin: 0 auto; padding: 24px var(--gutter) 0; }
.article .post-meta { margin-bottom: 14px; }
.article h1 { max-width: 20em; margin: 0 0 16px; font-size: clamp(30px, 4.5vw, 38px); font-weight: 700; line-height: 1.25; letter-spacing: -0.025em; text-wrap: balance; font-feature-settings: "halt"; }
.article .summary { margin: 0 0 40px; padding-bottom: 32px; border-bottom: 1px solid var(--line); font-size: 18px; line-height: 1.7; color: var(--ink-2); }
.prose { font-size: 17px; line-height: 1.85; overflow-wrap: anywhere; }
.prose p { margin: 0 0 1.35em; }
.prose h2 { margin: 2.2em 0 0.7em; font-size: 23px; font-weight: 700; line-height: 1.3; letter-spacing: -0.02em; }
.prose h3 { margin: 1.8em 0 0.5em; font-size: 18px; font-weight: 600; line-height: 1.4; }
.prose a { color: var(--brand); text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 3px; }
.prose a:hover { color: var(--brand-2); }
.prose strong { font-weight: 600; }
.prose ul, .prose ol { margin: 0 0 1.35em; padding-left: 1.4em; }
.prose li { margin-bottom: 0.35em; }
.prose li::marker { color: var(--ink-3); }
.prose blockquote { margin: 1.6em 0; padding: 2px 0 2px 20px; border-left: 1px solid var(--line); font-family: var(--serif); font-size: 19px; line-height: 1.7; color: var(--ink-2); }
.prose blockquote p { margin: 0; }
.prose code { font-family: var(--mono); font-size: 0.88em; background: var(--fill); padding: 2px 6px; border-radius: 4px; }
.prose pre { margin: 1.6em 0; padding: 18px 20px; background: var(--fill); overflow-x: auto; border-radius: 8px; font-size: 14px; line-height: 1.6; }
.prose pre code { background: transparent; padding: 0; font-size: inherit; }
.prose hr { border: 0; height: 1px; background: var(--line); margin: 2.4em 0; }
.prose img { max-width: 100%; height: auto; }
.prose table { border-collapse: collapse; width: 100%; margin: 0 0 1.35em; font-size: 15px; }
.prose th, .prose td { text-align: left; padding: 8px 12px 8px 0; border-bottom: 1px solid var(--line); vertical-align: top; }
.prose th { font-weight: 600; }
/* 法律页。条款读的是条目，不是段落，行比文章短一截。 */
.legal { max-width: 720px; margin: 0 auto; padding-bottom: 16px; }
.legal > :first-child { margin-top: 0; }
.page-legal .page-head { max-width: 720px; margin-left: auto; margin-right: auto; }

.article-foot { margin-top: 56px; padding-top: 20px; border-top: 1px solid var(--line); font-size: 14px; }
.article-foot a:hover { color: var(--brand); }

/* 页脚 */
/* 不封顶：页脚右缘要和顶栏右缘落在同一条轴上。 */
.bottom { margin-top: 80px; padding-top: 24px; padding-bottom: 48px; border-top: 1px solid var(--line); display: flex; justify-content: space-between; align-items: flex-start; gap: 20px 40px; flex-wrap: wrap; font-size: 13px; color: var(--ink-3); line-height: 1.65; }
.bottom a:hover { color: var(--brand); }
.bottom p { margin: 0; }
/* 运营主体。法定名称是这块的主角，比其余页脚文字深一档；英文名与地址退到 12px。 */
.foot-cn { color: var(--ink-2); font-weight: 600; }
.foot-en, .foot-addr { font-size: 12px; }
.foot-meta { display: flex; flex-direction: column; align-items: flex-end; gap: 6px; text-align: right; }
.foot-links { display: flex; gap: 16px; }

@media (max-width: 1000px) {
  .mosaic { grid-template-columns: repeat(2, minmax(0, 1fr)); grid-auto-rows: minmax(170px, auto); }
  .tile { grid-column: span 1; grid-row: span 1; }
  .tile:not(.tile--slot) { grid-column: span 2; grid-row: span 2; }
  /* 占位块两个一排；总数为奇数时最后一块撑满，免得行尾留个洞。
     占位块是 div、真产品是 a/article，所以 of-type 正好只数占位块。 */
  .tile--slot:nth-of-type(odd):last-of-type { grid-column: span 2; }
}

/* 触屏没有 hover，翻不过去：两面直接上下堆起来，信息一次全给 */
@media (hover: none) {
  .mosaic { grid-auto-rows: minmax(150px, auto); }
  .tile:not(.tile--slot) { grid-row: span 1; }
  .tile-inner { position: static; transform: none; transition: none; }
  .face { position: static; backface-visibility: visible; -webkit-backface-visibility: visible; }
  .face--front { padding-bottom: 22px; gap: 22px; }
  .face--back { transform: none; padding-top: 0; }
  .tile-meta { margin-top: 16px; }
}

@media (max-width: 860px) {
  :root { --gutter: 24px; }
  .top { padding-top: 20px; padding-bottom: 20px; }
  .top nav { gap: 22px; font-size: 14px; }
  .top nav a::before { left: -13px; }
  .section { padding-top: 48px; }
  .hero { padding-top: 40px; }
  .face { padding: 24px; }
  .tile--slot { padding: 20px; }
  .tile[style*="--cols:3"] .tile-name b { font-size: 30px; }
  .reasons { grid-template-columns: 1fr; gap: 24px; }
  .services { grid-template-columns: 1fr; gap: 20px; }
  .tool { grid-template-columns: 1fr; gap: 6px; }
  .posts { --ledger: 1fr; }
  .post-lead, .post-row { row-gap: 6px; padding-top: 20px; padding-bottom: 22px; }
  .posts .post-meta { flex-direction: row; gap: 12px; }
  .about { grid-template-columns: 1fr; row-gap: 32px; }
  .bottom { margin-top: 56px; }
  .foot-meta { align-items: flex-start; text-align: left; }
  .contact dd { margin-left: 0; text-align: left; }
}

/* ── 首页一屏：不出现滚动条 ──────────────────────────────────────────────
   顶栏与页脚各占自己的高度，拼版 flex 吃掉剩下的，四行均分。
   只在够宽够高的窗口生效——矮窗和手机上十块砖本来就装不下一屏，
   那里照常滚动，好过把内容裁掉。 */
@media (min-width: 1001px) and (min-height: 700px) {
  .page-home { height: 100vh; display: flex; flex-direction: column; overflow: hidden; }
  /* ⚠️ flex 子项上的 `margin: 0 auto` 会取消 stretch，让它缩成内容宽度。
     所有 .wrap 都带 auto 边距，所以这里必须显式给 100% 宽，否则整页挤成窄条。 */
  .page-home .wrap { width: 100%; }
  .page-home main { flex: 1 1 auto; display: flex; flex-direction: column; min-height: 0; }
  .page-home #products { flex: 1 1 auto; min-height: 0; display: flex; padding-bottom: 0; }
  .page-home .mosaic { flex: 1 1 auto; min-height: 0; grid-auto-rows: minmax(0, 1fr); }
  .page-home .hero { padding-top: clamp(18px, 3.4vh, 56px); padding-bottom: clamp(14px, 2.6vh, 32px); }
  .page-home .hero h1 { margin-bottom: clamp(10px, 1.8vh, 22px); }
  .page-home .top { padding-top: clamp(14px, 2.2vh, 26px); padding-bottom: clamp(14px, 2.2vh, 26px); }
  .page-home .bottom { margin-top: 0; padding-top: clamp(10px, 1.6vh, 24px); padding-bottom: clamp(12px, 2vh, 44px); }
}