:root{font-family:Roboto,system-ui,-apple-system,BlinkMacSystemFont,Segoe UI,Helvetica,Arial,sans-serif;line-height:1.5;font-weight:400;font-synthesis:none;text-rendering:optimizeLegibility;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale}html,body{margin:0;padding:0;box-sizing:border-box}.card{perspective:1000px;width:100%;height:200px}.card__inner{position:relative;width:100%;height:100%;text-align:center;transition:transform .6s;transform-style:preserve-3d;box-shadow:0 4px 8px #0003;cursor:pointer}.card__inner--flipped{transform:rotateY(180deg)}.card__front,.card__back{position:absolute;width:100%;height:100%;-webkit-backface-visibility:hidden;backface-visibility:hidden;display:flex;align-items:center;justify-content:center;font-size:1.5rem;border-radius:4px;padding:1rem}.card__front{background-color:#f8f9fa;color:#212529}.card__back{background-color:#e9ecef;color:#212529;transform:rotateY(180deg)}.card--green .card__front,.card--green .card__back{border-left:5px solid #28a745}.card--yellow .card__front,.card--yellow .card__back{border-left:5px solid #ffc107}.card--red .card__front,.card--red .card__back{border-left:5px solid #dc3545}