@charset "utf-8";

/**
 * 顶箭官网样式
 *
 * 视觉基调：浅色、留白、大字号、品牌色少量使用。
 * 刻意避开企业官网那一套（渐变大屏、科技蓝背景、数据驾驶舱），
 * 顶箭要传达的是"一个人的软件"，视觉上应该安静、克制、有软件感。
 *
 * 品牌色只用在三个地方：LOGO、主按钮、需要强调的关键词。
 * 其他一律黑白灰——蓝色一多就变成 SaaS 模板了。
 *
 * 一条纪律：这里的每个选择器都要在页面上真的用到。
 * 2026-08-27 官网改版时清过一遍，页面砍掉的板块对应的样式也一并删了。
 *
 * @createtime	2026/08/18
 * @author		AI
 */

/* ==================================================================
   1. 变量
   ================================================================== */

:root {
	/* 文字：从深到浅三级，够用了，再多层次反而乱 */
	--ink:        #111418;
	--ink-2:      #4b525b;
	--ink-3:      #7a838d;

	/* 背景与描边 */
	--bg:         #ffffff;
	--bg-soft:    #f7f8fa;
	--bg-softer:  #fbfcfd;
	--line:       #e7eaef;
	--line-soft:  #f0f2f6;

	/* 品牌色，取自 LOGO 实测像素 */
	--brand:      #0160f0;
	--brand-dark: #0148b8;
	--brand-soft: #eef4ff;

	/* 深色区块，只在结尾 CTA 这类地方局部使用 */
	--dark:       #0d1117;
	--dark-2:     #171d26;

	/* 圆角与阴影，都压得很轻 */
	--r-sm:       8px;
	--r:          12px;
	--r-lg:       18px;
	--shadow:     0 1px 2px rgba(17, 20, 24, .04), 0 8px 24px rgba(17, 20, 24, .05);
	--shadow-lg:  0 2px 4px rgba(17, 20, 24, .04), 0 18px 48px rgba(17, 20, 24, .08);

	/* 版心 */
	--wrap:       1120px;

	--font: -apple-system, BlinkMacSystemFont, "Segoe UI", "PingFang SC",
	        "Hiragino Sans GB", "Microsoft YaHei", "Helvetica Neue", Arial, sans-serif;
	--mono: ui-monospace, SFMono-Regular, Menlo, Consolas, "Courier New", monospace;
}

/* ==================================================================
   2. 基础重置
   ================================================================== */

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

html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }

body {
	margin: 0;
	font-family: var(--font);
	font-size: 17px;
	line-height: 1.75;
	color: var(--ink);
	background: var(--bg);
	-webkit-font-smoothing: antialiased;
	-moz-osx-font-smoothing: grayscale;
}

h1, h2, h3, h4, p, ul, ol, dl, dd, figure, blockquote { margin: 0; }
ul, ol { padding: 0; list-style: none; }

a { color: inherit; text-decoration: none; }

img, svg { display: block; max-width: 100%; }

button, input { font: inherit; color: inherit; }
button { background: none; border: 0; cursor: pointer; }

/* 标题统一收紧字距与行高，中文大字号下默认行高太散 */
h1, h2, h3 {
	font-weight: 700;
	line-height: 1.24;
	letter-spacing: -.01em;
}

/* 键盘可达性：只在键盘操作时显示焦点圈 */
:focus-visible { outline: 2px solid var(--brand); outline-offset: 3px; border-radius: 4px; }

/* 内联 SVG 没有宽高属性，不给默认尺寸会被撑成 300x150。
   具体位置再按需覆盖 */
.icon { flex: none; width: 20px; height: 20px; }

/* ==================================================================
   3. 布局骨架
   ================================================================== */

.wrap {
	width: 100%;
	max-width: var(--wrap);
	margin: 0 auto;
	padding: 0 24px;
}

/* 区块纵向间距。留白是这套设计的主要手段，所以给得很足 */
.section { padding: 104px 0; }
.section--tight { padding: 72px 0; }
/* 介绍、版本列表紧挨着上一段。两段各留 72px 会空出一大块。 */
.section--tight.section--follow {
	padding-top: 24px;
	padding-bottom: 40px;
}
.section--tight:has(+ .section--follow) {
	padding-bottom: 16px;
}
/* 创作者首页：须知和名单之间少留一段，不要两段 72px 叠在一起 */
.section--tight.section--cards { padding-bottom: 36px; }
.section--tight.section--listtop { padding-top: 36px; }
.section--soft { background: var(--bg-soft); }
.section--line { border-top: 1px solid var(--line-soft); }

/* 区块标题 */
.sec-head { max-width: 760px; margin-bottom: 56px; }

.sec-title { font-size: 40px; }
.sec-title--lg { font-size: 48px; }
.sec-title--sm { font-size: 30px; }
.sec-title--xs { font-size: 26px; }

.sec-sub {
	margin-top: 20px;
	font-size: 19px;
	line-height: 1.7;
	color: var(--ink-2);
}

/* 正文块 */
.prose p { margin-bottom: 20px; font-size: 18px; color: var(--ink-2); }
.prose p:last-child { margin-bottom: 0; }
.prose strong { color: var(--ink); font-weight: 600; }
.prose.legal h2 {
	margin: 32px 0 12px;
	font-size: 20px;
	font-weight: 650;
	color: var(--ink);
}
.prose.legal h2:first-of-type { margin-top: 8px; }
.prose.legal h3 {
	margin: 22px 0 10px;
	font-size: 17px;
	font-weight: 650;
	color: var(--ink);
}
.prose.legal ul {
	margin: 0 0 20px;
	padding-left: 1.75em;
	list-style: disc outside;
	font-size: 18px;
	color: var(--ink-2);
}
.prose.legal li {
	display: list-item;
	margin-bottom: 8px;
	line-height: 1.7;
}
.prose.legal .legal-ver {
	margin-bottom: 8px;
	font-size: 14px;
	color: var(--ink-3);
}
.legal-nav {
	display: flex;
	flex-wrap: wrap;
	gap: 8px 22px;
	margin-top: 48px;
	padding-top: 22px;
	border-top: 1px solid var(--line-soft);
	font-size: 15px;
}
.legal-nav a { color: var(--brand); }
.legal-nav span { color: var(--ink); font-weight: 600; }

/* 关于页这类纯阅读的段落。一行超过 40 个汉字眼睛容易跟丢行 */
.prose--narrow { max-width: 720px; }

/* 博客列表。封面是 16:9，卡片整张可点 */
.bloggrid {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: 24px;
}
.blogcard {
	display: flex;
	flex-direction: column;
	overflow: hidden;
	border: 1px solid var(--line);
	border-radius: 16px;
	background: var(--bg);
	color: inherit;
	text-decoration: none;
}
.blogcard:hover { border-color: var(--ink-3); }
.blogcard-cover {
	display: block;
	aspect-ratio: 16 / 9;
	background: var(--bg-soft);
	overflow: hidden;
}
.blogcard-cover img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	display: block;
}
.blogcard-body { display: block; padding: 18px 20px 22px; }
.blogcard time { font-size: 13px; color: var(--ink-3); }
.blogcard h3 { margin-top: 8px; font-size: 20px; line-height: 1.35; }
.blogcard p {
	margin-top: 8px;
	font-size: 15px;
	line-height: 1.6;
	color: var(--ink-2);
	display: -webkit-box;
	-webkit-line-clamp: 3;
	-webkit-box-orient: vertical;
	overflow: hidden;
}

/* 博客正文。编辑器里的标题、图片、列表要能看，不要只剩段落 */
.blog-article { max-width: 760px; }
.blog-back { margin-bottom: 18px; font-size: 15px; }
.blog-back a { color: var(--brand); font-weight: 600; }
.blog-meta { margin-top: 12px; font-size: 15px; color: var(--ink-3); }
.blog-cover {
	margin: 28px 0 8px;
	border-radius: 16px;
	overflow: hidden;
	background: var(--bg-soft);
}
.blog-cover img { width: 100%; height: auto; display: block; }
.prose.blog-body { margin-top: 28px; }
.prose.blog-body h2,
.prose.blog-body h3,
.prose.blog-body h4 {
	margin: 32px 0 12px;
	color: var(--ink);
	font-weight: 650;
	line-height: 1.35;
}
.prose.blog-body h2 { font-size: 26px; }
.prose.blog-body h3 { font-size: 22px; }
.prose.blog-body h4 { font-size: 18px; }
.prose.blog-body ul,
.prose.blog-body ol { margin: 0 0 20px 1.2em; }
.prose.blog-body li { margin: 6px 0; font-size: 18px; color: var(--ink-2); }
.prose.blog-body a { color: var(--brand); }
/* CKEditor 把宽高写进 style（如 width:800px;height:450px）。
   手机上 max-width 把宽度压进屏幕，行内的 height 仍按原像素，图就被拉变形。
   height 必须压过行内样式，宽度才按原图比例跟着缩。 */
