/* ============================================================
   容程序 IDE 官网 · 组件与区块
   ============================================================ */

/* ---------- 导航 ---------- */
header.site {
  position: sticky; top: 0; z-index: 50;
  backdrop-filter: blur(14px);
  background: rgba(23, 19, 14, .78);
  border-bottom: 1px solid var(--color-border);
}
.nav { display: flex; align-items: center; gap: var(--space-5); height: 68px; }
.brand { display: flex; align-items: center; gap: 12px; margin-right: auto; }
/* 印章式徽记：朱砂方框里一个「容」 */
.seal {
  display: block;
  width: 40px; height: auto;
  transform: rotate(-3deg);
  transition: transform var(--dur-fast) ease-out;
  filter: drop-shadow(0 2px 6px rgba(0, 0, 0, .35));
}
.brand:hover .seal { transform: rotate(0deg) scale(1.06); }
.brand b { font-family: var(--font-display); font-size: var(--fs-lg); letter-spacing: .04em; }
.brand small { display: block; font-size: var(--fs-xs); color: var(--color-muted); line-height: 1.2; }
.nav-links { display: flex; gap: var(--space-4); }
.nav-links a {
  padding: 8px 4px; font-size: var(--fs-sm); color: var(--color-muted);
  border-bottom: 2px solid transparent;
  transition: color var(--dur-fast) ease-out, border-color var(--dur-fast) ease-out;
}
.nav-links a:hover { color: var(--color-text); border-color: var(--color-accent); }
.ver-pill {
  font-family: var(--font-mono); font-size: var(--fs-xs);
  color: var(--color-accent);
  border: 1px solid var(--color-accent);
  border-radius: 999px; padding: 3px 12px;
}
@media (max-width: 760px) { .nav-links { display: none; } }

/* ---------- Hero ---------- */
.hero { padding: var(--space-8) 0 var(--space-6); position: relative; }
.hero-grid {
  display: grid; grid-template-columns: 1.05fr .95fr;
  gap: var(--space-6); align-items: center;
}
.hero-eyebrow {
  display: inline-flex; align-items: center; gap: 8px;
  font-size: var(--fs-sm); color: var(--color-gold);
  border: 1px solid rgba(217, 164, 65, .4);
  background: rgba(217, 164, 65, .07);
  padding: 5px 14px; border-radius: 999px;
  margin-bottom: var(--space-4);
}
.hero h1 {
  font-size: var(--fs-hero);
  line-height: 1.06;
  letter-spacing: -.02em;
  margin-bottom: var(--space-4);
}
.hero h1 em { font-style: normal; color: var(--color-accent); position: relative; }
.hero h1 em::after {
  content: ""; position: absolute; left: 0; right: 0; bottom: .04em;
  height: .08em; background: var(--color-accent); opacity: .35;
}
.hero .lead {
  font-size: var(--fs-lg); color: var(--color-muted);
  max-width: 34em; margin-bottom: var(--space-5);
}
.cta-row { display: flex; flex-wrap: wrap; gap: var(--space-3); align-items: center; }

.btn {
  display: inline-flex; align-items: center; gap: 10px;
  min-height: 48px; padding: 12px 26px;
  border-radius: var(--radius-md);
  font-size: var(--fs-base); font-weight: 500;
  border: 1px solid transparent;
  transition: transform var(--dur-fast) ease-out, box-shadow var(--dur-fast) ease-out, background var(--dur-fast) ease-out;
}
.btn:active { transform: translateY(1px) scale(.99); }
.btn-primary {
  background: var(--color-accent); color: #fff;
  box-shadow: 0 6px 24px rgba(255, 77, 46, .35);
}
.btn-primary:hover { transform: translateY(-2px); box-shadow: 0 12px 32px rgba(255, 77, 46, .45); }
.btn-ghost {
  border-color: var(--color-border-strong); color: var(--color-text);
  background: transparent;
}
.btn-ghost:hover { border-color: var(--color-accent); color: var(--color-accent); }

