.ptpt-cell{--ptpt-width:48px;--ptpt-height:72px;--ptpt-gap:1px;--ptpt-flip-duration:.2s;--ptpt-bg:#000;--ptpt-flap-bg:#2a2a2a;--ptpt-color:#f0e8d0;--ptpt-font-family:"Courier New", monospace;--ptpt-font-size:calc(var(--ptpt-height) * .72);width:var(--ptpt-width);height:var(--ptpt-height);background:var(--ptpt-bg);perspective:400px;position:relative}.ptpt-half{background:var(--ptpt-flap-bg);height:50%;position:absolute;left:0;right:0;overflow:hidden}.ptpt-top-preview{z-index:1;border-bottom:var(--ptpt-gap) solid var(--ptpt-bg);top:0}.ptpt-top{z-index:2;transform-origin:bottom;backface-visibility:hidden;border-bottom:var(--ptpt-gap) solid var(--ptpt-bg);top:0}.ptpt-bottom{z-index:1;border-top:var(--ptpt-gap) solid var(--ptpt-bg);bottom:0}.glyph{height:var(--ptpt-height);line-height:var(--ptpt-height);font-family:var(--ptpt-font-family);font-size:var(--ptpt-font-size);color:var(--ptpt-color);text-align:center;font-weight:700;position:absolute;left:0;right:0}.ptpt-top .glyph,.ptpt-top-preview .glyph{top:0}.ptpt-bottom .glyph{bottom:0}.ptpt-half .glyph img{object-fit:cover;width:100%;height:100%}.ptpt-top .glyph img,.ptpt-top-preview .glyph img{object-position:top}.ptpt-bottom .glyph img{object-position:bottom}.ptpt-cell.flipping .ptpt-top{animation:ptpt-flip var(--ptpt-flip-duration,.2s) ease-in forwards}@keyframes ptpt-flip{0%{transform:rotateX(0);box-shadow:0 0 #0000}50%{transform:rotateX(-50deg);box-shadow:0 20px 30px -5px #0009}to{transform:rotateX(-90deg);box-shadow:0 0 #0000}}@media (prefers-reduced-motion:reduce){.ptpt-cell.flipping .ptpt-top{animation-duration:1ms}}