:root { --north-gap: 1rem; }
body { min-height: 100vh; }
.hero-shell { background: linear-gradient(135deg, var(--bs-tertiary-bg), var(--bs-body-bg)); border-bottom: 1px solid var(--bs-border-color); }
#demoCollection { transition: .2s ease; }
.view-cards { display:grid; grid-template-columns:repeat(auto-fit,minmax(240px,1fr)); gap:var(--north-gap); }
.view-list { display:flex; flex-direction:column; gap:.75rem; }
.view-list .demo-item { display:grid; grid-template-columns:140px 1fr; }
.view-table { display:grid; grid-template-columns:1fr; gap:0; border:1px solid var(--bs-border-color); border-radius:1rem; overflow:hidden; }
.view-table .demo-item { border-radius:0!important; box-shadow:none!important; border-bottom:1px solid var(--bs-border-color)!important; display:grid; grid-template-columns:160px 1fr; }
.view-table .demo-item:last-child { border-bottom:0!important; }
.view-compact { display:grid; grid-template-columns:repeat(auto-fit,minmax(190px,1fr)); gap:.5rem; }
.view-compact .card-body { padding:.75rem; }
.view-media { display:grid; grid-template-columns:repeat(auto-fill,minmax(180px,1fr)); gap:.75rem; }
.view-media .card-body { display:none; }
.media-thumb { aspect-ratio:16/9; display:grid; place-items:center; background:var(--bs-secondary-bg); color:var(--bs-secondary-color); font-weight:700; letter-spacing:.05em; border-radius:inherit; border-bottom-left-radius:0; border-bottom-right-radius:0; }
@media (max-width: 767.98px) {
  .view-switcher { width:100%; overflow:auto; justify-content:flex-start; }
  .view-list .demo-item, .view-table .demo-item { grid-template-columns:96px 1fr; }
  .view-cards { grid-template-columns:1fr; }
}
.north-widget{content-visibility:auto;contain-intrinsic-size:1px 280px}
.north-widget>.container{padding-top:.75rem;padding-bottom:.75rem}
.north-widget .card{border-radius:1rem;border-color:var(--bs-border-color);box-shadow:0 .35rem 1.2rem rgba(15,23,42,.055)}
.object-fit-cover{object-fit:cover}
@media(max-width:991.98px){main>.row>aside:empty{display:none}main>.row>aside:not(:empty){order:2}.hero-shell .display-5{font-size:clamp(2rem,8vw,3rem)}}

/* beta2 responsive/content hardening */
main>.row>aside:empty{display:none}
main>.row>section{min-width:0}
.north-block{min-width:0;overflow-wrap:anywhere}
.north-block .table-responsive{-webkit-overflow-scrolling:touch}
.north-block img,.north-block video{max-width:100%;height:auto}
.north-block .btn{max-width:100%;white-space:normal}
@media(max-width:575.98px){.north-block{margin-top:.75rem!important;margin-bottom:.75rem!important}.north-widget>.container{padding-left:.75rem;padding-right:.75rem}.hero-shell{overflow:hidden}}
@media(prefers-reduced-motion:reduce){*,*::before,*::after{scroll-behavior:auto!important;transition-duration:.01ms!important;animation-duration:.01ms!important;animation-iteration-count:1!important}}

/* beta4: responsive content/ACP primitives */
.north-view-toolbar{display:flex;flex-wrap:wrap;gap:.5rem;align-items:center;justify-content:space-between}.north-card-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(min(100%,240px),1fr));gap:1rem}.north-media-thumb{aspect-ratio:4/3;object-fit:cover;width:100%;border-radius:.75rem}.north-builder-zone{min-width:0}.north-scroll-x{overflow-x:auto;-webkit-overflow-scrolling:touch}@media(max-width:767.98px){.north-stack-mobile>*{width:100%!important}.north-hide-mobile{display:none!important}.north-card-grid{grid-template-columns:repeat(2,minmax(0,1fr));gap:.75rem}.table-responsive{font-size:.9rem}.btn-group.north-view-switch{width:100%;overflow-x:auto}.btn-group.north-view-switch>.btn{flex:0 0 auto}}@media(max-width:420px){.north-card-grid{grid-template-columns:1fr}}