*,
*::before,
*::after {
  box-sizing: border-box;
}

html {
  font-size: 16px;
}

body {
  margin: 0;
  min-height: 100vh;
  background:
    radial-gradient(circle at top left, color-mix(in srgb, var(--color-action-primary-bg) 18%, transparent), transparent 30%),
    radial-gradient(circle at top right, color-mix(in srgb, var(--color-feedback-warning-bg) 50%, transparent), transparent 34%),
    linear-gradient(180deg, var(--color-bg-canvas), var(--color-bg-subtle));
  color: var(--color-text-primary);
  font-family: var(--ui-font-sans);
  direction: inherit;
  text-align: start;
}

.showcase-shell {
  width: min(1360px, calc(100% - 2rem));
  margin: 0 auto;
  padding: 2rem 0 5rem;
}

.showcase-topbar,
.showcase-hero,
.showcase-section {
  position: relative;
}

.showcase-topbar {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  margin-bottom: 1.5rem;
  padding: 1rem 1.25rem;
  border: var(--border-width-default) solid color-mix(in srgb, var(--color-border-default) 74%, transparent);
  border-radius: calc(var(--radius-lg) + 0.25rem);
  background: color-mix(in srgb, var(--color-surface-default) 88%, transparent);
  backdrop-filter: blur(18px);
  box-shadow: var(--shadow-raised);
}

.showcase-brand,
.showcase-topbar__controls,
.showcase-control-group,
.showcase-window__header,
.showcase-palette__item,
.showcase-token-list__item,
.showcase-mini-stats,
.showcase-row,
.showcase-window__dots,
.showcase-hero__meta,
.showcase-stat-strip,
.showcase-swatch-row {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.75rem;
}

.showcase-topbar__controls {
  justify-content: flex-end;
}

.showcase-brand__mark {
  display: inline-grid;
  place-items: center;
  width: 2.75rem;
  height: 2.75rem;
  border-radius: 0.9rem;
  background:
    linear-gradient(145deg, color-mix(in srgb, var(--color-action-primary-bg) 84%, white), var(--color-action-primary-bg-hover));
  color: var(--color-text-inverse);
  font-size: 1rem;
  font-weight: 700;
  box-shadow: 0 16px 32px -18px color-mix(in srgb, var(--color-action-primary-bg) 58%, transparent);
}

.showcase-theme-switch {
  display: inline-flex;
  flex-wrap: wrap;
  gap: var(--space-8);
  padding: var(--space-8);
  border-radius: var(--radius-full);
  background: color-mix(in srgb, var(--color-surface-default) 88%, transparent);
  border: var(--border-width-default) solid color-mix(in srgb, var(--color-border-default) 78%, transparent);
}

.showcase-theme-switch .ui-button {
  min-height: 2.75rem;
  padding: 0.75rem 1rem;
  font-size: var(--text-label-size);
  line-height: var(--text-label-line);
}

.showcase-language-switch {
  display: inline-flex;
  flex-wrap: wrap;
  gap: var(--space-8);
  padding: var(--space-8);
  border-radius: var(--radius-full);
  border: var(--border-width-default) solid color-mix(in srgb, var(--color-border-default) 78%, transparent);
  background: color-mix(in srgb, var(--color-surface-default) 88%, transparent);
  border-bottom: var(--border-width-default) solid color-mix(in srgb, var(--color-border-default) 78%, transparent);
}

.showcase-language-switch .ui-tab {
  min-height: 2.75rem;
  padding: 0.75rem 1rem;
}

.showcase-control-label,
.showcase-note {
  color: var(--color-text-secondary);
}

.showcase-theme-switch button[aria-pressed="true"] {
  background: var(--color-action-primary-bg);
  color: var(--color-action-primary-text);
}

.showcase-hero {
  display: grid;
  grid-template-columns: minmax(0, 1.15fr) minmax(22rem, 0.85fr);
  gap: 1.5rem;
  margin-bottom: 1.5rem;
  align-items: stretch;
}

.showcase-hero__content,
.showcase-hero__preview,
.showcase-section {
  border: var(--border-width-default) solid color-mix(in srgb, var(--color-border-default) 76%, transparent);
  border-radius: calc(var(--radius-lg) + 0.5rem);
  background: color-mix(in srgb, var(--color-surface-default) 92%, transparent);
  box-shadow: var(--shadow-raised);
}

