:root {
  --tsc-consent-ink: #20201d;
  --tsc-consent-text: #363734;
  --tsc-consent-muted: #686961;
  --tsc-consent-paper: #fffdf7;
  --tsc-consent-canvas: #f4f1e8;
  --tsc-consent-line: #d8d3c5;
  --tsc-consent-yellow: #f3dda0;
  --tsc-consent-blue: #cfe4f4;
  --tsc-consent-green: #d7e9dc;
  --tsc-consent-coral: #a84f42;
  --tsc-consent-focus: #456f9b;
  --tsc-consent-hand:
    "TSC Patrick Hand", "Patrick Hand", "Comic Sans MS", "Bradley Hand",
    cursive;
  --tsc-consent-script:
    "TSC Caveat", "Caveat", "Comic Sans MS", "Bradley Hand", cursive;
}

html.tsc-consent-pending,
html.tsc-consent-pending body {
  overflow: hidden !important;
  overscroll-behavior: none;
}

html.tsc-consent-pending::before {
  position: fixed;
  z-index: 9998;
  inset: 0;
  content: "";
  background:
    linear-gradient(rgb(32 32 29 / 38%), rgb(32 32 29 / 38%)),
    radial-gradient(
      circle at 1px 1px,
      rgb(255 253 247 / 14%) 1px,
      transparent 1.25px
    );
  background-size: auto, 18px 18px;
}

html.tsc-consent-pending body > :not(.tsc-consent-root) {
  pointer-events: none !important;
  user-select: none !important;
}

.tsc-consent-root {
  position: fixed;
  z-index: 10000;
  inset: 0;
  display: grid;
  align-items: end;
  justify-items: end;
  padding:
    max(18px, env(safe-area-inset-top))
    max(18px, env(safe-area-inset-right))
    max(18px, env(safe-area-inset-bottom))
    max(18px, env(safe-area-inset-left));
  pointer-events: none;
  font-family: var(--tsc-consent-hand);
}

.tsc-consent-root[hidden] {
  display: none;
}

.tsc-consent-panel {
  position: relative;
  width: min(680px, 100%);
  max-height: calc(
    100svh - max(36px, env(safe-area-inset-top) + env(safe-area-inset-bottom))
  );
  overflow: auto;
  border: 2px solid var(--tsc-consent-ink);
  border-radius: 11px 8px 12px 9px;
  padding: clamp(22px, 4vw, 34px);
  color: var(--tsc-consent-text);
  background:
    linear-gradient(
      90deg,
      transparent 0 21px,
      rgb(168 79 66 / 19%) 21px 23px,
      transparent 23px
    ),
    radial-gradient(
      circle at 1px 1px,
      rgb(49 91 76 / 13%) 1px,
      transparent 1.2px
    ),
    var(--tsc-consent-paper);
  background-size: auto, 18px 18px, auto;
  box-shadow:
    7px 8px 0 rgb(32 32 29 / 24%),
    0 22px 70px rgb(32 32 29 / 22%);
  pointer-events: auto;
  scrollbar-gutter: stable;
}

.tsc-consent-panel::before {
  position: absolute;
  top: -2px;
  left: clamp(54px, 16%, 96px);
  width: 92px;
  height: 18px;
  transform: translateY(-48%) rotate(-1.8deg);
  content: "";
  background: rgb(243 221 160 / 92%);
  box-shadow: 0 1px 0 rgb(32 32 29 / 18%);
}

.tsc-consent-kicker {
  width: fit-content;
  margin: 0 0 9px;
  padding: 2px 8px 1px;
  color: var(--tsc-consent-ink);
  background: linear-gradient(
    transparent 38%,
    var(--tsc-consent-yellow) 38% 88%,
    transparent 88%
  );
  font-size: 0.86rem;
  font-weight: 700;
  letter-spacing: 0.07em;
  line-height: 1.2;
  text-transform: uppercase;
}

