/* 马赛克卡片 · 20/30 · domain-specific layout */
.site-layout-20 {
  --site-primary: #c2410c;
  --site-surface: #fff7ed;
  --site-ink: #431407;
  --site-line: color-mix(in srgb, var(--site-primary) 24%, transparent);
  accent-color: var(--site-primary);
}
.site-layout-20, .site-layout-20 :is(button,input,select,textarea) {
  font-family: "PingFang SC", "Microsoft YaHei", system-ui, sans-serif;
}
.site-layout-20 :is(a,button,input,select,textarea):focus-visible {
  outline: 3px solid color-mix(in srgb, var(--site-primary) 55%, white);
  outline-offset: 3px;
}
.site-layout-20 :is(.hero,.page-hero) { text-align: left; }
.site-layout-20 :is(.hero,.page-hero) h1,
.site-layout-20 :is(.hero,.page-hero) .sub,
.site-layout-20 :is(.hero,.page-hero) p { margin-left: 0; margin-right: 0; }
.site-layout-20 :is(.btn,.hero-btn,.nav-cta,button) { min-height: 44px; }
.site-layout-20 .codex-page-title {
  width:min(1120px,calc(100% - 40px)); margin:28px auto 0; padding:16px 20px;
  border-left:5px solid var(--site-primary); background:var(--site-surface);
  color:var(--site-ink); font-size:clamp(21px,2.4vw,30px); line-height:1.35;
}
.site-layout-20 :is(.type-card,.feature-card,.entry-card,.why-card,.media-card,.q-card,.card) {
  transition: transform .2s ease, box-shadow .2s ease, border-color .2s ease;
}
.site-layout-20 :is(.type-card,.feature-card,.entry-card,.why-card,.media-card):hover {
  transform: translateY(-4px);
}
.site-layout-20 .codex-beian { color: inherit !important; opacity: .72; }
@media (prefers-reduced-motion: reduce) {
  .site-layout-20 *, .site-layout-20 *::before, .site-layout-20 *::after { scroll-behavior: auto !important; transition: none !important; animation: none !important; }
}

.site-layout-20 :is(.grid-4,.type-grid,.features,.features-grid,.entry-grid,.why-grid) { grid-auto-flow:dense; }
.site-layout-20 :is(.grid-4,.type-grid,.features,.features-grid,.entry-grid,.why-grid)>:nth-child(4n+1) { grid-column:span 2; grid-row:span 2; }
.site-layout-20 :is(.type-card,.feature-card,.entry-card,.why-card) { border-radius:24px 4px; border:1px solid #c2410c33; }
.site-layout-20 :is(.hero,.page-hero) { border-bottom-right-radius:140px; }
@media (max-width:900px) {
  .site-layout-20 { padding-left:0; border-left-width:0; border-right-width:0; }
  .site-layout-20 :is(.site-header,.top-nav,body>nav) { width:100%; margin:0; border-radius:0; position:sticky; height:auto; }
  .site-layout-20 :is(.nav-inner,.nav) { height:auto; min-height:60px; flex-direction:row; padding:0 18px; }
  .site-layout-20 .nav-links { flex-direction:row; }
  .site-layout-20 :is(.hero,.page-hero) { width:100%; min-height:0; margin:0; border-radius:0; clip-path:none; padding:72px 20px; display:block; }
  .site-layout-20 :is(.hero,.page-hero)::after { display:none; }
  .site-layout-20 :is(.hero,.page-hero)>*, .site-layout-20 :is(.hero h1,.hero .sub,.hero p) { width:auto; max-width:100%; margin-left:auto!important; margin-right:auto!important; }
  .site-layout-20 :is(.section,.section-alt,.test-section,.why-section,.faq-section,.planet-section) { width:100%; margin:0; border-radius:0; padding-top:64px; padding-bottom:64px; }
  .site-layout-20 :is(.section,.test-section):nth-of-type(even) .container,
  .site-layout-20 :is(.section,.test-section):nth-of-type(odd) .container { transform:none; }
  .site-layout-20 :is(.grid-4,.type-grid,.features,.features-grid,.entry-grid,.why-grid,.media-grid) { grid-template-columns:1fr!important; transform:none; }
  .site-layout-20 :is(.grid-4,.type-grid,.features,.features-grid,.entry-grid,.why-grid)>* { grid-column:auto!important; grid-row:auto!important; transform:none; }
}