/* Chinese pages ship their own serif, subsetted from Source Han Serif (OFL) by
   build_fonts.py: iOS has no Chinese serif, so without it every iPhone set the
   Chinese copy in PingFang, a sans. The range keeps Latin on the next face,
   and takes the curly quotes and the ellipsis, which Charter drew as narrow
   Latin marks pressed against the Han beside them (as on mole.fit, 2026-10-25). */
@font-face {
  font-family: "Pake Serif SC";
  src: local("Source Han Serif SC"), local("Noto Serif CJK SC"),
       url("/fonts/pake-serif-sc-regular.woff2") format("woff2");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
  unicode-range: U+201C-201D, U+2026, U+2E80-2EFF, U+3000-303F, U+3400-4DBF, U+4E00-9FFF, U+F900-FAFF, U+FE30-FE4F, U+FF00-FFEF;
}
@font-face {
  font-family: "Pake Serif SC";
  src: local("Source Han Serif SC SemiBold"), local("Noto Serif CJK SC SemiBold"),
       url("/fonts/pake-serif-sc-semibold.woff2") format("woff2");
  font-weight: 500 700;
  font-style: normal;
  font-display: swap;
  unicode-range: U+201C-201D, U+2026, U+2E80-2EFF, U+3000-303F, U+3400-4DBF, U+4E00-9FFF, U+F900-FAFF, U+FE30-FE4F, U+FF00-FFEF;
}
/* The hero wordmark is Source Serif 4 Display Regular (Adobe, OFL 1.1), cut to
   the letters of Pake and renamed, since Source is a Reserved Font Name. It
   rides inline like the mark: fetched on its own it would paint the fallback
   serif first and then swap (2026-10-30). */
@font-face {
  font-family: "Pake Wordmark";
  src: url("data:font/woff2;base64,T1RUTwANAIAAAwBQQkFTRWUjXb0AAApsAAAARkNGRiC2MYmRAAAHnAAAAs1HREVGABEABQAACrQAAAAWR1BPUwYy7isAAArMAAAA2kdTVUKTFYIWAAALqAAAADZPUy8yXcJXwwAAAUAAAABgY21hcAD9ARQAAAcwAAAATGhlYWQhSoM/AAAA3AAAADZoaGVhBl0BPAAAARQAAAAkaG10eAoLAOgAAAvgAAAAFG1heHAABVAAAAABOAAAAAZuYW1lS+2NrQAAAaAAAAWPcG9zdP/RADIAAAd8AAAAIAABAAAABAFHrOYsDV8PPPUAAwPoAAAAAN/wnx4AAAAA3/CfHgAf//QCMALoAAAAAwACAAAAAAAAAAEAAAQM/rEAAAKAAB8ABQIwAAEAAAAAAAAAAAAAAAAAAAAFAABQAAAFAAAAAwIAAZAABQAAAooCWAAAAEsCigJYAAABXgAyAQ8AAAIEBQMGBAUCAgQAAAABAAAAAAAAAAAAAAAAQURCTwBAAFAAawQM/rEAAAQMAU8AAAABAAAAAAHEAp4AAAAgAAMAAAAOAK4AAQAAAAAAAQANAAAAAQAAAAAAAgAHAA0AAQAAAAAAAwASABQAAQAAAAAABAANAAAAAQAAAAAABgANACYAAwABBAkAAACcADMAAwABBAkAAQAaAM8AAwABBAkAAgAOAOkAAwABBAkAAwAkAPcAAwABBAkABAAaAM8AAwABBAkABQBYARsAAwABBAkABgAaAXMAAwABBAkADQMgAY0AAwABBAkADgA0BK1QYWtlIFdvcmRtYXJrUmVndWxhclBha2VXb3JkbWFyazs0LjAwNVBha2UtV29yZG1hcmsAqQAgADIAMAAxADQAIAAtACAAMgAwADIAMwAgAEEAZABvAGIAZQAgACgAaAB0AHQAcAA6AC8ALwB3AHcAdwAuAGEAZABvAGIAZQAuAGMAbwBtAC8AKQAsACAAdwBpAHQAaAAgAFIAZQBzAGUAcgB2AGUAZAAgAEYAbwBuAHQAIABOAGEAbQBlACAgGABTAG8AdQByAGMAZSAZAC4AUABhAGsAZQAgAFcAbwByAGQAbQBhAHIAawBSAGUAZwB1AGwAYQByAFAAYQBrAGUAVwBvAHIAZABtAGEAcgBrADsANAAuADAAMAA1AFYAZQByAHMAaQBvAG4AIAA0AC4AMAAwADUAOwBoAG8AdABjAG8AbgB2ACAAMQAuADEALgAwADsAbQBhAGsAZQBvAHQAZgBlAHgAZQAgADIALgA2AC4AMABQAGEAawBlAC0AVwBvAHIAZABtAGEAcgBrAFQAaABpAHMAIABGAG8AbgB0ACAAUwBvAGYAdAB3AGEAcgBlACAAaQBzACAAbABpAGMAZQBuAHMAZQBkACAAdQBuAGQAZQByACAAdABoAGUAIABTAEkATAAgAE8AcABlAG4AIABGAG8AbgB0ACAATABpAGMAZQBuAHMAZQAsACAAVgBlAHIAcwBpAG8AbgAgADEALgAxAC4AIABUAGgAaQBzACAAbABpAGMAZQBuAHMAZQAgAGkAcwAgAGEAdgBhAGkAbABhAGIAbABlACAAdwBpAHQAaAAgAGEAIABGAEEAUQAgAGEAdAA6ACAAaAB0AHQAcAA6AC8ALwBzAGMAcgBpAHAAdABzAC4AcwBpAGwALgBvAHIAZwAvAE8ARgBMAC4AIABUAGgAaQBzACAARgBvAG4AdAAgAFMAbwBmAHQAdwBhAHIAZQAgAGkAcwAgAGQAaQBzAHQAcgBpAGIAdQB0AGUAZAAgAG8AbgAgAGEAbgAgIBgAQQBTACAASQBTIBkAIABCAEEAUwBJAFMALAAgAFcASQBUAEgATwBVAFQAIABXAEEAUgBSAEEATgBUAEkARQBTACAATwBSACAAQwBPAE4ARABJAFQASQBPAE4AUwAgAE8ARgAgAEEATgBZACAASwBJAE4ARAAsACAAZQBpAHQAaABlAHIAIABlAHgAcAByAGUAcwBzACAAbwByACAAaQBtAHAAbABpAGUAZAAuACAAUwBlAGUAIAB0AGgAZQAgAFMASQBMACAATwBwAGUAbgAgAEYAbwBuAHQAIABMAGkAYwBlAG4AcwBlACAAZgBvAHIAIAB0AGgAZQAgAHMAcABlAGMAaQBmAGkAYwAgAGwAYQBuAGcAdQBhAGcAZQAsACAAcABlAHIAbQBpAHMAcwBpAG8AbgBzACAAYQBuAGQAIABsAGkAbQBpAHQAYQB0AGkAbwBuAHMAIABnAG8AdgBlAHIAbgBpAG4AZwAgAHkAbwB1AHIAIAB1AHMAZQAgAG8AZgAgAHQAaABpAHMAIABGAG8AbgB0ACAAUwBvAGYAdAB3AGEAcgBlAC4AaAB0AHQAcAA6AC8ALwBzAGMAcgBpAHAAdABzAC4AcwBpAGwALgBvAHIAZwAvAE8ARgBMAAAAAAIAAAADAAAAFAADAAEAAAAUAAQAOAAAAAoACAACAAIAUABhAGUAa///AAAAUABhAGUAa////7H/of+e/5kAAQAAAAAAAAAAAAAAAwAAAAAAAP/OADIAAAAAAAAAAAAAAAAAAAAAAAAAAAEABAIAAQEBDVBha2VXb3JkbWFyawABAQEf+BsB+BwMAPgdA0AMA6p/+MT5fAX3gw+O+V4S94wRAAMBAUyir1NvdXJjZSBpcyBhIHRyYWRlbWFyayBvZiBBZG9iZSBpbiB0aGUgVW5pdGVkIFN0YXRlcyBhbmQvb3Igb3RoZXIgY291bnRyaWVzLkNvcHlyaWdodCAyMDE0IC0gMjAyMyBBZG9iZSAoaHR0cDovL3d3dy5hZG9iZS5jb20vKSwgd2l0aCBSZXNlcnZlZCBGb250IE5hbWUgJ1NvdXJjZScuUGFrZSBXb3JkbWFyawAAAAAxAEIARgBMAAUCAAEAQQCZARsBbgHE39sW+HT5Mvx0Buj8/xX3J/d/9yf7fwX72vidFfcp+4H7KfuBBfdl94EV9yn3gQX8bgf72/ieFfe8Bvso+4AFDmH3Vvf8FeiL9wWO2x7DBvcFvE4nKGBB+wcfTI8G+y/35hXcggWOO4v7BC4aXwcsi/sHiDoeOoIFe/ePmwculQWI04vv5Bq9BvdGz+nz9wE/1/sjH/t8Bg4l+AWDFbKhoquZH4GTBXh6gYR6G3h/l7Uf93MH9wJguzA1R2BKfB50jZV9ohuhmpqmkR+b0AWQnJuOnBvKp2spH2kHWn5ogXSDCPsNYnNdUxpCv2TMvbigv7QeXpClc7kb+5f3ERWslLPfrx6akaeVuJkI+0QHZmBxhWYbYGuixB8OKPeI+E4VyrNZQGl+fGYf+0sG9xCVx73HG478WhXTyK7Yrh99kwVga2BvTxszStX3Dh+Qi4+PGve2Bo+XjZuhGvNCyy8e+wAuKPsp+yLkNfcHHw5Zrhb3ZpsGSZMFibSKx74axsz3I/uFBfcPmwZTk/s396H3DPcY1pYFm/tYewfjgCr7ASv7AAWPB/fcB4/3WIOT+yFnBX0H2XoF/GUHVYo6iVceRIIFDvjAFQAAAAABAAAACAAAAAQADgACaWRlb3JvbW4ABERGTFQAGmN5cmwAGmdyZWsAGmxhdG4AGgAGAAAAAAABAAIACAAMAAH/WwABAAAAAAABAAAADAAAAAAAAAACAAEAAQAEAAEAAAABAAAACgAwAD4ABERGTFQAGmN5cmwAGmdyZWsAGmxhdG4AGgAEAAAAAP//AAEAAAABa2VybgAIAAAAAQAAAAEABAAJAAgAAgAKABIAAQACAAAAEAABAAIAAAA2AAIAGAAEAAAAHgAiAAEABAAA//j/+P/sAAEAAQABAAIAAAABAAEAAwABAAIAAwACAC4ABAAAADgAQgADAAUAAAAA//v/+wAAAAD/+gAA//b/5wAAAAD/7AAAAAAAAQADAAIAAwAEAAEAAwACAAEAAgABAAEABAAEAAEAAgADAAAAAQAAAAoAMgA0AARERkxUABpjeXJsACRncmVrACRsYXRuACQABAAAAAD//wAAAAAAAAAAAAAAAAKAAFACAgAnAcYAJwHJACsB+gAf") format("woff2");
  font-weight: 400;
  font-style: normal;
  font-display: block;
}
@font-face {
  font-family: "Pake Mark";
  src: url("/fonts/pake-mark.woff2") format("woff2");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
  unicode-range: U+6BBC;
}

