.genially-card { --card-footer-color: #b7aecb; --attribution-secondary: #c4b8d6; position: relative; width: 100%; height: 100%; color: #faf8ff; background: radial-gradient(ellipse at 10% 20%, #57468180, transparent 62%), radial-gradient(ellipse at 90% 80%, #40335366, transparent 60%), #27213e; }
.genially-card__viewer { position: absolute; top: var(--format-top); left: max(var(--edge), env(safe-area-inset-left)); right: max(var(--edge), env(safe-area-inset-right)); }
.genially-card__toolbar { display: flex; align-items: center; justify-content: space-between; gap: 10px; min-height: 44px; margin-bottom: 14px; }
.genially-card__label { margin: 0; font-size: 9px; letter-spacing: .09em; font-weight: 650; color: #d4c8e4; }
.genially-card__tools { display: flex; gap: 8px; flex: none; }
.genially-card__tools > * { display: inline-flex; align-items: center; justify-content: center; min-height: 44px; padding: 0 10px; border: 0; border-radius: 12px; color: inherit; font: inherit; font-size: 11px; text-decoration: none; cursor: pointer; }
.genially-card__expand { background: #ffffff12; }
.genially-card__external { background: transparent; }
.genially-card__frame { position: relative; width: 100%; aspect-ratio: 16 / 9; min-height: 180px; background: #171326; border: 1px solid #ffffff16; border-radius: 14px; box-shadow: 0 25px 60px -30px #080312aa; }
.genially-card__mount, .genially-card__iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; border-radius: inherit; }
.genially-card__mount { touch-action: auto; }
.genially-card__placeholder { position: absolute; inset: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; padding: 12px; gap: 10px; text-align: center; background: #252034; border-radius: inherit; }
.genially-card__symbol { width: 42px; height: 42px; color: #c6adfc; }
.genially-card__symbol svg { width: 100%; height: 100%; }
.genially-card__status { max-width: 32ch; margin: 0; font-size: 12px; line-height: 1.4; color: #d7cde5; }
.genially-card__retry { min-height: 44px; padding: 10px 20px; border: 1px solid #a68ac855; border-radius: 24px; background: #685285; color: #fff; font: inherit; font-size: 12px; cursor: pointer; }
.genially-card__hint { margin: 12px 0 0; font-size: 10px; line-height: 1.5; color: #b7aecb; max-width: calc(100% - var(--social-reserve)); }
.genially-card__info { position: absolute; bottom: calc(var(--content-bottom) + 62px); left: max(var(--edge), env(safe-area-inset-left)); right: calc(max(var(--edge), env(safe-area-inset-right)) + var(--social-reserve)); }
.genially-card__info .card-attribution__name, .genially-card__info .card-attribution__description { display: -webkit-box; -webkit-box-orient: vertical; overflow: hidden; }
.genially-card__info .card-attribution__name { -webkit-line-clamp: 2; max-width: 24ch; }
.genially-card__info .card-attribution__description { -webkit-line-clamp: 3; max-width: 38ch; }
.genially-card__footer { position: absolute; bottom: var(--content-bottom); left: max(var(--edge), env(safe-area-inset-left)); right: max(var(--edge), env(safe-area-inset-right)); }
.genially-card__notice, .genially-card__fullscreen-status { position: absolute; z-index: 2; bottom: calc(var(--content-bottom) + 24px); left: var(--edge); right: calc(var(--edge) + var(--social-reserve)); }
.genially-card__fullscreen-status { margin: 0; padding: 12px; border-radius: 12px; font-size: 12px; background: #51415f; }
.genially-card button:focus-visible, .genially-card a:focus-visible { outline: 2px solid #dac7fc; outline-offset: 3px; }
@media (max-width: 699px) {
  .genially-card__viewer { left: 0; right: 0; }
  .genially-card__toolbar, .genially-card__hint { margin-inline: max(var(--edge), env(safe-area-inset-left)) max(var(--edge), env(safe-area-inset-right)); }
  .genially-card__frame { border-radius: 0; border-inline: 0; }
}
@media (max-width: 699px) and (max-height: 650px) {
  .genially-card__viewer { display: flex; flex-direction: column; }
  .genially-card__toolbar { order: 2; margin-bottom: 0; gap: 4px; margin-right: calc(var(--edge) + var(--social-reserve)); flex-wrap: wrap; }
  .genially-card__label { font-size: 8px; }
  .genially-card__tools { gap: 0; }
  .genially-card__tools > * { font-size: 10px; padding-inline: 8px; }
  .genially-card__frame { order: 1; height: 180px; aspect-ratio: auto; }
  .genially-card__hint { order: 3; margin-top: 4px; }
  .genially-card__info { bottom: calc(var(--content-bottom) + 34px); }
  .genially-card__info .card-attribution__description { margin-top: 8px; font-size: 12px; }
}
@media (min-width: 700px) {
  .genially-card__viewer { left: 36%; right: calc(var(--edge) + var(--social-reserve)); }
  .genially-card__info { right: auto; width: 28%; }
  .genially-card__hint { max-width: none; }
}
@media (min-width: 560px) and (max-height: 480px) {
  .genially-card__viewer { top: var(--format-top); left: 37%; right: calc(var(--edge) + var(--social-reserve)); }
  .genially-card__toolbar { order: 0; margin: 0; }
  .genially-card__label { font-size: 8px; }
  .genially-card__frame { height: 170px; min-height: 0; aspect-ratio: auto; }
  .genially-card__hint { display: none; }
  .genially-card__info { top: calc(var(--format-top) + 34px); bottom: auto; width: 32%; right: auto; }
  .genially-card__info .card-attribution__name { font-size: 22px; }
  .genially-card__info .card-attribution__description { font-size: 11px; margin-top: 8px; }
}
.genially-card__viewer:fullscreen { position: fixed; inset: 0; width: 100%; height: 100%; padding: max(12px, env(safe-area-inset-top)) max(12px, env(safe-area-inset-right)) max(12px, env(safe-area-inset-bottom)) max(12px, env(safe-area-inset-left)); display: flex; flex-direction: column; background: #27213e; color: #faf8ff; }
.genially-card__viewer:fullscreen .genially-card__toolbar { order: 0; flex: none; margin: 0 0 8px; }
.genially-card__viewer:fullscreen .genially-card__frame { order: 1; flex: 1; min-height: 0; aspect-ratio: auto; height: auto; }
.genially-card__viewer:fullscreen .genially-card__hint { display: none; }