@font-face{font-display:swap;font-family:'Roboto Mono';font-style:normal;font-weight:700;src:url(roboto-mono-v30-latin-700.woff2) format('woff2')}.flip{text-align:center;max-width:420px;margin:auto;padding:1em;border:1px solid #CCC;border-radius:6px}.flip h3{color:#666}.flip h2{font-family:'Roboto Mono',monospace;display:inline-flex;align-items:center;gap:.2em;margin-top:.25em}.flip-card{position:relative;width:1.5em;height:2em;perspective:1000px}.flip-card-inner{position:relative;width:100%;height:97%}.flip-card-top,.flip-card-bottom,.flip-card-top-back,.flip-card-bottom-back{position:absolute;width:100%;height:51%;display:flex;align-items:center;justify-content:center;background:#f8f8f8;border:1px solid #ccc;font-family:'Roboto Mono',monospace;font-size:1.2em;overflow:hidden;backface-visibility:hidden;left:0;right:0;transform:translateX(0);will-change:transform}.flip-card-top{top:0;align-items:flex-start;padding-top:.1em;border-radius:4px 4px 0 0;transform-origin:bottom center;z-index:2}.flip-card-top-back{top:0;align-items:flex-start;padding-top:.1em;border-radius:4px 4px 0 0;transform:rotateX(180deg);transform-origin:bottom center}.flip-card-bottom{bottom:0;align-items:flex-end;padding-bottom:.1em;border-radius:0 0 4px 4px;transform-origin:top center;z-index:1}.flip-card-bottom-back{bottom:0;align-items:flex-end;padding-bottom:.1em;border-radius:0 0 4px 4px;transform-origin:top center}.flip-card.flipping .flip-card-top{animation:flip-top 0.4s ease-in forwards}@keyframes flip-top{from{transform:rotateX(0deg) translateX(0)}to{transform:rotateX(-180deg) translateX(0)}}.flip-card{transform:translateZ(0)}