:root { color-scheme: dark; font-family: system-ui, -apple-system, BlinkMacSystemFont, "Microsoft YaHei", sans-serif; background: #090b12; color: #f7f4ed; } * { box-sizing: border-box; } html { scroll-behavior: smooth; } body { min-width: 320px; margin: 0; background: #090b12; } .site-collage { position: fixed; inset: 0; z-index: 0; display: grid; grid-template-columns: 1.15fr .85fr 1.2fr; grid-template-rows: 1.05fr .9fr 1.1fr; gap: 2px; overflow: hidden; pointer-events: none; background: #090b12; opacity: .68; } .site-collage::before, .site-collage::after { content: ""; position: absolute; inset: 0; z-index: 1; pointer-events: none; } .site-collage::before { background: linear-gradient(90deg, #070b14f2 0%, #070b14bf 35%, #070b1480 68%, #070b14d9 100%); } .site-collage::after { background: linear-gradient(180deg, #070b1426 0%, #070b1473 58%, #070b14f5 100%); } .site-collage img { width: 100%; height: 100%; object-fit: cover; filter: saturate(.72) brightness(.66) contrast(1.08); } .collage-cyberpunk { grid-column: 1 / 3; object-position: 70% center; } .collage-bg3 { grid-column: 3; grid-row: 1 / 3; object-position: center; } .collage-witcher { grid-column: 1; object-position: 42% center; } .collage-persona { grid-column: 2; object-position: 50% center; } .collage-monster-hunter { grid-column: 1 / 3; object-position: center; } .collage-metal-gear { grid-column: 3; object-position: 58% 25%; } .collage-wukong { grid-column: 2; object-position: center; } main, footer { position: relative; z-index: 2; } main { width: min(1120px, calc(100% - 2rem)); margin: 0 auto; padding: clamp(4rem, 11vw, 8rem) 0 5rem; } .hero { max-width: 850px; min-height: 58vh; display: flex; flex-direction: column; justify-content: center; } .eyebrow { margin: 0 0 .8rem; color: #b9c5da; letter-spacing: .16em; font-size: .75rem; font-weight: 750; } h1, h2, p { margin-top: 0; } h1 { max-width: 7ch; margin-bottom: 1.25rem; font-size: clamp(3.4rem, 9vw, 7rem); letter-spacing: -.075em; line-height: .9; } h2 { margin-bottom: 1.8rem; font-size: clamp(2rem, 4vw, 3.1rem); letter-spacing: -.045em; } .lead { max-width: 42rem; color: #d2d7e0; font-size: clamp(1rem, 2vw, 1.2rem); line-height: 1.9; } .jump { width: fit-content; margin-top: 1.1rem; padding-bottom: .35rem; color: #f4c95d; text-decoration: none; border-bottom: 1px solid currentColor; } .jump span { padding-left: .6rem; } .library, .updates { margin-top: clamp(4.5rem, 10vw, 8rem); } .cards { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1.2rem; } .card { position: relative; isolation: isolate; display: flex; min-height: clamp(26rem, 53vw, 38rem); overflow: hidden; color: inherit; border: 1px solid #3b4352; background: #151924; text-decoration: none; transition: transform .25s ease, border-color .25s ease, box-shadow .25s ease; } .card:hover, .card:focus-visible { transform: translateY(-6px); border-color: #f4c95d; box-shadow: 0 25px 60px #0008; } .cover, .card-shade { position: absolute; inset: 0; width: 100%; height: 100%; } .cover { z-index: -2; object-fit: cover; transition: transform .5s ease; } .cyberpunk .cover { object-position: 52% center; } .bg3 .cover { object-position: center; } .card:hover .cover, .card:focus-visible .cover { transform: scale(1.045); } .card-shade { z-index: -1; background: linear-gradient(180deg, #05070d11 25%, #05070de8 92%); } .card-copy { align-self: end; padding: 1.5rem; } .kicker, .card small { display: block; color: #e8ebf1; } .kicker { margin-bottom: .55rem; font-size: .78rem; letter-spacing: .13em; text-transform: uppercase; } .card strong { display: block; font-size: clamp(1.7rem, 3vw, 2.6rem); line-height: 1.05; } .card small { margin-top: .7rem; line-height: 1.65; } .update-links { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); border-top: 1px solid #3b4352; } .update-links a { display: flex; justify-content: space-between; gap: 1rem; padding: 1.25rem 0; color: #f7f4ed; text-decoration: none; border-bottom: 1px solid #3b4352; } .update-links a:hover, .update-links a:focus-visible { color: #f4c95d; } .update-links a + a { margin-left: 1.5rem; } footer { width: min(1120px, calc(100% - 2rem)); margin: 0 auto; padding: 0 0 2rem; color: #c3c9d4; font-size: .78rem; line-height: 1.7; } .not-found { min-height: 84vh; display: flex; flex-direction: column; justify-content: center; } .not-found .update-links { grid-template-columns: 1fr; max-width: 42rem; } .not-found .update-links a + a { margin-left: 0; } @media (max-width: 700px) { .site-collage { grid-template-columns: 1fr 1fr; grid-template-rows: 1.15fr 1fr 1fr; } .collage-cyberpunk { grid-column: 1 / 3; } .collage-bg3 { grid-column: 1; grid-row: 2; } .collage-witcher { grid-column: 2; grid-row: 2; } .collage-persona { grid-column: 1; grid-row: 3; } .collage-monster-hunter, .collage-metal-gear, .collage-wukong { display: none; } .hero { min-height: auto; } .cards, .update-links { grid-template-columns: 1fr; } .card { min-height: 28rem; } .update-links a + a { margin-left: 0; } } @media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } *, *::before, *::after { transition: none !important; } }
.cyberpunk .cover { object-position: 75% center; }

.collage-cyberpunk { grid-row: 1; }
.collage-witcher { grid-row: 2; }
.collage-persona { grid-row: 2; }
.collage-monster-hunter { grid-column: 1; grid-row: 3; }
.collage-metal-gear { grid-column: 2; grid-row: 3; }
.collage-wukong { grid-column: 3; grid-row: 3; }