.file-mosaic {
  height:440px; aspect-ratio:auto; --_card-stage-track-min:min-content;
  --file-line:color-mix(in oklab,var(--card-ink) 12%,var(--card-surface));
  --file-ink:color-mix(in oklab,var(--card-ink) 80%,var(--card-surface));
  --file-label:color-mix(in oklab,var(--card-ink) 66%,var(--card-surface));
  & .card-stage { display:grid; grid-template-rows:auto minmax(180px,1fr); mask-image:linear-gradient(#000 90%,transparent 100%); }
  & .file-collection { position:relative; z-index:2; display:flex; flex-wrap:wrap; align-items:baseline; justify-content:space-between; gap:10px; padding:6px 24px 22px; min-width:0; font-size:12px; & > span { min-width:0; overflow-wrap:anywhere; } & > span:last-child { color:var(--card-muted);font-size:10px; } & i { color:var(--_card-accent-ink);font-style:normal; } }
  & .file-viewport { position:relative; overflow:clip; min-height:180px; }
  & .file-grid { position:absolute; top:0; left:24px; width:588px; display:grid; grid-template-columns:repeat(5,108px); grid-auto-rows:106px; gap:12px; }
  & .file-tile { display:flex; flex-direction:column; justify-content:center; align-items:center; gap:9px; border:1px solid var(--file-line); border-radius:calc(var(--_card-radius)*.8); background:var(--card-surface); color:var(--file-label); font:9px/12px ui-monospace,monospace; }
  & .file-tile > span { max-width:calc(100% - 18px); white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
  & .file-empty { grid-column:1 / -1; margin:25px 0; color:var(--card-muted); font-size:12px; }
  & .file-art { display:flex; align-items:center; justify-content:center; width:78px; height:44px; flex:none; color:var(--file-ink); }
  & .file-art svg { width:31px; height:31px; fill:none; stroke:currentColor; stroke-width:1.35; stroke-linecap:round; stroke-linejoin:round; }
  & .file-thumbnail { display:flex; height:38px; width:64px; border-radius:2px; overflow:hidden;
    & i { flex:1; background:var(--card-accent); }
    & i:nth-child(2) { background:var(--_card-accent-2); }
    & i:nth-child(3) { background:var(--_card-accent-3); }
    & i:nth-child(4) { background:var(--file-ink); }
  }
  & .file-wave { display:flex; height:35px; gap:3px; align-items:center; & i { width:2px; height:var(--h);border-radius:1px;background:currentColor; } }
}