:root {
  /* Desktop text ladder shared by the product sites (Kata rules/site.md, 2026-11-01):
     five rungs and nothing between them. The 84px wordmark, the price figure and
     the terminal that draws the CLI (14px) sit outside it. Phones keep the ladder
     in the block at the end of this file. */
  --text-meta: 14px;
  --text-body: 15px;
  --text-lede: 16px;
  --text-title: 21px;
  --text-section: 32px;
  --parchment: #f5f4ed;
  --ivory: #faf9f5;
  --warm-sand: #e8e6dc;
  --line: #d8d5c8;
  --border-soft: #e5e3d8;
  --near-black: #363433;
  --foot-ink: #f4f2ec;
  --dark-warm: #3d3d3a;
  --stone: #6b6a64;
  --brand: #862617;
  --brand-light: #A03F2E;
  --brand-tint: #FAEFED;
  --olive: #504e49;
  --line-faint: #edebe1;
  --border-card: color-mix(in srgb, var(--border-soft) 70%, var(--line));
  --green-bright: #5fbf85;
  --term: #141318;
  --term-line: #2a2930;
  --term-text: #e7e4d9;
  --term-muted: #9b978c;
  /* The Chinese face leads so its marks win; Latin still falls to Charter. */
  --serif: "Pake Serif SC", Charter, Georgia, "Source Han Serif SC", "Noto Serif CJK SC", "Songti SC", "STSong", serif;
  --mono: "JetBrains Mono", "SF Mono", Menlo, Consolas, monospace;
  --section-gap: 84px;
  --radius-sm: 4px;
  --radius-md: 8px;
  --radius-pill: 999px;
}

html[lang="en"] {
  --serif: Charter, Georgia, Palatino, "Times New Roman", serif;
}

* { box-sizing: border-box; }
/* Nav links jump straight to their section, with no glide, as on mole.fit
   (maintainer 2026-11-02: the glide looked worse than the instant jump). */
/* Short pages: main takes the spare height so the dark footer meets the viewport bottom. */
body > main { flex: 1 0 auto; }
body {
  margin: 0;
  min-width: 320px;
  display: flex;
  flex-direction: column;
  min-height: 100vh;
  background: var(--parchment);
  color: var(--near-black);
  font-family: var(--serif);
  font-size: var(--text-lede);
  line-height: 1.7;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
}
/* Every line fills the column, as on mole.fit (maintainer 2026-10-25): no
   pretty, balance, strict breaking or glued tails, which all wrapped phone lines
   early. A comma or full stop that does not fit hangs at the edge (WebKit). */
