.skt-consent {
  --skt-consent-layer: 2;
  --skt-consent-offset: var(--skt-space-6);
  --skt-consent-glass: color-mix(in srgb, var(--skt-color-white) 82%, transparent);
  --skt-consent-glass-edge: color-mix(in srgb, var(--skt-color-white) 44%, transparent);
  --skt-consent-hairline: color-mix(in srgb, var(--skt-color-brand-ink) 14%, transparent);
  --skt-consent-tint: color-mix(in srgb, var(--skt-color-brand-ink) 6%, transparent);
  --skt-consent-tint-hover: color-mix(in srgb, var(--skt-color-brand-ink) 14%, transparent);
  --skt-consent-scrim: color-mix(in srgb, var(--skt-color-brand-ink) 56%, transparent);
  --skt-consent-dialog-shadow: 0 32px 64px color-mix(in srgb, var(--skt-color-brand-ink) 36%, transparent);
  --skt-consent-trigger-shadow: 0 8px 24px color-mix(in srgb, var(--skt-color-brand-ink) 28%, transparent);
  --skt-consent-trigger-fill: color-mix(in srgb, var(--skt-color-brand-ink) 90%, transparent);
  --skt-consent-trigger-fill-hover: color-mix(in srgb, var(--skt-color-brand-primary) 76%, transparent);
  --skt-consent-dialog-width: 560px;
  --skt-consent-motion-dialog: 280ms;
  --skt-consent-motion-colour: 180ms;
  --skt-consent-rise: var(--skt-space-4);
  --skt-consent-switch-inline: 52px;
  --skt-consent-switch-block: 28px;
  --skt-consent-knob: 20px;
  --skt-consent-knob-inset: var(--skt-space-1);
  --skt-consent-knob-travel: var(--skt-space-6);
  --skt-consent-knob-colour: var(--skt-color-white);
}

.skt-consent__sr {
  position: absolute;
  inline-size: 1px;
  block-size: 1px;
  margin: -1px;
  padding: 0;
  overflow: hidden;
  white-space: nowrap;
  clip-path: inset(50%);
}

.skt-consent__trigger {
  --skt-focus-ring-color: var(--skt-color-brand-accent);
  position: fixed;
  inset-block-end: calc(var(--skt-consent-offset) + env(safe-area-inset-bottom, 0px));
  inset-inline-start: calc(var(--skt-consent-offset) + env(safe-area-inset-left, 0px));
  z-index: var(--skt-consent-layer);
  display: inline-flex;
  gap: var(--skt-space-2);
  align-items: center;
  min-inline-size: var(--skt-space-12);
  min-block-size: var(--skt-space-12);
  margin: 0;
  padding-block: calc(var(--skt-space-3) - var(--skt-border-width-default));
  padding-inline: calc(var(--skt-space-4) - var(--skt-border-width-default)) calc(var(--skt-space-5) - var(--skt-border-width-default));
  border: var(--skt-border-width-default) solid transparent;
  border-radius: var(--skt-radius-round);
  background-color: var(--skt-consent-trigger-fill);
  background-clip: padding-box;
  box-shadow: var(--skt-consent-trigger-shadow);
  color: var(--skt-color-white);
  font-family: var(--skt-font-family-body);
  font-size: 15px;
  font-weight: 500;
  line-height: 24px;
  cursor: pointer;
  transition: background-color var(--skt-consent-motion-colour) ease;
}

.skt-consent__trigger[hidden] {
  display: none;
}

.skt-consent__trigger::before {
  position: absolute;
  inset: calc(-1 * var(--skt-border-width-default));
  padding: var(--skt-border-width-default);
  border-radius: inherit;
  content: "";
  pointer-events: none;
  mask: linear-gradient(var(--skt-color-brand-ink) 0 0) content-box exclude, linear-gradient(var(--skt-color-brand-ink) 0 0);
  -webkit-backdrop-filter: brightness(3);
  backdrop-filter: brightness(3);
}

