/* 币小易 · book.css — 图解绘本 */

:root {
  --sheet: #f7f1e6;
  --sheet-deep: #efe5d3;
  --sheet-edge: #e2d4bc;
  --card: #fffaf1;
  --rouge: #e4684a;
  --rouge-ink: #c4502f;
  --rouge-wash: #fbe3d9;
  --indigo: #1f2a44;
  --indigo-soft: #3a4562;
  --indigo-wash: #e7e8ea;
  --graphite: #4a4f5c;
  --serif: "Noto Serif SC", "Songti SC", "STSong", "SimSun", serif;
  --sans: -apple-system, BlinkMacSystemFont, "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei", "Noto Sans SC", "Source Han Sans SC", sans-serif;
  --mono: ui-monospace, "SF Mono", Menlo, Consolas, monospace;
  --measure: 40rem;
  --page: 54rem;
  --grain: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='240' height='240'%3E%3Cfilter id='g'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 .42 0 0 0 0 .32 0 0 0 0 .18 0 0 0 .075 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23g)'/%3E%3C/svg%3E");
  --fibre: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='600' height='600'%3E%3Cfilter id='f'%3E%3CfeTurbulence type='turbulence' baseFrequency='.008 .09' numOctaves='2' seed='7'/%3E%3CfeColorMatrix values='0 0 0 0 .5 0 0 0 0 .4 0 0 0 0 .25 0 0 0 .05 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23f)'/%3E%3C/svg%3E");
}

*, *::before, *::after { box-sizing: border-box; }

html {
  font-size: 106.25%;
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
  scroll-behavior: smooth;
  scroll-padding-top: 5.5rem;
}
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }

body {
  margin: 0;
  background-color: var(--sheet);
  background-image: var(--grain), var(--fibre);
  color: var(--indigo);
  font-family: var(--sans);
  font-size: 1rem;
  line-height: 1.82;
  letter-spacing: .01em;
  overflow-x: hidden;
}

img { max-width: 100%; height: auto; display: block; }

a { color: var(--indigo); text-decoration: underline; text-decoration-color: rgba(228, 104, 74, .55); text-decoration-thickness: 1.5px; text-underline-offset: .22em; transition: color .15s, text-decoration-color .15s; }
a:hover { color: var(--rouge-ink); text-decoration-color: var(--rouge); }
a:focus-visible, button:focus-visible, summary:focus-visible, [tabindex]:focus-visible { outline: 2.5px solid var(--rouge); outline-offset: 3px; border-radius: 4px; }

.bx-skip { position: absolute; left: -999px; top: .5rem; background: var(--indigo); color: var(--sheet); padding: .5rem 1rem; z-index: 50; border-radius: .4rem; }
.bx-skip:focus { left: 1rem; }

/* —— 页头 —— */
.bx-top {
  position: sticky; top: 0; z-index: 30;
  background: rgba(247, 241, 230, .92);
  -webkit-backdrop-filter: saturate(1.2) blur(10px);
  backdrop-filter: saturate(1.2) blur(10px);
  border-bottom: 1px solid var(--sheet-edge);
}
.bx-top-in {
  max-width: 72rem; margin: 0 auto;
  display: flex; align-items: center; justify-content: space-between;
  padding: .7rem 1.5rem;
}
.bx-mark { display: inline-flex; align-items: center; gap: .6rem; text-decoration: none; color: var(--indigo); }
.bx-mark-ico { flex: none; transform: rotate(-8deg); transition: transform .3s; }
.bx-mark:hover .bx-mark-ico { transform: rotate(4deg); }
.bx-mark-txt { font-family: var(--serif); font-weight: 700; font-size: 1.32rem; letter-spacing: .12em; }
.bx-nav { display: flex; gap: .3rem; }
.bx-nav a {
  text-decoration: none; color: var(--indigo-soft);
  font-size: .9rem; padding: .32rem .85rem; border-radius: 99px;
  border: 1px solid transparent;
}
.bx-nav a:hover { color: var(--indigo); border-color: var(--sheet-edge); }
.bx-nav a[aria-current="page"] { color: var(--indigo); border-color: var(--indigo); }
.bx-aux[data-page="about"] .bx-nav [data-p="about"],
.bx-aux[data-page="contact"] .bx-nav [data-p="contact"] { color: var(--indigo); border-color: var(--indigo); }

.bx-read { height: 2px; position: absolute; left: 0; right: 0; bottom: -1px; overflow: hidden; }
.bx-read i { display: block; height: 100%; width: 100%; background: var(--rouge); transform-origin: 0 50%; transform: scaleX(var(--bx-read, 0)); }