.tsc-consent-title {
  max-width: 570px;
  margin: 0 40px 12px 0;
  color: var(--tsc-consent-ink);
  font-family: var(--tsc-consent-script);
  font-size: clamp(2.35rem, 7vw, 3.35rem);
  font-weight: 700;
  letter-spacing: 0;
  line-height: 0.92;
}

.tsc-consent-title:focus,
.tsc-consent-title:focus-visible {
  outline: none !important;
}

.tsc-consent-copy {
  max-width: 590px;
  margin: 0;
  color: var(--tsc-consent-muted);
  font-size: clamp(1rem, 2.2vw, 1.08rem);
  line-height: 1.52;
}

.tsc-consent-copy strong {
  color: var(--tsc-consent-ink);
}

.tsc-consent-actions {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 11px;
  margin-top: 24px;
}

.tsc-consent-button {
  min-height: 48px;
  border: 2px solid var(--tsc-consent-ink);
  border-radius: 8px 6px 9px 7px;
  padding: 10px 15px;
  color: var(--tsc-consent-ink);
  background: var(--tsc-consent-paper);
  box-shadow: 3px 4px 0 rgb(32 32 29 / 15%);
  cursor: pointer;
  font: 700 1rem/1.15 var(--tsc-consent-hand);
  text-align: center;
}

.tsc-consent-button:hover {
  transform: translateY(-1px);
  box-shadow: 4px 5px 0 rgb(32 32 29 / 18%);
}

.tsc-consent-button:active {
  transform: translate(2px, 2px);
  box-shadow: 1px 2px 0 rgb(32 32 29 / 14%);
}

.tsc-consent-button:focus-visible,
.tsc-consent-close:focus-visible,
.tsc-consent-reopen:focus-visible,
.tsc-consent-link:focus-visible,
.tsc-consent-choice input:focus-visible + span {
  outline: 3px solid var(--tsc-consent-focus);
  outline-offset: 3px;
}

.tsc-consent-button[data-choice="optional"] {
  background: var(--tsc-consent-yellow);
}

.tsc-consent-button[data-choice="necessary"] {
  background: var(--tsc-consent-blue);
}

.tsc-consent-button[data-action="customize"] {
  grid-column: 1 / -1;
  border-width: 1px;
  background: var(--tsc-consent-paper);
  box-shadow: none;
  font-weight: 400;
}

.tsc-consent-button[data-action="save"] {
  width: 100%;
  margin-top: 16px;
  background: var(--tsc-consent-green);
}

.tsc-consent-close {
  position: absolute;
  top: 18px;
  right: 18px;
  width: 44px;
  height: 44px;
  border: 1px solid var(--tsc-consent-ink);
  border-radius: 50%;
  display: grid;
  place-items: center;
  color: var(--tsc-consent-ink);
  background: var(--tsc-consent-paper);
  cursor: pointer;
  font: 700 1.25rem/1 var(--tsc-consent-hand);
}

.tsc-consent-close[hidden] {
  display: none;
}

.tsc-consent-preferences {
  margin-top: 18px;
  border-top: 2px solid var(--tsc-consent-ink);
  padding-top: 16px;
}

.tsc-consent-preferences[hidden] {
  display: none;
}

.tsc-consent-preferences h2 {
  margin: 0 0 4px;
  color: var(--tsc-consent-ink);
  font-family: var(--tsc-consent-script);
  font-size: 2rem;
  line-height: 1;
}

.tsc-consent-preferences > p {
  margin: 0 0 14px;
  color: var(--tsc-consent-muted);
  font-size: 0.94rem;
  line-height: 1.45;
}

.tsc-consent-choice {
  min-height: 68px;
  border-top: 1px solid var(--tsc-consent-line);
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 16px;
  align-items: center;
  padding: 13px 2px;
  color: var(--tsc-consent-text);
}

.tsc-consent-choice-copy strong,
.tsc-consent-choice-copy small {
  display: block;
}

.tsc-consent-choice-copy strong {
  margin-bottom: 3px;
  color: var(--tsc-consent-ink);
  font-size: 1.04rem;
}

