.lgsk {
  display: inline-flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0 var(--lgsk-spacing, 20px);
  max-inline-size: 100%;
  font: inherit;
  color: var(--lgsk-text, inherit);
  text-align: inherit;
}
.lgsk .lgsk-link, .lgsk .lgsk-button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  box-sizing: border-box;
  min-block-size: 44px;
  max-inline-size: 100%;
  padding: var(--lgsk-padding, 8px 0);
  border: 0;
  background: transparent;
  color: var(--lgsk-link, inherit);
  font: inherit;
  line-height: 1.5;
  text-align: inherit;
  overflow-wrap: anywhere;
  text-decoration: underline;
  text-underline-offset: 4px;
  cursor: pointer;
}
.lgsk :is(a, button, input):focus-visible {
  outline: 2px solid var(--lgsk-focus, currentColor);
  outline-offset: 4px;
}
.lgsk .lgsk-panel {
  box-sizing: border-box;
  inline-size: min(32rem, calc(100% - 32px));
  max-inline-size: calc(100% - 32px);
  max-block-size: calc(100dvh - 32px);
  margin: auto;
  padding: 24px;
  border: 1px solid var(--lgsk-border, currentColor);
  border-radius: var(--lgsk-radius, 12px);
  background-color: var(--lgsk-background, Canvas);
  color: var(--lgsk-text, CanvasText);
  font: inherit;
  font-size: 1rem;
  line-height: 1.5;
  text-align: start;
  overflow: auto;
  overscroll-behavior: contain;
}
.lgsk-panel::backdrop { background: rgb(0 0 0 / 45%); }
.lgsk .lgsk-panel h2 { margin: 0 0 16px; font-size: 1.25em; line-height: 1.3; color: inherit; }
.lgsk .lgsk-panel p { margin: 16px 0; color: inherit; }
.lgsk .lgsk-choice { display: flex; align-items: center; gap: 12px; min-block-size: 44px; margin-block: 24px 0; font: inherit; }
.lgsk .lgsk-choice input { appearance: auto; inline-size: 20px; block-size: 20px; flex: 0 0 20px; margin: 0; accent-color: var(--lgsk-link, auto); }
.lgsk .lgsk-panel .lgsk-state { color: var(--lgsk-secondary, inherit); }
.lgsk .lgsk-close { padding-inline: 12px; }
.lgsk ::selection { background: var(--lgsk-link, Highlight); color: var(--lgsk-background, HighlightText); }