/* 安粒达 landing —— 纸为底，机器是唯一的白，药是唯一的饱和色。
   结构仿常宁居（gks）：刊头 → 问题 → 三章痛点 → 宣言暗带 → 数据 → 步骤 → 界面 → 收尾 */

body { overflow-x:hidden; }
main { display:block; }
.sr { position:absolute; width:1px; height:1px; overflow:hidden; clip-path:inset(50%); }
.skip { position:fixed; left:-9999px; top:10px; z-index:99; padding:8px 14px; background:var(--sheet); }
.skip:focus { left:var(--gut); }
a { color:inherit; }

.wrap { max-width:1180px; margin:0 auto; }
.eyebrow { font-size:10px; letter-spacing:.16em; color:var(--ink-3); text-transform:uppercase; margin:0 0 16px; }
.arw { width:7px; height:7px; border-top:1px solid currentColor; border-right:1px solid currentColor;
  transform:rotate(45deg); transition:transform .25s ease; }
a:hover > .arw { transform:rotate(45deg) translate(2px,-2px); }

/* 滚到就显 */
[data-r] { opacity:0; transform:translateY(14px); filter:blur(4px);
  transition:opacity .8s cubic-bezier(.16,1,.3,1), transform .9s cubic-bezier(.16,1,.3,1), filter .8s ease; }
[data-r=in] { opacity:1; transform:none; filter:none; }

/* ── 顶栏 ─────────────────────────────────────────────── */
.top {
  position:fixed; inset:0 0 auto; z-index:20; display:flex; align-items:center; gap:clamp(14px,3vw,40px);
  padding:13px var(--gut); border-bottom:1px solid transparent;
  background:color-mix(in srgb, var(--paper) 72%, transparent);
  backdrop-filter:blur(12px); -webkit-backdrop-filter:blur(12px);
}
.wordmark { font-family:var(--serif); font-weight:700; font-size:16px; letter-spacing:.06em; text-decoration:none; }
.top nav { display:flex; gap:clamp(12px,2vw,26px); margin-left:auto; }
.top nav a { font-size:12px; color:var(--ink-2); text-decoration:none; transition:color .2s ease; }
.top nav a:hover { color:var(--accent); }
.top__docs { display:flex; align-items:center; gap:clamp(10px,1.6vw,20px); margin-left:auto;
  padding-left:clamp(12px,2vw,26px); border-left:1px solid var(--line-2); }
.top nav + .top__docs { margin-left:clamp(12px,2vw,26px); }
.top__docs a { font-size:12px; color:var(--ink-2); text-decoration:none; white-space:nowrap; transition:color .2s ease; }
.top__docs a:hover { color:var(--accent); }
.top__cta { display:inline-flex; align-items:center; gap:8px; padding:7px 13px; border:1px solid var(--line);
  font-size:12px; text-decoration:none; color:var(--ink-2); transition:.22s ease; }
.top__cta:hover { color:var(--ink); border-color:var(--ink-3); }

/* ── Hero ─────────────────────────────────────────────── */
.hero {
  position:relative; height:min(88svh,880px); min-height:540px;
  padding:calc(58px + var(--gut)) var(--gut) var(--gut);
  display:flex; flex-direction:column;
}
#heroView { position:absolute; inset:clamp(70px,12vh,150px) 0 clamp(96px,13vh,150px); width:100%;
  height:auto; display:block; pointer-events:none; }
.hero__pre { position:relative; font-size:11px; letter-spacing:.14em; color:var(--ink-2); margin:0; }
.hero__title { margin:14px 0 0; position:relative; }
.hero__glyphs { display:flex; gap:clamp(4px,1.2vw,18px); font-family:var(--serif); font-weight:700;
  font-size:clamp(56px,12.5vw,164px); line-height:.94; letter-spacing:-.02em; }
