/* Extend the official homepage/document brand stylesheet. */
:root{
  --pricing-mint:#a1ffcb;
  --pricing-muted:rgb(var(--theme-fg) / .6);
  --pricing-line:rgb(var(--theme-fg));
  --ease-in:cubic-bezier(.55,0,1,.45);
  --ease-out:cubic-bezier(.16,1,.3,1);
  --ease-in-out:cubic-bezier(.87,0,.13,1);
}
html{scroll-behavior:smooth;scroll-padding-top:60px}
body{margin:0;font-family:var(--font-sans);background:rgb(var(--theme-bg));color:rgb(var(--theme-fg));-webkit-font-smoothing:antialiased}
*{box-sizing:border-box}
a,button{-webkit-tap-highlight-color:transparent}
button{cursor:pointer}
:focus-visible{outline:2px solid currentColor;outline-offset:5px}
::selection{background:#a1ffcb;color:#232323}
.mono{font-family:var(--font-mono),Consolas,monospace;font-variant-numeric:tabular-nums}
.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}
.skip-link{position:fixed;top:8px;left:20px;transform:translateY(-160%);z-index:20;padding:12px 20px;background:#a1ffcb;color:#232323}
.skip-link:focus{transform:translateY(0)}
@keyframes theme-sweep-ltr{from{clip-path:inset(0 100% 0 0)}to{clip-path:inset(0 0 0 0)}}
@keyframes theme-sweep-rtl{from{clip-path:inset(0 0 0 100%)}to{clip-path:inset(0 0 0 0)}}
html.theme-sweep-ltr::view-transition-old(root),html.theme-sweep-rtl::view-transition-old(root){animation:none;z-index:1}
html.theme-sweep-ltr::view-transition-new(root){animation:theme-sweep-ltr 1.2s var(--ease-in-out) both;z-index:2}
html.theme-sweep-rtl::view-transition-new(root){animation:theme-sweep-rtl 1.2s var(--ease-in-out) both;z-index:2}
@media(prefers-reduced-motion:reduce){html{scroll-behavior:auto}*,*::before,*::after{animation-duration:.001s!important;transition-duration:.001s!important}}

/* ============================================================
   9start 计费规则页 · 紧凑画册风（880px 聚拢版心 + 收敛字号 + 仅2条淡横线）
   ============================================================ */
:root {
  --mint: #a1ffcb;
  --mint-ink: #0c1f14;
}

.site-logo {
  display: block;
  width: 144px;
  height: 56px;
  background: rgb(var(--theme-fg));
  mask: url("/brand/9start_logo.png") center / contain no-repeat;
  -webkit-mask: url("/brand/9start_logo.png") center / contain no-repeat;
  filter: url(#logo-alpha-crisp);
}

header {
  z-index: 10 !important;
}
header .group > span[aria-hidden="true"] {
  transition: transform 0.6s cubic-bezier(0, 0, 0.2, 1);
}
header .group:hover > span[aria-hidden="true"] {
  transform: translate(0, 0);
}
footer [aria-disabled="true"] {
  cursor: default;
}
footer [aria-disabled="true"]::before {
  display: none;
}
footer [aria-disabled="true"]:hover {
  color: inherit;
}

.title-mask,
.heading-mask {
  overflow: hidden;
  padding: 4px 0;
  margin: -4px 0;
}

/* ============================================================
   舒展横向宽度（1180px）+ 保持适中的上下间距
   ============================================================ */
.editorial-page {
  max-width: min(1180px, 90vw);
  margin: 0 auto;
  padding: 48px 28px 64px;
}

.ed-divider {
  height: 1px;
  margin: 44px 0;
  background: rgb(var(--theme-fg) / 0.12);
}

/* ============================================================
   第 1 幕：开篇题引（左字右图，紧凑 36px 间距）
   ============================================================ */
.ed-intro {
  position: relative;
  z-index: 1;
  display: grid;
  grid-template-columns: 1.05fr 0.95fr;
  gap: 36px;
  align-items: center;
  min-height: 360px;
  padding-bottom: 88px;
}

.ed-hero { position: relative; isolation: isolate; margin-bottom: 44px; }
.ed-hero-ground { position: absolute; inset-inline: 0; bottom: 0; height: 1px; background: rgb(var(--theme-fg) / 0.12); }
.ed-skyline-space { min-width: 0; height: 250px; pointer-events: none; }

.ed-intro-copy h1 {
  margin: 0;
  font-size: 34px;
  font-weight: 450;
  letter-spacing: -0.03em;
  line-height: 1.2;
}

.ed-lead {
  margin: 14px 0 0;
  font-size: 14.5px;
  line-height: 1.75;
  color: rgb(var(--theme-fg) / 0.72);
}

.ed-status {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  margin: 16px 0 0;
  font-size: 12px;
  color: rgb(var(--theme-fg) / 0.56);
}

.ed-dot {
  width: 6px;
  height: 6px;
  background: #10b981;
  flex-shrink: 0;
}
:root[data-theme="dark"] .ed-dot {
  background: var(--mint);
}

/* ============================================================
   左标题 (260px) + 右内容通用紧凑双栏 (.ed-row-section)
   ============================================================ */
.ed-row-section {
  display: grid;
  grid-template-columns: 260px minmax(0, 1fr);
  gap: 48px;
  align-items: start;
}

.ed-row-head h2 {
  margin: 0;
  font-size: 24px;
  font-weight: 450;
  letter-spacing: -0.025em;
  line-height: 1.25;
}

.ed-meta {
  margin: 8px 0 0;
  font-size: 12px;
  line-height: 1.6;
  color: rgb(var(--theme-fg) / 0.5);
}

/* ============================================================
   第 2 幕：右侧紧凑三行价格清单
   ============================================================ */
.ed-price-rows {
  display: flex;
  flex-direction: column;
  gap: 18px;
}

.ed-price-line {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 24px;
}

.ed-price-info p {
  margin: 0;
}

.ed-price-name {
  font-size: 14.5px;
  font-weight: 450;
  color: rgb(var(--theme-fg) / 0.9);
}

.ed-price-desc {
  margin-top: 3px !important;
  font-size: 12.5px;
  color: rgb(var(--theme-fg) / 0.54);
}

.ed-price-numbers {
  display: flex;
  align-items: baseline;
  gap: 14px;
  flex-shrink: 0;
  text-align: right;
}

.ed-price-val {
  font-size: 20px;
  font-weight: 500;
  letter-spacing: -0.02em;
}

.ed-price-val small {
  margin-left: 2px;
  font-size: 11.5px;
  font-weight: 400;
  color: rgb(var(--theme-fg) / 0.45);
}

.ed-price-val.is-mint {
  color: #0d8a5e;
}
:root[data-theme="dark"] .ed-price-val.is-mint {
  color: var(--mint);
}

.ed-price-peak {
  min-width: 78px;
  font-size: 12px;
  color: rgb(var(--theme-fg) / 0.48);
}

/* ============================================================
   第 3 幕：高峰与空闲（复用相同的编辑式网格）
   ============================================================ */
.ed-time-ranges {
  display: flex;
  flex-wrap: wrap;
  gap: 8px 20px;
  margin: 0;
  font-size: 18px;
  font-weight: 500;
  letter-spacing: -0.01em;
}

.ed-body {
  margin: 12px 0 0;
  font-size: 14px;
  line-height: 1.75;
  color: rgb(var(--theme-fg) / 0.72);
}

.ed-subnote {
  margin: 8px 0 0;
  font-size: 12px;
  color: rgb(var(--theme-fg) / 0.48);
}

/* ============================================================
   第 4 幕：计费说明（左标题 + 右四条说明）
   ============================================================ */
.ed-notes {
  margin-top: 48px;
}

.ed-notes-list {
  margin: 0;
  padding: 0;
  list-style: none;
}

.ed-notes-list li {
  display: grid;
  grid-template-columns: 26px minmax(0, 1fr);
  gap: 8px;
  align-items: baseline;
}

.ed-notes-list li + li {
  margin-top: 12px;
}

.ed-note-no {
  font-size: 11.5px;
  color: rgb(var(--theme-fg) / 0.42);
}

.ed-notes-list p {
  margin: 0;
  font-size: 14px;
  line-height: 1.7;
  color: rgb(var(--theme-fg) / 0.78);
}

/* ============================================================
   动效基础与平滑滚动
   ============================================================ */
[data-motion-state="waiting"] {
  opacity: 0;
}
[data-motion="quote"][data-motion-state="waiting"] {
  opacity: 1;
}
.motion-line-mask {
  display: block;
  overflow: hidden;
  padding-bottom: 0.08em;
  margin-bottom: -0.08em;
}
.motion-line {
  display: block;
  white-space: nowrap;
  will-change: transform, opacity;
}
html.lenis,
html.lenis body {
  height: auto;
}
html.lenis.lenis-smooth {
  scroll-behavior: auto !important;
}
.lenis-smooth [data-lenis-prevent] {
  overscroll-behavior: contain;
}

/* ============================================================
   响应式适配
   ============================================================ */
@media (min-width: 1024px) {
  footer {
    height: calc(100svh - 60px) !important;
  }
}

@media (max-width: 1023px) {
  header {
    grid-template-columns: 1fr 1.6fr !important;
  }
  header > div:last-child > div {
    gap: 10px;
    padding: 0 12px;
  }
  header > div:last-child > a {
    min-width: 120px;
    padding: 0 14px;
  }
}

@media (max-width: 767px) {
  header {
    grid-template-columns: 110px minmax(0, 1fr) !important;
  }
  header > div:first-child > div {
    padding: 0 12px;
  }
  .site-logo {
    width: 86px;
    height: 56px;
  }
  header > div:last-child > div {
    padding: 0 8px;
    gap: 8px;
  }
  header ul {
    gap: 0;
  }
  header ul a {
    font-size: 12px;
    padding: 4px;
  }
  header > div:last-child > a {
    min-width: 64px;
    padding: 0 8px;
    font-size: 12px;
  }
  header > div:last-child > a svg {
    display: none;
  }
  #themeBtn {
    flex: none;
    width: 24px;
  }
  .editorial-page {
    padding: 32px 20px 48px;
  }
  .ed-divider {
    margin: 32px 0;
  }
  .ed-hero { margin-bottom: 32px; }
  .ed-intro { min-height: 0; padding-bottom: 76px; }
  .ed-skyline-space { height: 240px; }
  .ed-intro,
  .ed-row-section {
    grid-template-columns: 1fr;
    gap: 20px;
  }
  .ed-price-line {
    flex-direction: column;
    gap: 6px;
  }
  .ed-price-numbers {
    text-align: left;
  }
  .ed-notes {
    margin-top: 32px;
  }
  footer > div:first-child > div:first-child {
    min-height: 240px;
  }
  footer {
    height: auto;
  }
}

@media (prefers-reduced-motion: reduce) {
  [data-motion-state="waiting"] {
    opacity: 1 !important;
  }
}

/* Documentation uses the exact pricing shell above; only information-specific types follow. */
.site-logo { mask-image:url('9start_logo.png'); -webkit-mask-image:url('9start_logo.png'); }
:root { --font-code:var(--font-mono); --font-tag:var(--font-mono); --ease-spring:cubic-bezier(.32,.72,0,1); }
body { -webkit-font-smoothing:antialiased; }
::selection,*::selection { background:rgb(var(--theme-fg)); color:rgb(var(--theme-bg)); }
.hero-card { min-width:0; }
.hero-title { margin:0; font-size:34px; font-weight:450; letter-spacing:-.03em; line-height:1.2; }
.doc-title-mask { overflow:hidden; padding:4px 0; margin:-4px 0; }
.hero-link { display:inline-flex; align-items:center; gap:32px; margin-top:14px; padding:6px 0; font-size:14.5px; line-height:1.75; border-bottom:1px solid rgb(var(--theme-fg)/.24); }
.hero-link span { transition:transform .35s cubic-bezier(.23,1,.32,1); }
.hero-link:hover span { transform:translateY(4px); }
.pixel-earth { position:absolute; inset:0 0 1px; z-index:0; margin:0; overflow:clip; contain:strict; pointer-events:none; }
.pixel-earth canvas { display:block; width:100%; height:100%; }
.content { min-width:0; padding:0; }
/* Lenis and native anchors both honor pricing's 60px scroll-padding + 20px margin. */
.doc-section { scroll-margin-top:20px; }
.doc-section + .doc-section { margin-top:44px; padding-top:44px; border-top:1px solid rgb(var(--theme-fg)/.12); }
.ed-row-body { min-width:0; }
.section-head { min-width:0; }
.section-title { margin:0; font-size:24px; font-weight:450; letter-spacing:-.025em; line-height:1.25; }
.para { margin:0 0 20px; font-size:14px; line-height:1.75; color:rgb(var(--theme-fg)/.72); }
.para a,.bullets a { text-decoration:underline; text-decoration-color:rgb(var(--theme-fg)/.3); text-underline-offset:4px; }
.inline-code { font-family:var(--font-code); font-size:.9em; overflow-wrap:anywhere; }
.sub-title { margin:28px 0 16px; font-size:18px; font-weight:450; line-height:1.4; letter-spacing:-.01em; }
.note { margin:20px 0 0; padding:0; font-size:12.5px; line-height:1.75; color:rgb(var(--theme-fg)/.54); }
.endpoint { margin:20px 0; padding:0; }
.endpoint-label { font-size:12px; color:rgb(var(--theme-fg)/.5); }
.endpoint-line { display:flex; flex-wrap:wrap; align-items:baseline; gap:12px 24px; margin-top:8px; }
.endpoint-url { font-family:var(--font-code); font-size:18px; line-height:1.5; overflow-wrap:anywhere; }
.endpoint-meta { margin-top:8px; font-size:12px; line-height:1.75; color:rgb(var(--theme-fg)/.55); }
.sep { margin:0 6px; }
.copy-btn,.code-copy { font:inherit; font-size:12px; color:rgb(var(--theme-fg)/.56); padding:4px 0; cursor:pointer; white-space:nowrap; }
.copy-btn:hover,.code-copy:hover { color:rgb(var(--theme-fg)); }
.copy-btn svg { width:12px; height:12px; }
.copy-btn { display:inline-flex; align-items:center; gap:6px; }
.is-copied { color:#25835a; }
.code-card { margin:20px 0; background:transparent; min-width:0; }
.code-hint { margin:0 0 20px; font-size:12.5px; line-height:1.75; color:rgb(var(--theme-fg)/.54); }
.code-head { display:flex; justify-content:space-between; align-items:center; gap:12px; padding:0 0 10px; border-bottom:1px solid rgb(var(--theme-fg)/.12); }
.code-tabs { display:flex; gap:20px; min-width:0; }
.code-tab { position:relative; padding:4px 0; font-family:var(--font-code); font-size:12px; color:rgb(var(--theme-fg)/.45); }
.code-tab.is-active { color:rgb(var(--theme-fg)); }
.code-tab.is-active::after { content:''; position:absolute; bottom:-11px; left:0; right:0; height:1px; background:#25835a; }
.code-name { font-family:var(--font-code); font-size:12px; color:rgb(var(--theme-fg)/.6); }
.code-body { margin:0; padding:16px 0; overflow:auto; max-width:100%; font:12.5px/1.75 var(--font-code); color:rgb(var(--theme-fg)/.8); tab-size:2; }
.code-body code { font:inherit; }
.tok-key,.tok-kw,.tok-fn { color:rgb(var(--theme-fg)); }
.tok-str,.tok-num,.tok-flag { color:#25835a; }
.tok-com { color:rgb(var(--theme-fg)/.42); }
[data-theme='dark'] .tok-str,[data-theme='dark'] .tok-num,[data-theme='dark'] .tok-flag { color:var(--mint); }
.table-wrap { max-width:100%; overflow-x:auto; overscroll-behavior-x:contain; }
.data-table { width:100%; border-collapse:collapse; text-align:left; font-size:12.5px; line-height:1.75; }
.data-table th { font-weight:450; font-size:12px; padding:0 12px 10px; color:rgb(var(--theme-fg)/.5); border-bottom:1px solid rgb(var(--theme-fg)/.12); white-space:nowrap; }
.data-table td { padding:12px; vertical-align:top; color:rgb(var(--theme-fg)/.75); border-bottom:1px solid rgb(var(--theme-fg)/.06); }
.data-table tbody tr:last-child td { border-bottom:0; }
.data-table th:first-child,.data-table td:first-child { padding-left:0; }
.data-table th:last-child,.data-table td:last-child { padding-right:0; }
.cell-name,.cell-type,.cell-code,.cell-status { font-family:var(--font-code); font-size:12px; white-space:nowrap; }
.cell-type,.cell-flag { font-size:11.5px; color:rgb(var(--theme-fg)/.5); white-space:nowrap; }
.cell-flag.is-required { color:#25835a; }
.cell-desc { min-width:220px; }
.features { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:24px 28px; }
.feature-name { font-size:14.5px; font-weight:450; }
.feature-desc { margin-top:5px; font-size:12.5px; line-height:1.75; color:rgb(var(--theme-fg)/.54); }
.steps,.bullets { list-style:none; padding:0; margin:20px 0 0; }
.step { display:grid; grid-template-columns:26px minmax(0,1fr); gap:8px; align-items:baseline; }
.step+.step { margin-top:12px; }
.step-index { font:11.5px var(--font-code); color:rgb(var(--theme-fg)/.42); }
.step-text,.bullets li { font-size:14px; line-height:1.75; color:rgb(var(--theme-fg)/.72); }
.bullets li+li { margin-top:12px; }
.faq-item+.faq-item { margin-top:16px; padding-top:16px; border-top:1px solid rgb(var(--theme-fg)/.12); }
.faq-q { display:flex; width:100%; align-items:center; justify-content:space-between; gap:20px; padding:0; font-size:14.5px; font-weight:450; text-align:left; line-height:1.75; }
.faq-mark { position:relative; flex:none; width:12px; height:12px; }
.faq-mark::before,.faq-mark::after { content:''; position:absolute; background:rgb(var(--theme-fg)/.55); transition:transform .4s var(--ease-spring),opacity .28s; }
.faq-mark::before { top:5px; left:0; width:12px; height:1px; }
.faq-mark::after { top:0; left:5px; width:1px; height:12px; }
.is-open .faq-mark::after { transform:rotate(90deg); opacity:0; }
/* Clip only the inner answer; the outer grid expands continuously from 0fr to 1fr. */
.faq-body { display:grid; grid-template-rows:0fr; transition:grid-template-rows .32s var(--ease-spring); }
.is-open .faq-body { grid-template-rows:1fr; }
.faq-clip { min-height:0; overflow:hidden; }
.faq-a { margin:0; padding-top:12px; font-size:14px; line-height:1.75; color:rgb(var(--theme-fg)/.7); opacity:0; transform:translateY(-4px); transition:opacity .22s ease,transform .32s var(--ease-spring); }
.is-open .faq-a { opacity:1; transform:translateY(0); }
/* Same 950ms / 90ms measured-line engine as pricing, preserving original inline nodes. */
[data-line-reveal='pending'] { opacity:0!important; }
.doc-line-mask { display:block; overflow:hidden; padding-bottom:.08em; margin-bottom:-.08em; }
.doc-line-unit { display:block; white-space:nowrap; will-change:transform,opacity; }
.doc-code-line .doc-line-unit { white-space:pre; }
.doc-code-line { display:block; white-space:pre; min-height:1.75em; width:max-content; min-width:100%; }
.code-body code:has(.doc-code-line) { white-space:normal; }
/* Match pricing's expanding external-link glyph. */
.nav-ext { display:inline-flex; align-items:center; overflow:hidden; max-width:0; margin-right:0; transition:max-width .4s cubic-bezier(.23,1,.32,1) .05s,margin-right .4s cubic-bezier(.23,1,.32,1) .05s; }
.group:hover .nav-ext { max-width:1em; margin-right:8px; transition:max-width .55s cubic-bezier(.23,1,.32,1),margin-right .55s cubic-bezier(.23,1,.32,1); }
.nav-ext svg { display:block; width:1em; height:1em; flex:none; opacity:0; transform:translateX(.35em) scale(.4) rotate(-30deg); transition:opacity .2s ease-out,transform .35s cubic-bezier(.23,1,.32,1); }
.group:hover .nav-ext svg { opacity:1; transform:translateX(0) scale(1) rotate(0deg); transition:opacity .25s ease-out .08s,transform .5s cubic-bezier(.34,1.56,.64,1) .06s; }
@media(max-width:767px) {
 .doc-section+.doc-section { margin-top:32px; padding-top:32px; }
 .features { grid-template-columns:1fr; gap:20px; }
 .code-tabs { gap:14px; }
 .code-body { font-size:11.5px; }
 .endpoint-url { font-size:16px; }
}
@media(prefers-reduced-motion:reduce) {
 [data-line-reveal='pending'] { opacity:1!important; }
 .nav-ext,.nav-ext svg { transition:none; }
}
