.App{font-family:Arial,sans-serif;color:#333;text-align:center;padding:20px}.header{margin-bottom:20px}.editor-container{background-color:#fff;padding:20px;border-radius:8px;box-shadow:0 2px 4px #0000001a;margin-bottom:20px}.hint{margin-bottom:15px}select{width:100%;padding:10px;margin-top:10px;border:1px solid #ccc;border-radius:4px}.check-button{background-color:#28a745;color:#fff;padding:10px 20px;border:none;border-radius:4px;cursor:pointer;margin-top:10px}.check-button:hover{background-color:#218838}.feedback{margin-top:20px;font-weight:700}.feedback.correct{color:#28a745}.feedback.incorrect{color:#dc3545}.code-block{max-height:400px;overflow-y:auto;border:1px solid #ddd;padding:10px;background-color:#f5f5f5}.code-container{margin-bottom:20px}.editor-container{margin-top:20px}.hint{margin-bottom:10px}.check-button{margin-top:10px}.feedback{margin-top:10px;font-weight:700}.correct{color:green}.incorrect{color:red}.visualization-container{display:flex;flex-direction:column;align-items:center;margin-top:20px}.memory-container{display:flex;flex-direction:column;align-items:center}.buffer-grid,.ebp-grid,.eip-grid{display:grid;grid-template-columns:repeat(4,60px);grid-auto-rows:60px;gap:5px;margin-bottom:20px}.buffer-cell{width:60px;height:60px;display:flex;justify-content:center;align-items:center;font-size:18px;color:#fff;border-radius:6px}.label{font-size:20px;display:flex;align-items:center}.visualization-container{display:flex;justify-content:center;align-items:center;height:100vh}.memory-container{display:flex;flex-direction:column;align-items:center;padding:20px;background-color:#f0f0f0;border-radius:8px;box-shadow:0 4px 8px #0000001a}.buffer-grid,.ebp-grid,.eip-grid{display:grid;grid-template-columns:repeat(4,clamp(50px,10vw,70px));grid-auto-rows:clamp(50px,10vw,70px);gap:clamp(2px,1vw,15px);margin-bottom:clamp(10px,2vw,20px);margin-top:clamp(10px,2vw,30px)}.buffer-cell{display:flex;justify-content:center;align-items:center;height:100%;width:100%;font-size:clamp(12px,2vw,18px);font-weight:700;color:#333;border-radius:clamp(2px,.5vw,6px)}.label{text-align:center;font-size:14px;font-weight:700}.win-message{margin-top:20px;text-align:center;font-size:18px;font-weight:700;color:#4caf50;animation:slide-up .5s ease-in-out forwards}.fix-instruction{color:#ff4500}@keyframes slide-up{0%{transform:translateY(20px);opacity:0}to{transform:translateY(0);opacity:1}}