html[lang="zh-CN"] body { hanging-punctuation: allow-end; }
main { flex: 1 0 auto; }
a { color: var(--brand); text-decoration: none; }
a:hover { color: var(--brand-light); }
img { max-width: 100%; height: auto; }
code, pre { font-family: var(--mono); }
:focus-visible {
  outline: 2px solid color-mix(in srgb, var(--brand) 55%, transparent);
  outline-offset: 3px;
  border-radius: var(--radius-sm);
}
.skip-link {
  position: fixed;
  top: 12px;
  left: 12px;
  z-index: 999;
  transform: translateY(-140%);
  border-radius: var(--radius-pill);
  background: var(--brand);
  color: var(--ivory);
  padding: 8px 14px;
  font-size: var(--text-meta);
  transition: transform 0.12s ease-out;
}
.skip-link:focus { transform: translateY(0); }

/* mole.fit's page: 1120px with 64px gutters, a 992px column. */
.wide { max-width: 1120px; margin: 0 auto; padding: 0 64px; }
.section { margin-bottom: var(--section-gap); }
/* Anchored sections and doc headings land 47px under the sticky nav pill, 34
   on phones, the distance the pill keeps above a page title (mole.fit's values,
   maintainer 2026-11-01; 104 left 35 on desktop and 44 on phones). */
:root { --anchor-clear: 116px; }
@media (max-width: 560px) { :root { --anchor-clear: 94px; } }
.section[id] { scroll-margin-top: var(--anchor-clear); }
/* The footer brings its own section gap; flex items do not collapse margins. */
.section:last-child { margin-bottom: 0; }
.section-head { display: grid; gap: 12px; margin-bottom: 28px; }
/* Section titles and ledes use mole.fit's 32px dark-warm title and 16px olive lede. */
.section-head h2 {
  margin: 0;
  color: var(--dark-warm);
  font-size: var(--text-section);
  font-weight: 500;
  line-height: 1.2;
  letter-spacing: -0.3px;
}
.section-head p { margin: 0; color: var(--olive); font-size: var(--text-lede); line-height: 1.55; }

.btn {
  min-height: 44px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: var(--radius-pill);
  border: 1px solid var(--brand);
  padding: 13px 28px;
  min-width: 158px;
  font-family: var(--serif);
  font-size: var(--text-body);
  font-weight: 500;
  letter-spacing: 0.2px;
  line-height: 1.55;
  transition: transform 0.12s ease-out, background-color 0.12s ease-out, border-color 0.12s ease-out, color 0.12s ease-out;
  touch-action: manipulation;
}
.btn:hover { transform: translateY(-1px); }
.btn:active { transform: scale(0.98); }
.btn-primary { background: var(--brand); color: var(--ivory); }
.btn-primary:hover { background: var(--brand-light); border-color: var(--brand-light); color: var(--ivory); }
/* The family's secondary button (2026-10-20): an ivory pill with a hairline, so
   it never competes with the filled primary beside it. */
.btn-secondary { background: var(--ivory); border-color: var(--line); color: var(--near-black); }
.btn-secondary:hover { background: var(--warm-sand); color: var(--near-black); }

/* The family's sticky nav pill (hina.day, mole.fit): a solid ivory
   track with a hairline border, on a parchment veil that fades out below. */
.site-nav {
  position: sticky;
  top: 0;
  z-index: 60;
  padding: 16px 50px 0;
  background: linear-gradient(180deg, var(--parchment) 0%, var(--parchment) 72%, transparent 100%);
}
.nav-inner {
  display: flex;
  align-items: center;
  max-width: 1020px;
  min-height: 52px;
  margin: 0 auto;
  padding: 8px 13px;
  border: 1px solid var(--line-faint);
  border-radius: var(--radius-pill);
  background: var(--ivory);
  font-size: var(--text-meta);
  font-weight: 500;
  color: var(--stone);
}
.brand { display: flex; align-items: center; gap: 9px; flex: none; color: var(--near-black); }
.brand img { display: block; width: 26px; height: 26px; }
.brand b { font-size: var(--text-lede); font-weight: 600; letter-spacing: 0.1px; line-height: 1; }
.eyebrow-sep { margin: 0 6px; font-weight: 400; color: color-mix(in srgb, var(--stone) 62%, transparent); }
.version-link { font-family: var(--mono); font-size: var(--text-meta); font-weight: 600; color: var(--stone); }
.version-link:hover { color: var(--brand); }
.nav-links { display: flex; gap: 2px; margin-left: 16px; }
.nav-links a { padding: 7px 10px; border-radius: var(--radius-pill); color: var(--dark-warm); line-height: 1; white-space: nowrap; }
.nav-links a { padding: 8px 11px; }
.nav-links a:hover, .nav-links a[aria-current] { color: var(--near-black); background: var(--line-faint); }
.nav-actions { display: flex; align-items: center; gap: 14px; margin-left: auto; }
.lang-switch { position: relative; z-index: 20; }
.lang-trigger {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  min-height: 30px;
  padding: 0 4px;
  border: 0;
  background: transparent;
  color: var(--stone);
  cursor: pointer;
  font: inherit;
  font-size: var(--text-meta);
  line-height: 1;
  transition: color 0.12s ease-out;
}
.lang-trigger svg { display: block; opacity: 0.75; }
.lang-trigger::after {
  content: "";
  width: 4px;
  height: 4px;
  margin-top: -2px;
  border-right: 1px solid currentColor;
  border-bottom: 1px solid currentColor;
  opacity: 0.55;
  transform: rotate(45deg);
  transition: transform 0.12s ease-out;
}
.lang-trigger:hover, .lang-switch.is-open .lang-trigger { color: var(--brand); }
.lang-switch.is-open .lang-trigger::after { margin-top: 2px; transform: rotate(225deg); }
.lang-menu {
  position: absolute;
  top: calc(100% + 8px);
  right: 0;
  display: grid;
  gap: 1px;
  width: 140px;
  padding: 6px;
  border: 1px solid var(--line);
  border-radius: var(--radius-md);
  background: var(--ivory);
  box-shadow: 0 8px 24px #14131314;
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transition: opacity 0.12s ease-out, visibility 0.12s ease-out;
}
/* Bridges the gap so the pointer can travel from the trigger into the menu. */
.lang-menu::before { content: ""; position: absolute; left: 0; right: 0; top: -10px; height: 10px; }
.lang-switch.is-open .lang-menu, .lang-menu:focus-within {
  opacity: 1;
  visibility: visible;
  pointer-events: auto;
}
@media (hover: hover) {
  .lang-switch:hover .lang-menu { opacity: 1; visibility: visible; pointer-events: auto; }
}
.lang-menu a { display: flex; align-items: center; min-height: 32px; padding: 6px 10px; border-radius: 6px; color: var(--dark-warm); font-size: var(--text-meta); line-height: 1.35; }
.lang-menu a:hover { color: var(--near-black); background: color-mix(in srgb, var(--brand-tint) 70%, transparent); }
.lang-menu a[aria-current="page"] { color: var(--near-black); font-weight: 600; background: var(--brand-tint); }
.nav-icon { display: inline-flex; align-items: center; color: var(--stone); transition: color 0.12s ease-out; }
.nav-icon:hover { color: var(--brand); }

/* As on mole.fit, the hairline under the hero stays inside the column. Clip
   only sideways so the Download hint can hang over the hairline. */
