/* 炼丹社 gateway — shared site styles (light-only, cream/clay palette) */
*{box-sizing:border-box}
:root{
  --cream:#F0EEE6; --surface:#FAF9F5; --ink:#141413; --muted:#73706A;
  --clay:#CC785C; --clay-deep:#B85C3E; --line:#E3DFD4; --ok:#5E7A5A; --warn:#B85C3E;
}
body{margin:0;background:var(--cream);color:var(--ink);
  font:16px/1.7 ui-sans-serif,-apple-system,BlinkMacSystemFont,"Segoe UI",Inter,Roboto,"PingFang SC","Microsoft YaHei",Helvetica,Arial,sans-serif;
  -webkit-font-smoothing:antialiased}
a{color:var(--clay-deep);text-decoration:none}
a:hover{text-decoration:underline}

/* top nav */
.nav{position:sticky;top:0;z-index:10;background:rgba(240,238,230,.9);backdrop-filter:blur(8px);
  border-bottom:1px solid var(--line)}
.nav .navin{max-width:900px;margin:0 auto;padding:14px 24px;display:flex;align-items:center;gap:22px}
.nav .brand{font-weight:700;font-size:16px;color:var(--ink);display:flex;align-items:center;gap:8px}
.nav .brand .dot{width:8px;height:8px;border-radius:50%;background:var(--clay)}
.nav .links{margin-left:auto;display:flex;gap:20px;font-size:14.5px;font-weight:600}
.nav .links a{color:var(--muted)}
.nav .links a:hover,.nav .links a.on{color:var(--clay-deep);text-decoration:none}
/* 已登录时这一格显示用户名。**必须封住它的宽度** —— 用户名长度是用户决定的,不封的话
   一个长名字会把整条导航顶宽,进而在明明放得下的屏幅上把导航挤成两行。截断之后全名仍在
   title 里(nav.js 设的),鼠标悬停看得到。 */
.nav .links #navAuth{max-width:8em;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;
  display:inline-block;vertical-align:bottom}

/* 窄屏才让导航换行。**断点是量出来的,不是猜的:**
   实测一行放得下所需的最小视口宽度 —— 未登录/只有「登录」526px；短用户名 + 登出 561px；
   11 字符长名 627px；而 #navAuth 封到 8em 之后最坏情形约 655px。所以 680px 以上一定放得下。
   原来这个断点写的是 760px,于是在 680~760 这一段明明放得下也被强行折成两行 ——
   那正是"框框换行"最扎眼的地方。
   680px 以下确实放不下:不换行的话超出的部分会被 sticky 容器裁掉,最后几项直接点不到。 */
@media (max-width:680px){
  .nav .navin{flex-wrap:wrap;gap:10px 16px;padding:12px 18px}
  .nav .links{margin-left:0;width:100%;flex-wrap:wrap;gap:12px 16px;font-size:14px}
}

