/* Spotlight leaves the original target visible; no duplicated controls. */
#rr-orientation-backdrop { position:fixed; inset:0; z-index:400; pointer-events:none; }
#rr-orientation-backdrop > div { position:fixed; background:rgba(17,12,32,.58); backdrop-filter:blur(3px); -webkit-backdrop-filter:blur(3px); pointer-events:auto; }
#rr-orientation { position:fixed; z-index:401; left:50%; transform:translateX(-50%); box-sizing:border-box; width:min(440px,calc(100vw - 24px)); max-height:calc(100dvh - 32px); overflow-y:auto; overflow-wrap:anywhere; padding:28px; border:1px solid #e8e3f0; border-radius:18px; background:var(--card); color:var(--text); box-shadow:0 18px 64px #0004; font:1rem/1.5 var(--font); }
#rr-orientation h2 { font-size:1.6em; line-height:1.18; font-weight:900; margin:12px 0 16px; border:0; outline:none; }
#rr-orientation p { margin:0 0 16px; }
#rr-orientation .rr-orientation-position { font-size:.8em; font-weight:800; margin:0; }
#rr-orientation .rr-orientation-hint { font-size:.875em; }
#rr-orientation { display:flex; flex-direction:column; overflow:hidden; }
.rr-orientation-copy { min-height:0; overflow-y:auto; }
.rr-orientation-actions { display:flex; flex-wrap:wrap; gap:8px; flex-shrink:0; padding-top:8px; }
#rr-orientation button { min-height:44px; max-width:100%; padding:9px 14px; border:1px solid #cec5df; border-radius:8px; background:transparent; color:inherit; font:inherit; line-height:1.35; cursor:pointer; white-space:normal; }
#rr-orientation .rr-orientation-next { background:var(--pp); color:white; border-color:transparent; margin-left:auto; }
#rr-orientation button:focus-visible, .rr-orientation-target:focus-visible { outline:3px solid var(--pp); outline-offset:3px; }
.rr-orientation-target { box-shadow:0 0 0 3px white,0 0 0 7px #ffffff29; }
.rr-orientation-target[inert] { cursor:default; }
/* Opacity only: focus and controls are ready immediately; geometry never animates. */
@keyframes rr-orientation-enter { from { opacity:.65; } to { opacity:1; } }
@keyframes rr-orientation-step { from { opacity:.75; } to { opacity:1; } }
#rr-orientation { animation:rr-orientation-enter 180ms ease-out; }
.rr-orientation-copy { animation:rr-orientation-step 140ms ease-out; }
@media(max-width:767px) { #rr-orientation { padding:18px; font-size:.875rem; max-height:48dvh; } #rr-orientation h2 { font-size:1.35em; margin:8px 0 12px; } #rr-orientation p { margin-bottom:12px; } }
/* Short landscape/zoom viewports need a single action row and readable heading. */
@media(max-height:500px) and (min-width:600px) { #rr-orientation { width:calc(100vw - 24px); max-height:calc(100dvh - 24px); padding:12px; } }
@media(prefers-reduced-motion:reduce) { #rr-orientation, #rr-orientation *, .rr-orientation-target { animation:none!important; transition:none!important; scroll-behavior:auto!important; } }