body { margin: 0; padding: 0; overflow: hidden; font-family: -apple-system, system-ui, sans-serif; background: #000; }
#threejs-container { position: absolute; top: 0; left: 0; width: 100vw; height: 100vh; z-index: 1; }

#ui-toggle {
    position: fixed; bottom: 20px; right: 20px; z-index: 2000;
    padding: 15px 25px; background: #007aff; color: #fff;
    border: none; border-radius: 30px; font-weight: bold; cursor: pointer;
}

#controls {
    position: fixed; bottom: -100%; left: 0; width: 100%; height: 85vh;
    background: rgba(255, 255, 255, 0.98); border-radius: 30px 30px 0 0;
    padding: 20px; box-sizing: border-box; z-index: 3000;
    transition: bottom 0.4s cubic-bezier(0.16, 1, 0.3, 1);
    display: flex; flex-direction: column; color: #000;
}
#controls.active { bottom: 0; }

.section { margin-bottom: 15px; }
.label { font-size: 12px; font-weight: bold; color: #666; margin-bottom: 8px; text-transform: uppercase; }

.button-grid {
    display: grid; grid-template-columns: 1fr 1fr; gap: 8px;
    overflow-y: auto; background: #f5f5f5; padding: 10px; border-radius: 15px;
}
.button-grid button {
    padding: 12px 5px; border: 1px solid #ddd; border-radius: 10px;
    background: #fff; font-size: 11px; cursor: pointer;
}

.slider-box { background: #f9f9f9; padding: 15px; border-radius: 15px; }
.slider-box label { display: block; font-size: 13px; margin-bottom: 5px; }
.slider-box input { width: 100%; margin-bottom: 15px; }

.reset-btn { width: 100%; padding: 15px; border: none; border-radius: 15px; background: #333; color: #fff; font-weight: bold; margin-top: 8px; cursor: pointer; }

#status-msg { position: fixed; top: 20px; left: 50%; transform: translateX(-50%); background: rgba(255,255,255,0.9); padding: 8px 20px; border-radius: 20px; z-index: 5000; font-weight: bold; font-size: 12px; }

@media (min-width: 768px) {
    #controls { width: 400px; left: 20px; bottom: 20px; border-radius: 25px; height: 90vh; }
    #controls:not(.active) { left: -450px; bottom: 20px; }
}