/* The code page (/code), made by tools/site-code/build.py. */
.code-hero { grid-template-columns: 1fr 1fr; }
.code-hero .resource-title { font-size: clamp(2.5rem, 4.5vw, 4rem); }
.code-hero .resource-lead { max-width: 32rem; }
.code-hero-panel { margin: 0; }
.code-lead { max-width: 44rem; margin-top: 1rem; color: var(--muted); font-size: 1.05rem; line-height: 1.8; }

.code-table-wrap { overflow-x: auto; }
.code-table { width: 100%; border-collapse: collapse; font-size: 0.95rem; line-height: 1.6; }
.code-table th { text-align: left; font-weight: 600; color: var(--teal); padding: 0.6rem 1rem 0.6rem 0; border-bottom: 1px solid var(--line); }
.code-table td { padding: 0.7rem 1rem 0.7rem 0; border-bottom: 1px solid var(--line); vertical-align: top; }
.code-table td:first-child { font-style: italic; }
.code-table td:last-child { color: var(--muted); }
.code-table code { font: 0.875rem/1.6 var(--mono); white-space: nowrap; }

.code-grid { display: grid; grid-template-columns: 1.15fr 1fr 1fr; gap: 1.5rem; align-items: start; }
.code-grid-two { grid-template-columns: 1fr 1fr; }
.code-grid-wide { grid-template-columns: 1fr 1fr; }
.code-grid-wide > .source-panel:first-child { grid-column: 1 / -1; }
.code-grid figure { margin: 0; }
.code-stack { display: grid; gap: 1.5rem; min-width: 0; }
.code-grid pre, .code-hero pre { margin: 1.25rem 0 0; font-size: 0.8125rem; line-height: 1.8; overflow-x: auto; }
.terminal-panel pre { line-height: 1.65; }
.terminal-panel pre.wrap { white-space: pre-wrap; }
.term-prompt { color: var(--yarn); user-select: none; }
.code-grid .chart-panel img { max-width: 100%; }
.code-grid-wide .chart-panel img { max-width: 22rem; }
.code-special { margin-top: 1rem; font-size: 0.95rem; line-height: 1.7; }
.code-special b { font-weight: 600; }

.code-tools-list { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1.25rem 2rem; margin: 0; }
.code-tools-list div { padding-top: 1rem; border-top: 1px solid var(--line); }
.code-tools-list dt { font-weight: 600; }
.code-tools-list dt code { font: 600 0.95rem/1.5 var(--mono); }
.code-tools-list dd { margin: 0.4rem 0 0; color: var(--muted); line-height: 1.7; }
.code-note { max-width: 44rem; margin-top: 2rem; color: var(--muted); font-size: 0.95rem; line-height: 1.75; }

@media (max-width: 1080px) {
  .code-grid { grid-template-columns: 1fr 1fr; }
  .code-grid > .source-panel:first-child { grid-column: 1 / -1; }
  .code-tools-list { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 680px) {
  .code-hero { grid-template-columns: 1fr; }
  .code-grid, .code-grid-two { grid-template-columns: 1fr; }
  .code-grid pre, .code-hero pre { font-size: 0.75rem; }
  .code-tools-list { grid-template-columns: 1fr; }
}