@dataengineeringformachinelearning/viking-ui 4.0.4 → 4.0.5

package/src/styles/surfaces/docs-showcase.scss

@@ -1,1153 +0,0 @@
-/* Docs showcase — premium marketing-aligned layout */
-
-/* ── Section tag (marketing parity) ── */
-.section-tag {
-  display: inline-block;
-  font-size: var(--viking-font-size-xs);
-  font-weight: var(--viking-font-weight-semibold);
-  letter-spacing: var(--viking-letter-spacing-caps);
-  text-transform: uppercase;
-  color: var(--viking-accent);
-}
-
-/* ── Page shell ── */
-.showcase-page {
-  display: flex;
-  flex-direction: column;
-  gap: var(--viking-page-section-gap, var(--viking-space-5));
-  padding-block: var(--viking-space-6);
-  position: relative;
-
-  &::before {
-    content: "";
-    position: absolute;
-    inset: 0;
-    pointer-events: none;
-    background:
-      linear-gradient(
-        90deg,
-        transparent,
-        color-mix(in srgb, var(--viking-accent) 10%, transparent),
-        transparent
-      );
-    opacity: 0.03;
-  }
-}
-
-@media (min-width: 768px) {
-  .showcase-page {
-    padding-block: var(--viking-space-8);
-  }
-}
-
-/* ── Hero ── */
-.showcase-hero {
-  display: grid;
-  gap: var(--viking-space-5);
-  align-items: center;
-  position: relative;
-
-  &::before {
-    content: "";
-    position: absolute;
-    inset: auto 0 -2px 0;
-    height: 1px;
-    background: linear-gradient(
-      90deg,
-      transparent,
-      color-mix(in srgb, var(--viking-accent) 35%, transparent),
-      transparent
-    );
-    opacity: 0.4;
-  }
-}
-
-@media (min-width: 960px) {
-  .showcase-hero {
-    grid-template-columns: 1.15fr 1fr;
-    gap: var(--viking-space-6);
-  }
-}
-
-.showcase-hero-copy {
-  display: flex;
-  flex-direction: column;
-  gap: var(--viking-space-3);
-  position: relative;
-
-  &::after {
-    content: "";
-    position: absolute;
-    top: -10px;
-    left: 0;
-    width: 22px;
-    height: 14px;
-    border-top: 1px solid color-mix(in srgb, var(--viking-accent) 40%, transparent);
-    border-left: 1px solid color-mix(in srgb, var(--viking-accent) 24%, transparent);
-    opacity: 0.5;
-    pointer-events: none;
-  }
-}
-
-.showcase-hero-badge {
-  display: inline-flex;
-  align-items: center;
-  gap: var(--viking-space-1);
-  width: fit-content;
-  padding: var(--viking-space-1) var(--viking-space-2);
-  border: 1px solid var(--viking-border);
-  border-radius: var(--viking-radius-pill);
-  background: var(--viking-surface);
-  box-shadow: var(--viking-shadow-sm);
-  position: relative;
-
-  &::after {
-    content: "";
-    position: absolute;
-    left: 1px;
-    right: 1px;
-    top: 0;
-    height: 1px;
-    background: color-mix(in srgb, var(--viking-accent) 35%, transparent);
-    opacity: 0.55;
-  }
-}
-
-.showcase-hero-badge-dot {
-  width: var(--viking-space-1);
-  height: var(--viking-space-1);
-  border-radius: 50%;
-  background: var(--viking-accent);
-  flex-shrink: 0;
-}
-
-.pulse-dot {
-  animation: showcasePulseDot 2s ease-in-out infinite;
-}
-
-@keyframes showcasePulseDot {
-  0%,
-  100% {
-    box-shadow: 0 0 0 0
-      color-mix(in srgb, var(--viking-accent) 60%, transparent);
-  }
-  50% {
-    box-shadow: 0 0 0 6px
-      color-mix(in srgb, var(--viking-accent) 0%, transparent);
-  }
-}
-
-@media (prefers-reduced-motion: reduce) {
-  .pulse-dot {
-    animation: none;
-  }
-}
-
-.showcase-hero-title {
-  margin: 0;
-  font-size: clamp(2rem, 4.5vw, 3rem);
-  font-weight: var(--viking-font-weight-bold, 800);
-  letter-spacing: var(--viking-letter-spacing-tight);
-  color: var(--viking-text);
-}
-
-.showcase-hero-lead {
-  margin: 0;
-  max-width: var(--viking-content-readable-max-width, 48rem);
-  font-size: var(--viking-font-size-lg);
-  line-height: var(--viking-line-height-relaxed);
-  color: var(--viking-text-muted);
-}
-
-.showcase-hero-actions {
-  display: flex;
-  flex-wrap: wrap;
-  gap: var(--viking-space-2);
-}
-
-.showcase-hero-panel {
-  display: flex;
-  flex-direction: column;
-  gap: var(--viking-space-2);
-  position: relative;
-  overflow: hidden;
-  border: 1px solid var(--viking-border);
-  border-radius: var(--viking-radius-lg);
-  padding: var(--viking-space-2);
-  background: var(--viking-surface);
-  box-shadow: var(--viking-shadow-sm);
-}
-
-.showcase-hero-panel::before {
-  content: "";
-  position: absolute;
-  inset: 0 0 auto;
-  height: 1px;
-  background: linear-gradient(
-    90deg,
-    transparent,
-    color-mix(in srgb, var(--viking-accent) 40%, transparent),
-    transparent
-  );
-  pointer-events: none;
-  opacity: 0.7;
-}
-
-/* ── Toolbar ── */
-.showcase-toolbar {
-  padding: var(--viking-card-padding);
-}
-
-.showcase-toolbar-row {
-  display: grid;
-  grid-template-columns: 1fr;
-  gap: var(--viking-space-2);
-}
-
-@media (min-width: 768px) {
-  .showcase-toolbar-row {
-    grid-template-columns: minmax(0, 2fr) minmax(12rem, 1fr);
-    align-items: end;
-  }
-}
-
-.showcase-search-field,
-.showcase-category-field {
-  margin: 0;
-}
-
-/* ── Category bar (sticky horizontal nav) ── */
-.showcase-category-bar {
-  position: sticky;
-  top: calc(
-    var(--viking-navbar-height, 64px) + var(--showcase-subnav-height, 52px)
-  );
-  z-index: 40;
-  border-block: 1px solid var(--viking-border);
-  background: color-mix(in srgb, var(--viking-bg) 94%, transparent);
-  backdrop-filter: blur(8px);
-}
-
-.showcase-category-bar-inner {
-  padding-block: var(--viking-space-2);
-}
-
-.showcase-category-bar-scroll {
-  display: flex;
-  gap: var(--viking-space-1);
-  overflow-x: auto;
-  scrollbar-width: none;
-  -webkit-overflow-scrolling: touch;
-  padding-bottom: var(--viking-space-half);
-}
-
-.showcase-category-bar-scroll::-webkit-scrollbar {
-  display: none;
-}
-
-.showcase-category-chip {
-  flex-shrink: 0;
-  padding: var(--viking-space-1) var(--viking-space-2);
-  border: 1px solid var(--viking-border);
-  border-radius: var(--viking-radius-pill);
-  background: var(--viking-surface);
-  color: var(--viking-text-muted);
-  font-size: var(--viking-font-size-sm);
-  font-weight: var(--viking-font-weight-medium);
-  text-decoration: none;
-  white-space: nowrap;
-  transition: var(--viking-transition-interactive);
-  min-height: var(--viking-control-height, 44px);
-  display: inline-flex;
-  align-items: center;
-}
-
-.showcase-category-chip:hover {
-  border-color: var(--viking-accent);
-  color: var(--viking-accent);
-}
-
-.showcase-category-chip.is-active {
-  border-color: var(--viking-accent);
-  background: color-mix(
-    in srgb,
-    var(--viking-accent) 10%,
-    var(--viking-surface)
-  );
-  color: var(--viking-accent);
-}
-
-/* ── Legacy section classes (other doc pages) ── */
-.showcase-category {
-  display: flex;
-  flex-direction: column;
-  gap: var(--viking-space-4);
-  padding: var(--viking-space-6) 0;
-  border-bottom: 1px solid var(--viking-border);
-  scroll-margin-top: calc(
-    var(--viking-navbar-height, 64px) + var(--showcase-subnav-height, 52px) +
-      56px
-  );
-}
-
-.showcase-category:last-child {
-  border-bottom: 0;
-}
-
-.showcase-category-header {
-  display: flex;
-  flex-direction: column;
-  gap: var(--viking-space-2);
-  padding-bottom: var(--viking-space-3);
-  border-bottom: 1px solid var(--viking-border-subtle);
-}
-
-.showcase-component-list {
-  display: flex;
-  flex-direction: column;
-  gap: var(--viking-space-4);
-}
-
-/* ── Category sections (component gallery) ── */
-.showcase-section {
-  display: flex;
-  flex-direction: column;
-  gap: var(--viking-space-4);
-  padding-block: var(--viking-space-5);
-  border-top: 1px solid color-mix(in srgb, var(--viking-accent) 20%, transparent);
-  border-bottom: 1px solid var(--viking-border);
-  scroll-margin-top: calc(
-    var(--viking-navbar-height, 64px) + var(--showcase-subnav-height, 52px) +
-      56px
-  );
-  position: relative;
-}
-
-.showcase-section::after {
-  content: "";
-  position: absolute;
-  top: 0;
-  left: 50%;
-  transform: translateX(-50%);
-  width: 80px;
-  height: 1px;
-  background: linear-gradient(
-    90deg,
-    transparent,
-    var(--viking-accent),
-    transparent
-  );
-  opacity: 0.25;
-}
-
-.showcase-section:last-child {
-  border-bottom: 0;
-}
-
-.showcase-section-compact {
-  padding-block: var(--viking-space-4);
-}
-
-.showcase-section-header {
-  display: flex;
-  flex-direction: column;
-  gap: var(--viking-space-1);
-  max-width: var(--viking-content-readable-max-width, 48rem);
-}
-
-.showcase-section-title {
-  margin: 0;
-  font-size: var(--viking-font-size-2xl);
-  font-weight: var(--viking-font-weight-bold);
-  letter-spacing: var(--viking-letter-spacing-tight);
-  color: var(--viking-text);
-}
-
-.showcase-section-desc {
-  margin: 0;
-  font-size: var(--viking-font-size-lg);
-}
-
-/* ── Component grid ── */
-.showcase-component-grid {
-  display: grid;
-  grid-template-columns: 1fr;
-  gap: var(--viking-space-3);
-}
-
-@media (min-width: 768px) {
-  .showcase-component-grid {
-    grid-template-columns: repeat(2, 1fr);
-  }
-}
-
-/* ── Component showcase card ── */
-.component-showcase-card {
-  display: flex;
-  flex-direction: column;
-  gap: var(--viking-space-3);
-  padding: var(--viking-card-padding);
-  scroll-margin-top: calc(
-    var(--viking-navbar-height, 64px) + var(--showcase-subnav-height, 52px) +
-      56px
-  );
-  transition:
-    transform var(--viking-duration-normal) var(--viking-ease-out),
-    border-color var(--viking-duration-normal) var(--viking-ease-out),
-    box-shadow var(--viking-duration-normal) var(--viking-ease-out);
-}
-
-.component-showcase-card-compact:hover {
-  transform: translateY(var(--viking-state-hover-lift, -4px));
-  border-color: var(--viking-accent-strong, var(--viking-accent));
-  box-shadow: var(--viking-shadow-hover);
-}
-
-.component-showcase-header {
-  display: flex;
-  flex-direction: column;
-  gap: var(--viking-space-1);
-}
-
-.component-showcase-title-block {
-  display: flex;
-  flex-direction: column;
-  gap: var(--viking-space-half);
-}
-
-.component-showcase-link {
-  color: inherit;
-  text-decoration: none;
-  transition: color var(--viking-duration-fast) var(--viking-ease-out);
-}
-
-.component-showcase-link:hover {
-  color: var(--viking-accent);
-}
-
-.component-showcase-desc {
-  margin: 0;
-  font-size: var(--viking-font-size-sm);
-  display: -webkit-box;
-  -webkit-line-clamp: 2;
-  -webkit-box-orient: vertical;
-  overflow: hidden;
-}
-
-.component-showcase-tags {
-  display: flex;
-  flex-wrap: wrap;
-  gap: var(--viking-space-half);
-}
-
-.component-showcase-preview {
-  padding: var(--viking-space-3);
-  background: color-mix(
-    in srgb,
-    var(--viking-bg) 30%,
-    var(--viking-surface-alt)
-  );
-  border: 1px solid var(--viking-border-subtle);
-  border-radius: var(--viking-radius-lg);
-  min-height: 7rem;
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  position: relative;
-  overflow: hidden;
-}
-
-.component-showcase-preview::before {
-  content: "";
-  position: absolute;
-  inset: 0 0 auto;
-  height: 1px;
-  background: linear-gradient(
-    90deg,
-    transparent,
-    color-mix(
-      in srgb,
-      var(--viking-metallic-200, var(--viking-border)) 22%,
-      transparent
-    ),
-    transparent
-  );
-  pointer-events: none;
-}
-
-.component-showcase-footer {
-  display: flex;
-  flex-wrap: wrap;
-  align-items: center;
-  justify-content: space-between;
-  gap: var(--viking-space-2);
-  padding-top: var(--viking-space-1);
-  border-top: 1px solid var(--viking-border-subtle);
-}
-
-.component-showcase-frameworks {
-  display: flex;
-  flex-wrap: wrap;
-  gap: var(--viking-space-half);
-}
-
-.component-framework-chip {
-  padding: var(--viking-space-half) var(--viking-space-1);
-  border-radius: var(--viking-radius-sm);
-  background: color-mix(
-    in srgb,
-    var(--viking-accent) 8%,
-    var(--viking-surface-alt)
-  );
-  border: 1px solid color-mix(in srgb, var(--viking-accent) 15%, transparent);
-  font-size: var(--viking-font-size-2xs, var(--viking-font-size-xs));
-  font-weight: var(--viking-font-weight-medium);
-  color: var(--viking-text-muted);
-}
-
-.component-showcase-cta {
-  display: inline-flex;
-  align-items: center;
-  gap: var(--viking-space-half);
-  font-size: var(--viking-font-size-sm);
-  font-weight: var(--viking-font-weight-semibold);
-  color: var(--viking-accent);
-  text-decoration: none;
-  min-height: var(--viking-control-height, 44px);
-  padding-inline: var(--viking-space-1);
-}
-
-.component-showcase-cta:hover {
-  text-decoration: underline;
-}
-
-.component-showcase-code {
-  display: flex;
-  flex-direction: column;
-  gap: var(--viking-space-1);
-}
-
-.component-showcase-code-label {
-  margin: 0;
-}
-
-.component-showcase-api {
-  padding-top: var(--viking-space-2);
-  border-top: 1px solid var(--viking-border-subtle);
-}
-
-/* ── Detail page ── */
-.component-detail-page {
-  gap: var(--viking-space-4);
-}
-
-.component-breadcrumb {
-  display: flex;
-  flex-wrap: wrap;
-  align-items: center;
-  gap: var(--viking-space-half);
-  font-size: var(--viking-font-size-sm);
-  color: var(--viking-text-muted);
-}
-
-.component-breadcrumb a {
-  color: var(--viking-accent);
-  text-decoration: none;
-}
-
-.component-breadcrumb a:hover {
-  text-decoration: underline;
-}
-
-.showcase-detail-header {
-  display: flex;
-  flex-direction: column;
-  gap: var(--viking-space-2);
-}
-
-.component-api-panel {
-  padding: var(--viking-card-padding);
-}
-
-.showcase-related-grid {
-  display: grid;
-  grid-template-columns: 1fr;
-  gap: var(--viking-space-2);
-}
-
-@media (min-width: 640px) {
-  .showcase-related-grid {
-    grid-template-columns: repeat(2, 1fr);
-  }
-}
-
-.showcase-related-card {
-  display: flex;
-  flex-direction: column;
-  gap: var(--viking-space-half);
-  padding: var(--viking-card-padding);
-  text-decoration: none;
-  color: inherit;
-  transition: var(--viking-transition-interactive);
-}
-
-.showcase-related-card:hover {
-  transform: translateY(var(--viking-state-hover-lift, -4px));
-  border-color: var(--viking-accent);
-  box-shadow: var(--viking-shadow-hover);
-}
-
-.showcase-detail-actions {
-  display: flex;
-  flex-wrap: wrap;
-  gap: var(--viking-space-2);
-  padding-top: var(--viking-space-3);
-  border-top: 1px solid var(--viking-border-subtle);
-}
-
-/* ── API reference cards ── */
-.api-reference {
-  display: flex;
-  flex-direction: column;
-  gap: var(--viking-space-3);
-}
-
-.api-reference-header {
-  display: flex;
-  flex-wrap: wrap;
-  align-items: flex-start;
-  justify-content: space-between;
-  gap: var(--viking-space-2);
-}
-
-.api-selectors {
-  display: flex;
-  flex-wrap: wrap;
-  gap: var(--viking-space-1);
-}
-
-.api-selector-chip {
-  display: inline-flex;
-  align-items: center;
-  gap: var(--viking-space-half);
-  padding: var(--viking-space-half) var(--viking-space-1);
-  border: 1px solid var(--viking-border);
-  border-radius: var(--viking-radius-pill);
-  font-size: var(--viking-font-size-xs);
-  color: var(--viking-text-muted);
-  background: var(--viking-surface-alt);
-}
-
-.api-prop-group {
-  display: flex;
-  flex-direction: column;
-  gap: var(--viking-space-2);
-}
-
-.api-prop-group-label {
-  margin: 0;
-}
-
-.api-prop-grid {
-  display: grid;
-  grid-template-columns: 1fr;
-  gap: var(--viking-space-2);
-}
-
-@media (min-width: 640px) {
-  .api-prop-grid {
-    grid-template-columns: repeat(2, 1fr);
-  }
-}
-
-@media (min-width: 1024px) {
-  .api-prop-grid {
-    grid-template-columns: repeat(3, 1fr);
-  }
-}
-
-.api-prop-card {
-  display: flex;
-  flex-direction: column;
-  gap: var(--viking-space-half);
-}
-
-.api-prop-name {
-  display: flex;
-  flex-wrap: wrap;
-  align-items: baseline;
-  gap: var(--viking-space-1);
-}
-
-.api-prop-type {
-  font-size: var(--viking-font-size-xs);
-  color: var(--viking-accent);
-  font-family: var(--viking-font-family-mono, ui-monospace, monospace);
-}
-
-.api-prop-default {
-  margin: 0;
-  font-size: var(--viking-font-size-xs);
-  color: var(--viking-text-muted);
-}
-
-.api-prop-desc {
-  margin: 0;
-  font-size: var(--viking-font-size-sm);
-}
-
-/* ── Landing page (index) ── */
-.landing-showcase {
-  display: flex;
-  flex-direction: column;
-  gap: var(--viking-page-section-gap, var(--viking-space-6));
-}
-
-.landing-hero {
-  display: grid;
-  gap: var(--viking-space-5);
-  align-items: center;
-  padding: var(--viking-space-5) 0 var(--viking-space-3);
-}
-
-@media (min-width: 960px) {
-  .landing-hero {
-    grid-template-columns: minmax(0, 1.02fr) minmax(24rem, 0.98fr);
-    gap: var(--viking-space-6);
-  }
-}
-
-.landing-hero-copy {
-  display: flex;
-  flex-direction: column;
-  gap: var(--viking-space-3);
-  min-width: 0;
-}
-
-.landing-hero-copy > .viking-heading {
-  max-width: 18ch;
-}
-
-.landing-hero-copy > .viking-text-muted {
-  max-width: var(--viking-content-readable-max-width, 48rem);
-}
-
-.landing-hero-badge {
-  display: inline-flex;
-  align-items: center;
-  gap: var(--viking-space-1);
-  width: fit-content;
-  padding: var(--viking-space-1) var(--viking-space-2);
-  border: 1px solid var(--viking-border);
-  border-radius: var(--viking-radius-pill);
-  background: var(--viking-surface);
-  font-size: var(--viking-font-size-sm);
-  font-weight: var(--viking-font-weight-semibold);
-  letter-spacing: var(--viking-letter-spacing-wide);
-}
-
-.landing-hero-badge-dot {
-  width: var(--viking-space-1);
-  height: var(--viking-space-1);
-  border-radius: 50%;
-  background: var(--viking-accent);
-  box-shadow: 0 0 0 2px
-    color-mix(in srgb, var(--viking-accent) 30%, transparent);
-}
-
-.landing-hero-actions {
-  display: flex;
-  flex-wrap: wrap;
-  gap: var(--viking-space-2);
-}
-
-.landing-stats {
-  display: grid;
-  grid-template-columns: repeat(2, 1fr);
-  gap: var(--viking-space-3);
-}
-
-@media (min-width: 640px) {
-  .landing-stats {
-    grid-template-columns: repeat(4, 1fr);
-  }
-}
-
-.landing-stat {
-  padding: var(--viking-card-padding-compact);
-  border: 1px solid var(--viking-border);
-  border-radius: var(--viking-radius);
-  background: var(--viking-surface-recipe, var(--viking-surface));
-  min-width: 0;
-  box-shadow: var(--viking-shadow-xs);
-}
-
-.landing-section {
-  display: flex;
-  flex-direction: column;
-  gap: var(--viking-space-3);
-  padding-block: var(--viking-space-4);
-  border-top: 1px solid var(--viking-border-subtle);
-}
-
-.landing-section-header {
-  display: flex;
-  flex-direction: column;
-  gap: var(--viking-space-1);
-  max-width: var(--viking-content-readable-max-width, 48rem);
-}
-
-.landing-section-header-row {
-  max-width: none;
-  justify-content: space-between;
-  gap: var(--viking-space-3);
-}
-
-@media (min-width: 820px) {
-  .landing-section-header-row {
-    flex-direction: row;
-    align-items: end;
-  }
-}
-
-.landing-feature-grid {
-  display: grid;
-  grid-template-columns: 1fr;
-  gap: var(--viking-space-3);
-}
-
-@media (min-width: 768px) {
-  .landing-feature-grid {
-    grid-template-columns: repeat(3, 1fr);
-  }
-}
-
-.landing-preview-panel {
-  padding: var(--viking-card-padding);
-  border: 1px solid var(--viking-border-strong);
-  border-radius: var(--viking-radius-lg);
-  background: var(--viking-surface-recipe, var(--viking-surface));
-  box-shadow: var(--viking-shadow-lg);
-  display: flex;
-  flex-direction: column;
-  gap: var(--viking-space-2);
-  position: relative;
-  overflow: hidden;
-}
-
-.landing-preview-panel::before {
-  content: "";
-  position: absolute;
-  inset: 0 0 auto 0;
-  height: 1px;
-  background: linear-gradient(
-    90deg,
-    transparent,
-    color-mix(in srgb, var(--viking-accent) 40%, transparent),
-    transparent
-  );
-}
-
-.landing-preview-toolbar,
-.landing-preview-form {
-  display: flex;
-  flex-direction: column;
-  gap: var(--viking-space-3);
-}
-
-.landing-preview-toolbar {
-  flex-direction: row;
-  justify-content: space-between;
-  align-items: center;
-}
-
-.landing-preview-grid {
-  display: grid;
-  grid-template-columns: 1fr;
-  gap: var(--viking-space-3);
-}
-
-@media (min-width: 560px) {
-  .landing-preview-grid {
-    grid-template-columns: repeat(2, 1fr);
-  }
-}
-
-.landing-framework-strip {
-  display: flex;
-  flex-wrap: wrap;
-  gap: var(--viking-space-2);
-  padding: var(--viking-space-3) 0;
-}
-
-.landing-framework-chip {
-  display: inline-flex;
-  align-items: center;
-  gap: var(--viking-space-half);
-  padding: var(--viking-space-1) var(--viking-space-2);
-  border: 1px solid var(--viking-border);
-  border-radius: var(--viking-radius-pill);
-  background: var(--viking-surface-alt);
-  font-size: var(--viking-font-size-sm);
-  font-weight: var(--viking-font-weight-medium);
-}
-
-.landing-framework-chip code {
-  font-size: var(--viking-font-size-xs);
-  color: var(--viking-accent);
-}
-
-.landing-quickstart-grid {
-  display: grid;
-  grid-template-columns: 1fr;
-  gap: var(--viking-space-3);
-  align-items: start;
-}
-
-@media (min-width: 980px) {
-  .landing-quickstart-grid {
-    grid-template-columns: minmax(16rem, 0.8fr) minmax(0, 1.2fr);
-  }
-}
-
-.landing-quickstart-steps {
-  display: flex;
-  flex-direction: column;
-  gap: var(--viking-space-2);
-  padding: var(--viking-card-padding);
-}
-
-.landing-step-list {
-  display: flex;
-  flex-direction: column;
-  gap: var(--viking-space-1);
-  margin: 0;
-  padding-left: var(--viking-space-3);
-}
-
-.landing-quickstart-code {
-  min-width: 0;
-}
-
-.landing-component-grid,
-.landing-framework-grid {
-  display: grid;
-  grid-template-columns: 1fr;
-  gap: var(--viking-space-2);
-}
-
-@media (min-width: 720px) {
-  .landing-component-grid {
-    grid-template-columns: repeat(2, 1fr);
-  }
-
-  .landing-framework-grid {
-    grid-template-columns: repeat(2, 1fr);
-  }
-}
-
-@media (min-width: 1080px) {
-  .landing-component-grid {
-    grid-template-columns: repeat(3, 1fr);
-  }
-
-  .landing-framework-grid {
-    grid-template-columns: repeat(4, 1fr);
-  }
-}
-
-.landing-component-card,
-.landing-framework-card {
-  display: flex;
-  flex-direction: column;
-  gap: var(--viking-space-1);
-  padding: var(--viking-card-padding);
-  color: inherit;
-  text-decoration: none;
-  transition:
-    transform var(--viking-duration-normal) var(--viking-ease-out),
-    border-color var(--viking-duration-normal) var(--viking-ease-out),
-    box-shadow var(--viking-duration-normal) var(--viking-ease-out);
-}
-
-.landing-component-card:hover,
-.landing-framework-card:hover {
-  transform: translateY(var(--viking-state-hover-lift, -4px));
-  border-color: var(--viking-accent);
-  box-shadow: var(--viking-shadow-hover);
-}
-
-.landing-component-card p,
-.landing-framework-card span:last-child {
-  margin: 0;
-}
-
-.landing-playground-band {
-  display: grid;
-  grid-template-columns: 1fr;
-  gap: var(--viking-space-3);
-  align-items: center;
-  padding: var(--viking-space-4);
-  border: 1px solid var(--viking-border);
-  border-radius: var(--viking-radius-lg);
-  background: var(--viking-surface-recipe, var(--viking-surface));
-  box-shadow: var(--viking-shadow-md);
-}
-
-@media (min-width: 900px) {
-  .landing-playground-band {
-    grid-template-columns: 1fr minmax(18rem, 0.72fr);
-  }
-}
-
-.landing-playground-copy,
-.landing-playground-preview {
-  display: flex;
-  flex-direction: column;
-  gap: var(--viking-space-2);
-}
-
-.landing-playground-preview {
-  padding: var(--viking-card-padding);
-}
-
-.component-detail-link {
-  display: inline-block;
-  margin-top: var(--viking-space-1);
-  font-size: var(--viking-font-size-sm);
-  color: var(--viking-accent);
-  text-decoration: none;
-}
-
-.component-detail-link:hover {
-  text-decoration: underline;
-}
-
-/* ── Demo helpers ── */
-.showcase-auth-panel {
-  max-width: 24rem;
-  padding: var(--viking-space-3);
-  border: 1px solid var(--viking-border);
-  border-radius: var(--viking-radius-lg);
-  background: var(--viking-surface-alt);
-  display: flex;
-  flex-direction: column;
-  gap: var(--viking-space-2);
-}
-
-.showcase-search-palette {
-  max-width: 36rem;
-  display: flex;
-  flex-direction: column;
-  border: 1px solid var(--viking-border-strong);
-  border-radius: var(--viking-radius-lg);
-  background: var(--viking-surface-raised, var(--viking-surface));
-  box-shadow: var(--viking-shadow-lg);
-  overflow: hidden;
-  isolation: isolate;
-}
-
-.viking-search-group-label-static {
-  margin: var(--viking-space-1) 0 var(--viking-space-half);
-  padding: 0 var(--viking-space-1);
-  font-size: var(--viking-font-size-2xs, var(--viking-font-size-xs));
-  font-weight: var(--viking-font-weight-semibold, 600);
-  letter-spacing: var(--viking-letter-spacing-caps);
-  text-transform: uppercase;
-  color: var(--viking-text-muted);
-}
-
-.showcase-search-palette-header {
-  display: flex;
-  align-items: center;
-  gap: var(--viking-space-1);
-  padding: var(--viking-space-2);
-  border-bottom: 1px solid var(--viking-border);
-  background: color-mix(
-    in srgb,
-    var(--viking-bg) 26%,
-    var(--viking-surface-raised)
-  );
-}
-
-.showcase-search-icon {
-  color: var(--viking-text-muted);
-  font-size: var(--viking-font-size-lg);
-}
-
-.showcase-search-input {
-  flex: 1;
-  border: none;
-  background: transparent;
-  color: var(--viking-text);
-  font: inherit;
-  outline: none;
-}
-
-.showcase-search-palette-body {
-  padding: var(--viking-space-2);
-}
-
-.showcase-search-palette-footer {
-  padding: var(--viking-space-1) var(--viking-space-2);
-  border-top: 1px solid var(--viking-border);
-  font-size: calc(var(--viking-font-size) * 0.85);
-  color: var(--viking-text-muted);
-  text-align: center;
-}
-
-.showcase-chart-demo {
-  width: 100%;
-  max-width: 24rem;
-  padding: var(--viking-space-2);
-  border: 1px solid var(--viking-border);
-  border-radius: var(--viking-radius);
-  background: color-mix(in srgb, var(--viking-surface) 96%, var(--viking-bg));
-}
-
-.showcase-chart-line {
-  fill: none;
-  stroke: var(--viking-accent);
-  stroke-width: 2;
-}
-
-.showcase-chart-area {
-  fill: color-mix(in srgb, var(--viking-accent) 20%, transparent);
-  stroke: none;
-}
-
-.showcase-modal-demo {
-  position: relative;
-  padding: var(--viking-space-4);
-  border-radius: var(--viking-radius-lg);
-  background: var(--viking-surface-alt);
-  overflow: hidden;
-}
-
-.showcase-modal-backdrop {
-  position: absolute;
-  inset: 0;
-  background: color-mix(in srgb, var(--viking-bg) 60%, transparent);
-}
-
-.showcase-modal-panel {
-  position: relative;
-  z-index: 1;
-  max-width: 28rem;
-  margin: 0 auto;
-}
-
-.showcase-toast-demo {
-  max-width: 24rem;
-  border-left: 3px solid var(--viking-success);
-}
-
-.showcase-icon-demo {
-  display: inline-flex;
-  align-items: center;
-  justify-content: center;
-  width: var(--viking-space-5);
-  height: var(--viking-space-5);
-  color: var(--viking-accent);
-  font-size: var(--viking-font-size-lg);
-}