.prose.blog-body img {
	max-width: 100%;
	height: auto !important;
	border-radius: 8px;
}
.prose.blog-body table { width: 100%; margin-bottom: 20px; border-collapse: collapse; }
.prose.blog-body th,
.prose.blog-body td { padding: 8px 10px; border: 1px solid var(--line); font-size: 16px; }
.prose.blog-body pre,
.prose.blog-body code {
	font-family: Consolas, "Courier New", monospace;
	font-size: 14px;
}
.prose.blog-body pre {
	margin: 0 0 20px;
	padding: 14px 16px;
	overflow: auto;
	border-radius: 8px;
	background: var(--bg-soft);
}

/* 强调整句，用在 slogan 这类结论上 */
.statement {
	padding-left: 22px;
	border-left: 3px solid var(--brand);
	font-size: 26px;
	font-weight: 700;
	line-height: 1.5;
	letter-spacing: -.01em;
}

/* 左右分栏 */
.split { display: grid; grid-template-columns: 1fr 1fr; gap: 72px; align-items: center; }

/* 间距微调。个别地方的默认间距不合适，用这几个类调，不要写行内 style */
.mt-0  { margin-top: 0; }
.mt-16 { margin-top: 16px; }
.mt-20 { margin-top: 20px; }
.mt-24 { margin-top: 24px; }
.mt-26 { margin-top: 26px; }
.mt-32 { margin-top: 32px; }
.mt-40 { margin-top: 40px; }
.mb-28 { margin-bottom: 28px; }
.mb-32 { margin-bottom: 32px; }
.pt-0  { padding-top: 0; }

/* ==================================================================
   4. 按钮
   ================================================================== */

.btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 8px;
	height: 50px;
	padding: 0 26px;
	border-radius: 999px;
	font-size: 16px;
	font-weight: 600;
	white-space: nowrap;
	transition: background-color .18s, color .18s, border-color .18s;
}

.btn .icon { width: 18px; height: 18px; }