.inner{max-width:820px;margin:0 auto;padding:48px 24px 96px}
.eyebrow{display:inline-flex;align-items:center;gap:8px;font-size:13px;font-weight:600;
  color:var(--clay-deep);background:#fff;border:1px solid var(--line);padding:6px 14px;border-radius:999px;margin-bottom:22px}
.eyebrow .dot{width:7px;height:7px;border-radius:50%;background:var(--clay)}
h1{font-size:clamp(30px,5vw,50px);line-height:1.12;letter-spacing:-.01em;font-weight:600;margin:0 0 18px}
/* **全站不用斜体。** 这不是口味问题:中文字体没有真正的斜体字面,浏览器只能把正体
   **强行倾斜**合成一个假斜体(synthesized oblique),笔画会歪、粗细会乱,看起来就是坏的。
   所以把浏览器默认斜体的那几个标签**一次性全部掰回正体** ——
   em / i / cite / dfn / var / address 是 HTML 里默认斜体的全部元素。
   原来这里只写了 h1 em,于是 <em> 一旦用在 h1 之外就会真的斜过去:
   实测首页那句「炼丹社现在能出<em>视频</em>了」是个 h2,「视频」两个字就是斜的。
   规则收在一处、覆盖所有位置,以后在哪写都不会漏。 */
em,i,cite,dfn,var,address{font-style:normal}
/* 本站的 <em> 是**强调色**,不是斜体 —— 三个页面的大标题都这么用。既然默认斜体已经掰回来了,
   这里只负责上色,而且不再限定 h1:h2/h3 里用 <em> 也应该得到同样的效果。 */
h1 em,h2 em,h3 em{color:var(--clay-deep)}
.lede{font-size:clamp(16px,2.1vw,20px);color:var(--muted);max-width:660px;margin:0 0 26px}
h2{font-size:23px;font-weight:600;letter-spacing:-.01em;margin:50px 0 6px}
h3{font-size:16px;font-weight:600;margin:22px 0 6px}
/* h4:h3 之下再一级。帮助页的搜索一节要分「怎么计费/缓存/自我披露」三个子话题,
   而 h3 之下原先没有任何规则 —— 直接用 h4 会退回浏览器默认样式(过大、外边距不对),
   在一页里看起来像排版坏了。字号比 h3 小一档、颜色压成次要色,视觉层级才跟语义一致。*/
h4{font-size:14px;font-weight:600;color:var(--muted);letter-spacing:.01em;margin:20px 0 4px}
/* 帮助页的吸顶栏目条。贴在主导航下面(top 跟着导航高度 56px)。
   窄屏时主导航会折成两行、高度不再是 56px,那时若还吸顶就会错位盖住内容 ——
   所以窄屏干脆不吸顶,让它随页面滚走(顶上那张「栏目」卡片仍在)。 */
.colbar{position:sticky;top:56px;z-index:9;background:rgba(250,249,245,.96);
  backdrop-filter:blur(8px);border-bottom:1px solid var(--line)}
.colbarin{max-width:900px;margin:0 auto;padding:9px 24px;display:flex;align-items:center;
  gap:18px;font-size:13.5px;font-weight:600;overflow-x:auto}
.colbar .lbl{color:var(--muted);flex-shrink:0}
.colbar a{color:var(--muted);white-space:nowrap}
.colbar a:hover{color:var(--clay-deep);text-decoration:none}
@media (max-width:680px){ .colbar{position:static} }

/* 带锚点的标题必须给 sticky 导航让位。不加这一条,点目录跳过去的标题正好被那条 56px 高的
   导航盖住 —— 实测每个锚点都落在 top:0,也就是**跳到了看不见的地方**。
   帮助页加了栏目索引之后这条路每天都要走,所以留 72px:导航 56 + 一点呼吸。 */
/* .card[id] 也算:视频那一节的 /v1/videos 别名是挂在卡片上的锚点,不是标题。 */
h2[id],h3[id],h4[id],.card[id]{scroll-margin-top:116px}
.sub{color:var(--muted);margin:0 0 22px}
p{margin:0 0 15px}
.card{background:var(--surface);border:1px solid var(--line);border-radius:16px;padding:22px 24px;margin:18px 0}
.gate{background:#fff;border:1px solid var(--line);border-left:3px solid var(--clay);border-radius:12px;padding:18px 20px;margin:22px 0}
.gate b{color:var(--clay-deep)}
.note{font-size:14px;color:var(--muted);background:#fff;border:1px dashed var(--line);border-radius:12px;padding:16px 18px;margin:20px 0}
.note b{color:var(--ink)}

label{display:block;font-size:13px;font-weight:600;color:var(--muted);margin:0 0 6px}
input{width:100%;font:15px ui-monospace,Menlo,monospace;padding:12px 14px;border:1px solid var(--line);
  border-radius:10px;background:#fff;color:var(--ink)}
input:focus{outline:none;border-color:var(--clay)}
.row{display:flex;gap:10px;flex-wrap:wrap;align-items:flex-end}
.row .grow{flex:1;min-width:200px}
button{font-size:15px;font-weight:600;padding:12px 22px;border-radius:10px;border:1px solid transparent;
  background:var(--clay);color:#fff;cursor:pointer;transition:.15s}
button:hover{background:var(--clay-deep)}
button.ghost{background:#fff;color:var(--ink);border-color:var(--line)}
button.ghost:hover{border-color:var(--clay);color:var(--clay-deep)}
button.sm{padding:6px 12px;font-size:13px}
.cta{display:flex;flex-wrap:wrap;gap:12px;margin-top:8px}
.btnlink{display:inline-flex;align-items:center;gap:8px;font-size:15px;font-weight:600;padding:13px 24px;
  border-radius:10px;background:var(--clay);color:#fff}
.btnlink:hover{background:var(--clay-deep);text-decoration:none}
.btnlink.ghost{background:#fff;color:var(--ink);border:1px solid var(--line)}
.btnlink.ghost:hover{border-color:var(--clay);color:var(--clay-deep)}

.out{margin-top:14px;font-size:14px}
.keybox{font:14px ui-monospace,Menlo,monospace;background:#1c1b19;color:#eae6dd;border-radius:10px;
  padding:14px 16px;word-break:break-all;display:flex;gap:10px;align-items:center;justify-content:space-between}
.keybox button{padding:6px 12px;font-size:13px;flex-shrink:0}
.err{color:var(--warn);font-weight:600}
.ok{color:var(--ok);font-weight:600}

table{width:100%;border-collapse:collapse;font-size:14px;margin-top:6px}
th,td{text-align:left;padding:9px 11px;border-bottom:1px solid var(--line);vertical-align:top}
th{font-size:12px;color:var(--muted);text-transform:uppercase;letter-spacing:.03em}
td code{font-size:12.5px;color:var(--clay-deep)}
.bar{height:6px;border-radius:3px;background:var(--line);overflow:hidden;margin-top:4px}
.bar>i{display:block;height:100%;background:var(--clay)}

/* 行内 code 是个**有边框的小框**。里面带空格的写法(<Picture 1>、<d>[Chinese] 你好 </d>)
   会在空格处断行,于是一个框被劈成两半:上一行末尾一个左半框、下一行开头一个右半框,
   看起来就是排版坏了。所以 nowrap。
   **表格里也一样不拆。** 一开始我给 td code 留了 word-break:break-all,理由是"表格窄,
   长路径不许断行会把表格撑破"。实测这个理由是错的:改成 nowrap 之后没有任何表格产生横向
   溢出(表格自己会把列摊开),而 break-all 的代价极大 —— 它连三个字符的 400 都会拆成
   "4"/"00",实测帮助页 760px 下有 17 个框被拆开、620px 下 41 个、420px 下 69 个。 */
code{background:#fff;border:1px solid var(--line);border-radius:6px;padding:1px 6px;
  font:13px ui-monospace,Menlo,monospace;white-space:nowrap}
pre{background:#1c1b19;color:#eae6dd;border-radius:14px;padding:20px 22px;overflow-x:auto;
  font:13px/1.7 ui-monospace,Menlo,monospace;margin:14px 0 0}
pre code{background:none;border:none;padding:0;color:inherit}
.k{color:#CC9B7A}.s{color:#A3B18A}.c{color:#7d7a72}.p{color:#88a0b8}

.models{display:grid;grid-template-columns:repeat(3,1fr);gap:14px;margin-top:10px}
/* **卡片行必须和普通框对齐。** 一度让这一行左右各探出 120px,为的是三列能宽一点、
   卡里的标签不换行 —— 但那样卡片行就比同一页上的 .card / .gate / .note 宽出 240px,
   左右边缘对不上,看起来是最刺眼的一种不齐。宽度问题要在**列数和标签**上解决,
   不能靠让某一类框比别人宽。
   列数写死(不用 auto-fit):auto-fit 会让卡片宽度取决于"这一组有几张",
   两张的组一张 379px、三张的组 328px、一张的组直接铺满,同一页上就长短不齐了。 */
@media (max-width:1079px){ .models{grid-template-columns:repeat(2,1fr)} }
@media (max-width:679px){  .models{grid-template-columns:1fr} }
/* dense:卡里装的是规格标签(最长一组实测要 437px),两列 379px 都放不下,所以**整宽一列**。
   顺带它和 .card 完全同宽,是这一页上最整齐的形状。 */
.models.dense{grid-template-columns:1fr}
.m{background:#fff;border:1px solid var(--line);border-radius:14px;padding:18px 20px}
.m .id{font:13px ui-monospace,Menlo,monospace;color:var(--clay-deep);word-break:break-all}
.m .nm{font-size:17px;font-weight:600;margin:2px 0 8px}
.m p{margin:0;font-size:14px;color:var(--muted)}
.tags{display:flex;flex-wrap:wrap;gap:6px;margin:10px 0 0}
.tag{font-size:12px;font-weight:600;color:var(--muted);background:var(--cream);border:1px solid var(--line);padding:3px 10px;border-radius:999px}

.foot{border-top:1px solid var(--line);margin-top:64px;padding-top:20px;color:var(--muted);font-size:13.5px}
.list{margin:0;padding:0;list-style:none}
.list li{padding:9px 0;border-bottom:1px solid var(--line);display:flex;gap:12px;align-items:baseline;font-size:15px}
.list li:last-child{border-bottom:none}
.list .t{color:var(--clay-deep);font-weight:700;font-size:13px;min-width:104px}