.hero { padding: 64px 0 0; margin-bottom: var(--section-gap); overflow-x: clip; }
.hero > .wide::after { content: ""; display: block; margin-top: 28px; border-bottom: 1px solid var(--border-soft); }
.hero h1 {
  margin: 0 0 40px;
  color: var(--near-black);
  font-family: "Pake Wordmark", var(--serif);
  font-size: 84px;
  font-weight: 400;
  letter-spacing: -1.2px;
  line-height: 1.02;
}
.hero h1 .cn-orbit { position: relative; display: inline-block; margin-left: 18px; }
/* The Han glyph fills its whole em and read larger than the Latin name at the
   same size; 0.88em puts its top on the Latin ascender, the same as mole.fit's
   鼴 (maintainer 2026-11-02). Set on the orbit wrapper so the dot's em-based
   path shrinks with it. */
.hero h1 .cn-orbit { font-size: 0.88em; }
.hero h1 .cn {
  display: inline-block;
  font-family: "Pake Mark", "Pake Serif SC", "Songti TC", serif;
  font-weight: 400;
  letter-spacing: 0;
}
/* One small dot circles 殼, as mole.fit's does around 鼴; each family site
   gets its own orbit (tilt, direction, pace) so the motion stays theirs. */
@property --mark-orbit {
  syntax: "<angle>";
  inherits: false;
  initial-value: 0deg;
}
.hero h1 .cn-orbit::after {
  content: "";
  position: absolute;
  top: 50%;
  left: 50%;
  width: 5px;
  height: 5px;
  margin: -2.5px 0 0 -2.5px;
  border-radius: 50%;
  background: var(--brand);
  /* A rounded window frame, the shell a web page is wrapped in: a circle plus
     a third harmonic squares off the sides. */
  transform: translate(calc((cos(var(--mark-orbit)) - cos(var(--mark-orbit) * 3) / 8) * 0.74em), calc((sin(var(--mark-orbit)) + sin(var(--mark-orbit) * 3) / 8) * 0.74em));
  animation: mark-orbit 13s linear infinite normal;
  pointer-events: none;
}
@keyframes mark-orbit {
  to { --mark-orbit: 360deg; }
}
.hero-sub { margin: 0 0 16px; color: var(--olive); font-size: var(--text-title); line-height: 1.4; }
.hero-trust { display: flex; flex-wrap: wrap; margin: 0 0 31px; font-size: var(--text-meta); color: var(--stone); }
.hero-trust span:not(:last-child)::after {
  content: "·";
  margin: 0 10px;
  color: color-mix(in srgb, var(--stone) 58%, transparent);
}
.hero-actions { display: flex; flex-wrap: wrap; gap: 12px 24px; align-items: center; }
.download-pending { position: relative; display: inline-flex; }
.btn-pending, .btn-pending:hover {
  color: var(--stone);
  background: var(--border-soft);
  border-color: var(--line);
  cursor: default;
  transform: none;
}
.download-hint {
  position: absolute;
  top: calc(100% + 8px);
  left: 50%;
  transform: translateX(-50%);
  padding: 6px 10px;
  border-radius: var(--radius-sm);
  background: var(--near-black);
  color: var(--ivory);
  font-size: var(--text-meta);
  line-height: 1.5;
  white-space: nowrap;
  visibility: hidden;
  z-index: 1;
}
.download-pending:hover .download-hint,
.download-pending:focus-within .download-hint { visibility: visible; }

/* Prose over terminal, as wide as every other section, so body lines never
   squeeze into a half column. */
.split { display: grid; gap: 28px; }
.prose h2 { margin: 0 0 16px; color: var(--dark-warm); font-size: var(--text-section); font-weight: 500; line-height: 1.2; letter-spacing: -0.3px; }
.prose p { margin: 0 0 18px; color: var(--dark-warm); font-size: var(--text-lede); line-height: 1.6; }
/* mole.fit's inline code: quiet ink on a faint wash, wrapping with the line. */
.prose code, .faq-answer code {
  font-size: var(--text-body);
  color: var(--dark-warm);
  background: rgba(20, 19, 19, 0.05);
  border-radius: 4px;
  padding: 1px 6px;
  overflow-wrap: anywhere;
  -webkit-box-decoration-break: clone;
  box-decoration-break: clone;
}
/* Commands break only between words, never at their own hyphens. */
.prose code .nw, .faq-answer code .nw { white-space: nowrap; }
.terminal-window { overflow: hidden; border: 1px solid var(--term-line); border-radius: var(--radius-md); background: var(--term); }
.terminal-body { padding: 24px; color: var(--term-text); font-family: var(--mono); font-size: 14px; line-height: 1.7; overflow-x: auto; }
.term-line { margin: 0 0 7px; white-space: pre; }
.term-line:last-child { margin-bottom: 0; }
.prompt { color: var(--green-bright); }
.muted { color: var(--term-muted); }

/* Ready-made apps: a strip of README screenshots, two and a bit per view so the
   cut-off card says it scrolls; arrows on pointer devices, swipe on touch. */
.shots-head { display: flex; align-items: flex-end; justify-content: space-between; gap: 24px; margin-bottom: 28px; }
.shots-head .section-head { margin-bottom: 0; }
.shots-nav { display: flex; gap: 8px; flex-shrink: 0; }
.shots-nav button {
  display: grid;
  place-items: center;
  width: 40px;
  height: 40px;
  padding: 0;
  border: 1px solid var(--line);
  border-radius: var(--radius-pill);
  background: var(--ivory);
  color: var(--dark-warm);
  cursor: pointer;
  transition: background .12s ease-out, opacity .12s ease-out;
}
.shots-nav button::before {
  content: "";
  width: 7px;
  height: 7px;
  border-right: 1.5px solid currentColor;
  border-bottom: 1.5px solid currentColor;
  transform: translateX(-2px) rotate(-45deg);
}
.shots-nav [data-dir="-1"]::before { transform: translateX(2px) rotate(135deg); }
.shots-nav button:hover:not(:disabled) { background: var(--border-soft); }
.shots-nav button:disabled { opacity: .35; cursor: default; }
.shots {
  display: grid;
  grid-auto-flow: column;
  grid-auto-columns: calc((100% - 40px) / 2.3);
  gap: 20px;
  overflow-x: auto;
  overscroll-behavior-x: contain;
  scroll-snap-type: x mandatory;
  scrollbar-width: none;
  border-radius: 12px;
}
.shots::-webkit-scrollbar { display: none; }
.shots:focus-visible { outline: 2px solid var(--brand); outline-offset: 4px; }
.shot { min-width: 0; scroll-snap-align: start; }
.shot-art { display: block; width: 100%; height: auto; aspect-ratio: 3 / 2; object-fit: cover; border-radius: 12px; background: var(--border-soft); }
/* When a long name leaves no room, the links take the next line instead of covering it. */
.shot-meta { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 2px 12px; margin-top: 12px; }
.shot h3 { display: flex; align-items: center; gap: 8px; margin: 0; font-size: var(--text-body); font-weight: 400; line-height: 1.4; color: var(--dark-warm); white-space: nowrap; }
.shot h3 img { flex-shrink: 0; width: 22px; height: 22px; }
.shot-links { display: flex; gap: 2px; flex-shrink: 0; margin: 0; }
.shot-links a { padding: 3px 6px; border-radius: var(--radius-sm); font-size: var(--text-meta); line-height: 20px; color: var(--stone); }
.shot-links a:hover, .shot-links a:focus-visible { color: var(--brand); background: var(--brand-tint); }
.shot-links a:last-child { margin-right: -6px; }

