* {margin: 0;  padding: 0;}

:root {--background: #fff;  --foreground: #000;  --divider: #000000;  --overlay: #888;}


button.close-sheet {padding: 1rem;
  font-size: 3rem;
  border-radius: 1rem;
  border: 0.0625rem solid var(--divider);

  background: var(--background);
  color: var(--foreground);
  cursor: pointer;
}



#sheet {  position: fixed;  top: 0;  left: 0;  right: 0;  bottom: 0;  z-index: 2;  visibility: visible;  transition: opacity 0.5s, visibility 0.5s;}

#sheet[aria-hidden="true"] {  opacity: 0;  visibility: hidden;  pointer-events: none;}

#sheet .overlay {  position: absolute;  top: 0;  left: 0;  right: 0;  bottom: 0;  z-index: -1;  background:#000;  opacity: 0.7;}
#sheet .contents {  border-radius: 1rem 1rem 0 0;  background: var(--background);position: relative;overflow-y: hidden;--default-transitions: transform 0.5s, border-radius 0.5s;transition: var(--default-transitions);  transform: translateY(0);max-height: 100vh;  height: 30vh;  max-width: 70rem;box-sizing: border-box;padding: 1rem;padding-top: 2.2rem;}
#sheet .contents:not(.not-selectable) { transition: var(--default-transitions), height 0.5s; }
#sheet .contents.fullscreen {border-radius: 0;}
#sheet[aria-hidden="true"] .contents {transform: translateY(100%);}
#sheet .draggable-area {  position: absolute;  top: 0;  left: 0;  right: 0;  width: 3rem;  margin: auto;  padding-top: 1rem;  cursor: grab;}
#sheet .draggable-thumb {  width: inherit;  height: 0.25rem;  background: var(--divider);  border-radius: 0.125rem;}
#sheet .close-sheet {  position: absolute;  right: 0;  top: 0;  border: none;}
#sheet .body {  height: 100%;  overflow-y: auto;  gap: 1rem;}

.column { width: 100%}