.skt-consent__trigger:hover {
  background-color: var(--skt-consent-trigger-fill-hover);
}

.skt-consent__trigger:focus-visible {
  outline: var(--skt-focus-ring-width) solid var(--skt-focus-ring-color);
  outline-offset: calc(-1 * var(--skt-space-1));
}

.skt-consent__trigger-icon {
  display: inline-flex;
  color: var(--skt-color-brand-accent);
}

.skt-consent__trigger-svg {
  inline-size: var(--skt-space-6);
  block-size: var(--skt-space-6);
}

.skt-consent__dialog {
  inline-size: min(var(--skt-consent-dialog-width), 100% - 2 * var(--skt-space-6));
  max-inline-size: none;
  max-block-size: calc(100vh - 2 * var(--skt-space-6));
  margin: auto;
  padding: 0;
  overflow: hidden;
  border: var(--skt-border-width-default) solid var(--skt-consent-glass-edge);
  border-radius: var(--skt-radius-lg);
  background: var(--skt-color-white);
  box-shadow: var(--skt-consent-dialog-shadow);
  color: var(--skt-color-brand-ink);
  font-family: var(--skt-font-family-body);
}

@supports (max-block-size: 100dvh) {
  .skt-consent__dialog {
    max-block-size: calc(100dvh - 2 * var(--skt-space-6));
  }
}
@supports (backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px)) {
  .skt-consent__dialog {
    background: var(--skt-consent-glass);
    -webkit-backdrop-filter: blur(24px) saturate(1.4);
    backdrop-filter: blur(24px) saturate(1.4);
  }
}
.skt-consent__dialog[open] {
  display: flex;
  flex-direction: column;
  opacity: 1;
  transform: none;
  transition: opacity var(--skt-consent-motion-dialog) ease, transform var(--skt-consent-motion-dialog) ease;
}

@starting-style {
  .skt-consent__dialog[open] {
    opacity: 0;
    transform: translateY(var(--skt-consent-rise));
  }
}
.skt-consent__dialog::backdrop {
  background: var(--skt-consent-scrim);
}

.skt-consent__scroll {
  display: flex;
  flex: 1 1 auto;
  flex-direction: column;
  min-block-size: 0;
  overflow: auto;
  overscroll-behavior: contain;
}

.skt-consent__head {
  display: flex;
  flex: none;
  gap: var(--skt-space-4);
  align-items: center;
  justify-content: space-between;
  padding: var(--skt-space-6);
  border-block-end: var(--skt-border-width-default) solid var(--skt-consent-hairline);
}

.skt-consent__title {
  margin: 0;
  color: var(--skt-color-brand-ink);
  font-family: var(--skt-font-family-heading);
  font-size: 20px;
  font-weight: 600;
  line-height: 28px;
}

.skt-consent__close {
  display: inline-flex;
  flex: none;
  align-items: center;
  justify-content: center;
  inline-size: var(--skt-space-10);
  block-size: var(--skt-space-10);
  margin: 0;
  padding: 0;
  border: 0;
  border-radius: var(--skt-radius-round);
  background: var(--skt-color-surface-soft);
  color: var(--skt-color-brand-ink);
  cursor: pointer;
  transition: background-color var(--skt-consent-motion-colour) ease;
}

@supports (backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px)) {
  .skt-consent__close {
    background: var(--skt-consent-tint);
  }
  .skt-consent__close:hover {
    background: var(--skt-consent-tint-hover);
  }
}
.skt-consent__close-icon {
  display: inline-flex;
}

.skt-consent__close-svg {
  inline-size: var(--skt-space-5);
  block-size: var(--skt-space-5);
}

.skt-consent__intro {
  flex: none;
  margin: 0;
  padding: var(--skt-space-5) var(--skt-space-6) 0;
  color: var(--skt-color-text-muted);
  font-size: 14px;
  line-height: 20px;
}