/* —— 双栏:左侧进度线 + 单栏书页 —— */
.bx-spread {
  max-width: 72rem; margin: 0 auto;
  padding: 0 1.5rem;
  display: grid;
  grid-template-columns: 12.5rem minmax(0, var(--page));
  justify-content: center;
  column-gap: 3.5rem;
}
.bx-rail { grid-column: 1; grid-row: 1; }
.bx-main { grid-column: 2; grid-row: 1; min-width: 0; }

.bx-rail {
  position: sticky; top: 5.6rem;
  align-self: start;
  margin-top: 3.4rem;
  max-height: calc(100vh - 7rem);
  overflow-y: auto;
  scrollbar-width: none;
}
.bx-rail::-webkit-scrollbar { display: none; }
.bx-rail-h {
  margin: 0 0 1rem;
  font-family: var(--serif); font-weight: 700; font-size: .86rem;
  letter-spacing: .3em; color: var(--rouge-ink);
}
.bx-rail-list {
  --bx-fill: 0px;
  list-style: none; margin: 0; padding: 0;
  position: relative;
}
.bx-rail-list::before,
.bx-rail-list::after {
  content: ""; position: absolute; left: 5px; top: .7rem; width: 1px;
}
.bx-rail-list::before { bottom: .9rem; background: repeating-linear-gradient(var(--indigo-soft) 0 3px, transparent 3px 6px); opacity: .45; }
.bx-rail-list::after { height: var(--bx-fill); width: 3px; left: 4px; border-radius: 3px; background: var(--rouge); transition: height .35s ease; }
.bx-rail-list li { position: relative; }
.bx-rail-list a {
  display: flex; gap: .85rem; align-items: flex-start;
  padding: .36rem 0 .36rem 0;
  text-decoration: none; color: var(--graphite);
  font-size: .8rem; line-height: 1.5;
}
.bx-pin {
  flex: none; width: 11px; height: 11px; margin-top: .3rem;
  border-radius: 50%; background: var(--sheet); border: 1.5px solid var(--indigo-soft);
  position: relative; z-index: 1;
  transition: background .2s, border-color .2s, transform .2s;
}
.bx-pin-t { display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.bx-rail-list a:hover { color: var(--indigo); }
.bx-rail-list li.is-past .bx-pin { background: var(--rouge); border-color: var(--rouge); }
.bx-rail-list li.is-on .bx-pin { background: var(--rouge); border-color: var(--rouge); transform: scale(1.35); box-shadow: 0 0 0 4px var(--rouge-wash); }
.bx-rail-list li.is-on a { color: var(--indigo); font-weight: 600; }
.bx-rail-list li.is-on .bx-pin-t { -webkit-line-clamp: 4; }

/* —— 书页正文 —— */
.bx-book {
  counter-reset: bxstep bxfig;
  display: flex; flex-direction: column;
  padding: 3rem 0 4.5rem;
}
.bx-book > header[data-part="hero"] { order: -2; }
.bx-book > .bx-plate { order: -1; }

header[data-part="hero"] {
  text-align: center;
  max-width: 46rem; margin: 0 auto 2.4rem;
}
p[data-part="kicker"] {
  display: inline-flex; align-items: center; gap: .55rem;
  margin: 0 0 1.1rem;
  font-size: .82rem; letter-spacing: .22em; color: var(--rouge-ink);
}
p[data-part="kicker"]::before,
p[data-part="kicker"]::after { content: ""; width: 1.8rem; height: 1px; background: currentColor; opacity: .6; }
header[data-part="hero"] h1 {
  font-family: var(--serif); font-weight: 700;
  font-size: clamp(1.75rem, 1.1rem + 2.4vw, 2.7rem);
  line-height: 1.32; letter-spacing: .015em;
  margin: 0 0 1.15rem;
  text-wrap: balance;
}
@media (min-width: 46.01em) {
  header[data-part="hero"] h1 { word-break: keep-all; overflow-wrap: anywhere; }
}
p[data-part="dek"] {
  font-size: 1.07rem; line-height: 1.85; color: var(--indigo-soft);
  max-width: 36rem; margin: 0 auto 1.3rem;
  text-wrap: pretty;
}
p[data-part="meta"] {
  display: inline-block;
  margin: 0;
  font-size: .82rem; color: var(--indigo-soft);
  padding: .32rem 1rem;
  border: 1px dashed rgba(31, 42, 68, .4);
  border-radius: .35rem;
  background: rgba(255, 250, 241, .6);
}

.bx-plate {
  position: relative;
  margin: 0 0 1rem;
  padding: .55rem;
  background: var(--card);
  border: 1px solid var(--sheet-edge);
  border-radius: .5rem;
  box-shadow: 0 1px 0 rgba(255, 255, 255, .8) inset, 0 26px 50px -30px rgba(31, 42, 68, .55), 0 6px 14px -8px rgba(31, 42, 68, .2);
}
.bx-plate img { width: 100%; aspect-ratio: 16 / 9; object-fit: cover; border-radius: .25rem; }
.bx-plate::after {
  content: ""; position: absolute; top: -.5rem; right: 2.6rem;
  width: 1.15rem; height: 4.2rem;
  background: linear-gradient(90deg, var(--rouge-ink), var(--rouge) 40%, var(--rouge));
  clip-path: polygon(0 0, 100% 0, 100% 100%, 50% 80%, 0 100%);
  box-shadow: 0 2px 4px rgba(0, 0, 0, .15);
}

/* 段落与列表:阅读宽度居中,图卡与表格放宽 */
.bx-book > section,
.bx-book > aside { margin-top: 4.6rem; }
.bx-book > section > *,
.bx-book > aside > * { max-width: var(--measure); margin-left: auto; margin-right: auto; }
.bx-book > section > figure,
.bx-book > section > table,
.bx-book > section > ol[data-part="steps"],
.bx-book > section > details { max-width: none; }

.bx-book p { margin-top: 0; margin-bottom: 1.05rem; }
.bx-book strong { font-weight: 650; color: var(--indigo); }

.bx-book h2 {
  font-family: var(--serif); font-weight: 700;
  font-size: clamp(1.42rem, 1.1rem + 1.1vw, 1.9rem);
  line-height: 1.4; letter-spacing: .01em;
  margin-top: 0; margin-bottom: 1.5rem;
  text-wrap: balance;
}
.bx-book h2::after {
  content: ""; display: block; width: 3.4rem; height: .5rem; margin-top: .75rem;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 54 8'%3E%3Cpath d='M1 5c4-4 8-4 12 0s8 4 12 0 8-4 12 0 8 4 12 0' fill='none' stroke='%23e4684a' stroke-width='2' stroke-linecap='round'/%3E%3C/svg%3E") left center / contain no-repeat;
}
.bx-book h3 {
  font-family: var(--serif); font-weight: 700;
  font-size: 1.2rem; line-height: 1.5;
  margin-top: 2.4rem; margin-bottom: .8rem;
  display: flex; gap: .6rem; align-items: baseline;
}
.bx-book h3::before { content: ""; flex: none; width: .5rem; height: .5rem; border-radius: 50%; background: var(--rouge); transform: translateY(-.15em); }

.bx-book ul, .bx-book ol:not([data-part]) { padding-left: 1.4rem; margin-top: 0; margin-bottom: 1.2rem; }
.bx-book li { margin-bottom: .4rem; }
.bx-book ul li::marker { color: var(--rouge); }
.bx-book ol:not([data-part]) li::marker { color: var(--rouge-ink); font-weight: 700; font-family: var(--serif); }

.bx-book dl { margin: 0 auto 1.4rem; }
.bx-book dt { font-weight: 700; margin-top: 1rem; display: flex; align-items: center; gap: .5rem; }
.bx-book dt::before { content: ""; width: .55rem; height: .55rem; background: var(--rouge); transform: rotate(45deg); flex: none; }
.bx-book dd { margin: .3rem 0 0; padding-left: 1.05rem; border-left: 2px dotted var(--sheet-edge); color: var(--graphite); }

/* 表格:书页式上下双线 */
.bx-book table {
  width: 100%; border-collapse: collapse;
  margin: 1.6rem 0 1.8rem;
  font-size: .93rem; line-height: 1.7;
  background: rgba(255, 250, 241, .65);
  border-top: 3px double var(--indigo);
  border-bottom: 1px solid var(--indigo);
}
.bx-book th {
  text-align: left; font-weight: 700; font-family: var(--serif);
  padding: .75rem 1rem; background: var(--sheet-deep);
  border-bottom: 1px solid var(--indigo-soft);
  white-space: nowrap;
}
.bx-book td { padding: .75rem 1rem; vertical-align: top; border-bottom: 1px solid var(--sheet-edge); }
.bx-book tbody tr:last-child td { border-bottom: 0; }
.bx-book td:first-child { font-weight: 600; min-width: 7.5em; }

/* —— 签名组件:圆形邮戳步骤号 —— */
.bx-book > section[id^="step"] { counter-increment: bxstep; position: relative; }
.bx-book > section[id^="step"]::before {
  content: counter(bxstep);
  display: grid; place-items: center;
  width: 6rem; height: 6rem;
  margin: 0 auto 1.3rem;
  border-radius: 50%;
  font-family: var(--serif); font-weight: 700; font-size: 2.75rem; line-height: 1;
  color: var(--rouge);
  border: 2.5px solid var(--rouge);
  background:
    radial-gradient(circle closest-side, transparent 0 74%, var(--rouge) 75% 77.5%, transparent 78.5%),
    radial-gradient(circle closest-side, transparent 0 82%, rgba(228, 104, 74, .5) 82.5% 84%, transparent 85%);
  transform: rotate(-9deg);
  -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='120' height='120'%3E%3Cfilter id='m'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='1.4' numOctaves='2' seed='3'/%3E%3CfeColorMatrix values='0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 -2.4 0 0 0 2.25'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23m)'/%3E%3C/svg%3E");
  mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='120' height='120'%3E%3Cfilter id='m'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='1.4' numOctaves='2' seed='3'/%3E%3CfeColorMatrix values='0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 -2.4 0 0 0 2.25'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23m)'/%3E%3C/svg%3E");
}
.bx-book > section[id^="step"]::after {
  content: ""; position: absolute; top: 1.15rem; left: calc(50% + 2.2rem);
  width: 10rem; height: 3.6rem; pointer-events: none;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 160 58'%3E%3Cg fill='none' stroke='%23e4684a' stroke-width='2.2' stroke-linecap='round' opacity='.75'%3E%3Cpath d='M2 12q10-9 20 0t20 0 20 0 20 0 20 0 20 0 20 0 18 0'/%3E%3Cpath d='M2 29q10-9 20 0t20 0 20 0 20 0 20 0 20 0 20 0 18 0'/%3E%3Cpath d='M2 46q10-9 20 0t20 0 20 0 20 0 20 0 20 0 20 0 18 0'/%3E%3C/g%3E%3C/svg%3E") left center / contain no-repeat;
  transform: rotate(-9deg);
}
.bx-book > section[id^="step"] > h2 { text-align: center; }
.bx-book > section[id^="step"] > h2::after { margin-left: auto; margin-right: auto; }

