.tw-credit {
  --tw-credit-bg: #292929;
  --tw-credit-accent: #ff8839;
  --tw-credit-text: #f6f2ed;
  --tw-credit-muted: #d1cbc6;
  box-sizing: border-box;
  width: 100%;
  padding: 22px 24px;
  color: var(--tw-credit-text);
  background: var(--tw-credit-bg);
  border-top: 1px solid rgb(255 255 255 / 12%);
  font-family: 'TildaSans', Arial, sans-serif;
  font-size: 14px;
  line-height: 1.5;
}

.tw-credit *,
.tw-credit *::before,
.tw-credit *::after { box-sizing: border-box; }

.tw-credit[data-theme="sharya"] {
  --tw-credit-bg: #10222f;
  --tw-credit-accent: #ff5975;
  --tw-credit-text: #f5fbff;
  --tw-credit-muted: #bdcdd8;
}

.tw-credit[data-theme="tattoo"] {
  --tw-credit-bg: #241b2b;
  --tw-credit-accent: #cf9aed;
  --tw-credit-text: #fcf6ff;
  --tw-credit-muted: #d2c3dc;
}

.tw-credit[data-theme="top"] {
  --tw-credit-bg: #251833;
  --tw-credit-accent: #d0a2f0;
  --tw-credit-text: #fcf6ff;
  --tw-credit-muted: #d6c3e3;
}

.tw-credit__inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
  width: min(100%, 1200px);
  margin-inline: auto;
}

.tw-credit__site { margin: 0; font-weight: 600; letter-spacing: .03em; }
.tw-credit__site small { display: block; margin-top: 3px; color: var(--tw-credit-muted); font-size: 12px; font-weight: 400; letter-spacing: 0; }

.tw-credit__studio { display: flex; align-items: center; gap: 18px; min-width: 0; }
.tw-credit__stage {
  position: relative;
  display: grid;
  flex: 0 0 156px;
  width: 156px;
  height: 156px;
  place-items: center;
  overflow: visible;
  padding: 0;
  border: 0;
  border-radius: 50%;
  color: inherit;
  background: transparent;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
}
.tw-credit__stage:disabled { cursor: default; }
.tw-credit__stage:focus-visible { outline: 2px solid var(--tw-credit-accent); outline-offset: 3px; }
.tw-credit__halo { position: absolute; inset: 10px; border: 1px solid transparent; border-radius: 50%; transition: border-color .2s ease, box-shadow .2s ease; pointer-events: none; }
.tw-credit__stage:hover .tw-credit__halo,
.tw-credit__stage:focus-visible .tw-credit__halo,
.tw-credit__stage.is-burst .tw-credit__halo { border-color: color-mix(in srgb, var(--tw-credit-accent) 65%, transparent); box-shadow: 0 0 24px color-mix(in srgb, var(--tw-credit-accent) 30%, transparent); }
.tw-credit__logo { display: block; width: 101px; height: 90px; object-fit: contain; filter: brightness(0) invert(1); transition: opacity .15s ease; }
.tw-credit__canvas { position: absolute; inset: 0; display: block; width: 156px; height: 156px; opacity: 0; pointer-events: none; }
.tw-credit__stage.is-ready .tw-credit__logo { opacity: 0; }
.tw-credit__stage.is-ready .tw-credit__canvas { opacity: 1; }
.tw-credit__hint { position: absolute; right: 0; bottom: 3px; left: 0; color: var(--tw-credit-muted); font-size: 10px; line-height: 1.2; opacity: 0; transition: opacity .2s ease; pointer-events: none; }
.tw-credit__stage.is-ready:hover .tw-credit__hint,
.tw-credit__stage.is-ready:focus-visible .tw-credit__hint { opacity: 1; }
.tw-credit__copy { display: flex; flex-direction: column; gap: 3px; min-width: 0; max-width: 320px; }
.tw-credit__eyebrow, .tw-credit__services { color: var(--tw-credit-muted); font-size: 12px; }
.tw-credit__link { display: inline-flex; flex-direction: column; align-items: flex-start; color: inherit !important; text-decoration: none !important; }
.tw-credit__link strong { color: var(--tw-credit-text); font-size: 16px; letter-spacing: .02em; transition: color .18s ease; }
.tw-credit__link strong span { display: inline-block; color: var(--tw-credit-accent); transition: transform .18s ease; }
.tw-credit__link > span { color: var(--tw-credit-muted); font-size: 12px; }
.tw-credit__link:hover strong, .tw-credit__link:focus-visible strong { color: var(--tw-credit-accent); }
.tw-credit__link:hover strong span, .tw-credit__link:focus-visible strong span { transform: translate(2px, -2px); }
.tw-credit__link:focus-visible { outline: 2px solid var(--tw-credit-accent); outline-offset: 4px; border-radius: 2px; }

@media (max-width: 640px) {
  .tw-credit { padding: 20px 18px calc(88px + env(safe-area-inset-bottom, 0px)); }
  .tw-credit__inner { flex-direction: column; align-items: flex-start; gap: 14px; }
  .tw-credit__studio { align-self: stretch; gap: 12px; }
  .tw-credit__stage { flex-basis: 120px; width: 120px; height: 120px; }
  .tw-credit__canvas { width: 120px; height: 120px; }
  .tw-credit__copy { flex: 1; }
  .tw-credit__link > span { max-width: 220px; }
}

@media (max-width: 360px) {
  .tw-credit { padding-inline: 14px; }
  .tw-credit__stage { flex-basis: 104px; width: 104px; height: 104px; }
  .tw-credit__canvas { width: 104px; height: 104px; }
  .tw-credit__logo { width: 86px; height: 77px; }
  .tw-credit__studio { gap: 8px; }
  .tw-credit__copy { font-size: 13px; }
  .tw-credit__link strong { font-size: 15px; }
  .tw-credit__link > span { font-size: 11px; }
}

@media (prefers-reduced-motion: reduce) {
  .tw-credit *, .tw-credit *::before, .tw-credit *::after { scroll-behavior: auto !important; transition-duration: .01ms !important; }
}
