/* 技术章节样式（2026-10-28 批次一）。只作用于 .tech-* 与关于页能力段落，不改动既有组件。 */

/* 内容宽度与节奏：仅技术章节收窄到 1160，不改变 .wrap 全局宽度 */
.tech-chapter{position:relative}
.tech-chapter .tech-body{width:min(1160px,100%);margin-inline:auto}
.tech-chapter .story-heading{max-width:860px}
.tech-chapter .story-heading h2{font-size:36px;line-height:44px;letter-spacing:-.01em;margin-bottom:20px}
.tech-chapter .story-heading p{font-size:20px;line-height:1.62}

/* 主证据 + 代码：7 / 5 列 */
.tech-pair{display:grid;grid-template-columns:minmax(0,7fr) minmax(0,5fr);gap:32px;align-items:start;margin-top:40px}
.tech-pair+.tech-pair{margin-top:56px}
.tech-pair__media{min-width:0;margin:0}
.tech-pair__media .image-button{display:block;width:100%;border:0;background:#f4f6f4;padding:0;border-radius:8px;overflow:hidden;cursor:zoom-in;position:relative}
.tech-pair__media .image-button img{display:block;width:100%;height:auto}
.tech-pair__media figcaption{font-size:14px;line-height:1.5;color:var(--muted);margin-top:12px;display:flex;flex-wrap:wrap;gap:6px 14px;align-items:baseline}
.tech-pair__media .tech-meta{font-variant-numeric:tabular-nums}
.tech-pair__media .tech-object{color:#39433c}

/* SVG 类图示：白底细边，不放大到失真 */
.tech-diagram{display:block;width:100%;height:auto;background:#fff;border:1px solid var(--line);border-radius:8px}

/* 代码栏 */
.tech-code{min-width:0;display:flex;flex-direction:column;gap:10px}
.tech-code__head{display:flex;flex-wrap:wrap;align-items:baseline;justify-content:space-between;gap:6px 12px;font-size:13px;color:var(--muted)}
.tech-code__name{font-family:"Cascadia Code",Consolas,"Courier New",monospace;font-size:13px;color:#39433c;min-width:0;overflow-wrap:anywhere}
.tech-code__frame{background:#17212B;border-radius:8px;padding:14px 0;max-height:520px;height:360px;overflow:auto;overscroll-behavior:contain}
.tech-code__frame:focus{outline:none}
.tech-code__frame:focus-visible{outline:2px solid #2d7a25;outline-offset:3px}
.tech-code__frame pre{margin:0;padding:0 16px;font-family:"Cascadia Code",Consolas,"Courier New",monospace;font-size:14px;line-height:1.6;color:#E7EDF2;tab-size:4;white-space:pre}
.tech-code__frame code{font:inherit;color:inherit;background:none}
.tech-code__frame .line{display:block;white-space:pre;padding:0 6px;border-radius:3px}
.tech-code__frame .line--focus{background:#243343;box-shadow:inset 2px 0 0 #85BAFF}
.tech-code__frame .c{color:#A8B8C5}
.tech-code__frame .k{color:#85BAFF}
.tech-code__frame .s{color:#9EDAB7}
.tech-code__frame .n{color:#E5C07B}
.tech-code__frame .ln{display:inline-block;min-width:3.2em;margin-right:12px;color:#5f7385;user-select:none;text-align:right}
.tech-code__frame .src{white-space:pre}
.tech-code__tools{display:flex;flex-wrap:wrap;gap:10px;align-items:center}
.tech-code__tools button{min-height:44px;padding:9px 15px;font-size:14px;border:1px solid var(--line);border-radius:999px;background:#fff;color:var(--ink);cursor:pointer}
.tech-code__tools button:hover{border-color:#b9c4bb}
.tech-code__tools button:focus-visible{outline:2px solid #2d7a25;outline-offset:2px}
.tech-code__tools button[aria-expanded="true"]{background:var(--ink);color:#fff;border-color:var(--ink)}
.tech-code__status{font-size:13px;color:var(--muted);min-height:18px}
.tech-code__shot{border-radius:8px;overflow:hidden;border:1px solid #22303b;background:#17212B;padding:0;display:block;width:100%}
.tech-code__shot img{display:block;width:100%;height:auto}
.tech-code__shot[hidden]{display:none}
.tech-code__shot{cursor:zoom-in;position:relative}

/* 折叠的补充证据 */
.tech-more{margin-top:44px;border-top:1px solid var(--line);padding-top:28px}
.tech-more>summary{display:flex;align-items:center;gap:10px;cursor:pointer;font-size:18px;line-height:1.4;color:var(--ink);list-style:none;min-height:44px}
.tech-more>summary::-webkit-details-marker{display:none}
.tech-more>summary::before{content:"+";display:inline-flex;align-items:center;justify-content:center;width:26px;height:26px;border:1px solid var(--line);border-radius:50%;font-size:16px;color:var(--muted);flex:none}
.tech-more[open]>summary::before{content:"–"}
.tech-more>summary:hover{color:#000}
.tech-more__body{margin-top:24px}

/* 关于页能力段落 */
.profile-copy.profile-capability{margin-top:8px}
.profile-copy.profile-capability h2{font-size:24px}

@media (max-width:1100px){
  .tech-chapter .story-heading h2{font-size:32px;line-height:41px}
}

/* 窄屏：上下堆叠，先结果图再代码 */
@media (max-width:900px){
  .tech-pair{grid-template-columns:1fr;gap:24px;margin-top:32px}
  .tech-pair+.tech-pair{margin-top:48px}
  .tech-chapter .story-heading h2{font-size:26px;line-height:34px}
  .tech-chapter .story-heading p{font-size:16px;line-height:24px}
  .tech-code__frame{height:320px;max-height:380px}
  .tech-code__frame pre{font-size:13px;line-height:1.62;padding:0 12px}
  .tech-code__frame .ln{min-width:2.8em;margin-right:9px}
  .tech-pair__media figcaption{font-size:13px}
}

@media (max-width:640px){
  .tech-chapter{padding-top:64px;padding-bottom:64px}
  .tech-code__tools button{font-size:13px;padding:8px 13px}
  .tech-more{margin-top:32px;padding-top:22px}
  .tech-more>summary{font-size:16px}
}

@media (prefers-reduced-motion:no-preference){
  .tech-more__body{animation:techFade .2s ease-out}
  @keyframes techFade{from{opacity:0;transform:translateY(-4px)}to{opacity:1;transform:none}}
}