/* 公开静态页。只给 /learn/ 使用，不进入应用样式。 */
:root {
	--ink: #1f2329;
	--muted: #4e5969;
	--faint: #86909c;
	--brand: #2f6bff;
	--line: #e5e8ef;
	--bg: #f5f7fa;
	--card: #ffffff;
	--font: -apple-system, BlinkMacSystemFont, "Segoe UI", "PingFang SC", "PingFang TC", "Hiragino Sans GB", "Microsoft YaHei", "Microsoft JhengHei", "Noto Sans SC", "Noto Sans TC", "Helvetica Neue", Arial, sans-serif;
}

* { box-sizing: border-box; }

html { scroll-behavior: smooth; }

body {
	margin: 0;
	background: var(--bg);
	color: var(--ink);
	font-family: var(--font);
	font-size: 16px;
	line-height: 1.65;
}

a { color: var(--brand); text-decoration-thickness: 1px; text-underline-offset: 2px; }
a:hover { color: #1d4ed8; }

.wrap {
	max-width: 840px;
	margin: 0 auto;
	padding: 20px 16px 72px;
}

.top {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 12px;
	margin-bottom: 12px;
}

.brand {
	color: var(--ink);
	font-weight: 700;
	font-size: 18px;
	text-decoration: none;
}

.top-actions {
	display: flex;
	align-items: center;
	gap: 12px;
}

.lang-switch {
	color: var(--muted);
	font-size: 14px;
	text-decoration: none;
	white-space: nowrap;
}

.open-app {
	display: inline-block;
	background: var(--brand);
	color: #fff;
	text-decoration: none;
	border-radius: 999px;
	padding: 8px 14px;
	font-size: 14px;
	white-space: nowrap;
}

.open-app:hover { color: #fff; background: #1d4ed8; }

.nav {
	display: flex;
	flex-wrap: wrap;
	gap: 8px;
	margin: 0 0 28px;
	padding: 0;
	list-style: none;
}

.nav a {
	display: inline-block;
	padding: 4px 10px;
	border-radius: 999px;
	background: var(--card);
	border: 1px solid var(--line);
	color: var(--ink);
	text-decoration: none;
	font-size: 14px;
}

.nav a[aria-current="page"] {
	background: #e8efff;
	border-color: #c5d4ff;
	color: var(--brand);
	font-weight: 600;
}

h1 { font-size: 28px; line-height: 1.3; margin: 0 0 12px; }
h2 { font-size: 20px; line-height: 1.35; margin: 28px 0 8px; }
h3 { font-size: 17px; line-height: 1.4; margin: 18px 0 6px; }

p { margin: 0 0 12px; }
.lead { font-size: 17px; }
.note { color: var(--muted); font-size: 14px; }

.books, .plain { padding-left: 1.2em; }
.books li { margin: 4px 0; }

.entry, .card, .doc-block {
	background: var(--card);
	border: 1px solid var(--line);
	border-radius: 12px;
	padding: 14px 16px;
	margin: 10px 0;
}

.entry h2, .card h2 { margin: 0 0 6px; font-size: 22px; }
.ipa { color: var(--brand); font-size: 15px; }
.gloss { margin: 8px 0; padding-left: 1.2em; }
.gloss b { font-weight: 600; }
.tags { color: var(--faint); font-size: 13px; margin: 0; }
blockquote {
	margin: 10px 0 0;
	padding: 8px 0 0;
	border-top: 1px solid var(--line);
	color: var(--muted);
}
blockquote p { margin: 0 0 4px; }
blockquote .en { color: var(--ink); }

.ipa-grid {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(104px, 1fr));
	gap: 8px;
	margin: 8px 0 4px;
}

.ipa-cell {
	background: var(--card);
	border: 1px solid var(--line);
	border-radius: 12px;
	padding: 10px 8px;
	text-align: center;
}

.sym { display: block; font-size: 22px; line-height: 1.2; }
.voice { display: block; margin-top: 4px; color: var(--faint); font-size: 12px; }

.meta { color: var(--faint); font-size: 13px; margin: 0 0 6px; }

.foot {
	margin-top: 36px;
	padding-top: 16px;
	border-top: 1px solid var(--line);
	color: var(--muted);
	font-size: 13px;
}

.foot nav { margin-top: 8px; }
.foot nav a { margin-right: 12px; }

.toc { columns: 2; padding-left: 1.2em; }
@media (max-width: 560px) {
	.toc { columns: 1; }
	h1 { font-size: 24px; }
}