.skt-consent__rows {
  flex: 1 1 auto;
  min-block-size: 0;
  margin: 0;
  padding: 0;
  overflow: auto;
  overscroll-behavior: contain;
  list-style: none;
}

.skt-consent__row {
  padding: var(--skt-space-5) var(--skt-space-6);
}

.skt-consent__row + .skt-consent__row {
  border-block-start: var(--skt-border-width-default) solid var(--skt-consent-hairline);
}

.skt-consent__row-head {
  display: flex;
  gap: var(--skt-space-4);
  align-items: center;
  justify-content: space-between;
}

.skt-consent__label {
  display: inline-flex;
  gap: var(--skt-space-2);
  align-items: center;
  color: var(--skt-color-brand-ink);
  font-family: var(--skt-font-family-heading);
  font-size: 16px;
  font-weight: 600;
  line-height: 24px;
}

.skt-consent__chevron {
  display: inline-flex;
  flex: none;
  color: var(--skt-color-text-muted);
}

.skt-consent__chevron-svg {
  inline-size: var(--skt-space-4);
  block-size: var(--skt-space-4);
  stroke-width: 1.75;
}

.skt-consent__desc {
  margin: var(--skt-space-2) 0 0;
  color: var(--skt-color-text-muted);
  font-size: 14px;
  font-weight: 400;
  line-height: 20px;
}

.skt-consent__mark {
  color: var(--skt-color-brand-ink);
  font-weight: 500;
}

.skt-consent__foot {
  flex: none;
  padding: var(--skt-space-5) var(--skt-space-6);
  border-block-start: var(--skt-border-width-default) solid var(--skt-consent-hairline);
  font-size: 14px;
  line-height: 20px;
}

.skt-consent__policy {
  display: flex;
  align-items: center;
  inline-size: fit-content;
  color: inherit;
  font-size: 14px;
  font-weight: 500;
  line-height: 20px;
  text-decoration: none;
  transition: color var(--skt-consent-motion-colour) ease;
}

.skt-consent__policy:hover {
  color: var(--skt-color-brand-primary);
}

.skt-consent__policy:focus-visible {
  outline: var(--skt-focus-ring-width) solid var(--skt-focus-ring-color);
  outline-offset: var(--skt-focus-ring-offset);
}

.skt-consent__status {
  margin: 0;
  color: var(--skt-color-brand-ink);
  font-size: 14px;
  font-weight: 400;
  line-height: 20px;
}

.skt-consent__status:not(:empty) {
  margin-block-start: var(--skt-space-4);
}

.skt-consent__actions {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: var(--skt-space-3);
  margin-block-start: var(--skt-space-4);
}

.skt-consent__button {
  min-block-size: var(--skt-space-12);
  margin: 0;
  padding-block: 0;
  padding-inline: var(--skt-space-4);
  border: var(--skt-border-width-default) solid transparent;
  border-radius: var(--skt-radius-round);
  font-family: var(--skt-font-family-body);
  font-size: 14px;
  font-weight: 500;
  line-height: 20px;
  cursor: pointer;
  transition: background-color var(--skt-consent-motion-colour) ease, color var(--skt-consent-motion-colour) ease;
}

.skt-consent__button:focus-visible,
.skt-consent__close:focus-visible {
  outline: var(--skt-focus-ring-width) solid var(--skt-focus-ring-color);
  outline-offset: var(--skt-focus-ring-offset);
}

.skt-consent__button--accent {
  background: var(--skt-color-brand-accent);
  color: var(--skt-color-brand-ink);
}

.skt-consent__button--accent:hover {
  background: var(--skt-color-accent-hover);
}

.skt-consent__button--primary {
  background: var(--skt-color-brand-primary);
  color: var(--skt-color-white);
}

.skt-consent__button--primary:hover {
  background: var(--skt-color-brand-ink);
}