.showcase-hero__content {
  display: flex;
  flex-direction: column;
  gap: 1.5rem;
  padding: clamp(1.5rem, 3vw, 2.5rem);
  overflow: hidden;
}

.showcase-hero__content::after {
  content: "";
  position: absolute;
  inset-inline-end: 2rem;
  top: 2rem;
  width: 10rem;
  height: 10rem;
  border-radius: 999px;
  background: color-mix(in srgb, var(--color-action-primary-bg) 16%, transparent);
  filter: blur(18px);
  pointer-events: none;
}

.showcase-hero__preview {
  padding: 1rem;
}

.showcase-eyebrow {
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--color-text-tertiary);
}

.showcase-stack {
  display: flex;
  flex-direction: column;
  gap: 1rem;
}

.showcase-stack--tight {
  gap: 0.35rem;
}

.showcase-stat-strip {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 0.75rem;
}

.showcase-stat,
.showcase-preview-card,
.showcase-mini-stat {
  display: flex;
  flex-direction: column;
  gap: 0.35rem;
  padding: 1rem;
  border: var(--border-width-default) solid color-mix(in srgb, var(--color-border-subtle) 88%, transparent);
  border-radius: var(--radius-md);
  background: color-mix(in srgb, var(--color-bg-subtle) 82%, transparent);
}

.showcase-window {
  height: 100%;
}

.showcase-window__header {
  justify-content: space-between;
}

.showcase-window__dots span {
  display: inline-block;
  width: 0.65rem;
  height: 0.65rem;
  border-radius: 999px;
  background: color-mix(in srgb, var(--color-text-tertiary) 38%, transparent);
}

.showcase-window__body,
.showcase-preview-panel,
.showcase-preview-form,
.showcase-side-stack,
.showcase-foundation-grid,
.showcase-layout-grid,
.showcase-delivery-grid {
  display: grid;
  gap: 1rem;
}

.showcase-preview-panel {
  padding: 1rem;
  border-radius: var(--radius-md);
  background:
    linear-gradient(135deg, color-mix(in srgb, var(--color-action-primary-bg) 10%, transparent), transparent),
    color-mix(in srgb, var(--color-bg-subtle) 88%, transparent);
  border: var(--border-width-default) solid color-mix(in srgb, var(--color-border-default) 76%, transparent);
}

