.cd-depth-controls { margin: 0 auto; padding: 8px; color: #f8fafc; background: #0f172a; border-radius: 0 0 12px 12px; }
.cd-depth-controls[data-enabled="false"] { display: none; }
.cd-depth-controls__buttons { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
.cd-depth-controls__buttons button { min-width: 0; min-height: 48px; height: 48px; box-sizing: border-box; padding: 8px; border: 2px solid #22c55e; border-radius: 10px; color: #f8fafc; background: #0f172a; font: inherit; font-weight: 800; font-size: .875rem; line-height: 1.2; white-space: nowrap; touch-action: none; user-select: none; -webkit-user-select: none; }
.cd-depth-controls__buttons button[aria-pressed="true"] { color: #0f172a; background: #bbf7d0; }
.cd-depth-controls__buttons button:disabled { opacity: .55; }
.cd-depth-control-options { padding: 8px; color: #f8fafc; }
.cd-depth-control-options-fallback { color: #f8fafc; background: #0f172a; }
.cd-depth-control-options-fallback > summary { min-height: 48px; padding: 8px; box-sizing: border-box; }
.cd-depth-controls__toggle { display: flex; align-items: center; gap: .5rem; min-height: 48px; font-weight: 700; }
.cd-depth-controls__toggle input { width: 24px; height: 24px; accent-color: #22c55e; }
.cd-depth-controls :focus-visible, .cd-depth-control-options :focus-visible { outline: 3px solid #facc15; outline-offset: 3px; }
.cd-depth-controls__status { margin: 8px 0 0; font-size: .85rem; }
.cd-depth-controls__help { margin: 8px 0 0; font-size: .8rem; line-height: 1.5; color: #cbd5e1; }
@media (prefers-reduced-motion: reduce) { .cd-depth-controls *, .cd-depth-controls *::before, .cd-depth-controls *::after { animation: none; transition: none; } }