/* ToolLoom 设计变量：颜色、间距、字号、动效参数全部在这里定义，其余规则只引用变量。 */
:root {
  color-scheme: light dark;

  --color-bg: #fbf8f3;
  --color-surface: #ffffff;
  --color-surface-2: #f3eee6;
  --color-ink: #1f1b16;
  --color-ink-2: #5f574c;
  --color-line: #e7dfd3;
  --color-line-strong: #d6cab8;
  --color-ghost-line: #8a7f70;
  /* 品牌靛蓝：只用于 Logo 和主视觉纬线（TL-F2 方案 A） */
  --color-accent: #2f4fc4;
  --color-on-accent: #ffffff;
  --color-thread: #c4643c;
  --color-btn: #1f1b16;
  --color-on-btn: #fbf8f3;
  --color-chip-bg: #f1ebe2;
  --color-chip-ink: #3e382f;
  --color-ok-bg: #e3f0e4;
  --color-ok-ink: #1f5530;
  --color-focus: #2f4fc4;
  --shadow-card: 0 1px 2px rgb(31 27 22 / 0.04);
  --shadow-lift: 0 18px 44px rgb(31 27 22 / 0.10);

  --font-sans: system-ui, -apple-system, "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei", "Noto Sans CJK SC", "Noto Sans SC", sans-serif;
  --font-serif: "Songti SC", "Noto Serif CJK SC", "Noto Serif SC", "Source Han Serif SC", "STSong", serif;

  --text-xs: 0.8125rem;
  --text-sm: 0.875rem;
  --text-md: 1rem;
  --text-lg: 1.125rem;
  --text-xl: 1.5rem;
  --text-2xl: clamp(1.75rem, 1.4rem + 1.4vw, 2.5rem);
  --text-hero: clamp(2rem, 1.3rem + 3vw, 3.5rem);
  --text-stat: 2.25rem;
  --leading-tight: 1.2;
  --leading-body: 1.7;

  --space-1: 0.25rem;
  --space-2: 0.5rem;
  --space-3: 0.75rem;
  --space-4: 1rem;
  --space-5: 1.5rem;
  --space-6: 2rem;
  --space-7: 3rem;
  --space-8: 4.5rem;
  --space-9: 6rem;
  --gutter: clamp(1.25rem, 4vw, 2rem);
  --wrap-max: 72rem;
  --measure: 32em;
  --art-max: 30rem;
  --badge-min: 1.5rem;
  --caret-gap: 0.04em;
  --tracking-tight: 0.01em;
  --tracking-wide: 0.06em;
  --tracking-wider: 0.08em;
  --tracking-widest: 0.1em;

  --radius-sm: 0.5rem;
  --radius-md: 1rem;
  --radius-lg: 1.75rem;
  --radius-pill: 999px;
  --border: 1px;
  --focus-width: 3px;
  --focus-offset: 3px;
  --logo-size: 2rem;
  --monogram-size: 3.5rem;
  --weave-warp: 2px;
  --weave-weft: 3.5px;
  --logo-stroke: 2.2;
  --logo-halo: 5.5;
  --frame-stroke: 1px;
  --control-h: 2.875rem;
  --tap-min: 2.75rem;
  --arrow-nudge: 2px;

  --ease-reveal: cubic-bezier(.16, 1, .3, 1);
  --ease-hover: cubic-bezier(.23, 1, .32, 1);
  --dur-reveal: 0.8s;
  --dur-hover: 0.35s;
  --dur-fade: 0.3s;
  --dur-blink: 1s;
  --dur-warp: 1.1s;
  --dur-weft: 1.6s;
  --weave-step: 70ms;
  --weft-start: 450ms;
  --reveal-shift: 32px;
  --hover-lift: -4px;
  --btn-lift: -1px;
}

