.codej-studio .studio-tile{align-content:start;gap:16px;display:grid;position:relative}.codej-studio .studio-tile-frame{aspect-ratio:16/10;background-color:var(--studio-ink-0);margin:0}.codej-studio .studio-tile-still{object-fit:contain;width:100%;height:100%;display:block}.codej-studio .studio-tile-corner{background-color:var(--studio-ink-0);color:var(--studio-fg-muted);pointer-events:none;padding:2px 6px;position:absolute;inset-block-end:var(--studio-mark-offset);inset-inline-end:calc(var(--studio-mark-offset) + var(--studio-mark) + 6px)}.codej-studio .studio-tile-info{gap:8px;min-width:0;display:grid}.codej-studio .studio-tile-meta{color:var(--studio-fg-muted);margin:0}.codej-studio .studio-tile-title{font-family:var(--studio-font-display);font-size:var(--studio-fs-h3);font-weight:var(--studio-fw-h3);line-height:var(--studio-lh-h3);letter-spacing:var(--studio-ls-h3);margin:0}.codej-studio [data-lead] .studio-tile-title{font-size:clamp(28px,7vw,32px);font-weight:var(--studio-fw-display);letter-spacing:-.03em;line-height:1}@media (width>=768px){.codej-studio [data-lead] .studio-tile-title{letter-spacing:-.035em;font-size:clamp(32px,3.9vw,56px)}}.codej-studio .studio-tile-arrow{display:inline-block}.codej-studio .studio-tile-link{text-underline-offset:.14em;-webkit-text-decoration:underline #0000;text-decoration:underline #0000;text-decoration-thickness:1px}.codej-studio .studio-tile-link:before{content:"";z-index:1;border-radius:var(--studio-r-card);position:absolute;inset:0}.codej-studio .studio-tile-link:focus-visible{outline:none}.codej-studio .studio-tile-link:focus-visible:before{outline:2px solid var(--studio-focus);outline-offset:3px}@media (hover:hover) and (pointer:fine){.codej-studio .studio-tile:hover .studio-tile-frame{--studio-edge-lo:var(--studio-edge-hi)}.codej-studio .studio-tile:hover .studio-tile-link{text-decoration-color:currentColor}.codej-studio .studio-tile:hover .studio-tile-arrow{rotate:-45deg}}.codej-studio .studio-tile:has(:focus-visible) .studio-tile-frame{--studio-edge-lo:var(--studio-edge-hi)}.codej-studio .studio-tile:has(:focus-visible) .studio-tile-link{text-decoration-color:currentColor}.codej-studio .studio-tile:has(:focus-visible) .studio-tile-arrow{rotate:-45deg}@media (prefers-reduced-motion:no-preference){.codej-studio .studio-tile-link,.codej-studio .studio-tile-arrow{transition-property:text-decoration-color,rotate;transition-duration:var(--studio-dur-1);transition-timing-function:var(--studio-ease)}}