/* These variables can be calibrated per scene without changing panel alpha. */
:root{--overlay-ink:#fff8e8;--overlay-shadow:0 2px 3px #000,0 4px 9px #000,0 0 5px #000;--overlay-border-rgb:255 248 232;--overlay-border-alpha:.30}
#auth,#social,#mirror-controls,#transport,#start,#continue,#error{color:var(--overlay-ink);text-shadow:var(--overlay-shadow)!important}
#auth :is(h1,label,button,input,#message),#social :is(h1,h2,h3,label,button,input,textarea,select,small,span,strong,p),#mirror-controls button,#transport button,#start span,#continue,#error{color:inherit;text-shadow:var(--overlay-shadow)!important}
#social textarea::placeholder,#auth input::placeholder{color:var(--overlay-ink);text-shadow:var(--overlay-shadow);opacity:.85}
#auth,#auth :is(input,button),#social :is(button,input,select,textarea,article),#social .social-player,#mirror-controls button,#transport button,#start span,#continue{background-color:transparent!important;border-color:transparent!important;transition:border-color 160ms ease}
#auth:hover,#auth:has(:focus-visible),#auth :is(input,button):hover,#auth :is(input,button):focus-visible,#social :is(button,input,select,textarea,article):hover,#social :is(button,input,select,textarea,article):focus-visible,#social .social-player:hover,#mirror-controls button:hover,#mirror-controls button:focus-visible,#transport button:hover,#transport button:focus-visible,#start:hover span,#start:focus-visible span,#continue:hover,#continue:focus-visible{border-color:rgb(var(--overlay-border-rgb) / var(--overlay-border-alpha))!important}
#social select option{color:#111!important;text-shadow:none!important}
