/* 墨墨打官网：和 App 一样，白底黑字、不做动画、标记淡显、版心每行约 30 字 */

@font-face {
  font-family: "WenKai Screen";
  src: url("fonts/wenkai-screen-subset.woff2?v=ebb2afac") format("woff2");
  font-display: swap;
}

:root {
  --ink: #111111;
  --dim: #9c9c9c;      /* App 里淡显的灰 */
  --rule: #e4e4e4;
  --paper: #ffffff;
  --measure: 30em;     /* App 默认版心：每行 30 字 */
  color-scheme: light;
}

* { box-sizing: border-box; }

html {
  background: var(--paper);
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
}

body {
  margin: 0;
  background: var(--paper);
  color: var(--ink);
  font-family: "WenKai Screen", "LXGW WenKai Screen", "LXGW WenKai", "Kaiti SC", "STKaiti", "KaiTi", serif;
  font-size: 19px;
  line-height: 1.85;
  font-feature-settings: "kern";
  -webkit-font-smoothing: antialiased;
}

a { color: inherit; text-decoration: underline; text-decoration-color: var(--dim); text-underline-offset: .22em; text-decoration-thickness: 1px; }
a:hover { text-decoration-color: var(--ink); }
:focus-visible { outline: 2px solid var(--ink); outline-offset: 3px; }

/* 页眉页脚：和 App 一样是浅灰小字 */
.running {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 1em;
  padding: 18px 28px;
  font-size: 14px;
  color: #6f6f6f;
}
.running a { text-decoration: none; }
.running a:hover { color: var(--ink); }
.running nav { display: flex; gap: 1.5em; }
.brand { display: inline-flex; align-items: center; gap: .5em; color: var(--ink); }
.mark { width: 1.6em; height: auto; fill: currentColor; }
footer.running { margin-top: 120px; padding-bottom: 32px; flex-wrap: wrap; }
.running .sep { margin: 0 .6em; color: #bbb; }

main { padding: 0 16px; }
main > section { max-width: var(--measure); margin-left: auto; margin-right: auto; }

/* 开场 */
.hero { padding: 96px 0 40px; }
.mark-large { width: 92px; display: block; margin-bottom: 36px; color: var(--ink); }
h1 { font-size: 46px; line-height: 1.25; margin: 0 0 .35em; font-weight: 700; letter-spacing: .04em; }
.tagline { font-size: 25px; line-height: 1.6; margin: 0 0 1.1em; }
.cursor { display: inline-block; width: 2px; height: 1.05em; background: var(--ink); vertical-align: -.15em; margin-left: .12em; }
.lede { margin: 0 0 2em; }
.meta { color: #6f6f6f; }
.meta .sep { margin: 0 .6em; color: #bbb; }

.actions { display: flex; flex-wrap: wrap; align-items: center; gap: 14px 28px; margin: 0; }
.button {
  display: inline-flex; align-items: baseline; gap: .7em;
  padding: .55em 1.1em;
  border: 2px solid var(--ink);
  text-decoration: none;
  background: var(--paper);
}
.button:hover { background: var(--ink); color: var(--paper); }
.button:hover .soon { color: #c8c8c8; }
.soon { font-size: .78em; color: var(--dim); }
.quiet { text-decoration: none; color: #555; }
.quiet:hover { color: var(--ink); }

/* 打字演示：横屏的墨水屏阅读器（N10 Pro 是 4:3） */
.device { max-width: 920px; margin: 40px auto 104px; }
.bezel { background: #1d1d1d; padding: 20px 30px 20px 20px; border-radius: 24px; }
.screen {
  container-type: inline-size;
  position: relative;
  aspect-ratio: 4 / 3;
  background: #fff;
  border-radius: 3px;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  color: var(--ink);
}
.app-head, .app-foot {
  display: flex; justify-content: space-between;
  font-size: 1.25cqw; line-height: 1; color: #777;
  padding: 2.2cqw 2.4cqw;
}
.app-foot .more { letter-spacing: .1em; }
.page { flex: 1; overflow: hidden; position: relative; }
/* App 默认版心每行 30 字、字号 20sp，横屏时两侧留白变宽 */
.text { width: 66cqw; margin: 0 auto; font-size: 2.2cqw; line-height: 1.75; padding-top: .6em; }
.text p { margin: 0 0 .4375em; }           /* 段距 1/4 行 */
.text p.dim { color: #a0a0a0; }            /* 专注模式：非当前段落浅灰 */
.text .title .h1 { font-size: 1.35em; font-weight: 700; }
.text .mk { color: #a0a0a0; font-weight: 400; }
.text .ph { color: #c4c4c4; font-weight: 400; }
.text b { font-weight: 700; }
.caret { display: inline-block; width: 2px; height: 1.1em; background: var(--ink); vertical-align: -.2em; margin: 0 1px; }
figcaption { font-size: 14px; color: #6f6f6f; margin-top: 16px; text-align: center; }

/* 小节：标题前面带淡显的 ## ，和 App 里的 Markdown 一样 */
section { margin-bottom: 88px; }
h2 { font-size: 24px; line-height: 1.4; margin: 0 0 .5em; font-weight: 700; }
.mk { color: var(--dim); font-weight: 400; }
p { margin: 0 0 1em; }

.core { display: grid; gap: 40px; }
.core p { margin: 0; }

code, kbd { font-family: inherit; }
code { font-size: .92em; padding: 0 .1em; }
kbd {
  display: inline-block;
  font-size: .78em;
  line-height: 1.5;
  padding: 0 .45em;
  border: 1px solid #b9b9b9;
  border-bottom-width: 2px;
  border-radius: 4px;
  vertical-align: .08em;
}

/* 中文引号：霞鹜文楷屏幕阅读版的“”默认是半角宽度，紧挨汉字时换成全角字形（同 App） */
.q { font-feature-settings: "fwid"; }

/* 眨眼：只有墨点（眼睛）会闭上，光标不闪 */
.eyes { transform-box: fill-box; transform-origin: center; }
.eyes.shut { transform: scaleY(.12); }

.download .waiting { display: flex; gap: 16px; align-items: center; margin: .2em 0 1.4em; }
.download .waiting .mark { width: 46px; flex: none; }
.download .waiting p { margin: 0; }
.download .actions { margin: 0; }
.note { font-size: 15px; color: #6f6f6f; }

@media (max-width: 720px) {
  body { font-size: 17px; }
  .running { padding: 14px 16px; }
  .hero { padding-top: 56px; }
  .mark-large { width: 72px; margin-bottom: 28px; }
  h1 { font-size: 38px; }
  .tagline { font-size: 21px; }
  h2 { font-size: 21px; }
  section { margin-bottom: 60px; }
  .device { margin: 24px -6px 64px; }
  .bezel { padding: 8px 14px 8px 8px; border-radius: 12px; }
  /* 小屏上把版心放宽，字才看得清 */
  .text { width: 90cqw; font-size: 3cqw; }
  .app-head, .app-foot { font-size: 2.2cqw; padding: 2.4cqw 3cqw; }
  .core { gap: 32px; }
  figcaption { font-size: 13px; }
  footer.running { margin-top: 72px; }
}