html.sand-active, html.sand-active body { overflow: hidden; }
html.sand-active #landing { opacity: 0; pointer-events: none; }
html.sand-active body { background-image: none !important; }
#sand-intro { position: fixed; inset: 0; z-index: 10000; color: #fff; background: #080507; font-family: Manrope, Arial, sans-serif; }
#sand-intro canvas { display: block; width: 100%; height: 100%; }
#sand-intro .sand-panel { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); width: min(520px, calc(100% - 28px)); padding: 28px 28px 18px; border: 1px solid #ff75ac99; border-radius: 26px; background: linear-gradient(135deg, #442135ed, #190c17ed 70%); box-shadow: 0 20px 65px #0009, 0 0 36px #ff0f6f40, inset 0 1px 0 #ffffff33; backdrop-filter: blur(22px) saturate(145%); -webkit-backdrop-filter: blur(22px) saturate(145%); }
#sand-intro .sand-caption { display: flex; justify-content: space-between; align-items: center; gap: 16px; font-size: 13px; }
#sand-intro .sand-caption { flex-wrap: wrap; font-weight: 700; font-size: 15px; }
#sand-intro .sand-caption span { color: #ff91bb; font-size: 11px; font-weight: 500; white-space: nowrap; }
#sand-intro input { --sand-fill: 8%; appearance: none; -webkit-appearance: none; display: block; width: 100%; height: 44px; margin: 14px 0 8px; background: transparent; cursor: ew-resize; }
#sand-intro input::-webkit-slider-runnable-track { height: 8px; border-radius: 99px; background: linear-gradient(90deg, #ff438c 0%, #ec0064 var(--sand-fill), #ffffff20 var(--sand-fill), #ffffff20 100%); box-shadow: 0 0 15px #ff217833, inset 0 1px 2px #0005; }
#sand-intro input::-webkit-slider-thumb { appearance: none; -webkit-appearance: none; width: 30px; height: 30px; margin-top: -11px; border: 2px solid #ffb8d4; border-radius: 50%; background: radial-gradient(circle at 35% 25%, #ffb2d2, #ff438c 45%, #ec0064); box-shadow: 0 0 0 6px #ff21781c, 0 0 24px #ff2178aa; }
#sand-intro input::-moz-range-track { height: 8px; border-radius: 99px; background: #ffffff20; }
#sand-intro input::-moz-range-progress { height: 8px; border-radius: 99px; background: linear-gradient(90deg, #ff438c, #ec0064); }
#sand-intro input::-moz-range-thumb { width: 26px; height: 26px; border: 2px solid #ffb8d4; border-radius: 50%; background: radial-gradient(circle at 35% 25%, #ffb2d2, #ff438c 45%, #ec0064); box-shadow: 0 0 0 6px #ff21781c, 0 0 24px #ff2178aa; }
#sand-intro .sand-bottom { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 5px 14px; font-size: 11px; color: #d4bdcd; }
#sand-intro button { color: #ff91bb; padding: 12px 0; border: 0; background: transparent; font: inherit; cursor: pointer; text-decoration: underline; text-underline-offset: 4px; }
#sand-intro :focus-visible { outline: 2px solid #ff91bb; outline-offset: 4px; }
#sand-intro input:focus-visible { outline-offset: -2px; border-radius: 8px; }
#landing h1[tabindex="-1"]:focus { outline: none; }
#sand-intro.sand-finished { opacity: 0; transition: opacity .65s ease; pointer-events: none; }
@media(max-width:560px) { #sand-intro .sand-panel { padding: 22px 20px 14px; } #sand-intro .sand-caption { gap: 8px; } }
@media(prefers-reduced-motion:reduce) { #sand-intro.sand-finished { transition: none; } }