/* 版面的规矩：整宽分段，段内收到 --cn 居中。宽屏上留白由字号和分段吃掉，
   而不是让一根窄栏漂在中间、两边空一大片。 */
:root{
  --bg:#fff;--bg2:#f5f5f7;--card:#fff;
  --fg:#1d1d1f;--muted:#6e6e73;--line:#d2d2d7;--accent:#0071e3;
  --cn:60rem}
@media(prefers-color-scheme:dark){
  :root{--bg:#000;--bg2:#0b0b0d;--card:#141416;
        --fg:#f5f5f7;--muted:#98989d;--line:#2c2c2e;--accent:#2997ff}
}
*{box-sizing:border-box}
body{margin:0;background:var(--bg);color:var(--fg);
  font:17px/1.55 -apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Helvetica,Arial,sans-serif;
  -webkit-font-smoothing:antialiased}
.cn{max-width:var(--cn);margin:0 auto;padding:0 1.5rem}
.cn.narrow{max-width:42rem}
a{color:var(--accent);text-decoration:none}
a:hover{text-decoration:underline}
:focus-visible{outline:2px solid var(--accent);outline-offset:3px;border-radius:4px}

/* 顶栏：半透明 + 背景模糊，页面从它底下滚过去 */
.topbar{position:sticky;top:0;z-index:50;
  background:color-mix(in srgb,var(--bg) 72%,transparent);
  backdrop-filter:saturate(180%) blur(20px);
  -webkit-backdrop-filter:saturate(180%) blur(20px);
  border-bottom:1px solid color-mix(in srgb,var(--line) 65%,transparent)}
.topbar .cn{display:flex;align-items:center;height:2.9rem;gap:1.5rem}
.topbar .name{font-size:.95rem;font-weight:600;letter-spacing:-.012em}
.topbar .name a{color:inherit}
.topbar nav{margin-left:auto;display:flex;gap:1.6rem;font-size:.78rem}
.topbar nav a{color:var(--fg);opacity:.8}
.topbar nav a:hover{opacity:1;text-decoration:none}
.topbar nav a[aria-current]{opacity:1;font-weight:600}

/* 字号阶梯：标题大、字距收紧，正文放松 */
h1,h2,h3{margin:0;letter-spacing:-.022em;text-wrap:balance}
h1{font-size:clamp(2.1rem,5.4vw,3.4rem);line-height:1.06;font-weight:700}
h2{font-size:clamp(1.55rem,3.2vw,2.25rem);line-height:1.12;font-weight:700}
h3{font-size:1.02rem;line-height:1.3;font-weight:600;letter-spacing:-.012em}
p{margin:0;color:var(--muted)}
section{padding:clamp(3.5rem,7vw,6rem) 0}
section.alt{background:var(--bg2)}
.mid{text-align:center;max-width:36rem;margin:0 auto}
.mid p{margin-top:1rem;font-size:1.05rem}

/* 首屏：标题、副题、机身竖着摞。整宽居中，两侧不再有大片空地 */
.hero{padding:clamp(2.75rem,6vw,5rem) 0 0;text-align:center;position:relative;overflow:hidden}
.hero .lede{font-size:clamp(1.05rem,1.9vw,1.3rem);max-width:47rem;margin:1.2rem auto 0}
.hero .shot{margin-top:clamp(2.25rem,4.5vw,3.25rem);display:flex;justify-content:center;
  padding-bottom:clamp(2.5rem,5vw,4rem)}
.hero .phone{--pw:min(300px,70vw)}
/* 机身背后一团很淡的光，把它从纯白底上托起来 */
.hero .shot::before{content:"";position:absolute;z-index:0;left:50%;bottom:0;
  width:min(46rem,110vw);height:26rem;transform:translateX(-50%);
  background:radial-gradient(50% 60% at 50% 60%,
             color-mix(in srgb,var(--accent) 11%,transparent),transparent 70%);
  pointer-events:none}
.hero .phone{position:relative;z-index:1}

/* 四条要点排成卡片，行宽自己收敛，宽屏上不会拉成一条长线 */
.grid{display:grid;gap:1.15rem;margin:clamp(2rem,4vw,3rem) auto 0;max-width:52rem;
  /* 固定两列：四条要点排成 2×2，别让第四条自己占一行 */
  grid-template-columns:repeat(2,minmax(0,1fr))}
@media(max-width:38rem){.grid{grid-template-columns:1fr}}
.tile{background:var(--card);border:1px solid var(--line);border-radius:18px;
  padding:1.5rem 1.4rem}
.tile h3{margin-bottom:.4rem}
.tile p{font-size:.95rem}

/* 三个计数器：用表格式的行，说明「就这么三条，没别的」 */
.rows{max-width:36rem;margin:clamp(2rem,4vw,2.75rem) auto 0;
  border-top:1px solid var(--line)}
.rows div{display:flex;gap:1rem;align-items:baseline;padding:.85rem .25rem;
  border-bottom:1px solid var(--line);font-size:.95rem;color:var(--muted)}
.rows b{flex:none;width:9.5rem;color:var(--fg);font-weight:600}
.note{margin-top:1.5rem;text-align:center;font-size:.95rem}

/* 正文页（隐私、支持）：一根舒服的读栏，不用首页那套分段 */
.doc{padding:clamp(2.75rem,6vw,4.5rem) 0 clamp(4rem,7vw,6rem)}
.doc h1{font-size:clamp(1.9rem,4.4vw,2.7rem);margin-bottom:.8rem}
.doc h2{font-size:1.15rem;font-weight:600;letter-spacing:-.012em;margin:2.6rem 0 .6rem}
.doc p{margin:0 0 1rem}
.doc .lede{font-size:1.2rem;margin-bottom:1.4rem}
.doc .date{font-size:.85rem;margin-bottom:2.4rem}
.doc ul{margin:0 0 1rem;padding-left:1.15rem;color:var(--muted)}
.doc li{margin-bottom:.5rem}

footer{border-top:1px solid var(--line);padding:2.25rem 0 3rem;
  font-size:.78rem;color:var(--muted)}
footer .cn{display:flex;flex-wrap:wrap;gap:.9rem 1.5rem;align-items:baseline}
footer nav{margin-left:auto;display:flex;gap:1.4rem}
footer a{color:var(--muted);text-decoration:underline;text-underline-offset:2px}
footer .credit{flex-basis:100%;opacity:.85;line-height:1.5}
code{font:.9em ui-monospace,SFMono-Regular,Menlo,monospace;
  background:color-mix(in srgb,var(--fg) 7%,transparent);padding:.15em .4em;border-radius:4px}

/* ---- 手机模拟画面 ----------------------------------------------------
   App 固定深色，所以机身内部不跟随站点主题：这里的黑就是 App 里的黑。
   画面元素照 Views/ 里的真实取值：卡片 white:0.08、左滑红 rgb(255,107,107)、
   清理地图的橙色进度条、底部白色 Done。别顺手改成站点的主色。 */
.phone{--pw:290px;--r:calc(var(--pw)/7.05);width:var(--pw);aspect-ratio:393/852;
  position:relative;flex:none;font-size:calc(var(--pw)/25);
  padding:calc(var(--pw)/58);border-radius:var(--r);
  /* 钛金属：四角亮、侧边暗，模拟金属对环境光的方向性反射 */
  background:
    linear-gradient(148deg,#8e8e96 0%,#3a3a41 14%,#6e6e78 30%,#2a2a30 52%,
                    #5d5d67 72%,#232329 88%,#7a7a84 100%);
  box-shadow:
    0 30px 70px -24px rgba(0,0,0,.62),
    0 4px 14px -6px rgba(0,0,0,.4),
    inset 0 0 0 .5px rgba(255,255,255,.28),
    inset 0 .5px 0 rgba(255,255,255,.42)}
/* 边框与屏幕之间那一圈黑色垫圈，真机上是有的 */
.phone::before{content:"";position:absolute;inset:calc(var(--pw)/125);
  border-radius:calc(var(--r) - var(--pw)/125);background:#08080a;
  box-shadow:inset 0 0 0 .5px rgba(0,0,0,.9)}

/* 侧键：位置照真机，左侧操作按钮 + 音量，右侧电源 */
.btn{position:absolute;background:linear-gradient(90deg,#25252a,#6a6a74 40%,#3c3c43);
  box-shadow:inset 0 .5px 0 rgba(255,255,255,.3)}
.btn.l{left:calc(var(--pw)/-95);border-radius:calc(var(--pw)/60) 0 0 calc(var(--pw)/60);
  width:calc(var(--pw)/62)}
.btn.r{right:calc(var(--pw)/-95);border-radius:0 calc(var(--pw)/60) calc(var(--pw)/60) 0;
  width:calc(var(--pw)/62);
  background:linear-gradient(270deg,#25252a,#6a6a74 40%,#3c3c43)}
.btn.act{top:15.5%;height:4.2%}
.btn.vup{top:23.5%;height:7.6%}
.btn.vdn{top:33%;height:7.6%}
.btn.pwr{top:26%;height:11.5%}

/* 玻璃反光：一道很淡的斜向高光，别盖住内容 */
.glare{position:absolute;z-index:10;inset:0;pointer-events:none;
  border-radius:inherit;
  background:linear-gradient(122deg,rgba(255,255,255,.09) 0 18%,
             rgba(255,255,255,.028) 26%,transparent 42%)}
.screen{position:relative;width:100%;height:100%;overflow:hidden;isolation:isolate;
  border-radius:calc(var(--r) - var(--pw)/58);background:#000;color:#fff;
  font:1em/1.3 -apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,sans-serif}
.island{position:absolute;z-index:9;top:.52em;left:50%;transform:translateX(-50%);
  width:5.45em;height:1.62em;border-radius:1em;background:#000;
  display:flex;align-items:center;justify-content:flex-end;padding-right:.42em;
  box-shadow:inset 0 0 0 .5px rgba(255,255,255,.05)}
.island .cam{width:.62em;height:.62em;border-radius:50%;
  background:radial-gradient(circle at 32% 28%,#2b3348,#0a0c12 62%);
  box-shadow:inset 0 0 0 .5px rgba(120,150,210,.22)}
.sbar{position:absolute;z-index:8;top:.72em;left:0;right:0;display:flex;
  justify-content:space-between;padding:0 1.8em;font-size:.62em;font-weight:600;
  letter-spacing:.01em;color:#fff}
.sbar .ic{display:flex;gap:.32em;align-items:center}
.homebar{position:absolute;z-index:9;bottom:.5em;left:50%;transform:translateX(-50%);
  width:35%;height:.24em;border-radius:.24em;background:rgba(255,255,255,.82)}
.app{position:absolute;inset:0;padding:3.3em .85em 1.9em;display:flex;flex-direction:column}
.screen svg{display:block}

/* 顶栏：月份 ⌄ / ✕ 计数 / 齿轮 */
.topbar{display:flex;align-items:center;gap:.6em;font-size:.72em;flex:none}
.topbar .src{display:flex;align-items:center;gap:.3em;font-weight:600}
.topbar .mark{margin-left:auto;font-weight:600;font-variant-numeric:tabular-nums;
  color:rgba(255,255,255,.72)}
.odo{display:inline-block;height:1.15em;overflow:hidden;vertical-align:-.22em}
.odo b{display:block;height:1.15em;font-weight:600}
.topbar .gear{opacity:.68}

/* 卡片堆 */
.deck{position:relative;flex:1;margin:.75em 0}
.card{position:absolute;inset:0;border-radius:.85em;overflow:hidden;
  background:#141414;box-shadow:0 .5em 1.4em -.4em rgba(0,0,0,.7);
  transform-origin:50% 120%}
.ph{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;display:block}
.card::after{content:"";position:absolute;inset:0;pointer-events:none;
  background:linear-gradient(to top,rgba(0,0,0,.72) 0,rgba(0,0,0,.34) 9%,
             rgba(0,0,0,.1) 18%,transparent 30%)}
.card .meta{position:absolute;z-index:2;left:.75em;right:.75em;bottom:.62em;display:flex;
  align-items:center;font-size:.68em;font-weight:600;letter-spacing:.005em;
  text-shadow:0 .05em .35em rgba(0,0,0,.9),0 0 .12em rgba(0,0,0,.6)}
.card .meta .heart{margin-left:auto;opacity:.95;filter:drop-shadow(0 .05em .25em rgba(0,0,0,.8))}
.ov{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;
  opacity:0}
.ov-x{background:rgba(255,107,107,.82)}
.ov-v{background:rgba(74,209,140,.78)}

/* 底栏：撤销 + Done */
.bottombar{display:flex;align-items:center;gap:.7em;flex:none}
.undo{width:2.3em;height:2.3em;border-radius:50%;display:grid;place-items:center;
  background:rgba(255,255,255,.10);color:rgba(255,255,255,.85);flex:none}
.done{flex:1;height:2.3em;border-radius:1.15em;background:#fff;color:#000;
  display:grid;place-items:center;font-size:.72em;font-weight:600;letter-spacing:.01em}

/* ---- 动画：9 秒一轮，三张卡依次左滑删除 / 右滑保留 ---- */
@keyframes deck{
  0%,15%   {transform:translate(0,0) rotate(0);opacity:1}
  26%      {transform:translate(calc(var(--dir)*118%),-4%) rotate(calc(var(--dir)*13deg));
            opacity:0}
  27%,63%  {transform:translate(0,.7em) scale(.93);opacity:0}
  66%      {transform:translate(0,.7em) scale(.93);opacity:1}
  100%     {transform:translate(0,0) rotate(0);opacity:1}
}
/* z 序必须单独跑，而且必须是 step-end。
   z-index 是整数属性，浏览器会插值：把它写进 deck 的关键帧里，淡入那段
   (63%->66%) z 会在中点四舍五入提前跳到 2，跟当时排在最前面的那张卡并列，
   并列时由 DOM 顺序决定谁在上——后面的卡就盖住了前面的，屏幕上是一张
   半透明照片闪一下。分成独立动画后 z 只在关键帧处瞬时切换，不产生中间值。
   三个边界取正好的 1/3、2/3，与三张卡 3 秒的相位差严格对齐：任一时刻
   三张卡各占一段，永远不会并列。切到 z1 发生在 33.3%，那时卡片
   opacity 已经是 0（27% 起就是），看不见。 */
@keyframes zorder{
  0%       {z-index:3}
  33.334%  {z-index:1}
  66.667%  {z-index:2}
}
@keyframes ovin{0%,15%{opacity:0}23%,26%{opacity:1}27%,100%{opacity:0}}
@keyframes odo{0%,25%{transform:translateY(0)}
  27%,91%{transform:translateY(-1.15em)}93%,100%{transform:translateY(-2.3em)}}

.card,.ov,.odo b:first-child{animation-duration:9s;animation-iteration-count:infinite;
  animation-timing-function:cubic-bezier(.34,.02,.24,1)}
.card{animation-name:deck,zorder;animation-duration:9s,9s;
  animation-timing-function:cubic-bezier(.34,.02,.24,1),step-end}
.ov{animation-name:ovin}
.c1{--dir:-1;animation-delay:0s}      .c1 .ov{animation-delay:0s}
.c2{--dir:1;animation-delay:-6s}      .c2 .ov{animation-delay:-6s}
.c3{--dir:-1;animation-delay:-3s}     .c3 .ov{animation-delay:-3s}
.odo b:first-child{animation-name:odo;animation-timing-function:cubic-bezier(.5,0,.2,1)}

@media(prefers-reduced-motion:reduce){
  /* 停在有内容可读的那一帧，而不是停在空屏 */
  .card,.ov,.odo b:first-child{animation:none}
  .c2,.c3{opacity:0}
  .odo b:first-child{transform:translateY(-1.15em)}
}