/* The app's palette: warm paper, ink, and 朱批 red as the one accent. */
:root {
  --paper: #fbfaf7;
  --surface: #ffffff;
  --ink: #2c2c2b;
  --ink2: #6d6963;
  --ink3: #a19e99;
  --line: #e6e5e3;
  --accent: #b4472e;
  --accent-hover: #9c3b25;
  --accent-soft: #f8eae4;
  --mark: #fff1b8;
  --book: #f5ecd9;
  --book-text: #473d2e;
  --quote: #f7f5ef;
  --rule: #d8cfb8;
  --mist: #e6ecf3;
  --serif: "Songti SC", "STSong", "Noto Serif CJK SC", "Source Han Serif SC", serif;
  --sans: -apple-system, BlinkMacSystemFont, "PingFang SC", "Hiragino Sans GB", "Noto Sans CJK SC", sans-serif;
}
* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body { margin: 0; background: var(--paper); color: var(--ink); font: 16px/1.75 var(--sans); -webkit-font-smoothing: antialiased; }
h1, h2, h3, h4, p, blockquote, figure { margin: 0; }
a { color: inherit; text-decoration: none; }
img { max-width: 100%; height: auto; display: block; }
button { font: inherit; color: inherit; cursor: pointer; }
[hidden] { display: none !important; }
:focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; border-radius: 3px; }
.skip { position: fixed; top: -80px; left: 16px; z-index: 20; background: var(--surface); padding: 10px 14px; border-radius: 6px; }
.skip:focus { top: 12px; }
.visually-hidden { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }

.frame { width: min(1160px, calc(100% - 64px)); margin-inline: auto; }

