/* Fanlet 官网。颜色、字重和细线来自 design/assets/shell.css：
   外壳只有墨色和留白，颜色只来自小组件。 */
*{box-sizing:border-box;margin:0;padding:0}
:root{
  color-scheme:light dark;
  --w1:#F9F8F5;--w2:#F2F1EC;
  --k:#1C1C1E;--t2:#6E6E73;--ln:rgba(28,28,30,.12);--inv:#fff;
  --hang:0 22px 26px -18px rgba(28,28,30,.42),0 2px 5px rgba(28,28,30,.08);
  --sf:-apple-system,BlinkMacSystemFont,'SF Pro Text','PingFang SC','Segoe UI',Roboto,'Noto Sans CJK SC','Microsoft YaHei',sans-serif;
  --sfd:-apple-system,BlinkMacSystemFont,'SF Pro Display','PingFang SC','Segoe UI',Roboto,'Noto Sans CJK SC','Microsoft YaHei',sans-serif;
  --col:338px;
}
@media (prefers-color-scheme:dark){
  :root{
    --w1:#191918;--w2:#101010;
    --k:#F2F1EC;--t2:#9C9CA1;--ln:rgba(242,241,236,.15);--inv:#141413;
    --hang:0 0 0 .5px rgba(255,255,255,.17),0 26px 30px -20px rgba(0,0,0,.9);
  }
}
html{background:var(--w2);-webkit-text-size-adjust:100%}
body{min-height:100vh;background:linear-gradient(180deg,var(--w1),var(--w2));color:var(--k);font:400 16px/1.7 var(--sf);-webkit-font-smoothing:antialiased;overflow-wrap:break-word}
a{color:inherit;text-underline-offset:.18em;text-decoration-thickness:.5px}
.page{width:min(var(--col),calc(100% - 32px));margin:0 auto;padding-bottom:48px}
.page.doc{--col:680px}

/* —— 语言：两个单选框加 CSS 就能切换，不依赖 JS。
      都没选时两种语言都显示；lang.js 按浏览器语言选中一个。 —— */
.lang-input{position:absolute;width:1px;height:1px;opacity:0;pointer-events:none}
#lang-zh:checked~.page [lang=en]:not(label){display:none}
#lang-en:checked~.page [lang=zh-Hans]:not(label){display:none}
/* 带文字的小组件图每种语言一张。都没选时只显示中文那张，不让同一款出现两次 */
.page img[lang=en]{display:none}
#lang-en:checked~.page img[lang=en]{display:block}
/* 两种语言挨着显示时加分隔，选中一种后不显示 */
#lang-zh:not(:checked)+#lang-en:not(:checked)~.page .pair span+span::before{content:" / "}

/* —— 顶部 —— */
.top{display:flex;align-items:center;justify-content:space-between;min-height:72px}
.brand{display:flex;align-items:center;gap:10px;font:500 17px var(--sf);text-decoration:none}
.brand img{display:block;width:32px;height:32px;border-radius:22.5%;box-shadow:0 0 0 .5px var(--ln)}
.lang{display:flex;gap:16px}
.lang label{display:flex;align-items:center;min-height:44px;cursor:pointer;font:400 15px var(--sf);color:var(--t2)}
.lang span{padding-bottom:3px}
#lang-zh:checked~.page label[for=lang-zh] span,
#lang-en:checked~.page label[for=lang-en] span{color:var(--k);box-shadow:inset 0 -1px 0 var(--k)}
#lang-zh:focus-visible~.page label[for=lang-zh],
#lang-en:focus-visible~.page label[for=lang-en]{outline:2px solid var(--k);outline-offset:2px}

/* —— 首页 —— */
.hero{padding-top:20px}
.hero h1{font:300 34px/1.2 var(--sfd);letter-spacing:.005em;text-wrap:balance}
.lede{margin-top:14px;max-width:640px;font:400 17px/1.65 var(--sf);color:var(--t2)}
.get{display:flex;flex-wrap:wrap;align-items:center;gap:10px 18px;margin-top:24px}
.btn{display:inline-block;padding:15px 28px;border-radius:27px;background:var(--k);color:var(--inv);font:500 17px/24px var(--sf);text-decoration:none}
.btn:hover{opacity:.86}
.req{font:400 13px/1.45 var(--sf);color:var(--t2)}

.wall{display:grid;grid-template-columns:repeat(2,minmax(0,158px));justify-content:center;gap:18px 22px;grid-auto-flow:dense;margin-top:40px}
.wall figure{min-width:0}
.wall .m{grid-column:span 2}
.wall img{display:block;width:100%;height:auto;border-radius:22px;box-shadow:var(--hang)}
.wall figcaption{margin-top:8px;padding:0 2px;font:500 13px/1.35 var(--sf)}

.info{display:grid;gap:0 48px;margin-top:48px}
.info section{padding:16px 0 20px;border-top:.5px solid var(--ln)}
.info h2{font:400 13px/1.5 var(--sf);color:var(--t2);margin-bottom:6px}
.info p{font:400 15px/1.65 var(--sf)}
.info .fine{margin-top:6px;font-size:13px;line-height:1.5;color:var(--t2)}
.foot{padding-top:16px;border-top:.5px solid var(--ln);font:400 13px/1.5 var(--sf);color:var(--t2)}

@media (min-width:720px){
  :root{--col:698px}
  .hero{padding-top:44px}
  .hero h1{font-size:46px}
  .wall{grid-template-columns:repeat(4,158px);justify-content:start}
  .info{grid-template-columns:1fr 1fr}
}
@media (min-width:960px){
  :root{--col:878px}
  .hero{padding-top:28px}
  .hero h1{font-size:52px}
  .get{margin-top:20px}
  .wall{grid-template-columns:repeat(5,158px);margin-top:32px}
}

/* —— 隐私政策：没有卡片，只用细线分组 —— */
.contact,
#lang-zh:not(:checked)+#lang-en:not(:checked)~.doc article+article{margin-top:56px;padding-top:40px;border-top:.5px solid var(--ln)}
.doc h1{font:300 34px/1.2 var(--sfd);letter-spacing:.005em;padding-top:20px}
.meta{margin-top:10px;font:400 13px/1.6 var(--sf);color:var(--t2)}
.doc .intro{margin-top:20px}
.doc section:not(.contact){margin-top:32px;padding-top:24px;border-top:.5px solid var(--ln)}
.doc h2{font:400 20px/1.4 var(--sfd)}
.doc h3{margin-top:18px;font:500 16px/1.5 var(--sf)}
.doc section p{margin-top:10px}
.doc ul{margin-top:10px;padding-left:1.15em}
.doc li{margin-top:6px}
.doc dl{margin-top:6px}
.doc dt{margin-top:12px;font-weight:500}
.doc dd{color:var(--t2)}
.contact h2{margin-bottom:10px}
.contact p{margin-top:6px}
mark.todo{padding:0 .3em;border-radius:3px;background:#FFB340;color:#17171A}

@media print{
  .lang,.lang-input{display:none}
  body{background:none}
}