/* ===== Grid Maker ===== */ .grid-maker-section { width: 100%; max-width: 1200px; margin: 60px auto; padding: 30px 20px; text-align: center; } .grid-maker-section h2 { font-size: 34px; margin-bottom: 8px; } .grid-subtitle { opacity: .8; margin-bottom: 30px; } .grid-card { display: flex; gap: 25px; flex-wrap: wrap; justify-content: center; align-items: flex-start; } .grid-preview { width: 600px; max-width: 100%; aspect-ratio: 1; border-radius: 18px; overflow: hidden; position: relative; background: #111; } #gridCanvas { width: 100%; height: 100%; display: block; } #gridPlaceholder { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; font-size: 24px; opacity: .6; } .grid-controls { width: 300px; display: flex; flex-direction: column; gap: 14px; text-align: left; } .grid-controls input[type=range] { width: 100%; } .grid-controls input[type=file] { width: 100%; } .grid-controls button { padding: 14px; font-size: 17px; cursor: pointer; border: none; border-radius: 12px; margin-top: 10px; background: var(--pink-cream); color: var(--purple-darkest); font-weight: 700; } .grid-controls button:hover { transform: scale(1.02); } .grid-controls label { font-weight: 600; margin-top: 5px; } .grid-controls span { font-weight: 600; }