.compare { width: 100%; border-collapse: collapse; font-size: var(--text-body); }
.compare th, .compare td { padding: 12px 16px 12px 0; border-bottom: 1px solid var(--border-soft); text-align: left; vertical-align: top; }
.compare th { color: var(--stone); font-weight: 500; font-size: var(--text-body); }
.compare td { color: var(--dark-warm); }
.compare td:first-child { color: var(--near-black); }
.table-scroll { overflow-x: auto; }

/* mole.fit's FAQ: collapsed questions with a thin plus that turns into an x. */
.faq { border-top: 1px solid var(--border-soft); interpolate-size: allow-keywords; }
.faq-item { border-bottom: 1px solid var(--line-faint); padding: 20px 0; }
.faq-item > summary { display: flex; align-items: center; justify-content: space-between; gap: 16px; cursor: pointer; list-style: none; -webkit-tap-highlight-color: transparent; }
.faq-item > summary::-webkit-details-marker { display: none; }
.faq-chevron { position: relative; flex: 0 0 auto; width: 15px; height: 15px; margin-right: 10px; transition: transform 0.25s ease-out; }
.faq-item[open] .faq-chevron { transform: rotate(135deg); }
.faq-chevron::before, .faq-chevron::after {
  content: "";
  position: absolute;
  top: 50%;
  left: 50%;
  width: 13px;
  height: 1.4px;
  border-radius: 1px;
  background: color-mix(in srgb, var(--stone) 68%, transparent);
  transform: translate(-50%, -50%);
  transition: background 0.12s ease-out;
}
.faq-chevron::after { transform: translate(-50%, -50%) rotate(90deg); }
@media (hover: hover) {
  .faq-item > summary:hover h3 { color: var(--near-black); }
  .faq-item > summary:hover .faq-chevron::before, .faq-item > summary:hover .faq-chevron::after { background: var(--brand-light); }
}
.faq-item h3 { margin: 0; color: var(--dark-warm); font-size: var(--text-lede); font-weight: 500; line-height: 1.35; letter-spacing: 0.1px; }
.faq-item::details-content { height: 0; overflow: clip; opacity: 0; transition: height 0.25s ease-out, opacity 0.25s ease-out, content-visibility 0.25s allow-discrete; }
.faq-item[open]::details-content { height: auto; opacity: 1; }
/* Padding, not margin: margins sit outside the animated ::details-content height and snapped in and out. */
.faq-answer { margin: 0; padding: 12px 0 4px; color: var(--olive); font-size: var(--text-body); line-height: 1.6; }

/* Author contact under the FAQ, the same block as mole.fit's (2026-10-20).
   The X and GitHub counts are static: update them together with mole.fit's. */
.contact { margin-top: 48px; text-align: left; }
.contact-heading { display: flex; align-items: center; gap: 12px; }
.contact-author { display: block; flex: 0 0 auto; width: 28px; height: 28px; border-radius: 50%; object-fit: cover; }
.contact .contact-title { margin: 0; padding: 0; font-family: var(--serif); font-size: var(--text-title); font-weight: 500; line-height: 1.2; color: var(--dark-warm); transform: translateY(1.5px); }
.contact-cards { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; margin-top: 24px; }
.contact-card {
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 8px;
  padding: 18px 20px;
  border: 1px solid var(--border-card, var(--line));
  border-radius: 14px;
  background: linear-gradient(180deg, var(--parchment) 0%, var(--ivory) 100%);
  color: inherit;
  text-decoration: none;
  transition: border-color 0.12s ease-out, box-shadow 0.12s ease-out;
}
.contact-head { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; }
.contact-channel {
  position: relative;
  flex: 0 0 auto;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  border-radius: 50%;
  overflow: hidden;
  background: var(--ivory);
  border: 1px solid var(--line);
  color: var(--near-black);
}
.contact-glyph { width: 22px; height: 22px; transition: opacity 0.12s ease-out; }
.contact-avatar { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; opacity: 0; transition: opacity 0.12s ease-out; }
.contact-meta { display: flex; flex-direction: column; min-width: 0; }
.contact-head b { font-family: var(--ui, var(--serif)); font-size: var(--text-body); font-weight: 600; line-height: 1.3; color: var(--near-black); }
.contact-handle { font-family: var(--ui, var(--serif)); font-size: var(--text-meta); line-height: 1.3; color: var(--stone); }
.contact-stat {
  margin-left: auto;
  flex: 0 0 auto;
  color: var(--brand);
  font-variant-numeric: tabular-nums;
  font-size: var(--text-meta);
  font-weight: 700;
  white-space: nowrap;
}
.contact .contact-desc { margin: 4px 0 0; padding: 0; font-family: var(--serif); font-size: var(--text-body); line-height: 1.55; color: var(--olive); }
@media (hover: hover) {
  .contact-card:hover { border-color: var(--line); box-shadow: 0 2px 8px rgba(20, 19, 19, 0.05); }
  .contact-card:hover .contact-glyph { opacity: 0; }
  .contact-card:hover .contact-avatar { opacity: 1; }
}
.contact-card:active { border-color: var(--line); background: linear-gradient(180deg, var(--ivory) 0%, var(--parchment) 100%); }
@media (prefers-reduced-motion: reduce) { .contact-glyph, .contact-avatar { transition: none; } }
/* Two cards side by side squeezed their lines into four or five rows on a
   640 to 700 tablet; mole.fit goes to one column below 700. */
@media (max-width: 700px) { .contact-cards { grid-template-columns: 1fr; } }
@media (max-width: 340px) {
  .contact-head { display: grid; grid-template-columns: 44px minmax(0, 1fr); }
  .contact-channel { grid-column: 1; grid-row: 1 / span 2; }
  .contact-meta { grid-column: 2; grid-row: 1; }
  .contact-stat { grid-column: 2; grid-row: 2; margin-left: 0; justify-self: start; }
}

/* Footer: hina.day's ivory band closed off by a hairline, the name and
   language links on the left, small titled link columns on the right. */