.hero__glyphs span { display:block; animation:rise 1.1s cubic-bezier(.16,1,.3,1) both; }
.hero__glyphs span:nth-child(2) { animation-delay:.09s; }
.hero__glyphs span:nth-child(3) { animation-delay:.18s; }
@keyframes rise { from { opacity:0; transform:translateY(26px); filter:blur(7px); } }
.hero__foot { position:relative; margin-top:auto; display:flex; align-items:flex-end;
  justify-content:space-between; gap:24px; flex-wrap:wrap; }
.hero__foot p { margin:0; max-width:34ch; font-size:14px; line-height:1.85; color:var(--ink-2); }

/* ── 问题 ─────────────────────────────────────────────── */
.intro { max-width:1180px; margin:0 auto; padding:clamp(64px,8.5vh,112px) var(--gut); }
.intro__lead { font-size:10.5px; letter-spacing:.16em; color:var(--ink-3); margin:0 0 20px; text-transform:uppercase; }
.intro__title { margin:0; font-family:var(--serif); font-weight:700; letter-spacing:-.012em;
  font-size:clamp(27px,4.4vw,56px); line-height:1.24; }
.intro__title span { display:block; }
.intro__copy { display:grid; grid-template-columns:repeat(auto-fit,minmax(270px,1fr)); gap:clamp(20px,3vw,48px);
  margin-top:clamp(28px,4vw,54px); padding-top:26px; border-top:1px solid var(--line-2); }
.intro__copy p { margin:0; font-size:13.5px; line-height:1.9; color:var(--ink-2); }

/* ── 三章痛点 ─────────────────────────────────────────── */
.pains { max-width:1180px; margin:0 auto; padding:0 var(--gut) clamp(46px,6vw,84px); }
.pain { display:grid; grid-template-columns:minmax(0,1.15fr) minmax(200px,.8fr);
  gap:0 clamp(22px,4vw,64px); padding:clamp(34px,4.4vw,58px) 0; border-top:1px solid var(--line-2); }
.pain__idx { grid-column:1/-1; margin:0 0 6px; font-size:10px; letter-spacing:.14em; color:var(--ink-3); }
.pain__idx b { color:var(--accent); }
.pain__idx i { display:inline-block; width:18px; height:1px; background:var(--line); vertical-align:4px; margin:0 10px; }
.pain h2 { margin:0; font-family:var(--serif); font-weight:700; font-size:clamp(22px,3.1vw,38px);
  line-height:1.32; letter-spacing:-.008em; }
.pain h2 span { display:block; }
.pain__body { grid-column:1; margin:18px 0 0; font-size:13.5px; line-height:1.9; color:var(--ink-2); max-width:46ch; }
.pain__metric { grid-column:2; grid-row:2/4; align-self:start; padding-left:clamp(14px,2vw,26px);
  border-left:1px solid var(--line-2); }
.pain__metric strong { display:block; font-size:clamp(30px,4.4vw,52px); font-weight:700; letter-spacing:-.03em; color:var(--accent); }
.pain__metric span { display:block; margin-top:8px; font-size:11px; line-height:1.6; color:var(--ink-3); }
.pain__ev { grid-column:1/-1; margin:24px 0 0; font-size:11.5px; line-height:1.8; color:var(--ink-3); }
.pain__ev .mono { margin-right:10px; letter-spacing:.12em; font-size:9.5px; color:var(--line);
  border:1px solid var(--line-2); padding:2px 6px; }

/* ── 宣言暗带 ─────────────────────────────────────────── */
.manifesto { background:var(--band); color:var(--band-ink); padding:clamp(70px,9.5vh,130px) var(--gut); }
.manifesto h2 { margin:0; font-family:var(--serif); font-weight:700;
  font-size:clamp(25px,4.2vw,54px); line-height:1.34; letter-spacing:-.012em; }
.manifesto h2 span { display:block; }
.manifesto__turn { margin:clamp(24px,3.4vw,40px) 0 0; font-family:var(--serif);
  font-size:clamp(17px,2.2vw,26px); color:var(--accent); }
