@layer ally.components {
  .example-topbar {
    position: sticky;
    inset-block-start: 0;
    z-index: 1000;
    border-block-end: 1px solid var(--ally-color-border);
    background: color-mix(in srgb, var(--ally-color-bg) 90%, transparent);
    backdrop-filter: blur(12px);
  }
  .example-brand { display:inline-flex;align-items:center;gap:.65rem;color:var(--ally-color-text);text-decoration:none; }
  .example-brand-mark { display:grid;place-items:center;inline-size:2.4rem;block-size:2.4rem;border-radius:.75rem;background:var(--ally-gradient-brand);color:#fff;font-weight:900; }
  .example-page { min-block-size:70vh; }
  .example-hero-grid { display:grid;gap:2rem;align-items:center; }
  .example-hero-art { padding:1rem;border:1px solid var(--ally-color-border);border-radius:var(--ally-radius-xl);background:var(--ally-gradient-soft);box-shadow:var(--ally-shadow); }
  .example-logo-row { display:flex;flex-wrap:wrap;gap:1rem;justify-content:space-between;color:var(--ally-color-muted);font-weight:800; }
  .example-metric { display:grid;gap:.35rem; }
  .example-metric strong { font-size:2rem;line-height:1;color:var(--ally-color-primary-active); }
  .example-dashboard-layout { display:grid;gap:1.25rem; }
  .example-sidebar { padding:1rem;border:1px solid var(--ally-color-border);border-radius:var(--ally-radius);background:var(--ally-color-surface); }
  .example-chart-bars { display:flex;align-items:end;gap:.65rem;min-block-size:12rem;padding:1rem;border-block-end:1px solid var(--ally-color-border); }
  .example-chart-bar { flex:1;min-inline-size:1.75rem;border-radius:.45rem .45rem 0 0;background:var(--ally-gradient-brand); }
  .example-form-shell { inline-size:min(100%,48rem);margin-inline:auto; }
  .example-token-grid { display:grid;grid-template-columns:repeat(auto-fit,minmax(12rem,1fr));gap:1rem; }
  .example-token { overflow:hidden;border:1px solid var(--ally-color-border);border-radius:var(--ally-radius); }
  .example-token-swatch { block-size:6rem; }
  .example-token-body { padding:1rem; }
  .example-section-heading { max-inline-size:46rem;margin-inline:auto;text-align:center; }
  @media (min-width:64rem) {
    .example-hero-grid { grid-template-columns:1.05fr .95fr; }
    .example-dashboard-layout { grid-template-columns:15rem minmax(0,1fr); }
  }
}