:root{--font-serif: "Inter", sans-serif;--bg-color: #f9f9f9;--card-bg: #ffffff;--text-color: #1a1a1a;--card-shadow: 0 20px 40px -10px rgba(0, 0, 0, .1), 0 0 20px rgba(0, 0, 0, .05);--card-outline: 8px solid #00b7ff}*{box-sizing:border-box;margin:0;padding:0}body{font-family:var(--font-serif);background-color:var(--bg-color);color:var(--text-color);height:100vh;display:flex;justify-content:center;align-items:center;overflow:hidden;-webkit-font-smoothing:antialiased;padding:20px}#app{width:100%;height:100%;display:flex;justify-content:center;align-items:center}.card-container{perspective:1500px;width:100%;height:100%;display:flex;justify-content:center;align-items:center}.card-wrapper{width:320px;height:320px;max-width:85vw;aspect-ratio:1 / 1;position:relative;cursor:pointer}.card{width:100%;height:100%;position:relative;transform-style:preserve-3d;transition:transform 1.5s cubic-bezier(.45,.05,.55,.95);border-radius:24px;box-shadow:var(--card-shadow);will-change:transform;-webkit-transform:translateZ(0)}.card.is-flipped{transform:rotateY(180deg)}.card-face{position:absolute;width:100%;height:100%;backface-visibility:hidden;border-radius:24px;background-color:var(--card-bg);display:flex;justify-content:center;align-items:center;text-align:center;background-image:url("data:image/svg+xml,%3Csvg viewBox='0 0 200 200' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='noiseFilter'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.65' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23noiseFilter)' opacity='0.03'/%3E%3C/svg%3E");border:var(--card-outline);padding:15px}.card-front{font-size:1.8rem;font-weight:600;line-height:1.3;z-index:2;text-transform:uppercase;text-wrap:balance;padding:0 10px}.card-back{font-size:1.8rem;font-weight:600;transform:rotateY(180deg);font-style:normal;color:#333;text-transform:uppercase;text-wrap:balance}@media(max-width:600px){.card-wrapper{width:85vw;height:85vw}.card-front{font-size:1.6rem}.accent-text{display:block}}