/* 背景「容」字水印 */
.hero-watermark {
  position: absolute; z-index: -1;
  right: -5%; top: -12%;
  width: clamp(30rem, 44vw, 56rem);
  height: auto;
  opacity: .055;
  user-select: none; pointer-events: none;
}

/* ---------- 代码窗口 ---------- */
.code-window {
  background: var(--color-bg-deep);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-3);
  transform: rotate(1.2deg);
  transition: transform var(--dur-slow) var(--ease-out);
  overflow: hidden;
}
.code-window:hover { transform: rotate(0deg) translateY(-4px); }
.code-bar {
  display: flex; align-items: center; gap: 8px;
  padding: 12px 16px;
  border-bottom: 1px solid var(--color-border);
  background: rgba(243, 236, 220, .03);
}
.dot { width: 11px; height: 11px; border-radius: 50%; }
.dot.r { background: #ff5f56; } .dot.y { background: #ffbd2e; } .dot.g { background: #27c93f; }
.code-bar .file {
  margin-left: 10px; font-family: var(--font-mono);
  font-size: var(--fs-xs); color: var(--color-muted);
}
.code-body {
  font-family: var(--font-mono);
  font-size: .86rem; line-height: 1.9;
  padding: 20px 22px 26px;
  white-space: pre; overflow-x: auto;
  tab-size: 4;
}
.code-body .ln { display: inline-block; width: 1.6em; color: var(--color-comment); user-select: none; }
.kw { color: var(--code-keyword); font-weight: 700; }
.str { color: var(--code-string); }
.num { color: var(--code-number); }
.cmt { color: var(--code-comment); font-style: italic; }
.fn  { color: var(--code-func); }
.win { color: var(--code-window); }
.cursor {
  display: inline-block; width: .55em; height: 1.1em;
  background: var(--color-accent); vertical-align: text-bottom;
  animation: blink 1.1s steps(1) infinite;
}
@keyframes blink { 50% { opacity: 0; } }

/* ---------- 跑马灯 ---------- */
.marquee {
  border-block: 1px solid var(--color-border);
  overflow: hidden; padding: 14px 0;
  background: rgba(243, 236, 220, .02);
}
.marquee-track {
  display: flex; gap: 3.5em; width: max-content;
  animation: scroll 30s linear infinite;
  font-family: var(--font-display);
  font-size: var(--fs-lg); color: var(--color-muted);
}
.marquee-track b { color: var(--color-accent); font-weight: 400; }
@keyframes scroll { to { transform: translateX(-50%); } }
@media (prefers-reduced-motion: reduce) { .marquee-track { animation: none; } }

/* ---------- 区块头 ---------- */
section { padding: var(--space-8) 0; }
.sec-head { margin-bottom: var(--space-6); max-width: 40em; }
.sec-head .kicker {
  font-family: var(--font-mono); font-size: var(--fs-xs);
  color: var(--color-accent); letter-spacing: .2em;
  display: block; margin-bottom: 10px;
}
.sec-head p { color: var(--color-muted); margin-top: 12px; }

/* ---------- 下载卡片 ---------- */
.dl-grid { display: grid; grid-template-columns: 1.15fr .85fr; gap: var(--space-4); align-items: stretch; }
.dl-card {
  position: relative;
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  padding: var(--space-5);
  display: flex; flex-direction: column; gap: var(--space-3);
  transition: transform var(--dur-base) var(--ease-out), border-color var(--dur-base) ease-out;
  overflow: hidden;
}
.dl-card:hover { transform: translateY(-5px); border-color: var(--color-border-strong); }
.dl-card.featured {
  background: linear-gradient(145deg, var(--color-surface-2), var(--color-surface));
  border-color: rgba(255, 77, 46, .4);
}
.dl-card.featured::before {
  content: "推荐"; position: absolute; top: 18px; right: -34px;
  transform: rotate(38deg);
  background: var(--color-accent); color: #fff;
  font-size: var(--fs-xs); padding: 4px 40px; letter-spacing: .2em;
}
.dl-card .dl-name { font-family: var(--font-display); font-size: var(--fs-2xl); }
.dl-card .dl-desc { color: var(--color-muted); font-size: var(--fs-sm); flex: 1; }
.dl-meta {
  display: flex; flex-wrap: wrap; gap: 8px;
  font-family: var(--font-mono); font-size: var(--fs-xs); color: var(--color-muted);
}
.dl-meta span {
  border: 1px solid var(--color-border); border-radius: 999px;
  padding: 2px 12px;
}
.dl-card .btn { justify-content: center; }
.dl-note {
  margin-top: var(--space-4);
  font-size: var(--fs-sm); color: var(--color-muted);
  display: flex; gap: 10px; align-items: baseline;
}
.dl-note::before { content: "※"; color: var(--color-accent); }
@media (max-width: 860px) { .dl-grid { grid-template-columns: 1fr; } }

/* ---------- 特性 Bento ---------- */
.bento {
  display: grid; gap: var(--space-3);
  grid-template-columns: repeat(6, 1fr);
  grid-auto-rows: minmax(150px, auto);
}
.bento article {
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  padding: var(--space-4);
  display: flex; flex-direction: column; gap: 8px;
  transition: border-color var(--dur-fast) ease-out, transform var(--dur-base) var(--ease-out);
}
.bento article:hover { border-color: rgba(255, 77, 46, .45); transform: translateY(-3px); }
.bento .big { grid-column: span 4; }
.bento .wide { grid-column: span 2; }
.bento .tall { grid-column: span 2; grid-row: span 2; }
.bento h3 { font-size: var(--fs-xl); }
.bento p { color: var(--color-muted); font-size: var(--fs-sm); }
.bento .glyph {
  font-family: var(--font-display); font-size: var(--fs-2xl);
  color: var(--color-accent); line-height: 1;
}
.bento pre {
  font-family: var(--font-mono); font-size: var(--fs-xs);
  color: var(--color-muted); background: var(--color-bg-deep);
  border: 1px solid var(--color-border); border-radius: var(--radius-sm);
  padding: 10px 14px; margin-top: auto; overflow-x: auto; white-space: pre;
}
@media (max-width: 860px) {
  .bento { grid-template-columns: 1fr 1fr; }
  .bento .big, .bento .wide, .bento .tall { grid-column: span 2; grid-row: auto; }
}

/* ---------- 文档预览卡 ---------- */
.docs-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: var(--space-3); }
.doc-card {
  border: 1px solid var(--color-border); border-radius: var(--radius-md);
  padding: var(--space-4); background: var(--color-surface);
  display: flex; flex-direction: column; gap: 6px; min-height: 148px;
  transition: border-color var(--dur-fast) ease-out, transform var(--dur-base) var(--ease-out);
}
.doc-card:hover { border-color: var(--color-accent); transform: translateY(-3px); }
.doc-card .no { font-family: var(--font-mono); font-size: var(--fs-xs); color: var(--color-accent); }
.doc-card h3 { font-size: var(--fs-lg); }
.doc-card p { font-size: var(--fs-sm); color: var(--color-muted); flex: 1; }
.doc-card .go { font-size: var(--fs-sm); color: var(--color-accent); }
@media (max-width: 860px) { .docs-grid { grid-template-columns: 1fr 1fr; } }
@media (max-width: 520px) { .docs-grid { grid-template-columns: 1fr; } }

