:root { --accent-color: #00ffcc; --gold-accent: #ffa500; --bg-color: #0a0e17; }
body { margin: 0; background-color: var(--bg-color); color: #fff; font-family: sans-serif; overflow-x: hidden; }
#three-canvas { position: fixed; top: 0; left: 0; width: 100vw; height: 100vh; z-index: -1; }
header { display: flex; justify-content: space-between; padding: 20px; background: rgba(0,0,0,0.7); }
.container { max-width: 1100px; margin: 0 auto; padding: 20px; }
.section-box { background: rgba(15, 23, 42, 0.8); border: 1px solid #1e293b; padding: 25px; border-radius: 12px; margin-bottom: 25px; }
.carousel-container { position: relative; overflow: hidden; border-radius: 8px; }
.carousel-track { display: flex; transition: transform 0.5s ease-in-out; }
.carousel-slide { min-width: 100%; display: flex; gap: 20px; background: rgba(0,0,0,0.4); padding: 20px; box-sizing: border-box; }
.carousel-img { width: 400px; height: 250px; object-fit: cover; border-radius: 8px; }
.carousel-btn { position: absolute; top: 50%; transform: translateY(-50%); z-index: 10; background: var(--accent-color); border: none; padding: 10px 15px; cursor: pointer; border-radius: 50%; }
.carousel-btn.prev { left: 10px; } .carousel-btn.next { right: 10px; }
.grid-2 { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; }
.code-block { background: #000; padding: 10px; font-family: monospace; border-left: 3px solid var(--accent-color); }