:root{font-family:Comic Sans MS,cursive,sans-serif;line-height:1.5;font-weight:400;color:#333;background-color:#ffe066;margin:0;padding:0;font-synthesis:none;text-rendering:optimizeLegibility;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale}h1,h2,h3,h4,h5{text-align:center;font-weight:700;color:#333;margin:1rem 0;font-family:Comic Sans MS,cursive,sans-serif}h1{font-size:2.5em;line-height:1.2}h2{font-size:1.8em}h3{font-size:1.4em}h4{font-size:1.2em}p{font-size:1rem;line-height:1.5;color:#333}a{color:#007acc;text-decoration:none}a:hover{color:#0288d1}*{box-sizing:border-box}@media (prefers-color-scheme: light){:root{background-color:#ffe066;color:#333}}.sidebarEvents{display:flex;flex-direction:row;align-items:center;flex-wrap:wrap;background-color:#4c97fe;border:3px solid #333;border-radius:8px;color:#fff;padding:12px;gap:8px;font-size:.875rem;font-weight:700;font-family:Comic Sans MS,cursive,sans-serif;cursor:pointer;margin:8px 0;box-shadow:3px 3px #333;transition:all .2s ease}.sidebarEvents:hover{transform:translate(-2px,-2px);box-shadow:5px 5px #333;background-color:#3d7bfe}.deleteBTN{margin-left:auto;background-color:transparent}.deleteBTN button{background-color:#f44;border:2px solid #333;border-radius:4px;cursor:pointer;padding:4px 8px;color:#fff;font-weight:700;box-shadow:2px 2px #333}.deleteBTN button:hover{transform:translate(-1px,-1px);box-shadow:3px 3px #333}.coding-area-content{min-height:300px;border:2px dashed #333;border-radius:8px;padding:15px;background:#ffffff80;margin-top:10px}.coding-area-empty{text-align:center;color:#666;font-style:italic;padding:40px;font-size:18px}#root{margin:0;text-align:center;height:100vh;overflow:hidden}.header{background:linear-gradient(to right,#f747c2);color:#fff;padding:10px;text-align:center;font-size:24px;font-family:Comic Sans MS,cursive,sans-serif;font-weight:700;border-bottom:4px solid #333}body{margin:0;background:#ffe066;font-family:Comic Sans MS,cursive,sans-serif}.main-container{display:grid;grid-template-columns:1fr 2fr;grid-template-rows:1fr 2fr;height:calc(100vh - 70px);gap:8px;padding:8px;background:#ffe066}.actions-section{background:#f99;border:4px solid #333;border-radius:15px;padding:15px;overflow-y:auto}.preview-section{background:#9cf;border:4px solid #333;border-radius:15px;padding:15px;display:flex;flex-direction:column}.coding-section{background:#9f9;border:4px solid #333;border-radius:15px;padding:15px;overflow-y:auto}.sprite-library-section{background:#fc9;border:4px solid #333;border-radius:15px;padding:15px;overflow-y:auto}.section-header{font-family:Comic Sans MS,cursive,sans-serif;font-size:24px;font-weight:700;color:#333;margin-bottom:15px;text-align:center;text-transform:uppercase;letter-spacing:2px}.container{border:3px solid #333;border-radius:10px;padding:1rem;background-color:#fffc;box-shadow:3px 3px #333;margin:8px 0}.sidebarEvents{background:#4c97fe;padding:12px;border-radius:8px;border:3px solid #333;margin:8px 0;cursor:move;font-family:Comic Sans MS,cursive,sans-serif;font-weight:700;color:#fff;box-shadow:3px 3px #333;transition:all .2s ease}.sidebarEvents:hover{transform:translate(-2px,-2px);box-shadow:5px 5px #333}.actionsPanel{max-height:100%;overflow-y:auto;display:flex;flex-direction:column;padding:0}.previewArea{flex:1;border:3px solid #333;border-radius:10px;background-color:#fff;margin-top:10px;position:relative;box-shadow:inset 2px 2px 5px #0000001a}.previewControls{display:flex;justify-content:center;gap:15px;padding:10px;margin-bottom:10px}.playButton,.resetButton{font-size:16px;padding:10px 20px;border:3px solid #333;border-radius:8px;cursor:pointer;font-family:Comic Sans MS,cursive,sans-serif;font-weight:700;box-shadow:3px 3px #333;transition:all .2s ease}.playButton{background-color:#4caf50;color:#fff}.resetButton{background-color:#f44336;color:#fff}.playButton:hover,.resetButton:hover{transform:translate(-2px,-2px);box-shadow:5px 5px #333}.addSprite{font-size:14px;padding:8px 15px;border:3px solid #333;border-radius:8px;cursor:pointer;background-color:#ff9800;color:#fff;font-family:Comic Sans MS,cursive,sans-serif;font-weight:700;box-shadow:3px 3px #333}.addSprite:hover{transform:translate(-2px,-2px);box-shadow:5px 5px #333}.sprite-item{border:3px solid #333;border-radius:8px;padding:10px;margin:8px 0;background:#fff;cursor:pointer;box-shadow:2px 2px #333;transition:all .2s ease}.sprite-item:hover{transform:translate(-2px,-2px);box-shadow:4px 4px #333}.sprite-item.active{background:#ffe066;border-color:#ff6b6b}