/* 非步骤章节的小花饰 */
.bx-book > section:not([id^="step"]):not(#faq) > h2::before {
  content: ""; display: block; width: 1.6rem; height: 1.6rem; margin-bottom: .7rem;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 32 32'%3E%3Cpath d='M16 3v26' stroke='%231f2a44' stroke-width='1.6' stroke-linecap='round'/%3E%3Cpath d='M16 12c-5-1-8-5-8-9 5 0 8 4 8 9zm0 8c5-1 9-5 9-10-6 0-9 5-9 10z' fill='%23e4684a'/%3E%3C/svg%3E") center / contain no-repeat;
}

/* —— 整宽截图卡 —— */
figure[data-part="shot"] {
  counter-increment: bxfig;
  margin: 2rem 0 2.2rem;
  padding: 2.2rem 1.8rem 0;
  background-color: var(--sheet-deep);
  background-image: radial-gradient(rgba(31, 42, 68, .13) 1px, transparent 1.3px);
  background-size: 18px 18px;
  border: 1px solid var(--sheet-edge);
  border-radius: 1rem;
  overflow: hidden;
}
figure[data-part="shot"] img {
  margin: 0 auto;
  background: #fff;
  padding: .45rem;
  border-radius: .35rem;
  box-shadow: 0 1px 2px rgba(31, 42, 68, .12), 0 18px 34px -18px rgba(31, 42, 68, .45);
}
figure[data-part="shot"] figcaption {
  margin: 1.9rem -1.8rem 0;
  padding: .95rem 1.8rem 1.05rem;
  background: var(--card);
  border-top: 1px solid var(--sheet-edge);
  font-size: .87rem; line-height: 1.7; color: var(--graphite);
}
figure[data-part="shot"] figcaption::before {
  content: "图 " counter(bxfig);
  display: inline-block; margin-right: .7rem;
  font-family: var(--serif); font-weight: 700; color: var(--rouge-ink);
  padding-right: .7rem; border-right: 1px solid var(--sheet-edge);
}