.manifesto__body { max-width:62ch; margin:18px 0 0; font-size:13.5px; line-height:1.9; color:var(--band-dim); }

/* ── 力学 ─────────────────────────────────────────────── */
.force { max-width:1180px; margin:0 auto; padding:clamp(64px,8.5vh,112px) var(--gut); }
.force__head h2 { margin:0; font-family:var(--serif); font-weight:700; font-size:clamp(23px,3.4vw,42px);
  line-height:1.3; letter-spacing:-.01em; }
.force__note { margin:16px 0 0; font-size:12px; color:var(--ink-3); }
.force__chart { position:relative; margin-top:clamp(32px,4.4vw,56px);
  --lead:calc(34px + clamp(70px,11vw,164px)); --tail:88px; }
/* 参考线只铺在四条之间：上到刻度带、下到坐标轴 */
.fx__grid { position:absolute; left:var(--lead); right:var(--tail); top:32px; bottom:22px; z-index:0; pointer-events:none; }
.fx__line { position:absolute; top:0; bottom:0; width:1px; background:var(--line-2); }
.fx__marks { position:relative; height:32px; margin-left:var(--lead); margin-right:var(--tail); }
.fx__band { position:absolute; top:0; bottom:0; background:color-mix(in srgb,var(--amber) 13%,transparent); }
.fx__mark { position:absolute; top:20px; width:1px; height:12px; background:var(--line); }
.fx__mark b { position:absolute; bottom:15px; left:0; transform:translateX(-50%); white-space:nowrap;
  font-size:9px; letter-spacing:.06em; color:var(--ink-3); font-weight:400; }
.fx__mark:last-child b { transform:translateX(-100%); }
.fx__rows { position:relative; z-index:1; display:flex; flex-direction:column; }
.fx { display:grid; grid-template-columns:22px clamp(70px,11vw,164px) 1fr 76px; align-items:center; gap:0 12px;
  width:100%; padding:13px 0; border:0; border-top:1px solid var(--line-2); background:none; cursor:pointer;
  font:inherit; text-align:left; color:var(--ink-2); transition:color .2s ease; }
.fx:last-child { border-bottom:1px solid var(--line-2); }
.fx:hover { color:var(--ink); }
.fx__k { font-size:10px; font-weight:700; color:var(--ink-3); }
.fx[data-on] { color:var(--ink); }
.fx[data-on] .fx__k { color:var(--accent); }
.fx__nm { font-size:13.5px; }
.fx__track { position:relative; height:9px; background:linear-gradient(var(--line-2),var(--line-2)) 0 50%/100% 1px no-repeat; }
.fx__track i { position:absolute; top:0; height:9px; background:var(--ink-3); transition:background .25s ease; }
.fx[data-on] .fx__track i { background:var(--accent); }
.fx__val { font-size:11px; text-align:right; }
.fx__val em { font-style:normal; color:var(--ink-3); margin-left:3px; }
.fx__axis { position:relative; height:22px; margin-left:var(--lead); margin-right:var(--tail); }
.fx__axis span { position:absolute; top:6px; transform:translateX(-50%); font-size:9px; color:var(--ink-3); }
.force__detail { margin-top:22px; padding:20px 22px; background:var(--sheet); border:1px solid var(--line-2); max-width:62ch; }
.force__detail h3 { margin:0 0 12px; font-size:15px; font-weight:700; display:flex; align-items:baseline; gap:10px; }
.force__detail h3 .mono { font-size:10px; color:var(--accent); }
.force__detail h3 em { font-style:normal; margin-left:auto; font-size:11px; color:var(--ink-3); }
.force__detail p { margin:0; font-size:13px; line-height:1.85; color:var(--ink-2); }
.fx__note { margin-top:10px !important; padding-top:10px; border-top:1px solid var(--line-2); color:var(--ink-3) !important; }

