/* Showcase-only layout (kept tiny and neutral) */
    body { padding: 1.75rem; max-width: 1050px; margin: 0 auto; color: #fff; font-family: 'Public Sans', Arial, sans-serif !important;}
    header { margin-bottom: 1.25rem; }
    h1 { margin-bottom: .25rem; }
    .lead { margin-bottom: 1rem; }

    .doc-section { margin-top: 1.75rem; }
    .doc-header { display:flex; align-items:center; justify-content:space-between; margin-bottom:.75rem; }
    .doc-title { font-size: 1.35rem; font-weight: 650; }
    .doc-sub { color: var(--ds-text-2); font-size:.95rem; }

    .demo { padding: 1rem; border-radius: var(--ds-radius-md); border:1px solid var(--ds-border); background: var(--ds-bg-1); }
    .demo + .demo { margin-top: .75rem; }

    code.block {
      display:block; white-space:pre-wrap;
      padding:.85rem 1rem; background:var(--ds-bg-2);
      border:1px solid var(--ds-border); border-radius: var(--ds-radius-sm);
      color: var(--ds-text-1);
    }

    .demo-row { display:flex; flex-wrap:wrap; gap:.5rem; align-items:center; }
    .demo-col { display:grid; gap:.5rem; }

    .label { font-size:.85rem; color:var(--ds-text-3); margin-bottom:.35rem; }
    .hr { height:1px; background:var(--ds-border); margin: 1.25rem 0; }

    /* Make panels visible by default in case JS doesn't load */
    .ds-tab-panel.fallback-active { display:block; }
    h1,h2,h3,h4,h5,h6 {
        font-family: "DSans", sans-serif;
    }