@layer brand, tokens, density, elements, values, brand-mark, spacing, cut-edges, actions, panels, marks, roles, headings, regions, authored-text, shell, absence, layouts, motion, states, embed, tables, truncation, print, without-fills, hidden;
@layer shell {
  @media screen {
    @container (inline-size >= 720px) {
      .kit-layout-shell .kit-region-page > .kit-role-side-panel {
        grid-column: -2;
        grid-row: 2 / -1;
        position: sticky;
        inset-block-start: calc(var(--_kit-shell-strip-height) + var(--kit-strip-growth, 0px));
        align-self: start;
        block-size: calc(100dvh - var(--_kit-shell-strip-height) - var(--kit-strip-growth, 0px));
      }
    }
  }
  @media screen {
    @container (inline-size >= 720px) {
      .kit-layout-shell .kit-region-page > .kit-role-side-panel:is(.kit-region-rail, .kit-region-rail ~ *, :has(~ .kit-region-rail), .kit-layout-shell:has(> .kit-region-chrome > .kit-region-rail) .kit-region-page > *) {
        grid-row: 1 / -1;
        inset-block-start: 0;
        block-size: 100dvh;
      }
    }
  }
}