/* ---------- 页脚 ---------- */
footer.site {
  border-top: 1px solid var(--color-border);
  padding: var(--space-6) 0 var(--space-7);
  color: var(--color-muted); font-size: var(--fs-sm);
}
.foot { display: flex; flex-wrap: wrap; gap: var(--space-4); align-items: flex-start; }
.foot .seal { width: 32px; }
.foot-col { display: flex; flex-direction: column; gap: 6px; }
.foot-col b { color: var(--color-text); font-family: var(--font-display); }
.foot a:hover { color: var(--color-accent); }
.foot-fine { margin-top: var(--space-5); font-size: var(--fs-xs); }

/* ============================================================
   文档页 docs.html
   ============================================================ */
.docs-layout { display: grid; grid-template-columns: 240px 1fr; gap: var(--space-6); padding: var(--space-6) 0 var(--space-8); }
.docs-side { position: sticky; top: 92px; align-self: start; }
.docs-side nav {
  border-left: 1px solid var(--color-border);
  display: flex; flex-direction: column;
}
.docs-side a {
  padding: 8px 0 8px 18px;
  margin-left: -1px;
  border-left: 2px solid transparent;
  color: var(--color-muted); font-size: var(--fs-sm);
  transition: color var(--dur-fast) ease-out, border-color var(--dur-fast) ease-out;
}
.docs-side a:hover, .docs-side a.on { color: var(--color-accent); border-color: var(--color-accent); }
.doc-page h1 { font-size: var(--fs-4xl); margin-bottom: 8px; }
.doc-page .doc-lead { color: var(--color-muted); margin-bottom: var(--space-6); }
.doc-page h2 {
  font-size: var(--fs-2xl); margin: var(--space-6) 0 var(--space-3);
  scroll-margin-top: 90px;
}
.doc-page h2::before { content: "# "; color: var(--color-accent); }
.doc-page p { max-width: 42em; margin-bottom: var(--space-3); }
.doc-page ul { padding-left: 1.3em; margin-bottom: var(--space-3); color: var(--color-muted); max-width: 42em; }
.doc-page li { margin-bottom: 4px; }
.doc-page li b { color: var(--color-text); }
.doc-page .code-window { transform: none; margin: var(--space-4) 0; }
.callout {
  border: 1px solid rgba(217, 164, 65, .4);
  background: rgba(217, 164, 65, .07);
  border-radius: var(--radius-md);
  padding: var(--space-3) var(--space-4);
  font-size: var(--fs-sm); color: var(--color-muted);
  max-width: 46em; margin: var(--space-4) 0;
}
.callout b { color: var(--color-gold); }
.state-table { width: 100%; border-collapse: collapse; font-size: var(--fs-sm); margin: var(--space-3) 0; }
.state-table th, .state-table td {
  text-align: left; padding: 10px 14px;
  border: 1px solid var(--color-border);
}
.state-table th { font-family: var(--font-display); color: var(--color-gold); background: rgba(243, 236, 220, .03); }
.state-table td code { font-family: var(--font-mono); color: var(--code-keyword); }
.state-table td:first-child { white-space: nowrap; }
@media (max-width: 860px) {
  .docs-layout { grid-template-columns: 1fr; }
  .docs-side { position: static; }
  .docs-side nav { flex-direction: row; flex-wrap: wrap; border-left: 0; gap: 4px 16px; }
  .docs-side a { border-left: 0; padding: 4px 0; }
}

