@font-face{font-family:Newsreader;src:url('/drip/assets/fonts/newsreader-latin.woff2?v=5d0d51a6af') format('woff2');font-weight:600;font-display:swap}
:root{color-scheme:light dark;--bg:#F7F7F5;--text:#1D1D1F;--secondary:#6E6E73;--line:rgba(0,0,0,.1);--link:#0066CC;--phone:#1D1D1F;--head:ui-serif,"New York","Newsreader",serif}
*{box-sizing:border-box}body{margin:0;background:var(--bg);color:var(--text);font:18px/1.55 -apple-system,BlinkMacSystemFont,"PingFang SC","Helvetica Neue",sans-serif;letter-spacing:0}a{color:var(--link);text-decoration:none}a:hover{text-decoration:underline}a:focus-visible,summary:focus-visible,.gallery:focus-visible{outline:2px solid var(--link);outline-offset:5px}h1,h2,h3,.brand{font-family:var(--head);font-weight:600;letter-spacing:-.005em}html[lang=zh-Hans]{--head:"Drip Serif SC",ui-serif,"New York","Newsreader",serif}html[lang=zh-Hans] :is(h1,h2,h3,.brand){font-feature-settings:"halt"}h1{font-size:clamp(34px,5vw,56px);line-height:1.12;margin:0 0 24px}h2{font-size:clamp(26px,3.4vw,40px);line-height:1.2;margin:0 0 20px}h3{line-height:1.25}p{margin:0 0 20px}.container{max-width:1228px;margin-inline:auto;padding-inline:24px}.nav{display:flex;align-items:center;gap:28px;padding-block:20px;font-size:15px}.nav a:not(.brand){color:var(--secondary)}.brand{display:flex;align-items:center;gap:10px;margin-right:auto;font-size:22px;color:var(--text)}.brand img{width:32px;height:32px}.hero{max-width:808px;padding:0 24px;margin:72px auto 0;text-align:center}.sub{font-size:19px;color:var(--secondary);margin-bottom:32px}.capsule{display:inline-block;background:#1D1D1F;color:white;font-size:16px;padding:12px 24px;border-radius:999px;margin:0;max-width:100%}.gallery{display:flex;gap:48px;overflow-x:auto;scroll-snap-type:x mandatory;scroll-padding-inline-start:max(24px,calc((100vw - 1180px)/2));padding:96px max(24px,calc((100vw - 1180px)/2));scrollbar-width:none}.gallery::-webkit-scrollbar{display:none}.gallery figure{flex:0 0 260px;margin:0;scroll-snap-align:start}.phone{display:block;width:100%;height:auto;border:6px solid var(--phone);border-radius:13.5% / 6.3%}picture{display:block}figcaption{font-size:15px;color:var(--secondary);text-align:center;margin-top:18px}.features{padding-top:24px}.feature{display:grid;grid-template-columns:minmax(0,480px) 280px;justify-content:space-around;gap:64px;align-items:center;margin-bottom:120px}.feature:nth-child(even){grid-template-columns:280px minmax(0,480px)}.feature:nth-child(even) .feature-copy{order:2}.feature p{color:var(--secondary)}.closing{text-align:center;max-width:808px;margin:0 auto 120px;padding:0 24px}.closing>img{display:block;width:96px;height:96px;margin:0 auto 28px}.closing .capsule{margin-bottom:24px}.closing p:not(.capsule){color:var(--secondary)}.languages{font-size:15px}.support{max-width:728px;margin:0 auto 100px;padding:0 24px}.faq{border:1px solid var(--line);border-radius:12px;margin:32px 0 24px;overflow:hidden}details+details{border-top:1px solid var(--line)}summary{list-style:none;cursor:pointer;padding:20px 44px 20px 20px;position:relative}summary::-webkit-details-marker{display:none}summary:after{content:"";position:absolute;right:22px;top:27px;width:7px;height:7px;border-right:1.5px solid currentColor;border-bottom:1.5px solid currentColor;transform:rotate(45deg)}details[open] summary:after{transform:rotate(225deg)}details p{padding:0 20px 20px;margin:0;color:var(--secondary)}.footer{border-top:1px solid var(--line);padding-block:26px;display:flex;justify-content:space-between;gap:24px;font-size:14px;color:var(--secondary)}.footer p{margin:0}.footer a{color:inherit}.guide{max-width:728px;padding:64px 24px 96px;margin:auto}.toc{padding-left:22px;margin:32px 0 64px}.toc li{margin:6px 0}.guide section{margin-top:64px;scroll-margin-top:24px}.guide section picture{width:240px;max-width:100%;margin:32px auto 0}.page{max-width:728px;margin:auto;padding:20px 24px}.page main{padding-block:64px}.page h2{margin-top:48px}.page .site{font-size:15px}.page footer{border-top:1px solid var(--line);padding-top:24px}.page p{overflow-wrap:break-word}
@media(prefers-color-scheme:dark){:root{--bg:#141414;--text:#F5F5F7;--secondary:#A1A1A6;--line:rgba(255,255,255,.12);--link:#4DA3FF;--phone:#3A3A3C}.capsule{background:#F5F5F7;color:#1D1D1F}}
@media(max-width:1067px){.feature,.feature:nth-child(even){display:flex;flex-direction:column;gap:28px}.feature .feature-copy{max-width:480px}.feature:nth-child(even) .feature-copy{order:0}.feature picture{width:240px}}
@media(max-width:733px){.container{padding-inline:16px}.nav .nav-secondary{display:none}.nav{gap:16px}.hero{text-align:left;margin-top:40px;padding-inline:16px}.gallery{gap:20px;padding:56px 16px;scroll-padding-inline-start:16px}.gallery figure{flex-basis:72vw}.feature{margin-bottom:72px}.features{padding-top:16px}.closing{margin-bottom:72px;padding-inline:16px}.support{padding-inline:16px;margin-bottom:72px}.footer{flex-wrap:wrap;gap:12px}.guide{padding:40px 16px 72px}.page{padding-inline:16px}}

/* CJK–Latin spacing comes from the browser, not from spaces in the copy. */
:lang(zh) { text-autospace: normal; }
/* Optical centering: a negative end margin equal to the trailing mark's advance (measured: "."
   ≈ .25em in New York/SF, "。" = 1ic in PingFang) keeps the words on the center line. */
.hang-latin { margin-inline-end: -.25em; }
.hang-cjk { margin-inline-end: -1ic; }
@media (max-width: 733px) { .hero .hang-latin, .hero .hang-cjk { margin-inline-end: 0; } }
/* Keeps a paragraph's last word with its closing mark (see tail() in tools/pages.mjs). */
.keep { text-wrap: nowrap; }
/* English paragraphs: let the browser avoid one-word last lines (Chinese uses .keep instead). */
:lang(en) p { text-wrap: pretty; }
/* Headings break into lines of similar length. */
h1, h2, h3 { text-wrap: balance; }
/* When all five phones fit (5 × 260 + 4 × 48 + 2 × 24 = 1540px), center the row and drop the
   scroll snapping instead of cutting off the last phone. */
@media (min-width: 1540px) {
  .gallery { justify-content: center; padding-inline: 24px; scroll-snap-type: none; }
}
/* Share thumbnail for WeChat (see shareThumb in tools/pages.mjs): loaded, not shown. */
.share-thumb { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); }
/* Apple's "Download on the App Store" badge, unaltered: black on light, Apple's white variant on
   dark (a <picture> source). 48px tall (Apple's onscreen minimum is 40px); the clear space Apple
   asks for, a quarter of the height (12px), is kept by the margins around it. */
.badge { display: inline-flex; vertical-align: top; }
.badge img { display: block; width: auto; height: 48px; }
.closing .badge { margin-bottom: 24px; }
/* Apple's trademark credit, required wherever the badge is used, on a footer row of its own. */
.footer { flex-wrap: wrap; }
.footer .legal { flex-basis: 100%; }
@view-transition{navigation:auto}::view-transition-old(root),::view-transition-new(root){animation:none}@media (prefers-reduced-motion:reduce){@view-transition{navigation:none}}.nav .brand img{view-transition-name:drip-icon}