.btn-primary { color: #fff; background: var(--brand); }
.btn-primary:hover { background: var(--brand-dark); }

.btn-ghost {
	color: var(--ink);
	background: #fff;
	border: 1px solid var(--line);
}
.btn-ghost:hover { border-color: var(--ink-3); }

/* 深色区块里的按钮 */
.btn-light { color: var(--ink); background: #fff; }
.btn-light:hover { background: #e9edf3; }

.btn-outline-light {
	color: #fff;
	border: 1px solid rgba(255, 255, 255, .28);
}
.btn-outline-light:hover { border-color: rgba(255, 255, 255, .6); }

.btn-sm { height: 40px; padding: 0 18px; font-size: 15px; }

/* 还不能装的应用、还没有的安装包，用禁用态如实表示，
   不摆一个点了没反应的按钮 */
.btn--disabled {
	color: var(--ink-3);
	background: var(--bg-soft);
	border: 1px solid var(--line);
	cursor: default;
}

.btn-row { display: flex; flex-wrap: wrap; gap: 12px; }

/* 文字链接式按钮 */
.link-more {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	font-size: 17px;
	font-weight: 600;
	color: var(--brand);
}
.link-more .icon { width: 18px; height: 18px; transition: transform .18s; }
.link-more:hover .icon { transform: translateX(3px); }

/* ==================================================================
   5. 顶部导航
   ================================================================== */

.site-header {
	position: sticky;
	top: 0;
	z-index: 100;
	background: rgba(255, 255, 255, .88);
	backdrop-filter: saturate(180%) blur(14px);
	-webkit-backdrop-filter: saturate(180%) blur(14px);
	border-bottom: 1px solid transparent;
	transition: border-color .2s;
}
.site-header.is-scrolled { border-bottom-color: var(--line); }

.site-header .wrap {
	display: flex;
	align-items: center;
	gap: 28px;
	height: 68px;
}

/* LOGO 用的是白底横版图，所以顶栏必须保持白色，否则会露出白色方块 */
.brand { flex: none; }
.brand img { width: auto; height: 34px; }

.site-nav { display: flex; gap: 2px; margin-right: auto; }

.site-nav a {
	display: block;
	padding: 8px 13px;
	border-radius: 999px;
	font-size: 16px;
	color: var(--ink-2);
	transition: color .18s, background-color .18s;
}
.site-nav a:hover { color: var(--ink); background: var(--bg-soft); }
.site-nav a.active { color: var(--ink); font-weight: 600; }

/* 抽屉里的语言切换和"获取顶箭"只在手机上出现。
   桌面端顶栏右侧已经有同样的入口，两个一起显示会变成重复的导航项 */
.site-nav .nav-lang,
.site-nav .nav-cta { display: none; }

.header-right { display: flex; align-items: center; gap: 14px; flex: none; }

/* 语言切换做成低调的文字链接。它是给少数人用的功能，
   做成按钮会跟"获取顶箭"抢注意力 */
.lang-switch {
	font-size: 15px;
	font-weight: 600;
	color: var(--ink-3);
	white-space: nowrap;
	transition: color .18s;
}
.lang-switch:hover { color: var(--ink); }

/* 手机端汉堡按钮 */
.nav-toggle {
	display: none;
	width: 40px;
	height: 40px;
	margin-left: auto;
	border-radius: var(--r-sm);
}
.nav-toggle span {
	display: block;
	width: 20px;
	height: 1.5px;
	margin: 4px auto;
	background: var(--ink);
	border-radius: 2px;
	transition: transform .2s, opacity .2s;
}
.nav-open .nav-toggle span:nth-child(1) { transform: translateY(5.5px) rotate(45deg); }
.nav-open .nav-toggle span:nth-child(2) { opacity: 0; }
.nav-open .nav-toggle span:nth-child(3) { transform: translateY(-5.5px) rotate(-45deg); }

/* ==================================================================
   6. 首屏
   ================================================================== */

.hero { padding: 88px 0 84px; }

.hero-inner { max-width: 940px; }

/* 首屏主标题就是那句 slogan，字号给到最大。
   中文在逗号后强制换行：上句 8 字、下句 10 字，72px 下都进得了 940px。
   英文更长，单独降到 48px，同样在破折号后折成两行。
   改 slogan 字数或这里的字号时，务必回去量一遍各档宽度的行数。 */
.hero h1 {
	font-size: 72px;
	line-height: 1.22;
	letter-spacing: -.025em;
}
html[lang="en"] .hero h1 {
	font-size: 48px;
	letter-spacing: -.03em;
}

.hero-sub {
	margin-top: 28px;
	max-width: 640px;
	font-size: 20px;
	line-height: 1.72;
	color: var(--ink-2);
}

.hero .btn-row { margin-top: 38px; }

/* ==================================================================
   7. 模拟软件窗口
   ================================================================== */

/* 修改演示那一屏的窗口外壳。用 CSS 画界面而不是放截图：
   截图会随客户端迭代过期，还得跟着维护。这里画的是"示意"，
   不假装是真实截图。 */
.win {
	border: 1px solid var(--line);
	border-radius: var(--r-lg);
	background: #fff;
	box-shadow: var(--shadow-lg);
	overflow: hidden;
}

.win-bar {
	display: flex;
	align-items: center;
	gap: 10px;
	height: 44px;
	padding: 0 16px;
	border-bottom: 1px solid var(--line-soft);
	background: var(--bg-softer);
}
.win-dots { display: flex; gap: 6px; }
.win-dots i {
	width: 9px; height: 9px;
	border-radius: 50%;
	background: #dfe3ea;
}
.win-title {
	font-size: 13px;
	font-weight: 600;
	color: var(--ink-3);
}
.win-body { padding: 20px; }

/* ==================================================================
   8. 应用卡片
   ================================================================== */

.appgrid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; }

.appcard {
	display: flex;
	flex-direction: column;
	padding: 24px 22px 22px;
	border: 1px solid var(--line);
	border-radius: var(--r-lg);
	background: #fff;
	transition: border-color .2s, box-shadow .2s, transform .2s;
}
.appcard:hover {
	border-color: #d5dae2;
	box-shadow: var(--shadow);
	transform: translateY(-2px);
}

/* 卡片顶部：左图标、右价格。价格靠右是为了让一列卡片的价格对齐，
   扫一眼就能比出哪个免费 */
.appcard-top {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 14px;
	margin-bottom: 16px;
}

.appcard-ico {
	display: flex;
	align-items: center;
	justify-content: center;
	flex: none;
	width: 46px; height: 46px;
	border-radius: var(--r);
	background: var(--bg-soft);
	color: var(--ink);
	overflow: hidden;
}
.appcard-ico img { width: 100%; height: 100%; object-fit: cover; }

/* 没上传图标时按应用标识画的内联 SVG */
.appicon-svg { flex: none; width: 24px; height: 24px; }

.appcard-price {
	flex: none;
	font-size: 16px;
	font-weight: 700;
	color: var(--ink);
	white-space: nowrap;
}
/* 免费不需要强调，弱化成灰色，让有价格的那些跳出来 */
.appcard-price.is-free { font-size: 14px; font-weight: 600; color: var(--ink-3); }

.appcard h3 { font-size: 19px; }

.appcard p {
	margin-top: 10px;
	font-size: 16px;
	line-height: 1.7;
	color: var(--ink-2);
}

/* 卡片底部：分类 + 能不能装。margin-top:auto 把它压到底，
   这样同一行卡片的底边是对齐的 */
.appcard-foot {
	display: flex;
	align-items: center;
	gap: 10px;
	margin-top: auto;
	padding-top: 18px;
}

.appcard-cat {
	padding: 3px 10px;
	border-radius: 999px;
	background: var(--bg-soft);
	font-size: 13px;
	font-weight: 500;
	color: var(--ink-3);
}
.appcard-state {
	margin-left: auto;
	font-size: 14px;
	font-weight: 600;
	color: var(--ink-3);
}
.appcard-state.is-ready { color: var(--brand); }

.grid-more { margin-top: 40px; }

/* ==================================================================
   9. 修改演示（首页核心视觉）
   ================================================================== */

.demo { display: grid; grid-template-columns: .82fr 1.18fr; gap: 32px; align-items: start; }

/* 左：模拟对 AI 提要求 */
.demo-ask {
	padding: 24px;
	border: 1px solid var(--line);
	border-radius: var(--r-lg);
	background: var(--bg-softer);
}
.demo-ask-head {
	display: flex;
	align-items: center;
	gap: 8px;
	margin-bottom: 16px;
	font-size: 13px;
	font-weight: 600;
	color: var(--ink-3);
}
.demo-ask-head .icon { width: 16px; height: 16px; color: var(--brand); }

.demo-bubble {
	padding: 16px 18px;
	border: 1px solid var(--line);
	border-radius: var(--r);
	background: #fff;
	font-size: 17px;
	line-height: 1.7;
	color: var(--ink);
}
.demo-bubble ul { margin-top: 8px; }
.demo-bubble li {
	padding-left: 16px;
	position: relative;
	color: var(--ink-2);
}
.demo-bubble li::before {
	content: "";
	position: absolute;
	left: 2px; top: 13px;
	width: 5px; height: 5px;
	border-radius: 50%;
	background: var(--brand);
}

/* 光标，等到动画开始前一直闪 */
.demo-caret {
	display: inline-block;
	width: 2px;
	height: 1.05em;
	margin-left: 1px;
	vertical-align: -.16em;
	background: var(--brand);
	animation: blink 1.05s step-end infinite;
}
@keyframes blink { 0%, 100% { opacity: 1; } 50% { opacity: 0; } }

.demo-replay {
	display: inline-flex;
	align-items: center;
	gap: 7px;
	margin-top: 18px;
	font-size: 15px;
	font-weight: 600;
	color: var(--ink-3);
	transition: color .18s;
}
.demo-replay:hover { color: var(--brand); }
.demo-replay .icon { width: 16px; height: 16px; }

/* 右：被修改的软件界面 */
.demo-fields { display: grid; gap: 0; }

.demo-field {
	display: flex;
	align-items: center;
	gap: 12px;
	padding: 13px 12px;
	border-bottom: 1px solid var(--line-soft);
	font-size: 15px;
}
.demo-field:last-child { border-bottom: 0; }

.demo-field-label {
	flex: none;
	width: 92px;
	font-weight: 600;
	color: var(--ink);
}
.demo-field-val {
	flex: 1;
	min-width: 0;
	color: var(--ink-3);
}
/* 用一条灰条示意输入框里的内容，不写假数据，避免看起来像真截图。
   颜色要比分隔线深一点，否则在白底上几乎看不见，界面会显得是空的 */
.demo-field-bar {
	display: block;
	height: 9px;
	border-radius: 5px;
	background: #e3e8ef;
}

/* 每行给不一样的长度。等长的灰条排下来像加载占位符，
   长短不一才像"这里真的填了东西" */
.demo-fields .demo-field:nth-child(1) .demo-field-bar { width: 96px; }
.demo-fields .demo-field:nth-child(2) .demo-field-bar { width: 132px; }
.demo-fields .demo-field:nth-child(3) .demo-field-bar { width: 74px; }
.demo-fields .demo-field:nth-child(4) .demo-field-bar { width: 110px; }
.demo-fields .demo-field:nth-child(5) .demo-field-bar { width: 68px; }
.demo-fields .demo-field:nth-child(6) .demo-field-bar { width: 88px; }
.demo-fields .demo-field:nth-child(7) .demo-field-bar { width: 120px; }

/* 新增字段：默认收起，动画时展开 */
.demo-field.is-new {
	overflow: hidden;
	max-height: 0;
	padding-top: 0;
	padding-bottom: 0;
	border-bottom-color: transparent;
	opacity: 0;
	transition: max-height .42s ease, padding .42s ease, opacity .32s ease .1s,
	            background-color .5s ease 1.1s;
}
.demo-field.is-new.is-shown {
	/* max-height 只是为了让展开有个可过渡的终点，给得比实际高度宽裕一些。
	   卡到刚好 52px 的话，窄屏上字段值换行就会被裁掉半行 */
	max-height: 80px;
	padding-top: 13px;
	padding-bottom: 13px;
	border-bottom-color: var(--line-soft);
	opacity: 1;
	/* 先高亮一下再褪回白色，让"这是刚加上的"看得出来 */
	background: var(--brand-soft);
}
.demo-field.is-new.is-settled { background: transparent; }

.demo-field.is-new .demo-field-label { color: var(--brand); }

.demo-new-flag {
	flex: none;
	padding: 1px 7px;
	border-radius: 999px;
	background: var(--brand);
	font-size: 11px;
	font-weight: 600;
	color: #fff;
	opacity: 0;
	transition: opacity .3s ease .2s;
}
.demo-field.is-shown .demo-new-flag { opacity: 1; }
.demo-field.is-settled .demo-new-flag { opacity: 0; }

/* ==================================================================
   10. AI 编程工具
   ================================================================== */

/* 首页只把工具名字摆一排，详细介绍在 aitools 页 */
.toolrow { display: flex; flex-wrap: wrap; gap: 10px; }

.toolchip {
	padding: 9px 20px;
	border: 1px solid var(--line);
	border-radius: 999px;
	background: #fff;
	font-size: 17px;
	font-weight: 600;
}

/* 工具列表页 */
.toollist { display: grid; grid-template-columns: repeat(2, 1fr); gap: 18px; }

.toolcard {
	display: flex;
	flex-direction: column;
	padding: 26px 24px 22px;
	border: 1px solid var(--line);
	border-radius: var(--r-lg);
	background: #fff;
	transition: border-color .2s, box-shadow .2s;
}
.toolcard:hover { border-color: #d5dae2; box-shadow: var(--shadow); }

.toolcard-head { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; }
.toolcard-head h3 { font-size: 21px; }

/* 工具类型（编辑器 / 命令行 / 网页），是分类不是卖点，所以做得很轻 */
.toolcard-kind {
	padding: 2px 10px;
	border-radius: 999px;
	background: var(--bg-soft);
	font-size: 13px;
	font-weight: 500;
	color: var(--ink-3);
}

.toolcard p {
	margin-top: 12px;
	font-size: 16px;
	line-height: 1.7;
	color: var(--ink-2);
}

.toolcard-foot {
	display: flex;
	align-items: center;
	gap: 12px;
	margin-top: auto;
	padding-top: 20px;
}

/* 国内能不能直接用，是选工具时最实际的一条信息，所以放在卡片底部固定位置 */
.tag {
	padding: 3px 11px;
	border-radius: 999px;
	background: var(--bg-soft);
	font-size: 13px;
	font-weight: 600;
	color: var(--ink-3);
}
.tag--ok { background: var(--brand-soft); color: var(--brand); }

.toolcard-link {
	display: inline-flex;
	align-items: center;
	gap: 5px;
	margin-left: auto;
	font-size: 15px;
	font-weight: 600;
	color: var(--brand);
}
.toolcard-link .icon { width: 16px; height: 16px; transition: transform .18s; }
.toolcard-link:hover .icon { transform: translateX(3px); }

/* 编号步骤。用在"怎么改"这种四步流程上 */
.flow { display: grid; grid-template-columns: repeat(4, 1fr); gap: 24px; }
.flow li { display: grid; gap: 12px; align-content: start; }
.flow-n {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 32px; height: 32px;
	border-radius: 50%;
	background: var(--brand);
	font-size: 15px;
	font-weight: 700;
	color: #fff;
}
.flow p { font-size: 16px; line-height: 1.7; color: var(--ink-2); }

/* 示范视频。白底画面靠描边和页面分开 */
.howto-video {
	display: block;
	width: 100%;
	max-width: 840px;
	height: auto;
	margin: 32px auto 0;
	aspect-ratio: 16 / 9;
	border: 1px solid var(--line);
	border-radius: var(--r-lg);
	background: var(--bg-soft);
	object-fit: contain;
}
.howto-video::cue {
	background-color: rgba(13, 17, 23, 0.82);
	color: #fff;
}

.note {
	padding: 18px 22px;
	border-radius: var(--r);
	background: var(--brand-soft);
	font-size: 16px;
	color: var(--brand-dark);
}
.note strong { font-weight: 700; }

/* 「不会用 AI 改怎么办」。这一块的落点是视频，不是更多文字说明，
   所以做成一块安静的说明卡，别抢工具列表的位置 */
.learn {
	max-width: 960px;
	padding: 34px 36px 32px;
	border: 1px solid var(--line);
	border-radius: var(--r-lg);
	background: var(--bg-softer);
}
.learn p {
	margin-top: 18px;
	font-size: 17px;
	line-height: 1.78;
	color: var(--ink-2);
}

/* 说明文字。二维码暂时不放在右边，.qr 留着以后再用 */
.learn-body {
	display: flex;
	align-items: flex-start;
	gap: 40px;
}
.learn-text { flex: 1 1 auto; min-width: 0; }
.learn-text > p:first-child { margin-top: 0; }

/* ==================================================================
   二维码卡片
   官网只放视频号这一个码，但做成通用的 .qr——
   将来要放公众号或客服码，直接复用
   ================================================================== */

.qr {
	flex: 0 0 auto;
	width: 176px;
	text-align: center;
}
.qr img {
	display: block;
	width: 176px;
	height: 176px;
	/* 二维码是硬边图形，浏览器默认的平滑缩放会让黑块边缘发虚。
	   这里显示尺寸(176)和图片尺寸(400)不是整数倍，更容易糊 */
	border-radius: var(--r-sm);
	border: 1px solid var(--line);
	background: #fff;
}
.qr figcaption {
	margin-top: 12px;
	font-size: 14px;
	line-height: 1.6;
	color: var(--ink-3);
}
.qr figcaption strong {
	display: block;
	font-size: 15px;
	font-weight: 600;
	color: var(--ink-1);
}

/* ==================================================================
   11. 为什么用顶箭（首页 / 关于页共用 why.inc.php）
   ================================================================== */

/* 这四条每条都要说两三句才讲得清，所以是 2×2 的卡片，不是一行四列小字：
   四列排下来每列只剩两百多像素，正文会被压成细长一条，没人读得下去。 */
.pillars { display: grid; grid-template-columns: repeat(2, 1fr); gap: 22px; }

.pillar {
	display: grid;
	grid-template-columns: 54px 1fr;
	gap: 20px;
	padding: 30px 28px;
	border: 1px solid var(--line);
	border-radius: var(--r-lg);
	background: #fff;
	box-shadow: var(--shadow);
}

.pillar-ico {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 54px;
	height: 54px;
	border-radius: 15px;
	background: var(--brand-soft);
	color: var(--brand);
}
.pillar-ico .icon { width: 27px; height: 27px; }

.pillar h3 {
	margin: 2px 0 12px;
	font-size: 21px;
	font-weight: 700;
	line-height: 1.4;
	letter-spacing: -.01em;
}

.pillar p {
	margin: 0;
	font-size: 16.5px;
	line-height: 1.78;
	color: var(--ink-2);
}

/* ==================================================================
   12. 应用列表页
   ================================================================== */

/* 搜索用 GET 表单，结果页有独立地址，能被收录也能分享 */
.appsearch { display: flex; gap: 10px; margin-bottom: 20px; max-width: 520px; }

.appsearch-input {
	flex: 1;
	min-width: 0;
	height: 48px;
	padding: 0 18px;
	border: 1px solid var(--line);
	border-radius: 999px;
	background: #fff;
	font-size: 16px;
	transition: border-color .18s;
}
.appsearch-input::placeholder { color: var(--ink-3); }
.appsearch-input:focus { outline: 0; border-color: var(--brand); }

.appsearch-btn {
	flex: none;
	height: 48px;
	padding: 0 24px;
	border-radius: 999px;
	background: var(--ink);
	font-size: 16px;
	font-weight: 600;
	color: #fff;
	transition: background-color .18s;
}
.appsearch-btn:hover { background: #000; }

/* 版本列表 / 应用列表：下划线页签。和下面的分类不是同一层控件 */
.viewtabs {
	display: flex;
	flex-wrap: wrap;
	gap: 4px 8px;
	margin-bottom: 22px;
	border-bottom: 1px solid var(--line);
}
.viewtab {
	display: inline-block;
	margin-bottom: -1px;
	padding: 8px 4px 12px;
	margin-right: 22px;
	border-bottom: 2px solid transparent;
	font-size: 17px;
	font-weight: 600;
	color: var(--ink-3);
}
.viewtab:hover { color: var(--ink); }
.viewtab.active { color: var(--ink); border-bottom-color: var(--ink); }

/* 分类筛选。浅底托盘，和上面的页签、也和应用卡片区分开 */
.catbar {
	display: flex;
	flex-wrap: wrap;
	gap: 8px;
	margin-top: 18px;
	padding: 12px;
	border-radius: var(--r);
	background: var(--bg-soft);
}
.catbar .filter { background: #fff; }
.catbar .filter.active { background: var(--ink); }

/* 应用详情里「按派生关系 / 按发布时间」仍用这一组胶囊。
   标题字号大，胶囊要紧贴标题会挤在一起，所以单独拉开。 */
.filters { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 28px; }

.filter {
	display: inline-flex;
	align-items: baseline;
	gap: 6px;
	padding: 8px 16px;
	border: 1px solid var(--line);
	border-radius: 999px;
	font-size: 15px;
	color: var(--ink-2);
	transition: color .18s, background-color .18s, border-color .18s;
}
.filter:hover { border-color: var(--ink-3); color: var(--ink); }
.filter.active { color: #fff; background: var(--ink); border-color: var(--ink); }

/* 分类后面的数量。用户会拿它判断值不值得点进去 */
.filter-n { font-size: 13px; color: var(--ink-3); }
.filter.active .filter-n { color: rgba(255, 255, 255, .6); }

/* 结果条数与清除筛选 */
.appsmeta {
	display: flex;
	align-items: center;
	gap: 16px;
	margin: 26px 0 22px;
	font-size: 15px;
	color: var(--ink-3);
}
.appsmeta a { font-weight: 600; color: var(--brand); }

.empty {
	padding: 64px 0;
	text-align: center;
}
.empty h3 { font-size: 24px; }
.empty p { margin-top: 12px; font-size: 17px; color: var(--ink-3); }
.empty .btn-row { justify-content: center; }

/* 分页。框架的 dspPages() 输出的是后台那套结构，官网自己排 */
.pager {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	gap: 8px;
	margin-top: 48px;
}
.pager a, .pager span {
	display: flex;
	align-items: center;
	justify-content: center;
	min-width: 40px;
	height: 40px;
	padding: 0 12px;
	border: 1px solid var(--line);
	border-radius: var(--r-sm);
	font-size: 15px;
	color: var(--ink-2);
	transition: border-color .18s, color .18s;
}
.pager a:hover { border-color: var(--ink-3); color: var(--ink); }
.pager .active { color: #fff; background: var(--ink); border-color: var(--ink); }

/* ==================================================================
   13. 应用详情页
   ================================================================== */

.crumb { display: flex; gap: 8px; margin-bottom: 26px; font-size: 15px; color: var(--ink-3); }
.crumb a:hover { color: var(--ink); }
.crumb span { color: #cbd1d9; }

/* 右列用 minmax(0, 1fr)：默认最小宽度是内容宽度，
   截图一多会把整列撑出版心，页面底部出现横向滚动条。 */
.apphead { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 28px; align-items: start; }

.apphead-ico {
	display: flex;
	align-items: center;
	justify-content: center;
	flex: none;
	width: 88px; height: 88px;
	border-radius: var(--r-lg);
	background: var(--bg-soft);
	color: var(--ink);
	overflow: hidden;
}
.apphead-ico img { width: 100%; height: 100%; object-fit: cover; }
.apphead-ico .appicon-svg { width: 44px; height: 44px; }

.apphead-main h1 { font-size: 42px; }

.apphead-sum {
	margin-top: 14px;
	max-width: 640px;
	font-size: 20px;
	line-height: 1.7;
	color: var(--ink-2);
}

/* 本地优先、无广告、无需订阅。所有应用都一样，放在标题下 */
.apptags { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 14px; }

/* 版本、发布人、分类、价格。做成定义列表而不是几个小标签，
   因为这几项是用户真的会去读的事实，不是装饰 */
.appmeta {
	display: flex;
	flex-wrap: wrap;
	gap: 10px 40px;
	margin-top: 26px;
	padding: 20px 0;
	border-top: 1px solid var(--line-soft);
	border-bottom: 1px solid var(--line-soft);
	font-size: 15px;
}
.appmeta div { display: flex; gap: 10px; }
.appmeta dt { color: var(--ink-3); }
.appmeta dd { font-weight: 600; }
.appmeta dd a { color: var(--brand); }
.appmeta dd.is-yes { color: var(--brand); }
.appmeta dd.is-no { color: var(--ink-3); font-weight: 500; }
.appmeta-price { color: var(--ink); }

/* 「安装」按钮跳到获取顶箭页，这句话解释为什么 */
.apphead-tip { margin-top: 16px; font-size: 15px; color: var(--ink-3); }

/* 应用页上的版本列表。每张卡片进独立的版本页，方便发布人传播。
   切换排序会跳到这个锚点，留出顶栏高度，标题才不会被挡住。 */
#versions { scroll-margin-top: 84px; }
.verlist { display: flex; flex-direction: column; gap: 12px; }

.vercard {
	display: flex;
	align-items: center;
	gap: 16px;
	padding: 16px 18px;
	border: 1px solid var(--line);
	border-radius: var(--r);
	background: var(--bg);
	text-decoration: none;
	color: inherit;
	transition: border-color .18s, box-shadow .18s;
}
.vercard:hover { border-color: var(--ink-3); box-shadow: var(--shadow); }
.vercard > div { flex: 1; min-width: 0; }
.vercard h3 { font-size: 18px; line-height: 1.4; }
.vercard p { margin-top: 6px; font-size: 15px; color: var(--ink-3); }
.vercard-meta { display: flex; flex-wrap: wrap; gap: 8px 14px; margin-top: 6px; font-size: 14px; color: var(--ink-3); }
.vercard-ico {
	display: flex;
	align-items: center;
	justify-content: center;
	flex: none;
	width: 48px;
	height: 48px;
	border-radius: var(--r);
	background: var(--bg-soft);
	color: var(--ink);
	overflow: hidden;
}
.vercard-ico img { width: 100%; height: 100%; object-fit: cover; }
.vercard-ico .icon { width: 24px; height: 24px; }
.vercard-price { flex: none; font-weight: 600; color: var(--ink); white-space: nowrap; }
.vercard-price.is-free { color: var(--brand); }

.pubhead h1 { font-size: 36px; }
.pubhead p { margin-top: 10px; font-size: 17px; color: var(--ink-3); }
.pubhead-who { display: flex; align-items: center; gap: 20px; min-width: 0; }
.pubhead-who h1 { min-width: 0; overflow-wrap: anywhere; }

/* 创作者头像：审过的图片，没有就是默认灰色头像 */
.avatar {
	display: inline-flex;
	flex: none;
	width: 40px;
	height: 40px;
	border-radius: 50%;
	background: #e7e9ee;
	overflow: hidden;
}
.avatar img { width: 100%; height: 100%; object-fit: cover; }
.avatar--default svg { width: 100%; height: 100%; fill: #a8aeb8; }
.avatar--md { width: 48px; height: 48px; }
.avatar--lg { width: 88px; height: 88px; }

/* ------------------------------------------------------------------
   Markdown 正文
   ------------------------------------------------------------------
   详细介绍在库里存 md，后台谁写的都有可能，所以这里要把
   各种标签都兜住，不能出现"写了标题但没样式"的情况。
   ------------------------------------------------------------------ */

.md {
	max-width: 760px;
	font-size: 17px;
	line-height: 1.85;
	color: var(--ink-2);
}

.md > :first-child { margin-top: 0; }

.md h2 { margin: 44px 0 16px; font-size: 26px; color: var(--ink); }
.md h3 { margin: 34px 0 12px; font-size: 20px; color: var(--ink); }
.md h4 { margin: 28px 0 10px; font-size: 17px; color: var(--ink); }

.md p { margin: 0 0 18px; }

.md strong { font-weight: 600; color: var(--ink); }
.md em { font-style: italic; }

.md a { color: var(--brand); text-decoration: underline; text-underline-offset: 3px; }

.md ul, .md ol { margin: 0 0 18px; padding-left: 4px; }
.md li { position: relative; padding-left: 20px; margin-bottom: 6px; }

.md ul > li::before {
	content: "";
	position: absolute;
	left: 2px; top: 14px;
	width: 5px; height: 5px;
	border-radius: 50%;
	background: #c8ced8;
}

/* 有序列表自己数，因为上面把 list-style 去掉了 */
.md ol { counter-reset: md-ol; }
.md ol > li { counter-increment: md-ol; }
.md ol > li::before {
	content: counter(md-ol) ".";
	position: absolute;
	left: 0; top: 0;
	font-size: 15px;
	font-weight: 600;
	color: var(--ink-3);
}

.md blockquote {
	margin: 0 0 18px;
	padding: 2px 0 2px 20px;
	border-left: 3px solid var(--line);
	color: var(--ink-3);
}

.md code {
	padding: 2px 6px;
	border-radius: 5px;
	background: var(--bg-soft);
	font-family: var(--mono);
	font-size: .9em;
	color: var(--ink);
}
.md pre {
	margin: 0 0 18px;
	padding: 16px 18px;
	border-radius: var(--r);
	background: var(--bg-soft);
	overflow-x: auto;
}
.md pre code { padding: 0; background: none; font-size: 14px; line-height: 1.7; }

.md hr { margin: 36px 0; border: 0; border-top: 1px solid var(--line); }

.md img { margin: 0 0 18px; border-radius: var(--r); }

/* md 里的表格可能很宽，包一层滚动比压字号可读 */
.md table {
	display: block;
	width: 100%;
	margin: 0 0 18px;
	border-collapse: collapse;
	overflow-x: auto;
	font-size: 16px;
}
.md th, .md td {
	padding: 10px 14px;
	text-align: left;
	border-bottom: 1px solid var(--line-soft);
}
.md th { font-weight: 600; color: var(--ink); border-bottom-color: var(--line); }

/* ==================================================================
   14. 获取顶箭页
   ================================================================== */

.page-head { padding: 76px 0 56px; }
.page-head h1 { font-size: 52px; }
.page-head .sec-sub { max-width: 680px; }

/* Windows 和 Mac 并排，一样宽、一样高。手机和关于数据在下一行。
   Mac 还没有安装包时，Windows 占满一行，下面三张说明并排，避免空盒子被拉得很高。 */
.dl-main {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 24px;
	align-items: stretch;
}
.dl-main > .dl-card,
.dl-main > .dl-soon { height: 100%; }
.dl-main--soon { grid-template-columns: 1fr 1fr 1fr; }
.dl-main--soon > .dl-card { grid-column: 1 / -1; height: auto; }
.dl-main--soon > .dl-soon { height: auto; }

.dl-card {
	padding: 32px 30px;
	border: 1px solid var(--line);
	border-radius: var(--r-lg);
	background: #fff;
	box-shadow: var(--shadow);
}

.dl-card-head { display: flex; align-items: center; gap: 14px; margin-bottom: 24px; }
.dl-card-head h3 { font-size: 24px; }
/* 卡片是白底，这里用白底方版 LOGO */
.dl-ico { width: auto; height: 40px; }

/* 版本徽标 */
.badge {
	display: inline-block;
	padding: 2px 10px;
	border-radius: 999px;
	font-size: 12px;
	font-weight: 600;
	line-height: 1.7;
	white-space: nowrap;
}
.badge--ready { background: var(--brand-soft); color: var(--brand); }

.dl-lead { margin-top: 0; font-size: 17px; }

.dl-meta { display: grid; gap: 0; margin: 24px 0 26px; }
.dl-meta div {
	display: flex;
	gap: 16px;
	padding: 11px 0;
	border-bottom: 1px solid var(--line-soft);
	font-size: 15px;
}
.dl-meta div:last-child { border-bottom: 0; }
.dl-meta dt { flex: none; width: 88px; color: var(--ink-3); }
.dl-meta dd { color: var(--ink-2); word-break: break-all; }
.dl-meta .mono { font-family: var(--mono); font-size: 13px; }

.dl-note { font-size: 15px; color: var(--ink-3); white-space: pre-line; }

/* 还没有的平台。摆在这里是为了说明方向，但不装作已经能用 */
.dl-soon {
	padding: 26px 28px;
	border: 1px dashed var(--line);
	border-radius: var(--r-lg);
	background: var(--bg-softer);
}
.dl-soon h3 { display: flex; align-items: center; gap: 12px; font-size: 20px; color: var(--ink-2); }
.dl-soon h3 .icon { width: 22px; height: 22px; color: var(--ink-3); }
.dl-soon p { margin-top: 14px; font-size: 16px; color: var(--ink-3); }

/* 数据在自己设备上这件事是事实，不是"即将支持"，所以用实线 */
.dl-soon--plain { border-style: solid; background: #fff; }

/* 装好之后干什么。视频号二维码暂时不放在这里 */
.dl-steps-body {
	display: flex;
	align-items: flex-start;
	gap: 56px;
}
.dl-steps-main { flex: 1 1 auto; min-width: 0; }

.dl-steps { counter-reset: s; display: grid; gap: 18px; max-width: 720px; }
.dl-steps li {
	display: flex;
	gap: 16px;
	font-size: 18px;
	color: var(--ink-2);
}
.dl-steps li::before {
	counter-increment: s;
	content: counter(s);
	display: flex;
	align-items: center;
	justify-content: center;
	flex: none;
	width: 30px; height: 30px;
	margin-top: 4px;
	border-radius: 50%;
	background: var(--brand-soft);
	font-size: 15px;
	font-weight: 700;
	color: var(--brand);
}

/* 历史版本 */
.vlist { border: 1px solid var(--line); border-radius: var(--r-lg); overflow: hidden; }
.vlist li {
	display: flex;
	align-items: center;
	gap: 20px;
	padding: 16px 22px;
	border-bottom: 1px solid var(--line-soft);
	font-size: 16px;
}
.vlist li:last-child { border-bottom: 0; }
.vlist .v-num { flex: none; width: auto; min-width: 82px; white-space: nowrap; font-weight: 600; color: var(--ink); }
.vlist .v-date { flex: none; width: 108px; color: var(--ink-3); }
.vlist .v-note {
	flex: 1;
	min-width: 0;
	color: var(--ink-3);
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
}
.vlist .v-size { flex: none; color: var(--ink-3); }

/* ==================================================================
   15. 创作者栏目（creators 栏目首页 / earnings 收入页）
   ================================================================== */

/* 入口卡片借工具卡片的样子。创作者须知四张，用默认的两列。整张卡片可点 */
.toolcard > h3 { font-size: 21px; }

/* 创作者名单：头像和昵称、最近上架的几个应用图标、作品数和两个日期，整张卡片进创作者主页 */
.creatorgrid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 16px; }
.creatorcard {
	display: flex;
	flex-direction: column;
	gap: 14px;
	padding: 20px 20px 18px;
	border: 1px solid var(--line);
	border-radius: var(--r-lg);
	background: #fff;
	transition: border-color .2s, box-shadow .2s;
}
.creatorcard:hover { border-color: #d5dae2; box-shadow: var(--shadow); }
.creatorcard h3 { min-width: 0; font-size: 19px; line-height: 1.4; overflow-wrap: anywhere; }
.creatorcard-who { display: flex; align-items: center; gap: 12px; min-width: 0; }
.creatorcard-apps { display: flex; flex-wrap: wrap; gap: 8px; }
.creatorcard-ico {
	display: flex;
	align-items: center;
	justify-content: center;
	flex: none;
	width: 32px;
	height: 32px;
	border-radius: 8px;
	background: var(--bg-soft);
	color: var(--ink);
	overflow: hidden;
}
.creatorcard-ico img { width: 100%; height: 100%; object-fit: cover; }
.creatorcard-ico .appicon-svg { width: 18px; height: 18px; }
.creatorcard-meta { display: grid; gap: 6px; margin-top: auto; font-size: 14px; }
.creatorcard-meta div { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 2px 12px; }
.creatorcard-meta dt { color: var(--ink-3); }
.creatorcard-meta dd { font-weight: 600; color: var(--ink); }

.creators-contact a { color: var(--brand); text-decoration: underline; text-underline-offset: 3px; }

/* 创作者和平台各拿多少：两个大数字，创作者那个用品牌色 */
.earn-split { display: flex; flex-wrap: wrap; gap: 18px; }
.earn-stat {
	display: flex;
	flex-direction: column;
	gap: 4px;
	min-width: 200px;
	padding: 24px 28px;
	border: 1px solid var(--line);
	border-radius: var(--r-lg);
	background: #fff;
}
.earn-stat strong {
	font-size: 44px;
	font-weight: 700;
	line-height: 1.1;
	letter-spacing: -.02em;
}
.earn-stat span { font-size: 16px; color: var(--ink-3); }
.earn-stat--main { border-color: var(--brand-soft); background: var(--brand-soft); }
.earn-stat--main strong { color: var(--brand); }

/* 派生链示意：原创应用 → 中间版本 → 上一版 → 被买的这一版。
   箭头挂在每一项右侧外面，所以给右边留出位置 */
.chain { display: flex; flex-wrap: wrap; align-items: center; gap: 12px 0; }
.chain li {
	position: relative;
	margin-right: 38px;
	padding: 8px 18px;
	border: 1px solid var(--line);
	border-radius: 999px;
	background: #fff;
	font-size: 15px;
	font-weight: 600;
	color: var(--ink-2);
}
.chain li:last-child { margin-right: 0; }
.chain li:not(:last-child)::after {
	content: "→";
	position: absolute;
	top: 50%;
	right: -28px;
	transform: translateY(-50%);
	font-weight: 400;
	color: var(--ink-3);
}
.chain .chain-on { border-color: var(--brand); background: var(--brand); color: #fff; }

/* 分成表。桌面是表格，手机上每行变成一张卡片（见响应式） */
.share-table {
	width: 100%;
	border-collapse: separate;
	border-spacing: 0;
	border: 1px solid var(--line);
	border-radius: var(--r-lg);
	background: #fff;
	overflow: hidden;
	font-size: 16px;
}
.share-table th,
.share-table td {
	padding: 14px 18px;
	border-bottom: 1px solid var(--line-soft);
	text-align: left;
	vertical-align: top;
}
.share-table thead th {
	background: var(--bg-softer);
	font-size: 14px;
	font-weight: 600;
	color: var(--ink-3);
}
.share-table tbody tr:last-child th,
.share-table tbody tr:last-child td { border-bottom: 0; }
.share-table tbody th { font-weight: 600; color: var(--ink); }
.share-table td {
	font-weight: 600;
	font-variant-numeric: tabular-nums;
	white-space: nowrap;
	color: var(--ink);
}
.share-table td.is-empty,
.share-table td.share-platform { font-weight: 400; color: var(--ink-3); }

/* 规则条目。基础重置把列表圆点去掉了，这里加回来 */
.earn-list { max-width: 760px; padding-left: 1.3em; list-style: disc outside; }
.earn-list li {
	margin-top: 10px;
	font-size: 17px;
	line-height: 1.75;
	color: var(--ink-2);
}
.earn-list li:first-child { margin-top: 0; }
.earn-list--note li { font-size: 15px; color: var(--ink-3); }
.earn-h3 { font-size: 21px; }

/* 定价和提现两栏并排 */
.earn-cols { display: grid; grid-template-columns: 1fr 1fr; gap: 56px; }

/* ==================================================================
   16. 深色 CTA
   ================================================================== */

.cta {
	padding: 104px 0;
	background: var(--dark);
	color: #fff;
	text-align: center;
}
.cta h2 { font-size: 44px; }
.cta-sub {
	max-width: 560px;
	margin: 22px auto 0;
	font-size: 19px;
	line-height: 1.72;
	color: rgba(255, 255, 255, .66);
}
.cta-slogan {
	margin: 48px 0 42px;
	font-size: 56px;
	font-weight: 700;
	line-height: 1.22;
	letter-spacing: -.025em;
}
html[lang="en"] .cta-slogan { font-size: 40px; }
.cta .btn-row { justify-content: center; }

/* ==================================================================
   17. 页脚
   ================================================================== */

.site-footer {
	padding: 64px 0 40px;
	background: var(--dark-2);
	color: rgba(255, 255, 255, .58);
	font-size: 15px;
}

.footer-top {
	display: grid;
	grid-template-columns: 1.4fr 0.9fr 0.9fr 1.2fr;
	gap: 48px;
	padding-bottom: 40px;
	border-bottom: 1px solid rgba(255, 255, 255, .1);
}

.footer-brand img { width: auto; height: 30px; margin-bottom: 18px; }
.footer-brand p { max-width: 340px; line-height: 1.75; }
.footer-brand .footer-contact { margin-top: 14px; }
.footer-contact a { color: rgba(255, 255, 255, .85); transition: color .18s; }
.footer-contact a:hover { color: #fff; }

.footer-col h4 {
	margin-bottom: 14px;
	font-size: 14px;
	font-weight: 600;
	color: rgba(255, 255, 255, .9);
}
.footer-col li { margin-bottom: 9px; }
.footer-col a { transition: color .18s; }
.footer-col a:hover { color: #fff; }

.footer-bottom {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 8px 24px;
	padding-top: 28px;
	font-size: 14px;
	color: rgba(255, 255, 255, .4);
}
.footer-beian a {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	color: inherit;
	white-space: nowrap;
}
.footer-beian a:hover { color: #fff; }
.footer-beian img { width: 16px; height: 16px; }
.footer-slogan { margin-left: auto; color: rgba(255, 255, 255, .6); font-weight: 600; }

/* ==================================================================
   18. 进场动画
   ================================================================== */

/* 轻量：只做一次淡入上移，不做视差、不做 3D。
   隐藏状态挂在 html.js 下——没有 js 的时候内容必须是可见的，
   不能因为脚本没跑起来就整页空白 */
.reveal { transition: opacity .6s ease, transform .6s ease; }

html.js .reveal {
	opacity: 0;
	transform: translateY(14px);
}
html.js .reveal.is-in { opacity: 1; transform: none; }

/* 尊重系统的"减少动态效果"设置 */
@media (prefers-reduced-motion: reduce) {
	html { scroll-behavior: auto; }
	html.js .reveal, .reveal { opacity: 1; transform: none; transition: none; }
	.demo-field.is-new { transition: none; }
	.demo-caret { animation: none; }
	* { transition-duration: .01ms !important; animation-duration: .01ms !important; }
}

/* ==================================================================
   19. 响应式
   ------------------------------------------------------------------
   四档：1280 笔记本、1024 平板横屏、768 平板竖屏与手机、430/375 小屏。
   另有 860 一档只管顶栏导航收进抽屉。
   ================================================================== */

@media (max-width: 1280px) {
	.hero h1 { font-size: 62px; }
	html[lang="en"] .hero h1 { font-size: 42px; }
	.cta-slogan { font-size: 50px; }
	html[lang="en"] .cta-slogan { font-size: 36px; }
	.split { gap: 56px; }
}

@media (max-width: 1024px) {
	.section { padding: 84px 0; }
	.section--tight { padding: 60px 0; }

	/* 顶栏五项。收紧字号和间距后，抽屉断点（860）以上一行放得下 */
	.site-header .wrap { gap: 16px; }
	.site-nav a { padding: 8px 8px; font-size: 15px; }
	.header-right { gap: 10px; }

	.hero { padding: 68px 0; }
	.hero h1 { font-size: 52px; }
	html[lang="en"] .hero h1 { font-size: 36px; }
	.hero-sub { font-size: 19px; }

	.sec-title { font-size: 34px; }
	.sec-title--lg { font-size: 40px; }
	.sec-title--sm { font-size: 27px; }

	.split { grid-template-columns: 1fr; gap: 36px; }
	.statement { font-size: 23px; }

	.pillar { padding: 26px 24px; gap: 18px; }

	.appgrid { grid-template-columns: repeat(2, 1fr); }
	.bloggrid { grid-template-columns: repeat(2, 1fr); }
	.toollist { grid-template-columns: 1fr; }
	.creatorgrid { grid-template-columns: repeat(3, minmax(0, 1fr)); }

	/* 演示两栏挤在一起就看不清了，改成上下 */
	.demo { grid-template-columns: 1fr; gap: 24px; }

	.flow { grid-template-columns: repeat(2, 1fr); gap: 28px 24px; }

	.apphead-main h1 { font-size: 36px; }

	.dl-main { grid-template-columns: 1fr; }

	.earn-cols { grid-template-columns: 1fr; gap: 44px; }

	.page-head { padding: 60px 0 44px; }
	.page-head h1 { font-size: 42px; }

	.cta { padding: 84px 0; }
	.cta h2 { font-size: 36px; }
	.cta-slogan { font-size: 42px; margin: 40px 0 34px; }
	html[lang="en"] .cta-slogan { font-size: 32px; }

	.footer-top { grid-template-columns: 1fr 1fr; gap: 36px; }
	.footer-brand { grid-column: span 2; }
}

/* 导航收进抽屉。比其他手机规则早一档，避免英文站顶栏在中等宽度挤成多行。
   改这个数字要同步改 main.js 里 resize 时关抽屉的宽度 */
@media (max-width: 860px) {
	.nav-toggle { display: block; }

	.site-nav {
		display: none;
		position: absolute;
		left: 0; right: 0; top: 100%;
		flex-direction: column;
		gap: 0;
		margin: 0;
		padding: 8px 20px 20px;
		background: #fff;
		border-bottom: 1px solid var(--line);
		box-shadow: var(--shadow);
	}
	.nav-open .site-nav { display: flex; }
	.site-nav a {
		padding: 13px 0;
		border-radius: 0;
		border-bottom: 1px solid var(--line-soft);
		font-size: 17px;
	}
	.site-nav a:hover { background: none; }

	/* 桌面端右侧那组入口在手机上塞不下，改从抽屉里出 */
	.header-right { display: none; }
	.site-nav .nav-lang { display: block; color: var(--ink-3); }
	.site-nav .nav-cta {
		display: block;
		margin-top: 14px;
		border-bottom: 0;
		font-weight: 600;
		color: var(--brand);
	}
}

@media (max-width: 768px) {

	.wrap { padding: 0 20px; }
	.section { padding: 60px 0; }
	.section--tight { padding: 48px 0; }

	.hero { padding: 48px 0 56px; }
	.hero h1 { font-size: 40px; letter-spacing: -.02em; }
	html[lang="en"] .hero h1 { font-size: 30px; }
	.hero-sub { margin-top: 20px; font-size: 17px; }
	.hero .btn-row { margin-top: 28px; }
	.hero .btn { flex: 1 1 auto; }

	.sec-head { margin-bottom: 34px; }
	.sec-title { font-size: 28px; }
	.sec-title--lg { font-size: 31px; }
	.sec-title--sm { font-size: 24px; }
	.sec-title--xs { font-size: 22px; }
	.sec-sub { margin-top: 16px; font-size: 17px; }

	.prose p { font-size: 17px; }
	.statement { font-size: 21px; padding-left: 18px; }

	.appgrid { grid-template-columns: 1fr; }
	.bloggrid { grid-template-columns: 1fr; }
	.grid-more { margin-top: 32px; }
	.creatorgrid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
	.creatorcard { padding: 16px 16px 14px; }

	/* 手机上两列卡片挤到 160 宽就没法读了，改成一列 */
	.pillars { grid-template-columns: 1fr; gap: 16px; }
	.pillar { grid-template-columns: 46px 1fr; gap: 16px; padding: 22px 20px; }
	.pillar-ico { width: 46px; height: 46px; border-radius: 13px; }
	.pillar-ico .icon { width: 23px; height: 23px; }
	.pillar h3 { font-size: 19px; margin-bottom: 9px; }
	.pillar p { font-size: 16px; }

	.demo-field-label { width: 76px; }

	.flow { grid-template-columns: 1fr; gap: 22px; }
	.flow li { grid-template-columns: 32px 1fr; align-items: start; gap: 14px; }

	.toolchip { font-size: 16px; padding: 8px 16px; }

	.learn { padding: 26px 22px 24px; }
	.learn p { font-size: 16px; }
	.learn .btn-row { flex-direction: column; }

	.earn-stat { flex: 1 1 140px; min-width: 0; padding: 20px 22px; }
	.earn-stat strong { font-size: 36px; }
	.earn-list li { font-size: 16px; }

	/* 派生链改成竖排，箭头朝下 */
	.chain { flex-direction: column; align-items: flex-start; gap: 0; }
	.chain li { margin: 0 0 30px; }
	.chain li:last-child { margin-bottom: 0; }
	.chain li:not(:last-child)::after {
		content: "↓";
		top: auto;
		right: auto;
		bottom: -27px;
		left: 22px;
		transform: none;
	}

	/* 分成表六列在手机上挤不下：每行变成一张卡片，表头文字由 data-label 带到每一格前面，
	   这一行没有的角色整格隐藏 */
	.share-table,
	.share-table tbody,
	.share-table tr,
	.share-table th,
	.share-table td { display: block; }
	.share-table { border: 0; border-radius: 0; background: none; overflow: visible; }
	.share-table thead { display: none; }
	.share-table tbody tr {
		margin-bottom: 14px;
		padding: 16px 18px;
		border: 1px solid var(--line);
		border-radius: var(--r);
		background: #fff;
	}
	.share-table tbody tr:last-child { margin-bottom: 0; }
	.share-table tbody th { padding: 0 0 8px; border: 0; }
	.share-table td {
		display: flex;
		justify-content: space-between;
		gap: 16px;
		padding: 5px 0;
		border: 0;
		white-space: normal;
	}
	.share-table td::before { content: attr(data-label); font-weight: 400; color: var(--ink-2); }
	.share-table td.is-empty { display: none; }

	/* 手机上二维码放在文字下面，居中——并排会把两边都挤得太窄 */
	.learn-body { flex-direction: column; gap: 28px; }
	.qr { width: 100%; }
	.qr img { margin: 0 auto; }

	/* 搜索框和按钮各占一行，手机上并排的话输入框只剩一半宽 */
	.appsearch { flex-wrap: wrap; max-width: none; }
	.appsearch-input { flex: 1 0 100%; }
	.appsearch-btn { flex: 1; }

	.appsmeta { margin: 20px 0 18px; }
	.vercard { align-items: flex-start; }
	.vercard-price { margin-left: auto; }

	.crumb { margin-bottom: 20px; }

	/* 详情页图标改到标题上方，横排会把标题挤成一列窄字 */
	.apphead { grid-template-columns: minmax(0, 1fr); gap: 20px; }
	.apphead-ico { width: 68px; height: 68px; }
	.apphead-ico .appicon-svg { width: 34px; height: 34px; }
	.apphead-main h1 { font-size: 30px; }
	.apphead-sum { margin-top: 12px; font-size: 18px; }
	.appmeta { gap: 8px 28px; }
	.apphead .btn-row .btn { flex: 1 1 auto; }

	.md { font-size: 16px; }
	.md h2 { margin-top: 34px; font-size: 22px; }
	.md h3 { margin-top: 26px; font-size: 19px; }

	.page-head { padding: 44px 0 34px; }
	.page-head h1 { font-size: 34px; }

	.dl-card { padding: 26px 22px; }
	.dl-soon { padding: 24px 22px; }
	.dl-meta div { flex-direction: column; gap: 2px; }
	.dl-meta dt { width: auto; }
	.dl-steps li { font-size: 17px; }
	.dl-steps-body { flex-direction: column; gap: 32px; }

	.vlist li { flex-wrap: wrap; gap: 8px 16px; padding: 14px 18px; }
	.vlist .v-note { flex: 1 0 100%; order: 3; white-space: normal; }

	.cta { padding: 64px 0; }
	.cta h2 { font-size: 29px; }
	.cta-sub { font-size: 17px; }
	.cta-slogan { font-size: 32px; margin: 32px 0 28px; }
	html[lang="en"] .cta-slogan { font-size: 26px; }
	.cta .btn-row { flex-direction: column; }

	.site-footer { padding: 48px 0 32px; }
	.footer-top { grid-template-columns: 1fr; gap: 30px; padding-bottom: 32px; }
	.footer-brand { grid-column: auto; }
	.footer-slogan { margin-left: 0; flex: 1 0 100%; }
}

@media (max-width: 430px) {
	.wrap { padding: 0 18px; }
	.section { padding: 52px 0; }

	.site-header .wrap { height: 60px; gap: 16px; }
	.brand img { height: 30px; }

	.hero h1 { font-size: 34px; }
	html[lang="en"] .hero h1 { font-size: 26px; }
	.hero .btn-row { flex-direction: column; }
	.hero .btn { width: 100%; }

	.sec-title { font-size: 25px; }
	.sec-title--lg { font-size: 28px; }

	.btn { height: 46px; padding: 0 20px; font-size: 15px; }

	.win-body { padding: 16px; }

	.demo-bubble { font-size: 16px; padding: 14px 16px; }
	.demo-field { flex-wrap: wrap; gap: 6px 10px; }
	.demo-field-label { width: auto; }
	.demo-field-val { flex: 1 0 100%; }
	.demo-field.is-new.is-shown { max-height: 140px; }

	.appcard { padding: 20px 18px 18px; }
	.toolcard { padding: 22px 20px 20px; }
	.toolcard-head h3,
	.toolcard > h3 { font-size: 19px; }
	.creatorgrid { grid-template-columns: 1fr; }
	.pubhead-who { gap: 14px; }
	.pubhead-who .avatar--lg { width: 64px; height: 64px; }
	.pubhead h1 { font-size: 28px; }

	.apphead .btn-row { flex-direction: column; }
	.apphead .btn-row .btn { width: 100%; }

	.cta-slogan { font-size: 27px; }
	html[lang="en"] .cta-slogan { font-size: 22px; }
	.cta h2 { font-size: 25px; }
}

@media (max-width: 375px) {
	.hero h1 { font-size: 31px; }
	html[lang="en"] .hero h1 { font-size: 24px; }
	.sec-title { font-size: 23px; }
	.cta-slogan { font-size: 24px; }
	html[lang="en"] .cta-slogan { font-size: 20px; }

	.appcard-ico { width: 42px; height: 42px; }
	.appicon-svg { width: 22px; height: 22px; }

	/* 分页条数多的时候要能挤进 375 宽 */
	.pager a, .pager span { min-width: 34px; height: 34px; padding: 0 8px; font-size: 14px; }
}

.appmeta-code {
	font-family: Consolas, "Courier New", monospace;
	user-select: text;
}

/* 放得下就横排。超过一行就换行，不要在图片下面出横向滚动条。 */
.shots {
	display: flex;
	flex-wrap: wrap;
	gap: 12px;
	max-width: 100%;
	margin-top: 20px;
}

.shots .shot-open {
	border: 0;
	padding: 0;
	background: none;
	cursor: zoom-in;
	flex: none;
}

.shots img {
	height: 180px;
	width: auto;
	max-width: 320px;
	object-fit: cover;
	border-radius: 12px;
	border: 1px solid var(--line);
	background: var(--bg);
	display: block;
}

.shot-viewer {
	position: fixed;
	inset: 0;
	/* 顶栏是 100。放大层更低的话，阴影盖不住菜单 */
	z-index: 240;
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 16px;
	padding: 24px;
	background: rgba(15, 23, 42, 0.82);
}

.shot-viewer[hidden] {
	display: none;
}

.shot-viewer img {
	max-width: min(960px, calc(100vw - 140px));
	max-height: 82vh;
	object-fit: contain;
	border-radius: 12px;
	background: #fff;
}

.shot-viewer-nav,
.shot-viewer-close {
	border: 0;
	border-radius: 999px;
	background: #fff;
	color: #111827;
	cursor: pointer;
}

.shot-viewer-nav {
	width: 44px;
	height: 44px;
	font-size: 28px;
	line-height: 1;
	flex: none;
}

.shot-viewer-close {
	position: absolute;
	top: 16px;
	right: 16px;
	width: 36px;
	height: 36px;
	font-size: 22px;
}