/* ── 六个动作 ─────────────────────────────────────────── */
.how { max-width:1180px; margin:0 auto; padding:clamp(30px,4vh,60px) var(--gut) clamp(64px,8.5vh,112px); }
.how__head h2 { margin:0; font-family:var(--serif); font-weight:700; font-size:clamp(23px,3.4vw,42px); letter-spacing:-.01em; }
.how__head > p { margin:16px 0 0; max-width:52ch; font-size:13.5px; line-height:1.9; color:var(--ink-2); }
.how__figs { margin-top:22px !important; font-size:11px; color:var(--ink-3); }
.how__figs b { font-size:15px; color:var(--ink); margin-right:4px; }
.how__figs i { display:inline-block; width:3px; height:3px; border-radius:50%; background:var(--line); vertical-align:3px; margin:0 12px; }
.how__steps { list-style:none; margin:clamp(34px,5vw,58px) 0 0; padding:0;
  display:grid; grid-template-columns:repeat(auto-fit,minmax(270px,1fr)); gap:0 clamp(24px,4vw,56px); }
.how__steps li { display:grid; grid-template-columns:34px 1fr; gap:12px; padding:20px 0;
  border-top:1px solid var(--line-2); }
.how__steps .n { font-size:10px; color:var(--accent); padding-top:3px; }
.how__steps h3 { margin:0; font-size:14.5px; font-weight:700; letter-spacing:.03em; display:flex; align-items:baseline; gap:9px; }
.how__steps .ref { font-size:9px; color:var(--ink-3); font-weight:400; }
.how__steps p { margin:8px 0 0; font-size:12.5px; line-height:1.85; color:var(--ink-2); }
.how__cta,.end__cta { display:inline-flex; align-items:center; gap:10px; margin-top:clamp(30px,4vw,48px);
  padding:12px 20px; border:1px solid var(--line); font-size:13px; text-decoration:none; color:var(--ink);
  transition:.22s ease; }
.how__cta:hover,.end__cta:hover { border-color:var(--accent); color:var(--accent); }

/* ── 界面 ─────────────────────────────────────────────── */
.ui { max-width:1180px; margin:0 auto; padding:0 var(--gut) clamp(64px,8.5vh,112px); }
.ui h2 { margin:0; font-family:var(--serif); font-weight:700; font-size:clamp(23px,3.4vw,42px);
  line-height:1.3; letter-spacing:-.01em; }
.ui__cards { display:grid; grid-template-columns:repeat(auto-fit,minmax(300px,1fr)); gap:clamp(20px,3vw,34px);
  margin-top:clamp(34px,5vw,58px); }
.uic { padding:clamp(22px,3vw,32px); background:var(--sheet); border:1px solid var(--line-2); }
.uic__side { font-size:9.5px; letter-spacing:.16em; color:var(--accent); margin:0 0 12px; }
.uic h3 { margin:0; font-family:var(--serif); font-weight:700; font-size:22px; }
.uic__body { margin:14px 0 0; font-size:13px; line-height:1.85; color:var(--ink-2); }
.uic dl { margin:20px 0 0; padding-top:6px; }
.uic dl div { display:grid; grid-template-columns:minmax(72px,auto) 1fr; gap:4px 14px; padding:11px 0;
  border-top:1px solid var(--line-2); }
.uic dt { font-size:12.5px; font-weight:700; }
.uic dd { margin:0; font-size:12px; line-height:1.75; color:var(--ink-3); }
.uic__foot { margin:18px 0 0; padding-top:14px; border-top:1px solid var(--line-2);
  font-size:11.5px; line-height:1.8; color:var(--ink-3); }

/* ── 明确不做 ─────────────────────────────────────────── */
.bounds { max-width:1180px; margin:0 auto; padding:0 var(--gut) clamp(58px,7.5vh,100px); }
.bounds__list { list-style:none; margin:0; padding:0; display:flex; flex-wrap:wrap; gap:9px; }
.bounds__list li { padding:8px 14px; border:1px solid var(--line-2); font-size:12px; color:var(--ink-3); }

