/* coco · project page
   Budget: type 13 / 16 / 32 px (phones 13 / 16 / 24) · weights 400 and 600 ·
   text #1c2024 · secondary #5f6670 · accent #1f6f5c (links, the one green in the main visual) ·
   1 px rules #e4e4e4 (pure grey) · two axes: section labels at 0, text at 25 % of the container ·
   images: real screenshots at their own ratio, square, one 1 px frame each · no fixed elements, no motion */

:root { --ink: #1c2024; --muted: #5f6670; --accent: #1f6f5c; --line: #e4e4e4; --tint: #f5f5f5;
  --s: 13px; --b: 16px; --h: 32px; --max: 1120px;
  --font: -apple-system, BlinkMacSystemFont, "Helvetica Neue", "Segoe UI", Arial, "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei", "Noto Sans CJK SC", sans-serif;
  --mono: ui-monospace, "SF Mono", Menlo, Consolas, monospace; }
* { box-sizing: border-box; margin: 0; padding: 0; }
html { -webkit-text-size-adjust: 100%; }
body { font: 400 var(--b)/1.6 var(--font); color: var(--ink); background: #fff; -webkit-font-smoothing: antialiased; }
:lang(zh) body, body:lang(zh) { line-height: 1.75; }
a { color: var(--accent); text-decoration: none; transition: color .15s; }
a:hover { color: var(--ink); }
b, strong, h1, h2, h3 { font-weight: 600; }
img { display: block; max-width: 100%; height: auto; }

.wrap { max-width: var(--max); margin: 0 auto; padding: 0 32px; }
.top { display: flex; align-items: center; gap: 28px; padding: 24px 0; }
.mark { display: flex; align-items: center; gap: 10px; color: var(--ink); font-weight: 600; }
.mark img { width: 24px; height: 24px; }
.top .fill { flex: 1; }
.top a.nav { color: var(--muted); font-size: var(--s); }
.top a.nav:hover { color: var(--ink); }

.hero { padding: 72px 0 40px; display: grid; grid-template-columns: 1fr 3fr; gap: 0 32px; }
.hero h1 { grid-column: 2; font-size: var(--h); line-height: 1.3; max-width: 22em; }
.hero p { grid-column: 2; color: var(--muted); max-width: 36em; margin-top: 20px; }
.hero .act { grid-column: 2; margin-top: 28px; display: flex; gap: 28px; flex-wrap: wrap; font-size: var(--b); }
.visual { margin: 24px 0 0; }
.visual img { width: 100%; }
.visual figcaption { font-size: var(--s); color: var(--muted); margin-top: 10px; }

section { border-top: 1px solid var(--line); padding: 24px 0 72px; display: grid; grid-template-columns: 1fr 3fr; gap: 0 32px; }
section > h2 { font-size: var(--b); grid-column: 1; }
.hero > *, section > * { min-width: 0; }
section > .body { grid-column: 2; }
.lead { max-width: 36em; color: var(--ink); }
.grid { display: grid; grid-template-columns: 1fr; gap: 28px; margin-top: 4px; }
.grid h3 { font-size: var(--b); margin-bottom: 6px; }
.grid p { color: var(--ink); max-width: 32em; }
.shot + .shot { margin-top: 56px; }
.shot img { border: 1px solid var(--line); width: 100%; }
.shot figcaption { font-size: var(--s); color: var(--muted); margin-top: 10px; max-width: 44em; }
.facts { list-style: none; max-width: 40em; }
.facts li { padding: 12px 0; border-bottom: 1px solid var(--line); }
.facts li:first-child { padding-top: 0; }
.install h3 { font-size: var(--b); margin: 26px 0 8px; }
.install h3:first-child { margin-top: 0; }
.install p { max-width: 40em; }
pre { font-family: var(--mono); font-size: var(--s); background: var(--tint); padding: 14px 16px; overflow-x: auto;
  line-height: 1.7; max-width: 100%; white-space: pre; }
code { font-family: var(--mono); font-size: var(--s); }
.small { font-size: var(--s); color: var(--muted); }

footer { border-top: 1px solid var(--line); padding: 20px 0 40px; display: flex; gap: 24px; flex-wrap: wrap; font-size: var(--s); color: var(--muted); }
footer .fill { flex: 1; }

@media (max-width: 760px) {
  :root { --h: 24px; }
  .wrap { padding: 0 20px; }
  .hero, section { grid-template-columns: 1fr; }
  .hero h1, .hero p, .hero .act, section > h2, section > .body { grid-column: 1; }
  section > h2 { margin-bottom: 14px; }
  .hero { padding-top: 36px; }
  .grid { grid-template-columns: 1fr; gap: 24px; }
}
@media (prefers-reduced-motion: reduce) { a { transition: none; } }
h1 { text-wrap: balance; }
p, li, figcaption { text-wrap: pretty; }
.nb { white-space: nowrap; }