@media (prefers-color-scheme: dark) {
  :root {
    --color-bg: #15130f;
    --color-surface: #1f1c17;
    --color-surface-2: #2a261f;
    --color-ink: #f2ede4;
    --color-ink-2: #b4ab9d;
    --color-line: #332e27;
    --color-line-strong: #4a4339;
    --color-ghost-line: #857a6b;
    --color-accent: #93a8ff;
    --color-on-accent: #11152a;
    --color-thread: #e38c63;
    --color-btn: #f2ede4;
    --color-on-btn: #15130f;
    --color-chip-bg: #2a261f;
    --color-chip-ink: #ddd5c8;
    --color-ok-bg: #1c3123;
    --color-ok-ink: #a6d9b2;
    --color-focus: #93a8ff;
    --shadow-card: 0 1px 2px rgb(0 0 0 / 0.3);
    --shadow-lift: 0 18px 44px rgb(0 0 0 / 0.45);
  }
}

*,
*::before,
*::after { box-sizing: border-box; }

html { scroll-behavior: smooth; }

body {
  margin: 0;
  background: var(--color-bg);
  color: var(--color-ink);
  font: var(--text-md) / var(--leading-body) var(--font-sans);
  -webkit-text-size-adjust: 100%;
}
::selection { background: var(--color-ink); color: var(--color-bg); }
/* 主按钮、卡片按钮、跳转链接本身是 ink 底 + bg 字（--color-btn / --color-on-btn），选中配色反过来，否则选中前后看不出变化 */
.btn--primary::selection, .btn--primary *::selection,
.card-link::selection, .card-link *::selection,
.skip::selection { background: var(--color-bg); color: var(--color-ink); }

h1, h2, h3, h4, p, ol, ul, dl, dd { margin: 0; }
/* 中文按词组/标点换行，不把词拆到两行；整段没有断点时才任意断开，防止溢出 */
p { text-wrap: pretty; word-break: keep-all; overflow-wrap: anywhere; }
ol, ul { padding: 0; list-style: none; }
a { color: inherit; }

.wrap {
  width: 100%;
  max-width: var(--wrap-max);
  margin-inline: auto;
  padding-inline: var(--gutter);
}

.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
}

:focus-visible {
  outline: var(--focus-width) solid var(--color-focus);
  outline-offset: var(--focus-offset);
  border-radius: var(--radius-sm);
}

.skip {
  position: absolute;
  left: var(--space-4);
  top: calc(-1 * var(--space-9));
  z-index: 10;
  padding: var(--space-2) var(--space-4);
  border-radius: var(--radius-sm);
  background: var(--color-btn);
  color: var(--color-on-btn);
  text-decoration: none;
  display: inline-flex;
  align-items: center;
  min-height: var(--tap-min);
}
.skip:focus-visible { top: var(--space-4); }

/* 顶栏 */
.topbar {
  border-bottom: var(--border) solid var(--color-line);
}
.topbar-inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  min-height: var(--space-8);
}
.brand {
  display: inline-flex;
  align-items: center;
  gap: var(--space-3);
  min-height: var(--tap-min);
  text-decoration: none;
  font-weight: 600;
  letter-spacing: var(--tracking-tight);
}
.brand-name { font-size: var(--text-lg); }
.brand--small .brand-name { font-size: var(--text-md); }
.logo { width: var(--logo-size); height: var(--logo-size); flex: none; }
.logo-bg { fill: var(--color-accent); }
.logo-line,
.logo-halo { fill: none; stroke-linecap: round; }
.logo-line { stroke: var(--color-on-accent); stroke-width: var(--logo-stroke); }
.logo-halo { stroke: var(--color-accent); stroke-width: var(--logo-halo); }
.topbar-link {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  min-height: var(--tap-min);
  padding: var(--space-2) var(--space-3);
  color: var(--color-ink-2);
  text-decoration: none;
  font-size: var(--text-sm);
}
.count {
  min-width: var(--badge-min);
  padding: 0 var(--space-2);
  border-radius: var(--radius-pill);
  background: var(--color-chip-bg);
  color: var(--color-chip-ink);
  text-align: center;
  font-size: var(--text-xs);
  line-height: 1.6;
}

