.showcase-hero p { max-width: 760px; }
.showcase-shell { max-width: 1320px; }

.showcase-intro {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 24px;
  margin-bottom: 24px;
}
.showcase-intro h2 { margin: 0 0 8px; }
.showcase-intro p { max-width: 820px; margin: 0; color: rgb(var(--muted)); }
.showcase-intro .btn { flex: 0 0 auto; }

.showcase-summary {
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  border: 1px solid rgb(var(--border));
  border-radius: var(--radius);
  background: rgb(var(--bg-elevated));
  overflow: hidden;
}
.showcase-summary.running { opacity: .72; }
.showcase-stat { padding: 20px 22px; border-right: 1px solid rgb(var(--border)); }
.showcase-stat:last-child { border-right: 0; }
.showcase-stat span { display: block; margin-bottom: 5px; color: rgb(var(--muted)); font-size: .78rem; text-transform: uppercase; letter-spacing: .06em; }
.showcase-stat strong { font-family: var(--mono); font-size: 1.15rem; }
.showcase-stat-issues strong { font-size: .82rem; line-height: 1.45; white-space: normal; overflow-wrap: anywhere; }

.showcase-run-meta { margin: 16px 0 28px; }
.showcase-run-meta .engine-status { display: inline-flex; align-items: center; min-height: 32px; padding: 0 10px; border: 1px solid rgb(var(--border)); border-radius: 999px; background: rgb(var(--bg-elevated)); color: rgb(var(--muted)); font-size: .8rem; font-weight: 700; }
.showcase-run-meta p { margin: 12px 0 4px; color: rgb(var(--muted)); }
.showcase-run-meta small { display: block; color: rgb(var(--muted)); overflow-wrap: anywhere; }
.showcase-run-meta .engine-status.ready { border-color: rgba(var(--good), .35); color: rgb(var(--good)); }
.showcase-run-meta .engine-status.warning { border-color: rgba(var(--accent), .35); color: rgb(var(--accent)); }
.showcase-run-meta .engine-status.error { border-color: rgba(var(--danger), .35); color: rgb(var(--danger)); }

.showcase-jump {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin: 0 0 36px;
}
.showcase-jump a {
  padding: 8px 11px;
  border: 1px solid rgb(var(--border));
  border-radius: 999px;
  background: rgb(var(--bg-elevated));
  color: rgb(var(--fg));
  font-size: .85rem;
  text-decoration: none;
}
.showcase-jump a:hover { border-color: rgba(var(--accent), .45); }

.showcase-category { margin: 0 0 52px; scroll-margin-top: 90px; }
.showcase-category-heading {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 24px;
  margin-bottom: 14px;
}
.showcase-category-heading h2 { margin: 0 0 5px; }
.showcase-category-heading p { margin: 0; color: rgb(var(--muted)); max-width: 800px; }
.showcase-category-time { flex: 0 0 auto; color: rgb(var(--muted)); font-family: var(--mono); font-size: .8rem; text-align: right; }

.showcase-table-wrap {
  border: 1px solid rgb(var(--border));
  border-radius: var(--radius);
  overflow-x: auto;
  background: rgb(var(--bg-elevated));
}
.showcase-table { width: 100%; border-collapse: collapse; min-width: 1040px; table-layout: fixed; }
.showcase-table th,
.showcase-table td { padding: 14px 16px; border-bottom: 1px solid rgb(var(--border)); vertical-align: top; text-align: left; }
.showcase-table tbody tr:last-child td { border-bottom: 0; }
.showcase-table th { color: rgb(var(--muted)); font-size: .75rem; font-weight: 650; text-transform: uppercase; letter-spacing: .06em; background: rgb(var(--bg-soft)); }
.showcase-table th:nth-child(1) { width: 30%; }
.showcase-table th:nth-child(2) { width: 43%; }
.showcase-table th:nth-child(3),
.showcase-table th:nth-child(4),
.showcase-table th:nth-child(5) { width: 9%; white-space: nowrap; }
.showcase-expression > code { display: block; white-space: pre-wrap; overflow-wrap: anywhere; }
.showcase-try { display: inline-block; margin-top: 8px; font-size: .78rem; }
.showcase-result { min-width: 0; }
.showcase-math {
  width: 100%;
  max-width: 100%;
  overflow-x: auto;
  overflow-y: hidden;
  padding: 4px 0 8px;
  scrollbar-width: thin;
}
.showcase-math math { font-size: 1.08rem; }
.showcase-result-issue { margin-top: 6px; color: rgb(var(--muted)); font-size: .78rem; overflow-wrap: anywhere; }
.showcase-time { font-family: var(--mono); font-size: .82rem; white-space: nowrap; }
.showcase-result-source { margin-top: 8px; color: rgb(var(--muted)); font-size: .78rem; }
.showcase-result-source summary { cursor: pointer; user-select: none; }
.showcase-result-source code { display: block; margin-top: 7px; white-space: pre-wrap; overflow-wrap: anywhere; color: rgb(var(--muted)); }
.showcase-output-issue { background: rgba(var(--accent), .045); }
.showcase-error { background: rgba(var(--danger), .06); }
.showcase-error .showcase-math,
.showcase-error .showcase-result-issue { color: rgb(var(--danger)); }

.showcase-back-to-top {
  position: fixed;
  right: 24px;
  bottom: 24px;
  z-index: 50;
  min-height: 42px;
  padding: 0 14px;
  border: 1px solid rgb(var(--border-strong));
  border-radius: 999px;
  background: rgb(var(--bg-elevated));
  color: rgb(var(--fg));
  box-shadow: 0 10px 28px rgb(var(--shadow) / .12);
  font: 700 .82rem var(--sans);
  cursor: pointer;
}
.showcase-back-to-top:hover { border-color: rgb(var(--accent)); color: rgb(var(--accent)); }
.showcase-back-to-top[hidden] { display: none; }

@media (max-width: 980px) {
  .showcase-summary { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .showcase-stat { border-bottom: 1px solid rgb(var(--border)); }
  .showcase-stat:nth-child(2n) { border-right: 0; }
  .showcase-stat:last-child { grid-column: 1 / -1; border-right: 0; border-bottom: 0; }
  .showcase-category-heading { align-items: flex-start; flex-direction: column; gap: 8px; }
  .showcase-category-time { text-align: left; }
}

@media (max-width: 680px) {
  .showcase-intro { align-items: stretch; flex-direction: column; }
  .showcase-intro .btn { align-self: flex-start; }
  .showcase-summary { grid-template-columns: 1fr; }
  .showcase-stat,
  .showcase-stat:nth-child(2n),
  .showcase-stat:last-child { grid-column: auto; border-right: 0; border-bottom: 1px solid rgb(var(--border)); }
  .showcase-stat:last-child { border-bottom: 0; }
  .showcase-jump { margin-bottom: 28px; }
  .showcase-back-to-top { right: 14px; bottom: 14px; }
}