:root {
    --glass-fill: rgba(255,255,255,0.40);
    --glass-fill-hi: rgba(255,255,255,0.54);
    --glass-fill-lit: rgba(255,255,255,0.86);
    --glass-fill-sheet: rgba(255,255,255,0.92);
    --glass-backdrop: blur(13px) saturate(190%) brightness(1.20);
    --glass-rim: rgba(255,255,255,0.70);
    --glass-gloss:
        radial-gradient(135% 80% at 50% -22%,
            rgba(255,255,255,0.95) 0%, rgba(255,255,255,0.55) 22%,
            rgba(255,255,255,0.12) 48%, rgba(255,255,255,0) 72%),
        linear-gradient(162deg,
            rgba(255,255,255,0.35) 0%, rgba(255,255,255,0.05) 46%, rgba(255,255,255,0) 70%);
    --glass-gloss-sheet:
        radial-gradient(120% 64px at 50% -16px,
            rgba(255,255,255,0.90) 0%, rgba(255,255,255,0.32) 50%, rgba(255,255,255,0) 100%),
        linear-gradient(162deg,
            rgba(255,255,255,0.32) 0%, rgba(255,255,255,0.04) 28%, rgba(255,255,255,0) 46%);
    --glass-bevel:
        inset 0 1px 1px rgba(255,255,255,0.95),
        inset 0 -10px 16px -11px rgba(255,255,255,0.80),
        inset 3px 0 9px -6px rgba(255,255,255,0.65),
        inset -3px 0 9px -6px rgba(255,255,255,0.65);
    --glass-drop: 0 10px 28px rgba(0,0,0,0.16), 0 2px 5px rgba(0,0,0,0.07);
    --glass-drop-hi: 0 16px 38px rgba(0,0,0,0.20), 0 2px 5px rgba(0,0,0,0.07);


    --blue: #007aff;
    --blue-hover: #0069db;
    --text: #2a2a2c;

    --ease-out: cubic-bezier(.16,1,.3,1);
    --ease-smooth: cubic-bezier(.25,.8,.25,1);
    --ease-spring: cubic-bezier(.34,1.2,.5,1);
}

* { box-sizing: border-box; }

::selection { background: #ffe873; color: #111; text-shadow: none; }
img, video, svg, i { user-select: none; -webkit-user-select: none; -webkit-user-drag: none; }

html {
    overflow-x: hidden;
    overflow-x: clip;
    scroll-behavior: smooth;
    scrollbar-width: none;
}
* { scrollbar-width: none; }
::-webkit-scrollbar { display: none; width: 0; height: 0; }

html, body {
    margin: 0;
    padding: 0;
    min-height: 100vh;
    min-height: 100dvh;
    font-family: -apple-system, BlinkMacSystemFont, "segoe ui", roboto, helvetica, arial, sans-serif;
    -webkit-tap-highlight-color: transparent;
}

html { background: #000; }

body {
    background: transparent;
    display: flex;
    flex-direction: column;
    overflow-x: hidden;
}

button { font-family: inherit; outline: none; }
a:focus-visible, button:focus-visible { outline: 2px solid var(--blue); outline-offset: 2px; }

#bg-video {
    position: fixed; inset: 0;
    width: 100vw; height: 100vh;
    object-fit: cover;
    z-index: -2;
    opacity: 0;
    transition: opacity 1.2s ease;
}
#bg-video.ready { opacity: 1; }

.video-overlay {
    position: fixed; inset: 0;
    z-index: -1;
    background: linear-gradient(to top, rgba(0,0,0,0.65) 0%, rgba(0,0,0,0.15) 50%, rgba(0,0,0,0.30) 100%);
}

@keyframes pop-in {
    from { opacity: 0; transform: scale(.5); }
    to   { opacity: 1; transform: scale(1); }
}
@keyframes row-in {
    from { opacity: 0; transform: translateY(7px); }
    to   { opacity: 1; transform: none; }
}
@keyframes logo-in {
    from { opacity: 0; transform: scale(.92); filter: blur(6px); }
    to   { opacity: 1; transform: none; filter: blur(0); }
}

@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
    .menu, .share-box { background-color: rgba(255,255,255,0.97); }
}
@media (prefers-reduced-transparency: reduce) {
    .menu, .share-box {
        background-color: rgba(255,255,255,0.97); background-image: none;
        backdrop-filter: none; -webkit-backdrop-filter: none;
    }
}