/* 首屏 */
.hero {
  display: grid;
  gap: var(--space-7);
  align-items: center;
  padding-block: var(--space-8) var(--space-8);
}
.hero-copy { display: grid; gap: var(--space-5); align-content: start; }
.eyebrow {
  color: var(--color-ink-2);
  font-size: var(--text-sm);
  letter-spacing: var(--tracking-wider);
}
.hero-title {
  font: 600 var(--text-hero) / var(--leading-tight) var(--font-serif);
  letter-spacing: var(--tracking-tight);
  word-break: keep-all;
  overflow-wrap: anywhere;
  text-wrap: balance;
}
.type { display: block; }
/* 未打出的字以隐藏方式占位，打字过程中换行位置与最终一致，不会跳行 */
.type-rest { visibility: hidden; }
.caret { color: var(--color-ink); }
/* 光标挂在最后一个已打出的字上：绝对定位、不占行内宽度，所以既不会改变换行，也不会和最后一个字分到两行 */
.type-tail { position: relative; }
.type-tail .caret { position: absolute; top: 0; left: calc(100% + var(--caret-gap)); }
.hero-desc {
  max-width: var(--measure);
  color: var(--color-ink-2);
  font-size: var(--text-lg);
}
.hero-actions {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-3);
  padding-top: var(--space-2);
}
.btn {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  min-height: var(--control-h);
  padding: var(--space-2) var(--space-5);
  border: var(--border) solid var(--color-btn);
  border-radius: var(--radius-pill);
  font-size: var(--text-md);
  text-decoration: none;
  transition: transform var(--dur-hover) var(--ease-hover), box-shadow var(--dur-hover) var(--ease-hover), background-color var(--dur-hover) var(--ease-hover);
}
.btn--primary { background: var(--color-btn); color: var(--color-on-btn); }
.btn--ghost { background: transparent; color: var(--color-ink); border-color: var(--color-ghost-line); }
.btn:focus-visible { border-radius: var(--radius-pill); }

.hero-art { width: 100%; max-width: var(--art-max); justify-self: center; }
.weave { display: block; width: 100%; height: auto; }
.weave-frame { fill: var(--color-surface-2); stroke: var(--color-line); stroke-width: var(--frame-stroke); }
.weave path { fill: none; stroke-linecap: round; stroke-dasharray: 1; stroke-dashoffset: 0; }
.warp path { stroke: var(--color-line-strong); stroke-width: var(--weave-warp); }
.weft path { stroke-width: var(--weave-weft); }
.weft .weft-a { stroke: var(--color-accent); }
.weft .weft-b { stroke: var(--color-thread); }
.weave-knot { fill: var(--color-thread); }

/* 应用区 */
.apps { padding-bottom: var(--space-9); }
.section-head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--space-4);
  padding-bottom: var(--space-5);
  margin-bottom: var(--space-6);
  border-bottom: var(--border) solid var(--color-line);
}
.section-title { font: 600 var(--text-2xl) / var(--leading-tight) var(--font-serif); }
.section-meta { color: var(--color-ink-2); font-size: var(--text-sm); }

.app { display: grid; gap: var(--space-8); }
.app + .app { margin-top: var(--space-9); }