.showcase-preview-grid,
.showcase-inline-grid,
.showcase-foundation-grid,
.showcase-layout-grid,
.showcase-delivery-grid {
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

.showcase-preview-form,
.showcase-preview-grid,
.showcase-composition-grid {
  display: grid;
  gap: 1rem;
}

.showcase-preview-form {
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

.showcase-mini-stats {
  align-items: stretch;
}

.showcase-mini-stat {
  flex: 1 1 0;
  min-width: 0;
}

.showcase-swatch-row {
  gap: 0.5rem;
}

.showcase-swatch {
  display: inline-block;
  width: 1rem;
  height: 1rem;
  border-radius: 999px;
  border: 1px solid transparent;
}

.showcase-swatch--lg {
  width: 2.25rem;
  height: 2.25rem;
  border-radius: 0.75rem;
}

.showcase-section {
  margin-top: 1.5rem;
  padding: 1.5rem;
}

.showcase-section__header {
  display: grid;
  grid-template-columns: minmax(0, 0.9fr) minmax(0, 1.1fr);
  gap: 1rem;
  align-items: end;
  margin-bottom: 1.25rem;
}

.showcase-panel {
  height: 100%;
  box-shadow: none;
  border-color: color-mix(in srgb, var(--color-border-default) 82%, transparent);
}

.showcase-palette,
.showcase-token-list {
  display: grid;
  gap: 0.875rem;
}

.showcase-palette__item,
.showcase-token-list__item {
  justify-content: space-between;
  align-items: center;
  padding: 0.875rem 1rem;
  border: var(--border-width-default) solid color-mix(in srgb, var(--color-border-subtle) 92%, transparent);
  border-radius: var(--radius-md);
  background: color-mix(in srgb, var(--color-bg-subtle) 84%, transparent);
}

.showcase-type-sample {
  display: grid;
  gap: 0.4rem;
  padding-bottom: 0.9rem;
  border-bottom: var(--border-width-default) solid var(--color-border-subtle);
}

.showcase-type-sample:last-child {
  padding-bottom: 0;
  border-bottom: 0;
}

.showcase-composition-grid {
  grid-template-columns: minmax(0, 1.1fr) minmax(20rem, 0.9fr);
}

.showcase-space-scale,
.showcase-layout-main,
.showcase-layout-content-grid {
  display: grid;
  gap: 0.75rem;
}

.showcase-space-item {
  display: grid;
  grid-template-columns: minmax(5.5rem, auto) minmax(0, 1fr);
  gap: 0.75rem;
  align-items: center;
}

.showcase-space-bar {
  display: inline-block;
  height: 0.65rem;
  border-radius: var(--radius-full);
  background: linear-gradient(90deg, var(--color-action-primary-bg), var(--color-action-primary-bg-hover));
}

.showcase-layout-demo {
  display: grid;
  grid-template-columns: minmax(5rem, 9rem) minmax(0, 1fr);
  gap: var(--space-16);
  padding: var(--space-16);
  border: var(--border-width-default) solid color-mix(in srgb, var(--color-border-subtle) 92%, transparent);
  border-radius: var(--radius-md);
  background: color-mix(in srgb, var(--color-bg-subtle) 84%, transparent);
}

.showcase-layout-block {
  display: grid;
  align-items: center;
  min-height: 3rem;
  padding: 0.7rem 0.85rem;
  border: var(--border-width-default) solid color-mix(in srgb, var(--color-border-default) 82%, transparent);
  border-radius: var(--radius-sm);
  background: color-mix(in srgb, var(--color-surface-default) 92%, transparent);
}

.showcase-layout-block--sidebar {
  min-height: 100%;
  align-content: start;
  background: color-mix(in srgb, var(--color-surface-raised) 95%, transparent);
}

.showcase-layout-block--toolbar {
  min-height: 2.5rem;
}

.showcase-side-stack {
  grid-template-rows: auto auto;
}

.showcase-panel--feature {
  background:
    radial-gradient(circle at top right, color-mix(in srgb, var(--color-action-primary-bg) 10%, transparent), transparent 38%),
    var(--color-surface-default);
}

.showcase-code {
  margin: 0;
  padding: 1rem;
  border-radius: var(--radius-md);
  background: var(--color-bg-subtle);
  border: var(--border-width-default) solid var(--color-border-subtle);
  color: var(--color-text-secondary);
  font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace;
  font-size: var(--text-code-size);
  line-height: var(--text-code-line);
  white-space: pre-wrap;
  overflow: auto;
}

@media (max-width: 1080px) {
  .showcase-hero,
  .showcase-composition-grid,
  .showcase-section__header {
    grid-template-columns: 1fr;
  }

  .showcase-preview-grid,
  .showcase-inline-grid,
  .showcase-preview-form,
  .showcase-foundation-grid,
  .showcase-layout-grid,
  .showcase-delivery-grid,
  .showcase-stat-strip {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (max-width: 760px) {
  .showcase-shell {
    width: min(100% - 1rem, 100%);
    padding-top: 1rem;
  }

  .showcase-topbar,
  .showcase-topbar__controls,
  .showcase-control-group,
  .showcase-palette__item,
  .showcase-token-list__item {
    align-items: stretch;
  }

  .showcase-topbar,
  .showcase-topbar__controls,
  .showcase-preview-grid,
  .showcase-inline-grid,
  .showcase-preview-form,
  .showcase-foundation-grid,
  .showcase-layout-grid,
  .showcase-delivery-grid,
  .showcase-stat-strip {
    grid-template-columns: 1fr;
  }

  .showcase-brand,
  .showcase-topbar__controls,
  .showcase-control-group {
    width: 100%;
  }

  .showcase-theme-switch {
    width: 100%;
  }

  .showcase-language-switch {
    width: 100%;
  }

  .showcase-theme-switch .ui-button {
    flex: 1 1 0;
  }

  .showcase-language-switch .ui-tab {
    flex: 1 1 0;
  }

  .showcase-layout-demo {
    grid-template-columns: 1fr;
  }
}