.mirko-embed {
  --mle-ink: var(--ink, #17191c);
  --mle-paper: var(--paper, #f7f7f5);
  --mle-light: var(--light, #fff);
  --mle-muted: var(--muted, #5e646b);
  --mle-rule: var(--rule, #d9dcd9);
  --mle-accent: var(--category-color, var(--accent, #8c617d));
  clear: both;
  width: 100%;
  margin: clamp(28px, 5vw, 48px) 0;
  color: var(--mle-ink);
  font-family: Manrope, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
}

.mirko-embed__placeholder {
  position: relative;
  isolation: isolate;
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 14px 24px;
  align-items: center;
  min-height: 124px;
  padding: clamp(34px, 4vw, 42px) clamp(22px, 4vw, 32px) clamp(24px, 3vw, 32px);
  background: #f4f1f3;
  background: color-mix(in srgb, var(--mle-accent) 10%, #fff);
  border: 0;
  border-radius: 16px;
}

.mirko-embed__icon {
  position: absolute;
  z-index: 2;
  top: -20px;
  left: clamp(20px, 4vw, 30px);
  display: grid;
  width: 48px;
  height: 48px;
  place-items: center;
  border-radius: 50%;
  background: var(--mle-accent);
  color: #fff;
  box-shadow: 0 6px 14px rgba(0,0,0,.1);
}

.mirko-embed__icon svg {
  display: block;
  width: 25px;
  height: 25px;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.6;
}

.mirko-embed--youtube .mirko-embed__icon svg {
  fill: currentColor;
  stroke: none;
}

.mirko-embed--facebook .mirko-embed__icon svg {
  fill: currentColor;
  stroke: none;
}

.mirko-embed--x .mirko-embed__icon svg {
  fill: currentColor;
  stroke: none;
}

.mirko-embed__copy {
  display: flex;
  min-width: 0;
  flex-direction: column;
  gap: 3px;
}

.mirko-embed__copy strong {
  color: var(--category-text-color, var(--mle-accent));
  font-size: 1.05rem;
  font-weight: 700;
  letter-spacing: -.015em;
}

.mirko-embed__note,
.mirko-embed__status {
  color: var(--mle-muted);
  font-size: .78rem;
  line-height: 1.45;
}

.mirko-embed__actions {
  display: flex;
  align-items: stretch;
  flex-direction: column;
  gap: 7px;
  text-align: center;
}

.mirko-embed__load {
  min-height: 44px;
  padding: 10px 16px;
  color: #fff;
  font: inherit;
  font-size: .82rem;
  font-weight: 650;
  background: var(--mle-accent);
  border: 1px solid var(--mle-accent);
  border-radius: 12px;
  cursor: pointer;
}

.mirko-embed__load:hover {
  color: #fff;
  filter: brightness(.92);
}

.mirko-embed__load:focus-visible,
.mirko-embed__actions a:focus-visible {
  outline: 3px solid var(--mle-accent);
  outline-offset: 3px;
}

.mirko-embed__actions a {
  color: var(--category-text-color, var(--mle-accent));
  font-size: .72rem;
  font-weight: 650;
  text-decoration: none;
  text-decoration-thickness: 1px;
  text-underline-offset: 3px;
}

.mirko-embed__status {
  grid-column: 1 / -1;
  min-height: 0;
  margin: 0;
}

.mirko-embed__status:empty {
  display: none;
}

.mirko-embed__frame {
  width: 100%;
}

.mirko-embed__frame--youtube {
  position: relative;
  overflow: hidden;
  aspect-ratio: 16 / 9;
  background: #000;
}

.mirko-embed__frame--youtube iframe {
  position: absolute;
  inset: 0;
  display: block;
  width: 100%;
  height: 100%;
  border: 0;
}

.mirko-embed__frame--instagram {
  display: flex;
  min-height: 180px;
  justify-content: center;
  align-items: flex-start;
}

.mirko-embed__frame--instagram .instagram-media {
  width: min(100%, 540px) !important;
  min-width: 0 !important;
  margin: 0 auto !important;
}

.mirko-embed__frame--social {
  display: flex;
  min-height: 180px;
  justify-content: center;
  align-items: flex-start;
}

.mirko-embed__frame--x .twitter-tweet,
.mirko-embed__frame--tiktok .tiktok-embed {
  width: min(100%, 550px) !important;
  min-width: 0 !important;
  margin: 0 auto !important;
}

.mirko-embed__frame--facebook iframe {
  display: block;
  width: min(100%, 500px);
  max-width: 100%;
  border: 0;
  overflow: hidden;
}

.mirko-embed-error {
  padding: 12px 14px;
  color: #7a1f25;
  background: #fff;
  border-left: 3px solid #ae3f47;
}

@media (max-width: 680px) {
  .mirko-embed__placeholder {
    grid-template-columns: 1fr;
    padding: 34px 18px 20px;
  }

  .mirko-embed__actions,
  .mirko-embed__status {
    grid-column: 1 / -1;
  }

  .mirko-embed__actions {
    align-items: stretch;
    flex-direction: column;
    gap: 10px;
  }

  .mirko-embed__load {
    width: 100%;
  }

  .mirko-embed__icon {
    top: -18px;
    left: 18px;
    width: 44px;
    height: 44px;
  }
}

@media (prefers-reduced-motion: reduce) {
  .mirko-embed *,
  .mirko-embed *::before,
  .mirko-embed *::after {
    scroll-behavior: auto !important;
    transition: none !important;
  }
}