.card {
  position: relative;
  display: grid;
  gap: var(--space-6);
  padding: var(--space-6);
  border: var(--border) solid var(--color-line);
  border-radius: var(--radius-lg);
  background: var(--color-surface);
  box-shadow: var(--shadow-card);
  transition: transform var(--dur-hover) var(--ease-hover), box-shadow var(--dur-hover) var(--ease-hover), border-color var(--dur-hover) var(--ease-hover);
}
.card-main { display: grid; gap: var(--space-4); align-content: start; }
.card-head { display: flex; align-items: center; gap: var(--space-4); }
.monogram {
  display: grid;
  place-items: center;
  flex: none;
  width: var(--monogram-size);
  height: var(--monogram-size);
  border-radius: var(--radius-md);
  background: var(--color-surface-2);
  color: var(--color-ink);
  font: 600 var(--text-xl) / 1 var(--font-serif);
}
.card-names { display: grid; gap: var(--space-1); }
.card-name { font: 600 var(--text-2xl) / var(--leading-tight) var(--font-serif); }
.card-name-en { color: var(--color-ink-2); font-size: var(--text-sm); letter-spacing: var(--tracking-wide); }
.card-desc { max-width: var(--measure); font-size: var(--text-lg); }
.card-link {
  justify-self: start;
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  margin-top: var(--space-2);
  padding: var(--space-2) var(--space-5);
  border-radius: var(--radius-pill);
  background: var(--color-btn);
  color: var(--color-on-btn);
  text-decoration: none;
}
/* 整卡可点：链接的 ::after 铺满卡片；焦点框画在 ::after 上，框住整张卡 */
.card-link::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: var(--radius-lg);
}
.card-link:focus-visible { outline: none; }
.card-link:focus-visible::after {
  outline: var(--focus-width) solid var(--color-focus);
  outline-offset: var(--focus-offset);
}
.card-arrow { transition: transform var(--dur-hover) var(--ease-hover); }

.card-aside { display: grid; gap: var(--space-5); align-content: space-between; }
.tags { display: flex; flex-wrap: wrap; gap: var(--space-2); }
.tag {
  padding: var(--space-1) var(--space-3);
  border-radius: var(--radius-pill);
  background: var(--color-chip-bg);
  color: var(--color-chip-ink);
  font-size: var(--text-xs);
}
.tag--ok { background: var(--color-ok-bg); color: var(--color-ok-ink); }
.stats { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--space-4); }
.stat {
  display: grid;
  gap: var(--space-1);
  padding: var(--space-4);
  border-radius: var(--radius-md);
  background: var(--color-surface-2);
}
.stat-label { order: 2; color: var(--color-ink-2); font-size: var(--text-sm); }
.stat-value { order: 1; font: 600 var(--text-stat) / 1 var(--font-serif); }
.stat-unit { margin-left: var(--space-1); font-size: var(--text-md); font-weight: 400; color: var(--color-ink-2); }

.block { display: grid; gap: var(--space-5); }
.block-title { font: 600 var(--text-xl) / var(--leading-tight) var(--font-serif); }
.steps { display: grid; gap: var(--space-4); }
.step {
  align-content: start;
  display: grid;
  gap: var(--space-2);
  padding: var(--space-5);
  border: var(--border) solid var(--color-line);
  border-radius: var(--radius-md);
  background: var(--color-surface);
}
.step-no { color: var(--color-ink-2); font: 600 var(--text-sm) / 1 var(--font-sans); letter-spacing: var(--tracking-widest); }
.step-title { font-size: var(--text-lg); font-weight: 600; }
.step-text { color: var(--color-ink-2); }
.platforms { display: flex; flex-wrap: wrap; gap: var(--space-2); }
.platform {
  padding: var(--space-2) var(--space-4);
  border: var(--border) solid var(--color-line);
  border-radius: var(--radius-pill);
  background: var(--color-surface);
  font-size: var(--text-sm);
}
.note { color: var(--color-ink-2); font-size: var(--text-sm); }

/* 页脚 */
.footer { border-top: var(--border) solid var(--color-line); }
.footer-inner {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-3) var(--space-5);
  padding-block: var(--space-6);
}
.footer-text { color: var(--color-ink-2); font-size: var(--text-sm); }

@media (min-width: 48rem) {
  .steps { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .card { padding: var(--space-7); }
}
@media (min-width: 60rem) {
  .hero { grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr); padding-block: var(--space-9); }
  .card { grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr); gap: var(--space-7); }
}