/* —— 步骤概览:绘本分镜 —— */
ol[data-part="steps"] {
  counter-reset: bxpane;
  list-style: none; padding: 0;
  margin: 1.8rem 0 2rem;
  display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 1rem;
}
ol[data-part="steps"] > li {
  counter-increment: bxpane;
  position: relative;
  margin: 0;
  padding: 3.6rem 1.15rem 1.15rem;
  background: var(--card);
  border: 1px solid var(--sheet-edge);
  border-radius: .9rem;
  font-size: .9rem; line-height: 1.7; color: var(--graphite);
  box-shadow: 0 10px 22px -18px rgba(31, 42, 68, .5);
  transition: transform .2s, box-shadow .2s, border-color .2s;
}
ol[data-part="steps"] > li::before {
  content: counter(bxpane);
  position: absolute; top: 1rem; left: 1.05rem;
  width: 2.2rem; height: 2.2rem; display: grid; place-items: center;
  border-radius: 50%; border: 1.5px solid var(--rouge);
  box-shadow: 0 0 0 3px var(--card), 0 0 0 4px rgba(228, 104, 74, .45);
  font-family: var(--serif); font-weight: 700; font-size: 1.05rem; color: var(--rouge);
  transform: rotate(-8deg);
}
ol[data-part="steps"] > li > strong { font-family: var(--serif); font-size: 1.04rem; color: var(--indigo); }
ol[data-part="steps"] > li:nth-child(n+5) { background: #fdf3ec; }
.bx-js ol[data-part="steps"] > li { cursor: pointer; }
.bx-js ol[data-part="steps"] > li::after {
  content: ""; position: absolute; top: 1.55rem; right: 1.1rem; width: .9rem; height: .9rem;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M3 8h9M8 3.5 12.5 8 8 12.5' fill='none' stroke='%231f2a44' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center / contain no-repeat;
  opacity: .35; transition: opacity .2s, transform .2s;
}
.bx-js ol[data-part="steps"] > li:hover { transform: translateY(-3px); border-color: var(--rouge); box-shadow: 0 16px 28px -18px rgba(31, 42, 68, .55); }
.bx-js ol[data-part="steps"] > li:hover::after { opacity: 1; transform: translateX(3px); }

/* —— 提示框 —— */
div[data-part="warn"],
div[data-part="note"] {
  position: relative;
  margin-top: 1.7rem; margin-bottom: 1.8rem;
  padding: 1.15rem 1.35rem 1.15rem 3.6rem;
  border-radius: .8rem;
  font-size: .95rem;
}
div[data-part="warn"] p:last-child,
div[data-part="note"] p:last-child { margin-bottom: 0; }
div[data-part="warn"] {
  background: var(--rouge-wash);
  border: 1px solid rgba(228, 104, 74, .45);
  box-shadow: 4px 4px 0 rgba(228, 104, 74, .22);
}
div[data-part="warn"]::before {
  content: "!"; position: absolute; left: 1.05rem; top: 1.1rem;
  width: 1.75rem; height: 1.75rem; display: grid; place-items: center;
  border-radius: 50%; background: var(--rouge); color: #fff;
  font-family: var(--serif); font-weight: 700; font-size: 1rem; line-height: 1;
}
div[data-part="warn"] strong { color: var(--rouge-ink); }
div[data-part="note"] {
  background: #eef0f2 linear-gradient(225deg, var(--sheet) 0 .9rem, transparent .9rem);
  border: 1px solid #d4d8de;
}
div[data-part="note"]::before {
  content: ""; position: absolute; left: 1.15rem; top: 1.2rem;
  width: 1.55rem; height: 1.55rem;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Ccircle cx='12' cy='12' r='10.5' fill='%231f2a44'/%3E%3Cpath d='M9.4 9.3a2.7 2.7 0 1 1 3.6 2.5c-.7.3-1 .8-1 1.5v.5' fill='none' stroke='%23f7f1e6' stroke-width='1.8' stroke-linecap='round'/%3E%3Ccircle cx='12' cy='17' r='1.1' fill='%23f7f1e6'/%3E%3C/svg%3E") center / contain no-repeat;
}
div[data-part="note"]::after {
  content: ""; position: absolute; top: 0; right: 0; width: .9rem; height: .9rem;
  background: linear-gradient(225deg, transparent 50%, #d4d8de 50%);
  border-bottom-left-radius: .25rem;
}

/* —— 邀请码卡(明信片) —— */
aside[data-part="cta"] {
  position: relative;
  max-width: 46rem; width: 100%; margin-left: auto; margin-right: auto;
  display: grid;
  grid-template-columns: 15rem minmax(0, 1fr);
  grid-template-areas: "code text" "code go" "note note";
  column-gap: 2rem; row-gap: .4rem;
  padding: 2rem 2.2rem 1.6rem;
  background-color: var(--indigo);
  background-image: var(--grain), linear-gradient(135deg, #24314f, #1a2339);
  color: #f3ecdf;
  border-radius: 1.1rem;
  box-shadow: 0 30px 50px -32px rgba(31, 42, 68, .9);
}
aside[data-part="cta"] > * { max-width: none; margin: 0; }
aside[data-part="cta"] > p:nth-of-type(1) { grid-area: code; align-self: center; }
aside[data-part="cta"] > p:nth-of-type(2) { grid-area: text; font-size: .95rem; line-height: 1.75; color: #e6dfd2; }
aside[data-part="cta"] > p:nth-of-type(3) { grid-area: go; padding-top: .7rem; }
aside[data-part="cta"] > p:nth-of-type(4) {
  grid-area: note;
  margin-top: 1.4rem; padding-top: 1rem;
  border-top: 1px dashed rgba(243, 236, 223, .35);
  font-size: .9rem; line-height: 1.7; color: #efe7da;
}

aside[data-part="cta"] > p:nth-of-type(1) {
  position: relative; isolation: isolate;
  padding: 1.5rem 1.2rem 1.2rem;
  text-align: center;
  background: radial-gradient(circle at center, transparent 4px, var(--card) 4.6px) -7px -7px / 14px 14px round;
  color: var(--indigo);
  transform: rotate(-2deg);
  filter: drop-shadow(0 8px 12px rgba(0, 0, 0, .3));
}
aside[data-part="cta"] > p:nth-of-type(1)::before {
  content: ""; position: absolute; inset: 7px; z-index: -1;
  background: var(--card);
  border: 1px solid rgba(228, 104, 74, .55);
  outline: 1px solid rgba(228, 104, 74, .25); outline-offset: -5px;
}
aside[data-part="cta"] > p:nth-of-type(1) strong {
  display: block; color: var(--indigo);
  font-family: var(--serif); font-size: 1.45rem; line-height: 1.4; letter-spacing: .04em;
  word-break: break-all;
}
.bx-code-k { display: block; font-family: var(--sans); font-size: .78rem; letter-spacing: .3em; color: var(--rouge-ink); font-weight: 600; margin-bottom: .2rem; }
.bx-code { display: block; font-family: var(--mono); font-size: 2rem; font-weight: 700; letter-spacing: .1em; color: var(--indigo); }
.bx-copy {
  margin-top: .8rem;
  font: 600 .82rem/1 var(--sans); letter-spacing: .1em;
  color: var(--indigo); background: transparent;
  border: 1.5px solid var(--indigo); border-radius: 99px;
  padding: .5rem 1.05rem; cursor: pointer;
  transition: background .15s, color .15s;
}
.bx-copy:hover { background: var(--indigo); color: var(--card); }
.bx-copy.is-done { background: var(--rouge); border-color: var(--rouge); color: #fff; }

a[data-cta] {
  display: inline-flex; align-items: center; gap: .7rem;
  padding: .95rem 1.8rem;
  background: var(--rouge); color: #fff;
  font-size: 1.05rem; font-weight: 700; letter-spacing: .06em;
  text-decoration: none; border-radius: 99px;
  box-shadow: 0 3px 0 var(--rouge-ink), 0 14px 26px -12px rgba(228, 104, 74, .8);
  transition: transform .15s, box-shadow .15s, background .15s;
}
a[data-cta]::after {
  content: ""; width: 1.05rem; height: 1.05rem;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M5 3h8v8M13 3 3.5 12.5' fill='none' stroke='%23fff' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center / contain no-repeat;
}
a[data-cta]:hover { color: #fff; background: #ea7559; transform: translateY(-1px); }
a[data-cta]:active { transform: translateY(2px); box-shadow: 0 1px 0 var(--rouge-ink); }

/* —— 常见问题 —— */
#faq { counter-reset: bxq; }
#faq details {
  counter-increment: bxq;
  margin: 0 0 .75rem;
  background: var(--card);
  border: 1px solid var(--sheet-edge);
  border-radius: .8rem;
  transition: border-color .2s, box-shadow .2s;
}
#faq details[open] { border-color: rgba(228, 104, 74, .6); box-shadow: 0 14px 28px -22px rgba(31, 42, 68, .6); }
#faq summary {
  list-style: none; cursor: pointer;
  display: grid; grid-template-columns: 2.2rem 1fr 1.6rem; gap: .8rem; align-items: center;
  padding: 1rem 1.2rem;
  font-family: var(--serif); font-weight: 700; font-size: 1.03rem; line-height: 1.55;
}
#faq summary::-webkit-details-marker { display: none; }
#faq summary::before {
  content: "问" counter(bxq);
  font-family: var(--serif); font-size: .74rem; color: var(--rouge-ink);
  border: 1px solid rgba(228, 104, 74, .5); border-radius: .35rem;
  text-align: center; padding: .1rem 0;
}
#faq summary::after {
  content: ""; width: 1.6rem; height: 1.6rem; border-radius: 50%;
  background: var(--sheet-deep) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M8 3.5v9M3.5 8h9' stroke='%231f2a44' stroke-width='1.7' stroke-linecap='round'/%3E%3C/svg%3E") center / .8rem no-repeat;
  transition: transform .25s, background-color .2s;
}
#faq details[open] summary::after { transform: rotate(45deg); background-color: var(--rouge-wash); }
#faq details > p { margin: 0; padding: 0 1.3rem 1.2rem 4.2rem; color: var(--graphite); font-size: .96rem; }

/* —— 页脚 —— */
.bx-foot {
  background-color: var(--indigo);
  background-image: var(--grain);
  color: #d9d3c8;
  font-size: .88rem; line-height: 1.8;
}
.bx-foot-in { max-width: 62rem; margin: 0 auto; padding: 3rem 1.5rem 2.4rem; }
.bx-foot a { color: #f3ecdf; text-decoration-color: rgba(228, 104, 74, .7); }
.bx-foot a:hover { color: #fff; }
.bx-foot-id { display: flex; align-items: center; gap: .8rem; padding-bottom: 1.3rem; border-bottom: 1px solid rgba(243, 236, 223, .14); }
.bx-foot-id p { margin: 0; }
.bx-foot-id strong { font-family: var(--serif); color: #fff; letter-spacing: .1em; }
.bx-foot-id svg { flex: none; }
.bx-foot-links { list-style: none; margin: 1.3rem 0 .6rem; padding: 0; display: flex; flex-wrap: wrap; gap: .4rem 1.6rem; }
.bx-foot-mail { margin: 0 0 .9rem; }
.bx-foot-risk { margin: 0 0 .5rem; color: #c9c2b5; }
.bx-foot-copy { margin: 0; color: #a49d92; font-size: .8rem; }

/* —— 站务页 —— */
.bx-leaf { padding: 3.4rem 1.5rem 5rem; }
.bx-leaf-in {
  max-width: 44rem; margin: 0 auto;
  background: var(--card);
  border: 1px solid var(--sheet-edge);
  border-radius: 1rem;
  padding: 3rem 3.2rem 2.6rem;
  box-shadow: 0 30px 50px -40px rgba(31, 42, 68, .6);
  position: relative;
}
.bx-leaf-in::before {
  content: ""; position: absolute; top: -.5rem; right: 2.4rem;
  width: 1rem; height: 3.6rem; background: var(--rouge);
  clip-path: polygon(0 0, 100% 0, 100% 100%, 50% 80%, 0 100%);
}
.bx-leaf h1 {
  font-family: var(--serif); font-weight: 700;
  font-size: clamp(1.6rem, 1.2rem + 1.5vw, 2.2rem); line-height: 1.35;
  margin: 0 0 1.4rem;
}
.bx-leaf h1::after {
  content: ""; display: block; width: 3.4rem; height: .5rem; margin-top: .8rem;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 54 8'%3E%3Cpath d='M1 5c4-4 8-4 12 0s8 4 12 0 8-4 12 0 8 4 12 0' fill='none' stroke='%23e4684a' stroke-width='2' stroke-linecap='round'/%3E%3C/svg%3E") left center / contain no-repeat;
}
.bx-leaf h2 { font-family: var(--serif); font-weight: 700; font-size: 1.22rem; margin: 2.2rem 0 .7rem; }
.bx-leaf p { margin: 0 0 1rem; }
.bx-leaf ul { padding-left: 1.3rem; }
.bx-leaf li::marker { color: var(--rouge); }
.bx-leaf dt { font-weight: 700; margin-top: .9rem; }
.bx-leaf dd { margin: .25rem 0 0; padding-left: 1rem; border-left: 2px dotted var(--sheet-edge); color: var(--graphite); }
.bx-back { margin: 2.4rem 0 0 !important; padding-top: 1.2rem; border-top: 1px dashed var(--sheet-edge); font-size: .92rem; }
.bx-back a::before { content: "← "; }

/* 404 */
.bx-lost { text-align: center; }
.bx-lost-stamp {
  width: 7.5rem; height: 7.5rem; margin: 0 auto 1.6rem;
  display: grid; place-items: center; border-radius: 50%;
  border: 2.5px solid var(--rouge); color: var(--rouge);
  font-family: var(--serif); font-weight: 700; font-size: 2.1rem;
  box-shadow: inset 0 0 0 5px var(--card), inset 0 0 0 6.5px rgba(228, 104, 74, .55);
  transform: rotate(-10deg);
}
.bx-lost h1::after { margin-left: auto; margin-right: auto; }

/* —— 目录浮钮(手机,JS 生成) —— */
.bx-tocbtn { display: none; }

/* —— 中屏:收起左栏 —— */
@media (max-width: 68.75em) {
  .bx-spread { grid-template-columns: minmax(0, var(--page)); }
  .bx-main { grid-column: 1; grid-row: 1; }
  .bx-rail {
    grid-column: 1; grid-row: 2;
    position: static; max-height: none; overflow: visible;
    margin: 0 0 3rem; padding: 1.4rem 1.4rem .8rem;
    background: var(--card); border: 1px solid var(--sheet-edge); border-radius: .9rem;
  }
  .bx-rail-list a { font-size: .9rem; }
  .bx-pin-t { -webkit-line-clamp: unset; }

  .bx-js .bx-rail {
    position: fixed; z-index: 40; left: .75rem; right: .75rem; bottom: 4.6rem;
    margin: 0; max-height: min(70vh, 34rem); overflow-y: auto;
    box-shadow: 0 24px 60px -20px rgba(31, 42, 68, .55);
    opacity: 0; visibility: hidden; transform: translateY(1rem);
    transition: opacity .2s, transform .2s, visibility 0s .2s;
  }
  .bx-js .bx-rail.is-open { opacity: 1; visibility: visible; transform: none; transition: opacity .2s, transform .2s; }
  .bx-js .bx-tocbtn {
    display: inline-flex; align-items: center; gap: .55rem;
    position: fixed; z-index: 41; right: 1rem; bottom: 1rem;
    max-width: calc(100vw - 2rem);
    padding: .7rem 1.1rem .7rem .9rem;
    background: var(--indigo); color: var(--sheet);
    border: 0; border-radius: 99px;
    font: 600 .86rem/1.2 var(--sans); letter-spacing: .04em;
    box-shadow: 0 12px 26px -10px rgba(31, 42, 68, .7);
    cursor: pointer;
  }
  .bx-tocbtn i { width: .9rem; height: 2px; background: var(--rouge); position: relative; flex: none; }
  .bx-tocbtn i::before, .bx-tocbtn i::after { content: ""; position: absolute; left: 0; width: 100%; height: 2px; background: var(--sheet); }
  .bx-tocbtn i::before { top: -5px; }
  .bx-tocbtn i::after { top: 5px; }
  .bx-tocbtn b { font-weight: 600; color: #f3c2b4; white-space: nowrap; }
}

/* —— 手机 —— */
@media (max-width: 46em) {
  html { scroll-padding-top: 4.6rem; }
  body { line-height: 1.8; }
  .bx-top-in { padding: .6rem 1rem; }
  .bx-mark-txt { font-size: 1.15rem; }
  .bx-mark-ico { width: 30px; height: 30px; }
  .bx-nav a { padding: .3rem .6rem; font-size: .86rem; }
  .bx-spread { padding: 0 1rem; }
  .bx-book { padding-top: 2rem; }

  header[data-part="hero"] { text-align: left; margin-bottom: 1.6rem; }
  p[data-part="kicker"]::before { display: none; }
  p[data-part="dek"] { font-size: 1rem; margin-left: 0; }
  .bx-plate { padding: .35rem; margin-left: -.25rem; margin-right: -.25rem; }
  .bx-plate::after { right: 1.4rem; height: 3.2rem; width: .95rem; }

  .bx-book > section, .bx-book > aside { margin-top: 3.4rem; }

  .bx-book > section[id^="step"]::before { width: 4.8rem; height: 4.8rem; font-size: 2.2rem; margin-left: 0; }
  .bx-book > section[id^="step"]::after { left: 4.4rem; top: .9rem; width: 7.5rem; height: 2.8rem; }
  .bx-book > section[id^="step"] > h2 { text-align: left; }
  .bx-book > section[id^="step"] > h2::after { margin-left: 0; }

  figure[data-part="shot"] { padding: 1rem .75rem 0; border-radius: .8rem; margin-left: -.25rem; margin-right: -.25rem; }
  figure[data-part="shot"] img { padding: .25rem; }
  figure[data-part="shot"] figcaption { margin: 1rem -.75rem 0; padding: .8rem 1rem .9rem; font-size: .84rem; }

  ol[data-part="steps"] { grid-template-columns: minmax(0, 1fr); gap: .7rem; }
  ol[data-part="steps"] > li { padding: 1rem 1rem 1rem 4rem; }
  ol[data-part="steps"] > li::before { top: 1rem; left: 1rem; }
  .bx-js ol[data-part="steps"] > li::after { display: none; }

  .bx-book table { display: block; overflow-x: auto; font-size: .88rem; -webkit-overflow-scrolling: touch; }
  .bx-book th, .bx-book td { padding: .6rem .7rem; }
  .bx-book th { white-space: normal; min-width: 4.5em; }

  div[data-part="warn"], div[data-part="note"] { padding: 1rem 1rem 1rem 3.1rem; font-size: .94rem; }
  div[data-part="warn"]::before { left: .8rem; top: 1rem; width: 1.5rem; height: 1.5rem; font-size: .9rem; }
  div[data-part="note"]::before { left: .85rem; top: 1.05rem; width: 1.4rem; height: 1.4rem; }

  aside[data-part="cta"] {
    grid-template-columns: minmax(0, 1fr);
    grid-template-areas: "code" "text" "go" "note";
    row-gap: 1rem;
    padding: 1.6rem 1.2rem 1.3rem;
  }
  aside[data-part="cta"] > p:nth-of-type(1) { max-width: 17rem; width: 100%; margin: 0 auto .4rem; }
  aside[data-part="cta"] > p:nth-of-type(3) { padding-top: 0; }
  aside[data-part="cta"] > p:nth-of-type(4) { margin-top: .2rem; }
  a[data-cta] { width: 100%; justify-content: center; }

  #faq summary { grid-template-columns: 2rem 1fr 1.5rem; gap: .6rem; padding: .9rem 1rem; font-size: .98rem; }
  #faq details > p { padding: 0 1rem 1.1rem 1rem; }

  .bx-leaf { padding: 1.8rem 1rem 3.4rem; }
  .bx-leaf-in { padding: 2.2rem 1.3rem 1.8rem; }
}