.front-page{--shelf-gap:calc(2 * var(--grid-ch));--card-min-w:calc(14 * var(--grid-ch));--card-w:max(var(--card-min-w), round(down, calc((var(--content-w) - 3 * var(--shelf-gap)) / 4), var(--grid-ch)));--hero-gap:calc(4 * var(--grid-ch));--hero-image-gap:var(--grid-ch);--hero-col-w:round(down, calc((var(--content-w) - var(--hero-gap)) / 2), var(--grid-ch));--hero-thumb-w:round(down, calc((var(--hero-col-w) - 2 * var(--hero-image-gap)) / 3), var(--grid-ch));--hero-images-w:calc(3 * var(--hero-thumb-w) + 2 * var(--hero-image-gap));--hero-media-w:round(down, min(calc(47 * var(--grid-ch)), var(--hero-col-w)), var(--grid-ch));--hero-media-h:calc(var(--hero-media-w) * 9 / 16 + var(--line))}@media (width<=102ch){.front-page{--hero-gap:calc(2 * var(--grid-ch))}}@media (width<=61ch){.front-page{--shelf-gap:var(--grid-ch)}}.hero-right>*,.hero-images>*,.hero-meta>*{margin-top:0}.front-fallback-text{clip-path:inset(50%);white-space:nowrap;border:0;width:1px;height:1px;margin:-1px;padding:0;position:absolute;overflow:hidden}.hero{--hero-video-w:var(--hero-media-w);--overlay:color-mix(in srgb, var(--color-feature) 67%, transparent);align-items:stretch;column-gap:var(--hero-gap);color:var(--color-text-contrast);justify-content:space-between;display:flex}.hero:before{background:linear-gradient(var(--overlay), var(--overlay)), var(--hero-bg) center / cover;background-color:var(--color-feature)}.hero-left{flex:0 0 var(--hero-col-w);flex-direction:column;justify-content:flex-start;align-items:flex-start;display:flex;position:relative}.hero-media{top:round(nearest, calc((100% - var(--hero-media-h)) / 2), var(--line));width:var(--hero-media-w);position:absolute}.hero-video{--play-button-bg:var(--color-text-contrast);--play-button-fg:var(--color-feature);aspect-ratio:16/9;background:var(--color-media-placeholder) center / cover;place-content:center;width:100%;display:grid;position:relative}.hero-video-poster{display:none}.hero-video>*{margin-top:0}.hero-video-play{cursor:pointer;background:0 0;border:0;place-content:center;padding:0;display:grid;position:absolute;inset:0}.hero-video-frame{border:0;width:100%;height:100%;position:absolute;inset:0}.hero-video--image{place-content:stretch}.hero-video--image img{object-fit:cover;width:100%;height:100%;display:block}.hero-video:hover{--play-button-bg:var(--color-feature);--play-button-fg:var(--color-text-contrast)}.play-button{width:120px;height:120px}.hero-creator{text-align:center;width:100%;margin-top:0}.hero-creator-short{display:none}.hero-right{flex:0 0 var(--hero-col-w);flex-direction:column;display:flex}.hero-content-link{color:inherit;flex-direction:column;flex:1;text-decoration-line:none;display:flex}.hero-content-link:hover,.hero-title{text-decoration-line:none}.hero-title strong{text-decoration-line:underline}.hero-content-link:hover .hero-title strong{text-decoration-line:none}.hero-feature{display:contents}.hero-feature-media{display:none}.hero-images{width:var(--hero-images-w);gap:var(--hero-image-gap);display:flex}.hero-image{flex:0 0 var(--hero-thumb-w);width:var(--hero-thumb-w);height:round(up, var(--hero-thumb-w), var(--line));background:var(--color-background);overflow:hidden}.hero-meta{justify-content:space-between;align-items:center;display:flex}.hero-button{margin-top:var(--line);align-self:flex-start}@media (width<=690px){.hero{--hero-feature-gap:calc(2 * var(--grid-ch));--hero-feature-image-w:calc((var(--content-w) - 2 * var(--hero-feature-gap)) / 3);--hero-video-w:var(--content-w);row-gap:var(--line);column-gap:var(--hero-gap);grid-template-columns:1fr 1fr;align-items:start;display:grid}.hero-left,.hero-right,.hero-media,.hero-content-link{display:contents}.hero-feature{grid-area:1/1/auto/-1;display:block}.hero-summary{margin-top:var(--line)}.hero-left .hero-video,.hero-content-link>.hero-images{display:none}.hero-feature-media{margin:var(--line) 0 0;display:block}.hero-feature-media .hero-video{width:100%}.hero-feature-media .hero-images{gap:var(--hero-feature-gap);width:100%;margin-top:var(--line);display:flex}.hero-feature-media .hero-image{width:auto;height:round(up, var(--hero-feature-image-w), var(--line));flex:1 1 0}.hero-meta{grid-area:2/1/auto/-1;margin-top:0}.hero-button{grid-area:3/1;justify-self:start;margin-top:0}.hero-creator{height:calc(var(--line) * 2);text-align:right;grid-area:3/2;justify-content:flex-end;align-self:center;align-items:center;display:flex}.hero-creator .link{display:inline}.hero-creator .link>*{line-height:var(--line);margin-top:0;display:inline-block}.hero-creator-full{display:none}.hero-creator-short{display:inline}}.media-frame{border:var(--border-width) solid var(--color-feature);background:var(--surface-color,var(--color-background));color:var(--color-text-secondary);place-content:center;display:grid;overflow:hidden}.media-frame img,.hero-image img{object-fit:cover;width:100%;height:100%;display:block}.cover-frame{--cover-gap:round(var(--grid-ch), 1px);width:100%;height:calc(round(up, var(--card-w), var(--line)) - var(--cover-gap));margin-bottom:var(--cover-gap);display:block;position:relative}.cover-frame:after{content:"";outline:var(--card-outline-width) solid var(--card-outline-color,var(--color-text));outline-offset:calc(-1 * var(--card-outline-width));opacity:0;pointer-events:none;transition:opacity .12s;position:absolute;inset:0}:is(.cover-frame:has(img),.diy-cover){border:0}.diy-cover{--card-outline-color:var(--color-background)}.diy-cover svg{width:100%;height:100%;display:block}.diy-cover__paint{fill:var(--color-background)}.hero-creator .link:hover,.hero-creator .link:hover .underline,.hero-creator .link:hover .no-underline{text-decoration-line:none}.shelf-link{margin-top:var(--line);color:inherit;text-decoration-line:none;display:block}.shelf-link:hover,.shelf-link:hover .shelf-heading{text-decoration-line:none}.shelf-heading{font-size:inherit;margin:0;font-weight:700;text-decoration-line:underline}.shelf-description{color:var(--color-text-secondary);margin-top:0}.front-page-shelf-spacer{height:var(--line);margin-top:0}.game-list{gap:var(--shelf-gap);display:flex;overflow-x:auto}.game-card{width:var(--card-w);flex:0 0 var(--card-w);position:relative}.game-card--ghost{pointer-events:none}.game-card-ghost-image{--ghost-image-pattern-color:var(--color-feature);background:0 0;border:0}.game-card-link{z-index:2;margin-top:0;text-decoration-line:none;position:absolute;inset:0}.game-card-link+*{margin-top:0}.game-card:has(.game-card-link:hover) .cover-frame:after{opacity:1}.game-card:has(.game-card-link:hover)>p:first-of-type strong{text-decoration-line:underline}.game-card:has(.game-card-link:hover)>p:first-of-type .accent-chip{text-decoration-line:underline}.game-card p{white-space:nowrap;text-overflow:ellipsis;margin-top:0;overflow:hidden}.game-card--ghost p{text-overflow:clip}.game-card--ghost .ghost-text{color:var(--color-feature)}.game-card p:has(.accent-chip){color:var(--color-background)}