.h5p-card { --card-footer-color: #b4c1d6; --attribution-secondary: #c2ccdf; position: relative; width: 100%; height: 100%; color: #faf8ff; background: radial-gradient(ellipse at 10% 20%, #4b6c9b80, transparent 62%), radial-gradient(ellipse at 90% 80%, #35578266, transparent 60%), #252f48; }
.h5p-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)); }
.h5p-card__toolbar { display: flex; align-items: center; justify-content: space-between; gap: 10px; min-height: 44px; margin-bottom: 14px; }
.h5p-card__label { margin: 0; font-size: 9px; letter-spacing: .09em; font-weight: 650; color: #cad5e8; }
.h5p-card__tools { display: flex; gap: 8px; flex: none; }
.h5p-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; }
.h5p-card__expand { background: #ffffff12; }
.h5p-card__external { background: transparent; }
.h5p-card__stage { position: relative; height: min(calc(var(--h5p-height, 300px) + 2px), max(180px, calc(100dvh - 445px))); border: 1px solid #ffffff16; border-radius: 14px; background: #fff; box-shadow: 0 25px 60px -30px #080312aa; }
.h5p-card__frame { position: relative; width: 100%; min-height: 0; background: #fff; }
.h5p-card__mount { position: relative; width: 100%; min-height: 100%; touch-action: auto; }
.h5p-card__iframe { display: block; width: 100%; border: 0; }
.h5p-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; }
.h5p-card__symbol { width: 42px; height: 42px; color: #c6adfc; }
.h5p-card__symbol svg { width: 100%; height: 100%; }
.h5p-card__status { max-width: 32ch; margin: 0; font-size: 12px; line-height: 1.4; color: #d7cde5; }
.h5p-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; }
.h5p-card__hint { margin: 12px 0 0; font-size: 10px; line-height: 1.5; color: #b4c1d6; max-width: calc(100% - var(--social-reserve)); }
.h5p-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)); }
.h5p-card__info .card-attribution__name, .h5p-card__info .card-attribution__description { display: -webkit-box; -webkit-box-orient: vertical; overflow: hidden; }
.h5p-card__info .card-attribution__name { -webkit-line-clamp: 2; max-width: 24ch; }
.h5p-card__info .card-attribution__description { -webkit-line-clamp: 3; max-width: 38ch; }
.h5p-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)); }
.h5p-card__notice { position: absolute; z-index: 2; bottom: calc(var(--content-bottom) + 24px); left: var(--edge); right: calc(var(--edge) + var(--social-reserve)); }
.h5p-card button:focus-visible, .h5p-card a:focus-visible { outline: 2px solid #dac7fc; outline-offset: 3px; }

/* The optional enlarged reader predates feed gesture experiments. Keeping its
   host in place avoids reloading the iframe when it enters the top layer. */
.h5p-reader:not([open]) { display: block; position: static; inset: auto; margin: 0; padding: 0; width: 100%; max-width: none; height: 100%; max-height: none; border: 0; border-radius: inherit; box-shadow: none; overflow: clip; touch-action: inherit; }
.h5p-reader:not([open]) > .sheet__handle, .h5p-reader:not([open]) > .sheet__header { display: none; }
.h5p-reader:not([open]) .h5p-card__frame { height: 100%; overflow: clip; touch-action: inherit; }
.h5p-card__stage[data-overflow="true"] .h5p-reader:not([open]) { height: calc(100% - 44px); border-radius: 14px 14px 0 0; }
.h5p-card__stage[data-overflow="true"] .h5p-reader:not([open]) .h5p-card__frame { pointer-events: none; mask-image: linear-gradient(#000 calc(100% - 28px), transparent); }
.h5p-card__read-more { display: flex; align-items: center; justify-content: space-between; gap: 12px; width: 100%; height: 44px; padding: 0 14px; border: 0; border-top: 1px solid #d9e0e8; border-radius: 0 0 14px 14px; background: #f6f8fc; color: #344d6c; font: inherit; font-size: 12px; font-weight: 600; text-align: left; cursor: pointer; }
.h5p-card__read-more::after { content: '↗'; font-size: 18px; }
.h5p-card__read-more:focus-visible { outline: 2px solid #344d6c; outline-offset: -3px; }
.h5p-reader[open] { height: min(90dvh, 900px); max-height: calc(100dvh - env(safe-area-inset-top) - 12px); }
.h5p-reader[open] .h5p-card__frame { flex: 1; overflow: auto; padding-bottom: env(safe-area-inset-bottom); }
.h5p-reader[open] .h5p-card__placeholder { min-height: 220px; }
@media (prefers-reduced-motion: no-preference) {
  .h5p-reader[open] { animation: h5p-reader-enter 200ms ease-out; }
  @keyframes h5p-reader-enter { from { opacity: .5; translate: 0 18px; } to { opacity: 1; translate: 0 0; } }
}
@media (max-width: 699px) {
  .h5p-card__viewer { left: 0; right: 0; }
  .h5p-card__toolbar, .h5p-card__hint { margin-inline: max(var(--edge), env(safe-area-inset-left)) max(var(--edge), env(safe-area-inset-right)); }
  .h5p-card__stage, .h5p-card__stage[data-overflow="true"] .h5p-reader:not([open]), .h5p-card__read-more { border-radius: 0; border-inline: 0; }
}
@media (max-width: 699px) and (max-height: 650px) {
  .h5p-card__viewer { display: flex; flex-direction: column; }
  .h5p-card__toolbar { order: 2; margin-bottom: 0; gap: 4px; margin-right: calc(var(--edge) + var(--social-reserve)); flex-wrap: wrap; }
  .h5p-card__label { font-size: 8px; }
  .h5p-card__tools { gap: 0; }
  .h5p-card__tools > * { font-size: 10px; padding-inline: 8px; }
  .h5p-card__stage { order: 1; height: 200px; }
  .h5p-card__hint { order: 3; margin-top: 4px; }
  .h5p-card__info { bottom: calc(var(--content-bottom) + 34px); }
  .h5p-card__info .card-attribution__description { margin-top: 8px; font-size: 12px; }
}
@media (min-width: 700px) {
  .h5p-card__viewer { left: 36%; right: calc(var(--edge) + var(--social-reserve)); }
  .h5p-card__info { right: auto; width: 28%; }
  .h5p-card__hint { max-width: none; }
  .h5p-card__stage { height: min(calc(var(--h5p-height, 300px) + 2px), calc(100dvh - 240px)); }
  .h5p-reader[open] { inset: 16px; margin: auto; width: min(900px, calc(100vw - 32px)); height: calc(100dvh - 32px); max-height: none; }
}
@media (min-width: 560px) and (max-height: 480px) {
  .h5p-card__viewer { top: var(--format-top); left: 37%; right: calc(var(--edge) + var(--social-reserve)); }
  .h5p-card__toolbar { order: 0; margin: 0; }
  .h5p-card__label { font-size: 8px; }
  .h5p-card__stage { height: 170px; }
  .h5p-card__hint { display: none; }
  .h5p-card__info { top: calc(var(--format-top) + 34px); bottom: auto; width: 32%; right: auto; }
  .h5p-card__info .card-attribution__name { font-size: 22px; }
  .h5p-card__info .card-attribution__description { font-size: 11px; margin-top: 8px; }
  .h5p-reader[open] { height: calc(100dvh - 12px); }
  .h5p-reader[open] > .sheet__handle { display: none; }
  .h5p-reader[open] > .sheet__header { padding-block: 6px; }
  .h5p-reader[open] .sheet__header p { display: none; }
}