body { margin: 0; font: 14px/1.5 -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif; background: #0b1020; color: #e5e7eb; }
main { max-width: 1080px; margin: 20px auto 32px; padding: 0 16px; }
/* two edge-anchored crops of one lockup: the wordmark hugs the left,
   the shapes the right, and only the purple middle stretches */
.brand-banner {
  --brand-h: 130px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  height: calc(var(--brand-h) + 20px);
  border: 1px solid #7a81ff;
  border-radius: 14px;
  background: #7a81ff;
  padding: 0 10px;
}
.brand-mark {
  height: var(--brand-h);
  background: url("./images/logo-compact.svg") no-repeat;
  background-size: auto 100%;
}
.brand-mark-word { width: calc(var(--brand-h) * 2.02); background-position: left center; }
.brand-mark-shapes { width: calc(var(--brand-h) * 1.4); background-position: right center; }
@media (max-width: 640px) {
  .brand-banner { --brand-h: 96px; }
}
p { color: #dde3ff; font-size: 17px; line-height: 1.6; margin: 14px 0 0; }
.intro { text-align: center; font-size: 19px; margin-top: 44px; }
.grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; margin-top: 20px; }
.grid-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
a.card { position: relative; display: block; text-decoration: none; color: inherit; border: 1px solid #374151; border-radius: 12px; padding: 12px; background: #111827; transition: border-color 0.15s ease, background 0.15s ease, box-shadow 0.15s ease; }

/* the tutorial stands apart from the numbered demos */
.grid-sep { grid-column: 1 / -1; display: flex; justify-content: center; margin: 0; }
.grid-sep span { font-size: 9px; line-height: 1; color: #7a81ff; opacity: 0.65; }

/* portal hover: a steamed-glass glimpse of the page behind the card */
a.card.card-portal { overflow: hidden; }
.card-portal > * { position: relative; }
.card-portal::before {
  content: "";
  position: absolute;
  inset: -16px;
  background:
    linear-gradient(180deg, rgba(11, 16, 32, var(--scrim-top, 0.5)) 0%, rgba(11, 16, 32, var(--scrim-bot, 0.78)) 100%),
    var(--preview) center / cover no-repeat;
  filter: blur(6px) saturate(1.05);
  opacity: 0;
  transform: scale(1.09);
  transition: opacity 0.55s ease, transform 1.2s cubic-bezier(0.16, 0.6, 0.2, 1);
  pointer-events: none;
}
a.card.card-portal:hover::before { opacity: 1; transform: scale(1.02); }
a.card:hover { border-color: #7a81ff; background: #1f2937; box-shadow: 0 0 0 1px rgba(122, 129, 255, 0.25), 0 0 16px rgba(122, 129, 255, 0.25); }
a.card.card-lead { grid-column: 1 / -1; }
.name { display: flex; align-items: center; gap: 8px; font-weight: 700; font-size: 16px; margin-bottom: 6px; }
a.card code { font: 11.5px/1 "SF Mono", ui-monospace, "Cascadia Mono", Menlo, Consolas, monospace; padding: 1px 5px; border-radius: 4px; background: #1f2547; color: #b9c0ff; }

.card-ts-logo { height: 16px; width: auto; display: inline-block; vertical-align: middle; opacity: 0.85; }

.step { display: inline-flex; align-items: center; justify-content: center; min-width: 20px; height: 20px; padding: 0 6px; font-size: 12px; font-weight: 700; border-radius: 999px; background: #2b2f66; color: #b9c0ff; border: 1px solid #7a81ff; box-shadow: 0 0 0 1px rgba(122, 129, 255, 0.2), 0 0 8px rgba(122, 129, 255, 0.28); }
.step-hint { text-transform: uppercase; letter-spacing: 0.06em; font-size: 10px; color: #aeb5e9; margin-left: 2px; }

.footnote { margin-top: 18px; font-size: 12px; color: #7a86b4; }

.section-label { display: flex; align-items: center; gap: 14px; margin: 40px 0 12px; font-size: 19px; font-weight: 800; text-transform: uppercase; letter-spacing: 0.14em; color: #b9c0ff; }
.section-label::after { content: ""; flex: 1; height: 1px; background: linear-gradient(90deg, #2b345c, transparent); }


.impressum { margin-top: 56px; padding-top: 20px; border-top: 1px solid #1e2742; text-align: center; color: #6b76a8; }
.impressum-row { display: flex; align-items: center; justify-content: center; gap: 8px; font-size: 13px; }
.impressum-mark { font-weight: 700; color: #b9c0ff; letter-spacing: 0.01em; }
.impressum-ver { font: 11.5px/1 "SF Mono", ui-monospace, "Cascadia Mono", Menlo, Consolas, monospace; padding: 2px 7px; border-radius: 999px; background: #1f2547; color: #b9c0ff; }
.impressum-sep { color: #3a4575; }
.impressum-line { color: #6b76a8; font-size: 12.5px; line-height: 1.6; margin: 8px 0 0; }
.impressum-line a { color: #8b93c8; text-decoration: none; border-bottom: 1px solid #2b345c; transition: color 0.15s ease, border-color 0.15s ease; }
.impressum-line a:hover { color: #b9c0ff; border-color: #7a81ff; }

@media (max-width: 860px) {
	.grid { grid-template-columns: 1fr; }
}