.bb-depth-controls { max-width: 42rem; margin: 0 auto; padding: 8px max(8px, env(safe-area-inset-left)); color: #f6f3e4; background: #121528; box-shadow: inset 0 1px #2a2e4d; }
.bb-depth-controls[data-enabled="false"] { display: none; }
.bb-depth-control-options { color: #f6f3e4; padding: 8px; }
.bb-depth-control-options-fallback { max-width: 42rem; margin: 0 auto; color: #f6f3e4; background: #121528; }
.bb-depth-control-options-fallback > summary { min-height: 48px; padding: 8px; box-sizing: border-box; }
.bb-depth-controls__toggle { display: flex; align-items: center; gap: 0.5rem; min-height: 48px; font-weight: 700; }
.bb-depth-controls__toggle input { width: 24px; height: 24px; accent-color: #ffde59; }
.bb-depth-controls__buttons { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.5fr) minmax(0, 1fr); gap: 8px; }
.bb-depth-controls__buttons button { min-width: 0; min-height: 48px; height: 48px; box-sizing: border-box; padding: 8px 6px; border: 2px solid #72f2eb; border-radius: 12px; color: #f6f3e4; background: #1a1c28; font: inherit; font-size: 0.875rem; line-height: 1.2; white-space: nowrap; font-weight: 800; touch-action: none; user-select: none; -webkit-user-select: none; }
.bb-depth-controls__buttons button[data-bb-control="fire"] { border-color: #ffde59; }
.bb-depth-controls__buttons button[aria-pressed="true"] { color: #090b15; background: #72f2eb; }
.bb-depth-controls__buttons button[data-bb-control="fire"][aria-pressed="true"] { background: #ffde59; }
.bb-depth-controls__buttons button:disabled { opacity: 0.55; }
.bb-depth-controls :focus-visible, .bb-depth-control-options :focus-visible { outline: 3px solid #ffde59; outline-offset: 3px; }
.bb-depth-controls__status { margin: 8px 0 0; font-size: 0.85rem; }
.bb-depth-controls__help { margin: 8px 0 0; color: #b8c3d5; font-size: 0.8rem; line-height: 1.5; }
@media (prefers-reduced-motion: reduce) { .bb-depth-controls *, .bb-depth-controls *::before, .bb-depth-controls *::after { animation: none; transition: none; } }