.skt-consent__switch {
  flex: none;
  inline-size: var(--skt-consent-switch-inline);
  block-size: var(--skt-consent-switch-block);
  margin: 0;
  border: 0;
  border-radius: var(--skt-radius-round);
  appearance: none;
  background-color: var(--skt-color-text-muted);
  background-image: radial-gradient(circle closest-side, var(--skt-consent-knob-colour) 96%, transparent 100%);
  background-repeat: no-repeat;
  background-position: var(--skt-consent-knob-inset) var(--skt-consent-knob-inset);
  background-size: var(--skt-consent-knob) var(--skt-consent-knob);
  cursor: pointer;
  transition: background-color var(--skt-consent-motion-colour) ease, background-position var(--skt-consent-motion-colour) ease;
}

.skt-consent__switch:checked {
  background-color: var(--skt-color-brand-primary);
  background-position: calc(var(--skt-consent-knob-inset) + var(--skt-consent-knob-travel)) var(--skt-consent-knob-inset);
}

.skt-consent__switch:disabled {
  cursor: default;
  opacity: 0.6;
}

.skt-consent__switch:focus-visible {
  outline: var(--skt-focus-ring-width) solid var(--skt-focus-ring-color);
  outline-offset: var(--skt-focus-ring-offset);
}

@media (width <= 640px) {
  .skt-consent {
    --skt-consent-offset: var(--skt-space-4);
  }
  .skt-consent__dialog {
    inline-size: auto;
    max-block-size: calc(100vh - 2 * var(--skt-space-4));
    margin: auto var(--skt-space-4) var(--skt-space-4);
  }
  .skt-consent__head,
  .skt-consent__row,
  .skt-consent__foot {
    padding: var(--skt-space-5);
  }
  .skt-consent__intro {
    padding: var(--skt-space-5) var(--skt-space-5) 0;
  }
  .skt-consent__actions {
    grid-template-columns: minmax(0, 1fr);
  }
}
@supports (max-block-size: 100dvh) {
  @media (width <= 640px) {
    .skt-consent__dialog {
      max-block-size: calc(100dvh - 2 * var(--skt-space-4));
    }
  }
}
@media (width <= 480px) {
  .skt-consent__trigger {
    justify-content: center;
    inline-size: var(--skt-space-12);
    block-size: var(--skt-space-12);
    padding: 0;
  }
  .skt-consent__trigger-label {
    position: absolute;
    inline-size: 1px;
    block-size: 1px;
    margin: -1px;
    padding: 0;
    overflow: hidden;
    white-space: nowrap;
    clip-path: inset(50%);
  }
}
@media (width > 640px) and (height < 480px), (width <= 640px) and (height < 600px) {
  .skt-consent__rows {
    flex: none;
    overflow: visible;
  }
}
@media (prefers-reduced-motion: reduce) {
  .skt-consent {
    --skt-consent-motion-dialog: 0ms;
    --skt-consent-motion-colour: 0ms;
    --skt-consent-rise: 0px;
  }
}
@media (forced-colors: active) {
  .skt-consent__trigger {
    border-color: ButtonText;
  }
  .skt-consent__trigger::before {
    display: none;
  }
  .skt-consent__switch {
    border: var(--skt-border-width-default) solid CanvasText;
    background-color: Canvas;
    background-image: radial-gradient(circle closest-side, CanvasText 96%, transparent 100%);
    forced-color-adjust: none;
  }
  .skt-consent__switch:checked {
    background-color: Highlight;
    background-image: radial-gradient(circle closest-side, HighlightText 96%, transparent 100%);
  }
  .skt-consent__switch:disabled {
    border-color: GrayText;
    background-image: radial-gradient(circle closest-side, GrayText 96%, transparent 100%);
    opacity: 1;
  }
  .skt-consent__switch:focus-visible {
    outline-color: Highlight;
  }
}