/* ---------- 文档 · 命令参考 ---------- */
.cmd-table { width: 100%; border-collapse: collapse; font-size: var(--fs-sm); margin: var(--space-3) 0 var(--space-5); }
.cmd-table th, .cmd-table td { border: 1px solid var(--color-border); padding: 9px 12px; text-align: left; vertical-align: top; }
.cmd-table th { font-family: var(--font-display); color: var(--color-gold); background: rgba(243, 236, 220, .03); white-space: nowrap; }
.cmd-table td:first-child { white-space: nowrap; }
.doc-page code, .cmd-table code {
  font-family: var(--font-mono); font-size: .92em; color: var(--code-keyword);
  background: rgba(255, 122, 92, .08); padding: 1px 6px; border-radius: 5px;
}
.side-group {
  margin: 14px 0 4px; padding-left: 18px;
  font-family: var(--font-mono); font-size: var(--fs-xs);
  color: var(--color-accent); letter-spacing: .18em;
}
.tag {
  display: inline-block; margin-right: 6px; padding: 0 8px;
  font-family: var(--font-mono); font-size: var(--fs-xs);
  border: 1px solid var(--color-border-strong); border-radius: 999px; color: var(--color-muted);
}
.tag.事件 { color: var(--color-accent); border-color: rgba(255, 77, 46, .5); }
.tag.持续 { color: var(--color-gold); border-color: rgba(217, 164, 65, .5); }
.tag.交互 { color: var(--color-ok); border-color: rgba(127, 176, 105, .5); }
.lib-head .load { font-family: var(--font-mono); font-size: var(--fs-xs); color: var(--color-muted); }