.tsc-consent-choice-copy small {
  color: var(--tsc-consent-muted);
  font-size: 0.86rem;
  line-height: 1.35;
}

.tsc-consent-choice input {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
}

.tsc-consent-switch {
  position: relative;
  width: 52px;
  height: 30px;
  border: 2px solid var(--tsc-consent-ink);
  border-radius: 999px;
  display: block;
  background: var(--tsc-consent-paper);
  cursor: pointer;
}

.tsc-consent-switch::after {
  position: absolute;
  top: 3px;
  left: 3px;
  width: 20px;
  height: 20px;
  border-radius: 50%;
  content: "";
  background: var(--tsc-consent-ink);
  transition: transform 140ms ease;
}

.tsc-consent-choice input:checked + .tsc-consent-switch {
  background: var(--tsc-consent-green);
}

.tsc-consent-choice input:checked + .tsc-consent-switch::after {
  transform: translateX(22px);
}

.tsc-consent-choice input:disabled + .tsc-consent-switch {
  border-color: #8a8b84;
  background: #ece9df;
  cursor: not-allowed;
  opacity: 0.72;
}

.tsc-consent-note {
  min-height: 21px;
  margin: 11px 0 0;
  color: var(--tsc-consent-muted);
  font-size: 0.86rem;
  line-height: 1.4;
}

.tsc-consent-note[data-kind="gpc"] {
  color: var(--tsc-consent-coral);
}

.tsc-consent-meta {
  display: flex;
  flex-wrap: wrap;
  gap: 7px 16px;
  align-items: center;
  margin-top: 17px;
  color: var(--tsc-consent-muted);
  font-size: 0.86rem;
}

.tsc-consent-link {
  min-height: 34px;
  display: inline-flex;
  align-items: center;
  color: var(--tsc-consent-ink);
  text-decoration-line: underline;
  text-decoration-color: var(--tsc-consent-coral);
  text-decoration-thickness: 2px;
  text-underline-offset: 3px;
}

.tsc-consent-reopen {
  position: fixed;
  z-index: 9997;
  bottom: max(12px, env(safe-area-inset-bottom));
  left: max(12px, env(safe-area-inset-left));
  min-height: 42px;
  border: 1px solid var(--tsc-consent-ink);
  border-radius: 7px 6px 8px 6px;
  padding: 8px 11px;
  color: var(--tsc-consent-ink);
  background: var(--tsc-consent-paper);
  box-shadow: 2px 3px 0 rgb(32 32 29 / 14%);
  cursor: pointer;
  font: 400 0.88rem/1 var(--tsc-consent-hand);
}

.tsc-consent-reopen:hover {
  background: var(--tsc-consent-yellow);
}

.tsc-consent-reopen[hidden] {
  display: none;
}

.tsc-consent-footer-button {
  border: 0;
  padding: 0;
  color: inherit;
  background: transparent;
  cursor: pointer;
  font: inherit;
  text-decoration: underline;
  text-underline-offset: 4px;
}

@media (max-width: 560px) {
  .tsc-consent-root {
    justify-items: stretch;
    padding:
      max(10px, env(safe-area-inset-top))
      max(10px, env(safe-area-inset-right))
      max(10px, env(safe-area-inset-bottom))
      max(10px, env(safe-area-inset-left));
  }

  .tsc-consent-panel {
    width: 100%;
    border-radius: 10px 10px 7px 7px;
    padding: 24px 19px 20px;
  }

  .tsc-consent-title {
    margin-right: 34px;
  }

  .tsc-consent-actions {
    grid-template-columns: 1fr;
  }

  .tsc-consent-button[data-action="customize"] {
    grid-column: auto;
  }

  .tsc-consent-meta {
    align-items: flex-start;
    flex-direction: column;
  }
}

@media (prefers-reduced-motion: reduce) {
  .tsc-consent-button,
  .tsc-consent-switch::after {
    transition: none;
  }

  .tsc-consent-panel::before {
    transform: translateY(-48%);
  }
}