html {
  height: 100dvh;
  width: 100svw;
  overflow: hidden;
  margin: 0;
  padding: 0;
  color-scheme: light dark;
  box-sizing: border-box;
}
html.orb-theme-light {
  color-scheme: light;
}
html.orb-theme-dark {
  color-scheme: dark;
}

body {
  display: grid;
  margin: 0;
  padding: 0;
  height: 100%;
  width: 100%;
  overflow-x: hidden;
  overflow-y: auto;
  box-sizing: border-box;
  transform: translateZ(0);
  color: light-dark(var(--orb-neutral-925), var(--orb-neutral-75));
  background-color: light-dark(var(--orb-neutral-75), var(--orb-neutral-925));
  grid-template: "head head head" auto "left body right" 1fr "foot foot foot" auto/auto 1fr auto;
  --border-color: light-dark(var(--orb-neutral-400), var(--orb-neutral-800));
}
body:has(> header) {
  --head-height: 64px;
}
body:has(> footer) {
  --foot-height: 48px;
}
body > header {
  background-color: inherit;
  flex-shrink: 0;
  grid-area: head;
  position: sticky;
  z-index: 10;
  top: 0;
  box-sizing: border-box;
  padding-inline: var(--orb-spacing-sm);
  border-bottom: solid 1px var(--border-color);
  height: var(--head-height);
}
body > main {
  grid-area: body;
  box-sizing: border-box;
  padding: var(--orb-spacing-xs) var(--orb-spacing-sm);
}
body > footer {
  background-color: inherit;
  position: sticky;
  bottom: 0;
  grid-area: foot;
  flex-shrink: 0;
  z-index: 10;
  box-sizing: border-box;
  border-top: solid 1px var(--border-color);
  padding-inline: var(--orb-spacing-sm);
  height: var(--foot-height);
}
body > aside {
  position: sticky;
  top: var(--head-height, 0px);
  height: 100%;
  max-height: calc(100vh - var(--head-height, 0px) - var(--foot-height, 0px));
  overflow-y: auto;
  overflow-x: hidden;
  box-sizing: border-box;
  scrollbar-width: thin;
  padding: var(--orb-spacing-xs);
}
body > aside:not(main + aside) {
  grid-area: left;
  border-right: solid 1px var(--border-color);
}
body > main + aside {
  grid-area: right;
  border-left: solid 1px var(--border-color);
}