.klyp-MediaGrid{width:100%;position:relative}.klyp-MediaGrid[data-view=masonry]{height:var(--klyp-grid-h,auto)}.klyp-MediaGrid[data-view=masonry]>.klyp-MediaGrid__item{width:var(--klyp-item-w);height:var(--klyp-item-h);transform:translate3d(var(--klyp-item-x,0), var(--klyp-item-y,0), 0);contain:size layout;transition:transform .18s cubic-bezier(.22,1,.36,1);position:absolute;top:0;left:0}@media (prefers-reduced-motion:reduce){.klyp-MediaGrid[data-view=masonry]>.klyp-MediaGrid__item{transition:none}}.klyp-MediaGrid[data-view=grid]{grid-template-columns:repeat(auto-fill, minmax(var(--klyp-grid-min-w,280px), 1fr));gap:var(--klyp-grid-gap,8px);display:grid}.klyp-MediaGrid[data-view=grid]>.klyp-MediaGrid__item{aspect-ratio:1;contain:layout;width:100%;position:relative}.klyp-MediaGrid__card{border-radius:var(--r-card);background:var(--color-bg-surface);isolation:isolate;cursor:default;appearance:none;width:100%;height:100%;color:inherit;border:none;padding:0;font-family:inherit;display:block;position:relative;overflow:clip}.klyp-MediaGrid__card[data-interactive]{cursor:pointer}.klyp-MediaGrid__card:after{content:"";border-radius:inherit;pointer-events:none;z-index:2;transition:box-shadow .18s;position:absolute;inset:0;box-shadow:inset 0 0 0 1px #0000}.klyp-MediaGrid__card[data-interactive]:hover:after,.klyp-MediaGrid__card[data-interactive]:focus-visible:after{box-shadow:inset 0 0 0 1px var(--color-border-strong)}.klyp-MediaGrid__card:focus-visible{outline:none}.klyp-MediaGrid__card[data-selected]:after{box-shadow:inset 0 0 0 2px var(--color-status-success)}.klyp-MediaGrid__image,.klyp-MediaGrid__video{-o-object-fit:cover;object-fit:cover;border-radius:inherit;pointer-events:none;-webkit-user-select:none;user-select:none;-webkit-user-drag:none;-webkit-touch-callout:none;width:100%;height:100%;display:block}.klyp-MediaGrid__sentinel{pointer-events:none}.klyp-MediaGrid__checkbox{top:var(--space-8);left:var(--space-8);z-index:3;background:color-mix(in srgb, var(--color-bg-surface) 70%, transparent);-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px);color:#0000;cursor:pointer;appearance:none;opacity:0;border:none;border-radius:50%;justify-content:center;align-items:center;width:24px;height:24px;padding:0;transition:opacity .16s,background-color .16s,color .16s,transform .12s;display:flex;position:absolute}.klyp-MediaGrid__checkbox>svg{pointer-events:none;width:14px;height:14px}.klyp-MediaGrid__checkbox:hover{transform:scale(1.06)}.klyp-MediaGrid__card:hover .klyp-MediaGrid__checkbox,.klyp-MediaGrid[data-selection-active] .klyp-MediaGrid__checkbox{opacity:1}@media (hover:none){.klyp-MediaGrid__checkbox{opacity:1}}.klyp-MediaGrid__checkbox[data-selected]{opacity:1;background:var(--color-status-success);color:var(--color-bg-root)}.klyp-MediaGrid__checkbox[data-selected]>svg{animation:.22s cubic-bezier(.34,1.56,.64,1) both klyp-MediaGrid-tick-in}@media (prefers-reduced-motion:reduce){.klyp-MediaGrid__checkbox{transition:none}.klyp-MediaGrid__checkbox:hover{transform:none}.klyp-MediaGrid__checkbox[data-selected]>svg{animation:none}}@keyframes klyp-MediaGrid-tick-in{0%{opacity:0;transform:scale(.6)}to{opacity:1;transform:scale(1)}}.klyp-MediaGrid__duration{left:var(--space-8);bottom:var(--space-8);z-index:3;padding:var(--space-4) var(--space-8);border-radius:var(--r-chip);background:color-mix(in srgb, var(--color-bg-surface) 60%, transparent);-webkit-backdrop-filter:blur(12px);backdrop-filter:blur(12px);color:var(--color-fg-primary);font-family:var(--font-sans);font-size:var(--font-size-12);font-variant-numeric:tabular-nums;pointer-events:none;font-weight:500;line-height:1;position:absolute}