.site-header { display: flex; align-items: center; justify-content: space-between; gap: 24px; padding: 24px 0; }
.brand { display: inline-flex; align-items: center; gap: 10px; font-weight: 600; font-size: 17px; }
.site-nav { display: flex; align-items: center; gap: 28px; font-size: 14px; color: var(--ink2); }
.site-nav a:not(.download):hover { color: var(--ink); }
.download { display: inline-flex; align-items: center; min-height: 46px; padding: 10px 24px; border-radius: 999px; background: var(--accent); color: #fff; font-size: 15px; font-weight: 600; }
.download:hover { background: var(--accent-hover); }
.site-nav .download.small { min-height: 34px; padding: 5px 16px; font-size: 14px; color: #fff; }
.get { margin-top: 32px; }
.meta { margin-top: 14px; font-size: 13px; color: var(--ink3); }

/* Hero: the promise, the download, then the product itself. Screenshots carry their own window shadow. */
.hero { padding: 56px 0 40px; text-align: center; }
.eyebrow { font-size: 13px; letter-spacing: .12em; color: var(--ink2); }
.hero h1 { margin-top: 20px; font: 400 clamp(32px, 4.4vw, 54px)/1.45 var(--serif); letter-spacing: .02em; }
.hero h1 em { font-style: normal; background: linear-gradient(transparent 62%, var(--mark) 62%, var(--mark) 92%, transparent 92%); }
.lede { margin: 22px auto 0; max-width: 34em; font-size: 17px; color: var(--ink2); }
.hero .get { display: flex; flex-wrap: wrap; justify-content: center; align-items: center; gap: 12px 24px; }
.also { color: var(--ink2); font-size: 15px; font-weight: 500; }
.also:hover { color: var(--accent); }
.hero-shot { margin: 40px -2.5% 0; }

/* Bands: short copy beside a large screenshot, alternating sides. */
.band { display: grid; grid-template-columns: 300px minmax(0, 1fr); gap: 48px; align-items: center; padding: 72px 0; border-top: 1px solid var(--line); }
.band.flip { grid-template-columns: minmax(0, 1fr) 300px; }
.band.flip .copy { order: 2; }
.k { display: inline-flex; align-items: center; justify-content: center; width: 34px; height: 34px; border-radius: 50%; background: var(--accent-soft); color: var(--accent); font: 600 16px/1 var(--serif); }
.copy h2 { margin-top: 18px; font: 400 28px/1.45 var(--serif); }
.copy p:not(.k) { margin-top: 14px; color: var(--ink2); }
.shot { margin-right: -3%; }
.band.flip .shot { margin: 0 0 0 -3%; }

/* Interactive demo, styled like the app's document and right-hand book panel. */
.try { padding: 0 0 80px; }
.demo-window { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 420px); min-height: 500px; background: var(--surface); border: 1px solid var(--line); border-radius: 14px; overflow: hidden; box-shadow: 0 30px 60px -40px rgba(44, 44, 43, .35); }
.demo-hint { margin-top: 16px; font-size: 13px; color: var(--ink2); text-align: center; }

.doc { position: relative; padding: 36px clamp(24px, 5vw, 64px) 76px; }
.doc-path { font-size: 13px; color: var(--ink3); }
.doc-title { margin: 14px 0 14px; font: 600 26px/1.4 var(--sans); }
.doc-flow { display: grid; gap: 12px; margin-top: 16px; }
.quote { padding: 4px 0 4px 14px; border-left: 3px solid var(--ink); line-height: 1.9; }
.quote p { display: inline; }
.quote cite { display: inline-block; margin-left: 6px; padding: 0 8px; border-radius: 5px; background: var(--accent-soft); color: var(--accent); font: normal 12px/1.8 var(--sans); vertical-align: 1px; }
.quote.arriving { opacity: 0; }
.caret-line { margin-top: 12px; height: 28px; }
.doc-h { margin: 22px 0 8px; font: 600 18px/1.5 var(--sans); }
.caret-line + p { margin-top: 4px; }
.caret { display: inline-block; width: 2px; height: 22px; background: var(--accent); vertical-align: middle; animation: blink 1.1s steps(1) infinite; }
@keyframes blink { 50% { opacity: 0; } }
.toast { position: absolute; left: clamp(24px, 5vw, 64px); bottom: 22px; display: flex; align-items: center; gap: 14px; padding: 8px 10px 8px 14px; font-size: 13px; color: #fff; background: var(--ink); border-radius: 8px; }
.toast button { border: 0; background: none; color: #fff; font-weight: 600; padding: 2px 4px; text-decoration: underline; text-underline-offset: 3px; }

.book { display: flex; flex-direction: column; background: var(--book); color: var(--book-text); border-left: 1px solid var(--line); }
.book-bar { display: flex; gap: 10px; padding: 12px 24px; font-size: 12px; color: rgba(71, 61, 46, .65); }
.book-bar span + span::before { content: "·"; margin-right: 10px; }
.book-page { position: relative; flex: 1; padding: 6px 32px 28px; font-family: var(--serif); font-size: 17px; line-height: 2.05; }
.book-page h4 { margin: 10px 0 14px; font: 600 19px/1.5 var(--serif); text-align: center; }
.book-page p { text-indent: 2em; }
.book-page p + p { margin-top: 10px; }
.s { cursor: text; border-radius: 2px; transition: background-color .15s; }
.s:hover { background: rgba(71, 61, 46, .08); }
.s.selected { background: rgba(180, 71, 46, .16); }
.s.marked { background: var(--mark); }
.s:focus-visible { outline-offset: 1px; }
.selection-bar { position: absolute; z-index: 2; display: flex; padding: 4px; gap: 2px; font: 13px var(--sans); text-indent: 0; background: var(--surface); color: var(--ink); border-radius: 9px; box-shadow: 0 8px 24px -8px rgba(44, 44, 43, .35), 0 0 0 1px rgba(44, 44, 43, .08); }
.selection-bar button { border: 0; background: none; padding: 6px 10px; border-radius: 6px; white-space: nowrap; }
.selection-bar button:hover { background: var(--quote); }
.selection-bar button:disabled { color: var(--ink3); cursor: default; background: none; }
.ghost { position: fixed; z-index: 30; margin: 0; pointer-events: none; font-family: var(--serif); color: var(--book-text); background: var(--mark); border-radius: 4px; transform-origin: 0 0; }

/* Two smaller screenshots, then a strip of the rest. */
.pair { display: grid; grid-template-columns: 1fr 1fr; gap: 32px; padding: 72px 0 56px; border-top: 1px solid var(--line); }
.pair figcaption { margin-top: 12px; padding: 0 4%; color: var(--ink2); font-size: 15px; }
.pair b, .strip b { display: block; margin-bottom: 4px; color: var(--ink); font: 600 17px/1.5 var(--serif); }
.strip { display: grid; grid-template-columns: repeat(4, 1fr); gap: 32px; padding: 0 0 80px; font-size: 14px; color: var(--ink2); }
.strip div { padding-top: 16px; border-top: 2px solid var(--rule); }

.strip .more { display: inline-block; margin-top: 6px; color: var(--accent); font-weight: 500; }
.strip .more:hover { color: var(--accent-hover); }

/* Chrome extension: the store, or a ZIP loaded by hand. */
.chrome { display: grid; grid-template-columns: 300px minmax(0, 1fr); gap: 48px; padding: 72px 0; border-top: 1px solid var(--line); }
.chrome .copy h2 { margin-top: 0; }
.ways { display: grid; grid-template-columns: 1fr 1.4fr; gap: 20px; align-items: start; }
.way { padding: 24px 26px; background: var(--surface); border: 1px solid var(--line); border-radius: 12px; }
.way h3 { font: 600 17px/1.5 var(--serif); }
.way > p { margin-top: 8px; color: var(--ink2); font-size: 15px; }
.way .download { margin-top: 6px; }
.way .zip { color: var(--accent); font-weight: 500; }
.way .zip:hover { color: var(--accent-hover); }
.way ol { margin: 16px 0 0; padding-left: 1.3em; color: var(--ink2); font-size: 14px; }
.way li + li { margin-top: 4px; }
.way code { padding: 1px 5px; border-radius: 4px; background: var(--quote); color: var(--ink); font: 13px ui-monospace, "SF Mono", Menlo, monospace; }
.way .meta { margin-top: 14px; font-size: 12px; line-height: 1.7; }
.way .meta a { text-decoration: underline; text-underline-offset: 2px; }

.questions { display: grid; grid-template-columns: 300px minmax(0, 1fr); gap: 48px; padding: 72px 0 96px; border-top: 1px solid var(--line); }
.questions h2 { font: 400 28px/1.45 var(--serif); }
.faq details { border-bottom: 1px solid var(--line); }
.faq details:first-child { border-top: 1px solid var(--line); }
.faq summary { list-style: none; cursor: pointer; padding: 18px 32px 18px 0; position: relative; font-weight: 500; }
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after { content: ""; position: absolute; right: 6px; top: 50%; width: 8px; height: 8px; border-right: 1.5px solid var(--ink3); border-bottom: 1.5px solid var(--ink3); transform: translateY(-70%) rotate(45deg); transition: transform .2s; }
.faq details[open] summary::after { transform: translateY(-30%) rotate(-135deg); }
.faq details p { padding: 0 0 20px; max-width: 36em; color: var(--ink2); }

/* Closing band: the paper art and its short film, then one more download. */
.closing { padding: 72px 0 88px; background: var(--mist); text-align: center; }
.closing-art { position: relative; width: min(760px, 100%); margin: 0 auto; aspect-ratio: 16 / 9; overflow: hidden; border-radius: 14px; }
.closing-art > img, .closing-art > video { display: block; width: 100%; height: 100%; object-fit: contain; }
.closing-art > video { position: absolute; inset: 0; opacity: 0; pointer-events: none; }
.closing-art > video.is-visible { opacity: 1; }
.motion-toggle { position: absolute; z-index: 2; right: 16px; bottom: 16px; display: inline-flex; align-items: center; gap: 8px; min-height: 40px; padding: 8px 14px; border: 1px solid rgba(44, 44, 43, .12); border-radius: 999px; color: var(--ink); background: rgba(255, 255, 255, .92); font-size: 13px; }
.motion-toggle:hover { background: #fff; border-color: var(--ink2); }
.motion-icon { width: 12px; font-size: 11px; text-align: center; }
.media-status { margin-top: 12px; font-size: 13px; color: var(--ink2); }
.closing h2 { margin-top: 36px; font: 400 clamp(28px, 3.4vw, 40px)/1.45 var(--serif); }
.closing .get { margin-top: 24px; }
.closing .meta { color: var(--ink2); }

.site-footer { display: flex; flex-wrap: wrap; gap: 16px; align-items: center; justify-content: space-between; padding: 28px 0 40px; font-size: 13px; color: var(--ink2); }
.site-footer .brand { font-size: 14px; color: var(--ink); }

/* 404 */
.lost { padding: 72px 0 120px; }
.lost-art { display: block; width: min(287px, 100%); height: auto; margin-bottom: 24px; }
.lost h1 { font: 400 clamp(32px, 4vw, 48px)/1.4 var(--serif); }
.lost p { margin-top: 16px; color: var(--ink2); }
.lost a { display: inline-block; margin-top: 28px; padding: 10px 20px; border-radius: 999px; background: var(--accent); color: #fff; font-size: 14px; }

@media (max-width: 960px) {
  .band, .band.flip, .questions, .chrome { grid-template-columns: 1fr; gap: 28px; padding: 56px 0; }
  .band.flip .copy { order: 0; }
  .shot, .band.flip .shot { margin: 0 -2%; }
  .strip { grid-template-columns: 1fr 1fr; }
  .ways { grid-template-columns: 1fr; }
}
@media (max-width: 760px) {
  .frame { width: calc(100% - 40px); }
  .site-nav a:not(.download) { display: none; }
  .hero { padding-top: 32px; }
  .hero h1 { font-size: clamp(28px, 7.4vw, 38px); line-height: 1.4; }
  .lede { font-size: 16px; }
  .hero-shot { margin: 32px -3% 0; }
  .demo-window { grid-template-columns: 1fr; }
  .book { order: -1; border-left: 0; border-bottom: 1px solid var(--line); }
  .book-page { padding: 4px 22px 22px; font-size: 16px; }
  .pair { grid-template-columns: 1fr; gap: 40px; padding: 56px 0 48px; }
  .copy h2, .questions h2 { font-size: 24px; }
  .closing { padding: 56px 0 64px; }
  .motion-toggle { right: 10px; bottom: 10px; }
}
@media (max-width: 480px) {
  .strip { grid-template-columns: 1fr; gap: 20px; }
}
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .caret { animation: none; }
  .s, .faq summary::after { transition: none; }
}

/* A compact, readable reference page. */
.faq p a { color: var(--accent); text-decoration: underline; text-underline-offset: 3px; }
.guide { max-width: 780px; padding: 40px 0 80px; }
.breadcrumb { color: var(--ink2); font-size: 13px; margin-bottom: 24px; }
.guide h1 { font: 400 clamp(30px, 5vw, 44px)/1.4 var(--serif); }
.guide-intro { margin-top: 22px; color: var(--ink2); font-size: 18px; }
.guide-toc { display: flex; flex-wrap: wrap; gap: 8px 24px; margin: 28px 0 10px; padding: 18px 0; border-block: 1px solid var(--line); font-size: 14px; }
.guide section { padding-top: 38px; scroll-margin-top: 24px; }
.guide h2 { font: 400 25px/1.5 var(--serif); margin-bottom: 14px; }
.guide section p + p { margin-top: 12px; }
.guide ol { padding-left: 1.4em; }
.guide li + li { margin-top: 8px; }
.guide a { color: var(--accent); text-decoration: underline; text-underline-offset: 3px; overflow-wrap: anywhere; }
.guide-facts { margin: 0; }
.guide-facts div { padding: 12px 0; border-bottom: 1px solid var(--line); }
.guide-facts dt { font-weight: 600; }
.guide-facts dd { margin: 4px 0 0; color: var(--ink2); }
.guide-date { color: var(--ink2); font-size: 13px; }