@layer components{.iframe{--iframe-ratio:16 / 9;--iframe-min-height:8rem;--iframe-border-width:1px;gap:.5rem;inline-size:100%;min-inline-size:0;margin:0;display:grid;&>.iframe-frame{box-sizing:border-box;inline-size:100%;aspect-ratio:var(--iframe-ratio);border:var(--iframe-border-width) solid var(--border);border-radius:var(--radius-lg);background-color:color-mix(in oklab, var(--muted) 60%, var(--background));display:block}&[data-fit=container]{grid-template-rows:minmax(0,1fr);block-size:100%;&>.iframe-frame{aspect-ratio:auto;block-size:100%;min-block-size:var(--iframe-min-height)}}&[data-fit=content]>.iframe-frame{aspect-ratio:auto;block-size:calc(var(--iframe-height,var(--iframe-min-height)) + 2 * var(--iframe-border-width))}&[data-variant=bare]{--iframe-border-width:0px;&>.iframe-frame{background-color:#0000;border-radius:0}}}.iframe-caption{color:var(--muted-foreground);text-wrap:pretty;font-size:.8125rem}@media (prefers-reduced-motion:no-preference){.iframe:not([data-loaded])>.iframe-frame{background-image:linear-gradient(90deg, transparent, color-mix(in oklab, var(--foreground) 7%, transparent), transparent);background-size:200% 100%;animation:1.4s linear infinite iframe-shimmer}.iframe[data-fit=content]>.iframe-frame{transition:block-size .2s}}@keyframes iframe-shimmer{0%{background-position:200% 0}to{background-position:-200% 0}}@media (prefers-contrast:more){.iframe>.iframe-frame{border-color:var(--foreground)}}@media (forced-colors:active){.iframe>.iframe-frame{border-color:canvastext}}}