body[data-light-mode="rave"], body[data-light-mode="rave"] #disco-app { background: #000; --ink: rgb(255 255 255 / .4); }
.rave-canvas { position: absolute; inset: 0; width: 100%; height: 100%; pointer-events: none; }
.rave-choose { position: absolute; z-index: 1; top: calc(env(safe-area-inset-top, 0px) + 59px); left: calc(env(safe-area-inset-left, 0px) + 16px); display: flex; gap: 10px; align-items: center; min-height: 36px; padding: 6px 12px; border: 1px solid #ffffff22; border-radius: 8px; background: #00000040; color: #ffffffb0; font-size: 13px; }
.rave-choose small { opacity: .6; white-space: nowrap; }
.rave-mode-list { display: grid; gap: 7px; }
.rave-mode-list button { display: flex; align-items: center; gap: 14px; width: 100%; min-height: 48px; border-radius: 8px; border: 1px solid #ffffff22; background: #ffffff06; color: #eee; padding: 10px 12px; text-align: start; }
.rave-mode-list button[aria-pressed="true"] { border-color: #b8b6ff; background: #b8b6ff1a; }
.rave-mode-list small { color: #aaa; width: 18px; }
body[data-light-mode="rave"] .dark-color .icon-button img { opacity: .4; }
@media (max-width: 350px) { body[data-light-mode="rave"] .controls-panel .icon-button, body[data-light-mode="rave"] .tempo-button { width: 42px; min-width: 40px; } body[data-light-mode="rave"] .sensitivity { width: 48px; min-width: 44px; } body[data-light-mode="rave"] #tempo { width: 46px; } }
@media (max-height: 500px) { .rave-dialog { width: min(600px, calc(100% - 24px)); } .rave-mode-list { grid-template-columns: repeat(2, 1fr); gap: 5px; } .rave-mode-list button { min-height: 42px; padding: 6px 10px; } }
body[data-light-mode="rave"] #next-submode { width: 46px; min-width: 44px; }