/* Visible server content shares the app's theme while its controls load. */
.initial-page {
  min-height: 100vh;
  color: #fff;
  background: linear-gradient(to bottom right, #111827, #312e81);
  font-family: ui-sans-serif, system-ui, sans-serif;
  line-height: 1.5;
}
.initial-page *, .initial-page *::before, .initial-page *::after { box-sizing: border-box; }
.initial-header { padding: 1rem 0; border-bottom: 1px solid #1f2937; }
.initial-header-inner, .initial-main { width: 100%; max-width: 72rem; margin: 0 auto; padding: 0 1rem; }
.initial-header-inner { display: flex; align-items: center; justify-content: space-between; gap: 1rem; }
.initial-header img { display: block; object-fit: contain; }
.initial-header nav { display: flex; flex-wrap: wrap; gap: 1rem; }
.initial-header nav a { padding: .5rem 1rem; border-radius: .5rem; }
.initial-header span { color: #d1d5db; padding: .25rem .75rem; border: 1px solid #374151; border-radius: .5rem; }
.initial-main { padding-top: 2rem; padding-bottom: 4rem; }
.initial-breadcrumb { margin-bottom: 1.5rem; color: #60a5fa; }
.initial-page h1 { font-size: 1.875rem; font-weight: 700; text-align: center; margin: 0 0 2rem; }
.initial-content { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 2rem; }
.initial-content > p { grid-column: 1 / -1; color: #d1d5db; margin: 0; }
.initial-panel { padding: 2rem; border: 1px solid #374151; border-radius: 1.5rem; background: rgb(31 41 55 / .3); }
.initial-panel h2 { margin: 0 0 1rem; font-size: 1.5rem; font-weight: 700; }
.initial-panel p { color: #d1d5db; margin: .75rem 0; }
.initial-page ul { list-style: none; padding: 0; margin: 0; }
.initial-panel li { padding: .75rem 0; color: #d1d5db; }
.initial-panel li + li { border-top: 1px solid rgb(75 85 99 / .5); }
.initial-panel strong { color: #fff; font-weight: 600; }
.initial-page a { color: inherit; text-decoration: none; }
.initial-page a:hover, .initial-page a:focus-visible { color: #93c5fd; text-decoration: underline; }
.initial-content > ul, .initial-main > nav:not(.initial-breadcrumb) { grid-column: 1 / -1; }
.initial-content > ul { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 1rem; }
.initial-content > ul li { border: 1px solid #374151; border-radius: .75rem; padding: 1rem; background: rgb(31 41 55 / .3); }
.initial-main > nav:not(.initial-breadcrumb) { margin-top: 2rem; }
.initial-main > nav:not(.initial-breadcrumb) ul { display: flex; flex-wrap: wrap; gap: 1rem; }
@media (max-width: 767px) {
  .initial-header-inner { flex-wrap: wrap; }
  .initial-header nav { order: 3; width: 100%; gap: .25rem; }
  .initial-header nav a { padding: .5rem; }
  .initial-content { grid-template-columns: minmax(0, 1fr); gap: 1.5rem; }
  .initial-content > ul { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .initial-panel { padding: 1.5rem; }
  .initial-page h1 { font-size: 1.5rem; }
}