/* The Dive: a full-screen moment above everything but a dialog; it fades in over the OS and out onto whatever waits beneath. */
#osdive { position: fixed; inset: 0; z-index: 93; background: #000; opacity: 0; transition: opacity .3s ease; cursor: none; }
#osdive.on { opacity: 1; }
#osdive.off { opacity: 0; transition-duration: .42s; }
#osdive canvas { position: absolute; inset: 0; width: 100% !important; height: 100% !important; display: block; }
#osdive .dv-white { position: absolute; inset: 0; background: var(--bone, #FFFAF8); opacity: 0; transition: opacity .5s ease; pointer-events: none; }
#osdive.arrive .dv-white { opacity: 1; }
#osdive .dv-prompt { position: absolute; left: 50%; bottom: 34px; transform: translateX(-50%); display: inline-flex; align-items: center; gap: 18px; font: 500 10px/1 var(--mono); letter-spacing: .16em; text-transform: uppercase; color: var(--bone-70); opacity: 0; animation: dv-fade .6s ease 1.1s forwards; pointer-events: none; }
#osdive .dv-prompt span { display: inline-flex; align-items: center; gap: 8px; }
#osdive .dv-prompt b { border: 1px solid var(--line); border-radius: 3px; padding: 4px 7px; color: var(--bone); font-weight: 500; }
#osdive.arrive .dv-prompt { opacity: 0; transition: opacity .2s; }
@keyframes dv-fade { to { opacity: 1; } }
@media (prefers-reduced-motion: reduce) { #osdive { display: none; } }