/* ── 收尾 ─────────────────────────────────────────────── */
.end { background:var(--band); color:var(--band-ink); padding:clamp(70px,9.5vh,130px) var(--gut) clamp(36px,5vh,60px); }
.end h2 { margin:0; font-family:var(--serif); font-weight:700; font-size:clamp(27px,4.4vw,56px);
  line-height:1.24; letter-spacing:-.012em; }
.end h2 span { display:block; }
.end__body { margin:clamp(24px,3vw,40px) 0 0; max-width:60ch; font-size:13.5px; line-height:1.9; color:var(--band-dim); }
.end__foot { margin:16px 0 0; max-width:60ch; font-size:13.5px; line-height:1.9; color:var(--band-ink); }
.end__cta { color:var(--band-ink); border-color:color-mix(in srgb,var(--band-ink) 26%,transparent); }
.end__cta:hover { color:var(--accent); border-color:var(--accent); }
.end__actions { display:flex; flex-wrap:wrap; gap:12px; }
.papers { list-style:none; margin:clamp(40px,6vh,72px) 0 0; padding:26px 0 0; display:grid;
  grid-template-columns:repeat(auto-fit,minmax(260px,1fr)); gap:0 clamp(24px,4vw,56px);
  border-top:1px solid color-mix(in srgb,var(--band-ink) 16%,transparent); }
.papers a { display:grid; gap:7px; padding:18px 0; text-decoration:none; color:var(--band-ink);
  border-top:1px solid color-mix(in srgb,var(--band-ink) 10%,transparent); transition:color .22s ease; }
.papers li:first-child a { border-top:0; }
.papers a:hover { color:var(--accent); }
.papers__n { display:flex; align-items:center; gap:9px; font-size:15px; font-weight:700; }
.papers__m { font-size:9.5px; letter-spacing:.1em; color:var(--band-dim); }
.papers__d { font-size:12px; line-height:1.8; color:var(--band-dim); }

.stamp { margin-top:clamp(40px,6vh,72px); padding-top:20px;
  border-top:1px solid color-mix(in srgb,var(--band-ink) 14%,transparent);
  font-size:9px; letter-spacing:.12em; color:var(--band-dim); }
.stamp i { display:inline-block; width:10px; height:1px; background:currentColor; vertical-align:3px; margin:0 9px; opacity:.5; }

/* ── 窄屏 ─────────────────────────────────────────────── */
@media (max-width:860px) {
  .papers li:nth-child(n+2) a { border-top:1px solid color-mix(in srgb,var(--band-ink) 10%,transparent); }
  .top nav { display:none; }
  .top { gap:12px; }
  .top__docs { gap:12px; padding-left:12px; }
  .top__docs a { font-size:12px; }
  .top__cta { margin-left:auto; }
  .hero { height:auto; min-height:0; padding-bottom:clamp(30px,6vh,56px); }
  /* 画布在 DOM 里排第一，手机上它变成常规流，要用 order 把它压到标题下面 */
  .hero__pre { order:1; } .hero__title { order:2; }
  #heroView { order:3; position:relative; inset:auto; height:42svh; margin:20px 0 4px; }
  .hero__foot { order:4; margin-top:14px; }
  .pain { grid-template-columns:1fr; }
  .pain__metric { grid-column:1; grid-row:auto; padding:16px 0 0; border-left:0; border-top:1px solid var(--line-2); }
  .pain__metric strong { font-size:38px; }
  .fx { grid-template-columns:18px 1fr 66px; gap:0 10px; }
  .fx__track { grid-column:1/-1; margin-top:10px; }
  .fx__marks,.fx__axis { margin-left:0; margin-right:0; }
  .fx__marks { height:26px; }
  .fx__band { bottom:0; }
  .fx__mark b { font-size:8px; }
}