*{margin:0;padding:0;box-sizing:border-box;font-family:Segoe UI,Tahoma,Geneva,Verdana,sans-serif}body{background:linear-gradient(135deg,#f0f0f0,#d4e4f7);color:#333;min-height:100vh;display:flex;justify-content:center;align-items:center;overflow:hidden}.container{display:flex;width:90vw;height:90vh;box-shadow:0 8px 16px #0000001a;border-radius:12px;overflow:hidden;background:#fff;transition:all .3s}.sidebar{width:20%;background:#1e293b;color:#fff;padding:20px;display:flex;flex-direction:column;justify-content:center}.sidebar h2{font-size:24px;margin-bottom:10px}.sidebar ul{list-style:none;padding:0}.sidebar li{font-size:18px;margin:10px 0;transition:transform .3s}.sidebar li:hover{transform:translate(8px)}.main-content{flex:1;display:flex;flex-direction:column;align-items:center;justify-content:center;padding:40px}.title{font-size:42px;color:#1e293b;text-transform:uppercase;margin-bottom:20px}.guide{font-size:18px;color:#555;margin-bottom:30px;text-align:center}.grid{display:grid;grid-template-columns:repeat(5,1fr);grid-gap:16px;margin-bottom:30px}.card{width:100px;height:100px;perspective:1000px;cursor:pointer;transition:transform .3s}.card:hover{transform:scale(1.05)}.card-inner{width:100%;height:100%;transform-style:preserve-3d;transition:transform .6s}.card.flipped .card-inner{transform:rotateY(180deg)}.card-front,.card-back{width:100%;height:100%;position:absolute;backface-visibility:hidden;display:flex;justify-content:center;align-items:center;font-size:48px;border-radius:10px}.card-front{background:#4caf50;color:#fff;transform:rotateY(180deg)}.card-back{background:#1e293b}.footer{display:flex;justify-content:center;align-items:center;margin-top:20px}.footer a{margin:0 15px;transition:transform .3s}.footer a:hover{transform:scale(1.2)}.icon{width:50px;height:50px}@media (max-width: 768px){.container{flex-direction:column}.sidebar{width:100%;text-align:center}.grid{grid-template-columns:repeat(3,1fr)}.card{width:80px;height:80px}}