/* mole.fit's dark footer band, with Mole's text steps. */
.site-footer { margin-top: var(--section-gap); background: var(--near-black); color: color-mix(in srgb, var(--foot-ink) 62%, transparent); }
.foot { display: flex; justify-content: space-between; flex-wrap: wrap; gap: 24px; padding-top: 60px; padding-bottom: 48px; font-size: var(--text-meta); }
.foot-brand .name { margin: 0 0 8px; color: #fff; font-size: var(--text-title); font-weight: 500; line-height: 1.1; }
.foot-mark { font-family: "Pake Mark", "Pake Serif SC", "Songti TC", serif; font-weight: 400; }
.foot-sub { margin: 10px 0 0; font-size: var(--text-meta); line-height: 1.5; }
.foot-links { display: flex; gap: 44px; }
.foot-links div { display: grid; gap: 12px; align-content: start; }
.foot-links b { margin-bottom: 2px; color: color-mix(in srgb, #fff 92%, transparent); font-size: var(--text-meta); font-weight: 600; letter-spacing: 0.2px; }
html[lang^="zh"] .foot-links b { letter-spacing: 0.6px; }
.foot a { color: color-mix(in srgb, var(--foot-ink) 68%, transparent); }
@media (hover: hover) { .foot a:hover { color: #fff; } }

.docs-main { padding: 48px 0 72px; }
.nav-links a[aria-current="page"] { color: var(--brand); }
.docs-layout {
  display: grid;
  grid-template-columns: 200px minmax(0, 1fr);
  gap: 56px;
  align-items: start;
}
.docs-sidebar {
  position: sticky;
  top: 92px;
  display: grid;
  gap: 22px;
  max-height: calc(100svh - 116px);
  overflow: auto;
  padding-right: 4px;
}
.docs-products { display: flex; flex-wrap: wrap; gap: 6px; }
.docs-products a {
  padding: 5px 12px;
  border: 1px solid var(--line);
  border-radius: var(--radius-pill);
  color: var(--dark-warm);
  font-size: var(--text-meta);
  line-height: 1.3;
}
.docs-products a:hover { color: var(--brand); border-color: var(--brand); }
.docs-products a[aria-current="page"] { border-color: var(--brand); background: var(--brand); color: var(--ivory); }
.docs-group { display: grid; gap: 2px; align-content: start; }
.docs-group p, .section-toc p {
  margin: 0 0 4px;
  color: var(--stone);
  font-size: var(--text-meta);
  font-weight: 500;
}
.docs-group a {
  padding: 5px 0 5px 12px;
  border-left: 2px solid transparent;
  color: var(--dark-warm);
  font-size: var(--text-body);
  line-height: 1.35;
  transition: color 0.12s ease-out, border-color 0.12s ease-out;
}
.docs-group a:hover { color: var(--brand); }
.docs-group a[aria-current="page"] { border-left-color: var(--brand); color: var(--brand); }
.section-toc { display: grid; gap: 2px; padding-top: 18px; border-top: 1px solid var(--border-soft); }
.section-toc a { padding: 3px 0; color: var(--stone); font-size: var(--text-meta); line-height: 1.4; }
.section-toc a:hover { color: var(--brand); }

.doc-content { min-width: 0; max-width: 820px; color: var(--dark-warm); font-size: var(--text-lede); line-height: 1.65; overflow-wrap: break-word; }
.doc-content h1 {
  margin: 0 0 14px;
  color: var(--dark-warm);
  font-size: var(--text-section);
  font-weight: 500;
  letter-spacing: -0.3px;
  line-height: 1.2;
}
.doc-content h1 + p, .doc-content h1 + .app-notice + p { margin-bottom: 8px; color: var(--dark-warm); font-size: var(--text-lede); line-height: 1.6; }
.not-found .doc-content { padding: 56px 0 40px; }
.doc-content .not-found-actions { margin-top: 28px; }
.doc-content .not-found-actions .btn { text-decoration: none; }
.doc-content .app-notice { margin: 0 0 24px; color: var(--stone); font-size: var(--text-body); line-height: 1.6; }
/* Headings keep mole.fit's dark-warm; sizes step down one notch for long references. */
.doc-content h2, .doc-content h3, .doc-content h4, .doc-content h5 {
  color: var(--dark-warm);
  font-weight: 500;
  line-height: 1.25;
  scroll-margin-top: var(--anchor-clear);
}
.doc-content h2 { margin: 48px 0 12px; font-size: var(--text-title); }
.doc-content h3 { margin: 32px 0 10px; font-size: var(--text-lede); }
.doc-content h4 { margin: 26px 0 8px; font-size: var(--text-lede); }
.doc-content h5 { margin: 22px 0 6px; color: var(--stone); font-size: var(--text-lede); }
.doc-content p { margin: 0 0 16px; }
.doc-content ul, .doc-content ol { margin: 0 0 20px; padding-left: 22px; }
.doc-content li { margin-bottom: 6px; }
.doc-content li > p { margin-bottom: 10px; }
.doc-content strong { color: var(--near-black); font-weight: 600; }
.doc-content img { display: block; margin: 8px 0; border: 1px solid var(--border-soft); border-radius: var(--radius-md); }
.doc-content code {
  padding: 1px 5px;
  border-radius: 3px;
  background: var(--brand-tint);
  color: var(--brand);
  font-size: var(--text-body);
  overflow-wrap: anywhere;
}
.doc-content pre {
  overflow-x: auto;
  margin: 16px 0 22px;
  padding: 16px 18px;
  border: 1px solid var(--term-line);
  border-radius: var(--radius-md);
  background: var(--term);
}
.doc-content pre code {
  display: block;
  padding: 0;
  background: none;
  color: var(--term-text);
  font-size: var(--text-meta);
  line-height: 1.65;
  overflow-wrap: normal;
  white-space: pre;
}
.doc-content table { display: block; overflow-x: auto; width: 100%; margin: 18px 0 26px; border-collapse: collapse; font-size: var(--text-body); }
.doc-content th, .doc-content td { padding: 10px 20px 10px 0; border-bottom: 1px solid var(--border-soft); text-align: left; vertical-align: top; }
.doc-content th { color: var(--stone); font-weight: 500; white-space: nowrap; }
.doc-content td code { white-space: nowrap; overflow-wrap: normal; }
.doc-content blockquote { margin: 20px 0; padding: 12px 18px; border: 1px solid var(--border-soft); border-radius: var(--radius-md); background: var(--ivory); }
.doc-content blockquote p:last-child { margin-bottom: 0; }
.doc-content hr { height: 1px; margin: 32px 0; border: 0; background: var(--border-soft); }
.doc-pager {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 20px;
  margin-top: 56px;
  padding-top: 20px;
  border-top: 1px solid var(--border-soft);
}
.doc-pager a { display: grid; gap: 2px; border: 0; }
.doc-pager .next { grid-column: 2; text-align: right; }
.doc-pager span { color: var(--stone); font-size: var(--text-meta); }
.doc-pager strong { color: var(--brand); font-size: var(--text-lede); font-weight: 500; }
.doc-pager a:hover strong { color: var(--brand-light); }

@media (max-width: 880px) {
  /* Inline only: a `padding` shorthand here zeroed the footer's 60/48px top
     and bottom, since it comes later than `.foot` at the same specificity. */
  .wide { padding-inline: 28px; }
  .site-nav { padding-inline: 14px; }
  :root { --section-gap: 72px; }
  .hero h1 { font-size: 64px; letter-spacing: -1px; }
  .section-head h2, .prose h2 { font-size: 26px; }
  .shots { grid-auto-columns: calc((100% - 20px) / 1.6); }
  .hero { padding: 44px 0 0; }
  .foot { flex-direction: column; }
  /* Stacked under the brand, the columns share the full width as on mole.fit;
     at their natural widths they huddled left of an empty half (OPPO Pad mini). */
  .foot-links { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 32px 16px; }
  .docs-main { padding: 32px 0 54px; }
  .docs-layout { grid-template-columns: 1fr; gap: 28px; }
  /* As on kaku.fun: one scrolling row of links instead of the grouped sidebar,
     which pushed the page title below the first screen on phones. */
  .docs-sidebar { position: static; display: flex; align-items: center; gap: 16px; max-height: none; overflow-x: auto; overflow-y: hidden; margin-right: -28px; padding: 0 28px 4px 0; scrollbar-width: none; }
  .docs-sidebar::-webkit-scrollbar { display: none; }
  .section-toc, .docs-group p { display: none; }
  .docs-products { flex: 0 0 auto; flex-wrap: nowrap; }
  .docs-group { display: contents; }
  .docs-group a { flex: 0 0 auto; padding: 6px 0; border-left: 0; border-bottom: 2px solid transparent; white-space: nowrap; }
  .docs-group a[aria-current="page"] { border-bottom-color: var(--brand); }
}
@media (max-width: 560px) {
  .wide { padding-inline: 22px; }
  .docs-sidebar { margin-right: -22px; padding-right: 22px; }
  .site-nav { padding: 12px 5px 0; }
  .site-nav .nav-inner { min-height: 48px; padding: 6px 10px; }
  .nav-links { margin-left: 14px; gap: 12px; }
  .nav-actions { gap: 12px; }
  .shots-nav { display: none; }
  .shots { grid-auto-columns: 86%; gap: 14px; }
  .shot-meta { flex-direction: column; align-items: flex-start; gap: 2px; margin-top: 10px; }
  .shot-links a:first-child { margin-left: -6px; }
  .hero { padding: 40px 0 0; }
  .hero h1 { margin-bottom: 24px; }
  /* Phone hero buttons keep their label's width, 42px tall with 22px sides,
     at least 128px wide and 12px apart (maintainer 2026-10-30, from rendered candidates: 44
     read tall and label-width pills read narrow; 128 pairs the Chinese labels
     evenly), 14px sides under 375px. The quiet button's hairline mixes 60% --line into ivory, since
     1px of --line is three device pixels on a phone and read heavy. */
  .hero-actions { gap: 12px; }
  .hero-actions > * { flex: 0 0 auto; }
  .hero-actions .btn { min-width: 128px; min-height: 0; height: 42px; padding: 0 22px; white-space: nowrap; }
  .hero-actions .btn:not(.btn-primary) { border-color: color-mix(in srgb, var(--line) 60%, var(--ivory)); }
  @media (max-width: 374px) {
    .hero-actions .btn { min-width: 0; padding: 0 14px; }
  }
  .hero-actions .download-pending .btn { width: 100%; }
  .terminal-body { padding: 18px 16px; font-size: 12px; }
}
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.001ms !important;
    animation-iteration-count: 1 !important;
    scroll-behavior: auto !important;
    transition-duration: 0.001ms !important;
  }
  .hero h1 .cn-orbit::after { animation: none; }
}

/* Product views use the app's own surfaces, as on Mole and Hina. */
.native-shots { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 24px; align-items: stretch; }
.native-shots figure { display: flex; flex-direction: column; margin: 0; min-width: 0; }
.native-shot-window { position: relative; aspect-ratio: 13 / 20; }
.native-shots img { position: absolute; inset: 0; display: block; margin: auto; width: auto; height: 100%; max-width: 100%; border-radius: 12px; }
.native-shots figcaption { padding-top: 12px; color: var(--stone); font-size: var(--text-meta); text-align: center; }
@media (max-width: 560px) {
  .native-shots { grid-template-columns: 1fr; gap: 28px; }
}

/* Blog follows mole.fit's (~/www/mole-mac/site/styles.css, .blog-*): a wall
   of cards with the cover flush on top, and an article with crumb, title,
   meta, a 16:7 cover, one install card and three related posts. */
/* 47px of ink from the nav pill to a page title, 32 on phones (mole.fit). */
.blog-main { padding: 48px 0 0; }
.blog-content { margin: 0 auto; }
.blog-index .blog-content { max-width: none; }
/* Articles fill the page width like mole.fit's (maintainer 2026-10-21,
   replacing the 760px column of 2026-10-19). */
.blog-post .blog-content { max-width: none; margin: 0; }
.blog-post .doc-content { font-size: var(--text-lede); line-height: 1.65; }
.blog-post .doc-content h2 { margin: 40px 0 10px; font-size: var(--text-title); }
.doc-content .blog-intro { margin: 0 0 8px; color: var(--olive); font-size: var(--text-lede); line-height: 1.55; }
.blog-index .app-notice { margin-bottom: 40px; }
/* Index groups, as on mole.fit: a section gap between categories, the doc h2 and a one-line lede. */
.blog-group { margin-top: 40px; }
.blog-group + .blog-group { margin-top: var(--section-gap); }
.blog-group-head { margin: 0 0 24px; }
.doc-content .blog-group-head h2 { margin: 0 0 8px; }
.doc-content .blog-group-description { margin: 0; color: var(--olive); font-size: var(--text-body); line-height: 1.6; }
.blog-related-cat { color: var(--stone); font-size: var(--text-meta); line-height: 1.5; }
.doc-content .blog-crumb { margin: 0 0 16px; font-size: var(--text-meta); line-height: 1.4; }
.doc-content .blog-crumb a { border: 0; color: var(--stone); }
/* The meta line closes the article head: 24 to the cover, mole.fit's article
   gap (10 read as part of the cover). */
.doc-content .blog-meta { margin: 0 0 22px; color: var(--stone); font-size: var(--text-meta); letter-spacing: 0.4px; line-height: 1.5; }
.blog-cover { margin: 0 0 32px; aspect-ratio: 16 / 7; border-radius: 14px; overflow: hidden; background: var(--brand-tint); }
.blog-cover img { display: block; width: 100%; height: 100%; object-fit: cover; }
.blog-cards, .blog-related-list, .doc-content :is(.blog-cards, .blog-related-list) { list-style: none; margin: 0; padding: 0; display: grid; }
.doc-content .blog-card { margin: 0; }
.doc-content :is(.blog-card-media, .blog-cover, .blog-cta) img { margin: 0; border: 0; border-radius: 0; }
.blog-cards { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; }
.blog-related-list { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 20px; }
.blog-card, .doc-content .blog-related-list li {
  margin: 0;
  border: 1px solid var(--border-card);
  border-radius: 14px;
  background: linear-gradient(180deg, var(--parchment) 0%, var(--ivory) 100%);
  overflow: hidden;
  transition: border-color 0.12s ease-out, box-shadow 0.12s ease-out;
}
.doc-content .blog-card a, .doc-content .blog-related-list a { display: flex; flex-direction: column; height: 100%; border: 0; color: inherit; }
.doc-content .blog-related-list a { gap: 12px; padding: 18px 18px 20px; }
.blog-card-media { display: block; aspect-ratio: 16 / 9; overflow: hidden; background: var(--brand-tint); border-bottom: 1px solid var(--line-faint); }
.blog-card-media img { display: block; width: 100%; height: 100%; object-fit: cover; transition: transform 0.25s ease-out; }
.blog-card-body { display: flex; flex: 1; flex-direction: column; padding: 14px 18px 16px; }
.blog-card-title { margin: 0 0 4px; color: var(--near-black); font-size: var(--text-lede); font-weight: 600; line-height: 1.3; }
.blog-card-desc { margin: 0 0 12px; color: var(--dark-warm); font-size: var(--text-body); line-height: 1.55; display: -webkit-box; -webkit-line-clamp: 4; -webkit-box-orient: vertical; overflow: hidden; }
.blog-card-date, .blog-related-meta { margin-top: auto; color: var(--stone); font-size: var(--text-meta); line-height: 1.5; font-variant-numeric: tabular-nums; }
.blog-related-name { color: var(--near-black); font-size: var(--text-lede); font-weight: 600; line-height: 1.35; }
.blog-cta {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  align-items: center;
  gap: 18px;
  margin: 44px 0 0;
  padding: 18px 22px;
  border: 1px solid var(--border-card);
  border-radius: 14px;
  background: var(--line-faint);
}
.blog-cta img { width: 40px; height: 40px; }
.doc-content .blog-cta p { margin: 0; font-size: var(--text-lede); line-height: 1.5; }
.doc-content .blog-cta .btn { color: var(--ivory); }
.blog-related { margin: var(--section-gap) 0 0; }
.doc-content .blog-related h2 { margin: 0 0 24px; font-size: var(--text-title); }
@media (hover: hover) {
  .blog-card:hover, .doc-content .blog-related-list li:hover { border-color: var(--line); box-shadow: 0 2px 8px rgba(20, 19, 19, 0.05); }
  .blog-card a:hover .blog-card-media img { transform: scale(1.03); }
}
@media (max-width: 1024px) { .blog-cards { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 640px) {
  .blog-cards { grid-template-columns: 1fr; gap: 24px; }
  .blog-related-list { grid-template-columns: 1fr; gap: 14px; }
  .blog-cover { aspect-ratio: 16 / 9; }
  .blog-cta { grid-template-columns: auto minmax(0, 1fr); gap: 14px 16px; }
  .doc-content .blog-cta .btn { grid-column: 1 / -1; justify-content: center; }
}
@media (max-width: 560px) {
  /* One-row pill as on mole.fit; the footer carries the same links. */
  .site-nav .nav-links { display: none; }
  .blog-main { padding: 33px 0 0; }
}

/* Chinese blog text tracks at 0.02em, as on mole.fit (maintainer 2026-10-21: zero tracking read cramped);
   headings resolve it at their own size instead of the Latin -0.3px, code keeps 0. */
/* Chinese headings take no Latin -0.3px, which pressed full-em glyphs together. */
html[lang="zh-CN"] :is(.section-head h2, .prose h2, .doc-content h1) { letter-spacing: 0; }
html[lang="zh-CN"] .blog-main, html[lang="zh-CN"] .blog-main :is(h1, h2, h3, h4) { letter-spacing: 0.02em; }
/* Chinese leading in three tiers, as on mole.fit: leads 1.6, answers and
   section prose 1.75, articles and docs 1.8; phones step to 1.7 below. */
html[lang="zh-CN"] :is(.section-head p, .doc-content h1 + p, .doc-content .blog-intro) { line-height: 1.6; }
html[lang="zh-CN"] :is(.prose p, .faq-answer) { line-height: 1.75; }
html[lang="zh-CN"] :is(.doc-content, .blog-post .doc-content) { line-height: 1.8; }
@media (max-width: 640px) {
  html[lang="zh-CN"] :is(.prose p, .faq-answer, .doc-content, .blog-post .doc-content) { line-height: 1.7; }
}
html[lang="zh-CN"] .blog-main :is(pre, code, kbd) { letter-spacing: 0; }
/* Long commands wrap under their own text instead of running into the frame. */
.term-line { white-space: pre-wrap; overflow-wrap: anywhere; padding-left: 1.3em; text-indent: -1.3em; }
.compare th, .compare td:first-child { white-space: nowrap; }
@media (max-width: 560px) {
  .compare thead { display: none; }
  .compare, .compare tbody, .compare tr, .compare td { display: block; }
  .compare tr { padding: 14px 0; border-bottom: 1px solid var(--border-soft); }
  .compare td { display: grid; grid-template-columns: 96px minmax(0, 1fr); gap: 12px; padding: 3px 0; border: 0; }
  .compare td::before { content: attr(data-label); color: var(--stone); font-size: var(--text-body); }
  .compare td:first-child { display: block; margin-bottom: 4px; font-weight: 600; }
  .compare td:first-child::before { content: none; }
}
@media (max-width: 359px) {
  .hero-trust { flex-direction: column; }
  .hero-trust span:not(:last-child)::after { content: none; }
}

/* Phone type ladder shared by the product sites (Kata rules/site.md, 2026-10-26):
   body 16, secondary 15, meta 13; desktop keeps its sizes. Running text is one
   size on the home page and the pages it links to, so the hero description and
   docs ledes come down to the 16px body, and FAQ questions and docs h5 sit no
   smaller than the 16px text under them, keeping their weight. */
@media (max-width: 640px) {
  .hero-sub, .faq-answer, .doc-content h1 + p, .doc-content h1 + .app-notice + p,
  .doc-content .blog-group-description, .doc-content h5 { font-size: var(--text-lede); }
  .contact .contact-desc, .contact-head b, .blog-card-desc, .foot, .foot-sub { font-size: var(--text-body); }
  .blog-card-date, .blog-related-meta, .blog-related-cat { font-size: var(--text-meta); }
}
.faq-answer code { font-size: var(--text-meta); }
.doc-content table code { font-size: var(--text-meta); }

/* Phone sizes (640px and below) stay as they were before the desktop ladder
   took over the rules above; the phone ladder is the block before this one. */
@media (max-width: 640px) {
  .section-head h2, .prose h2 { font-size: 26px; }
  .skip-link, .nav-inner, .docs-products a { font-size: 14px; }
  .version-link { font-size: 12px; }
  .prose code { font-size: 13px; }
  .contact .contact-title, .foot-brand .name { font-size: 22px; }
  .compare { font-size: 16px; }
  .doc-content h2, .blog-post .doc-content h2, .doc-content .blog-related h2 { font-size: 22px; }
  .doc-content h3 { font-size: 19px; }
  .doc-content h4, .doc-pager strong, .blog-card-title { font-size: 17px; }
  .doc-content code { font-size: 0.86em; }
  .doc-content table code { font-size: 0.86em; }
  .doc-content pre code { font-size: 14px; }
  .native-shots figcaption { font-size: 14px; }
}

/* Meta is 14px on desktop (maintainer 2026-11-01: 13 read small beside the
   hero's tagline); phones keep the 13px meta of their own ladder. */
@media (max-width: 640px) {
  :root { --text-meta: 13px; }
}
/* CJK hero tagline on desktop: 20px, the ladder's one exception (maintainer
   2026-11-01, from 16/18/20/21 drawn on mole.fit's Chinese home). */
@media (min-width: 881px) {
  html:is([lang^="zh"], [lang="ja"], [lang="ko"]) .hero-sub { font-size: 20px; }
}