.pl-grid{--pl-radius:22px;--pl-gap:32px;--pl-lift:3px;--pl-cap:13px;--pl-ratio:1.06;--pl-pad:28px;gap:calc(var(--pl-gap) * 1.25) var(--pl-gap);grid-template-columns:1fr;display:grid;container-type:inline-size}@media (min-width:1024px){.pl-grid{grid-template-columns:repeat(3,minmax(0,1fr))}.pl-wide{grid-column:span 2}}.pl-title{width:fit-content;margin-bottom:24px}.pl-title-art{aspect-ratio:600/198;-webkit-user-select:none;user-select:none;filter:brightness(0);opacity:.85;width:160px;display:block;overflow:hidden}@media (min-width:768px){.pl-title-art{width:208px}}.pl-title-strip{width:700%;max-width:none;height:100%;animation-play-state:paused;display:block}@media (hover:hover) and (pointer:fine){.pl-title:hover .pl-title-strip{animation-play-state:running}}.pl-item{flex-direction:column;gap:12px;margin:0;display:flex}@property --pl-ledge{syntax:"<length>";inherits:true;initial-value:13px}.pl-item{--pl-ledge:calc(100cqw * 52 / 706 * .5)}@media (min-width:1024px){.pl-item{--pl-ledge:calc((100cqw - 2 * var(--pl-gap)) / 3 * 52 / 706 * .5)}}.pl-tile{padding:var(--pl-pad);padding-bottom:calc(var(--pl-pad) + var(--pl-ledge));border-radius:var(--pl-radius) var(--pl-radius) 0 0;isolation:isolate;background-color:var(--color-page);transition:transform .22s var(--ease-out-strong), box-shadow .22s var(--ease-out-strong);place-items:center;display:grid;position:relative;overflow:hidden;box-shadow:0 0 0 1px #3d32260d,0 1px 3px #3d32260d,0 6px 16px -6px #3d322614}.pl-tile:after{content:"";height:var(--pl-ledge);pointer-events:none;background:url(/play/ledge.webp) 50%/100% 100% no-repeat;position:absolute;bottom:0;left:0;right:0}.pl-item:not(.pl-wide):not(:has(.pl-flush)) .pl-tile{aspect-ratio:1}@media (max-width:1023px){.pl-tile:has(.pl-flush){padding:20px 12px}}@media (min-width:1024px){.pl-tile{height:calc((100cqw - 2 * var(--pl-gap)) / 3 * var(--pl-ratio));container-type:size;aspect-ratio:auto!important}}.pl-fit{aspect-ratio:var(--ar);width:100%;position:relative}@media (min-width:1024px){.pl-fit{width:min(100cqw, 100cqh * var(--ar))}}.pl-media-el{object-fit:cover;width:100%;height:100%;display:block}.pl-screen .pl-media-el{outline-offset:-1px;border-radius:6px;outline:1px solid #0000001a}:is(.pl-tile:has(>.pl-bleed),.pl-tile:has(>.pl-contain)){padding:0 0 var(--pl-ledge)}.pl-bleed{aspect-ratio:auto;height:100%;width:100%!important}.pl-contain{inset:0 0 var(--pl-ledge);aspect-ratio:auto;width:auto!important;position:absolute!important}.pl-contain .pl-media-el{object-fit:contain}.pl-m-moodeng{padding:calc(var(--pl-pad) * 1.6);padding-bottom:calc(var(--pl-pad) + var(--pl-ledge))}.pl-m-bootcamp{padding:calc(var(--pl-pad) * .5);padding-bottom:calc(var(--pl-pad) + var(--pl-ledge))}.pl-m-moodeng .pl-fit,.pl-m-bootcamp .pl-fit{mix-blend-mode:multiply}.pl-m-aih,.pl-m-hobonichi{padding-top:18px}.pl-compare{flex-direction:column;gap:14px;width:100%;height:100%;display:flex}.pl-compare-canvas{place-items:center;display:grid}@media (min-width:1024px){.pl-compare-canvas{flex:1;min-height:0;container-type:size}}.pl-cap{font-size:var(--pl-cap);flex-direction:column;gap:6px;padding:0 4px;display:flex}.pl-cap-row{flex-wrap:wrap;justify-content:space-between;align-items:baseline;gap:4px 16px;display:flex}.pl-name{font-family:var(--font-display);font-size:calc(var(--pl-cap) * 1.15);color:var(--color-ink-primary);font-weight:500}.pl-meta{font-family:var(--font-mono);font-size:calc(var(--pl-cap) * .88);color:var(--color-ink-muted)}.pl-line{max-width:60ch;font-family:var(--font-mono);color:var(--color-ink-body);text-wrap:pretty;line-height:1.6}@media (hover:hover) and (pointer:fine){.pl-item:hover .pl-tile{transform:translateY(calc(var(--pl-lift) * -1));box-shadow:0 0 0 1px #3d32260f,0 2px 4px #3d32260f,0 12px 24px -8px #3d322624}}@media (prefers-reduced-motion:reduce){.pl-tile{transition:none}.pl-item:hover .pl-tile{transform:none!important}}