/* ---- 动效（只在 JS 可用且未开启“减少动态”时生效） ---- */
@media (prefers-reduced-motion: no-preference) {
  html[data-js]:not(.is-typing):not(.is-typed) .type { visibility: hidden; }
  .is-typed .caret { animation: blink var(--dur-blink) step-end infinite; }

  /* 打字期间按钮组不可见也不可聚焦；打完后先恢复 visibility，再 0.3s 淡入 */
  html[data-js] .hero-actions { opacity: 0; visibility: hidden; transition: opacity var(--dur-fade) ease-out, visibility 0s linear var(--dur-fade); }
  html[data-js].is-typed .hero-actions { opacity: 1; visibility: visible; transition: opacity var(--dur-fade) ease-out, visibility 0s; }

  html[data-js] .reveal {
    opacity: 0;
    transform: translateY(var(--reveal-shift));
    transition: opacity var(--dur-reveal) var(--ease-reveal), transform var(--dur-reveal) var(--ease-reveal);
  }
  html[data-js] .reveal.is-visible { opacity: 1; transform: none; }

  .weave path { stroke-dashoffset: 1; animation: draw var(--dur-warp) var(--ease-reveal) forwards; }
  .weft path { animation-duration: var(--dur-weft); animation-delay: var(--weft-start); }
  .warp :nth-child(2) { animation-delay: calc(var(--weave-step) * 1); }
  .warp :nth-child(3) { animation-delay: calc(var(--weave-step) * 2); }
  .warp :nth-child(4) { animation-delay: calc(var(--weave-step) * 3); }
  .warp :nth-child(5) { animation-delay: calc(var(--weave-step) * 4); }
  .warp :nth-child(6) { animation-delay: calc(var(--weave-step) * 5); }
  .warp :nth-child(7) { animation-delay: calc(var(--weave-step) * 6); }
  .warp :nth-child(8) { animation-delay: calc(var(--weave-step) * 7); }
  .warp :nth-child(9) { animation-delay: calc(var(--weave-step) * 8); }
  .weft :nth-child(2) { animation-delay: calc(var(--weft-start) + var(--weave-step) * 2); }
  .weft :nth-child(3) { animation-delay: calc(var(--weft-start) + var(--weave-step) * 4); }
  .weft :nth-child(4) { animation-delay: calc(var(--weft-start) + var(--weave-step) * 6); }
  .weft :nth-child(5) { animation-delay: calc(var(--weft-start) + var(--weave-step) * 8); }
  .weave-knot { opacity: 0; animation: fade-in var(--dur-fade) ease-out forwards; animation-delay: calc(var(--weft-start) + var(--dur-weft)); }
}

/* 悬停态只给有真实悬停能力的设备（鼠标/触控板），避免触屏点一下后卡在悬停态 */
@media (hover: hover) {
  .topbar-link:hover { color: var(--color-ink); }
  .btn:hover { box-shadow: var(--shadow-lift); }
  .btn--ghost:hover { background: var(--color-surface); }
  .card:hover { box-shadow: var(--shadow-lift); border-color: var(--color-line-strong); }
}
/* 只有键盘聚焦（:focus-visible）卡片链接时才给出同样的抬起反馈；鼠标/触屏点击后不会停在上浮状态 */
.card:has(.card-link:focus-visible) { box-shadow: var(--shadow-lift); border-color: var(--color-line-strong); }

/* 位移只在允许动效时出现 */
@media (prefers-reduced-motion: no-preference) {
  .card:has(.card-link:focus-visible) { transform: translateY(var(--hover-lift)); }
}
@media (hover: hover) and (prefers-reduced-motion: no-preference) {
  .btn:hover { transform: translateY(var(--btn-lift)); }
  .card:hover { transform: translateY(var(--hover-lift)); }
  .card:hover .card-arrow { transform: translate(var(--arrow-nudge), calc(-1 * var(--arrow-nudge))); }
}

/* 减少动态：不过渡、不平滑滚动 */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .btn,
  .card,
  .card-arrow { transition: none; }
}

@keyframes blink { 50% { opacity: 0; } }
@keyframes draw { to { stroke-dashoffset: 0; } }
@keyframes fade-in { to { opacity: 1; } }