:root {
            --color-primary: #663399;
            --color-secondary: #9B45B2;
            --color-text: #ffffff;

            --storagefile-btn-bg: #245771;
            --storagefile-btn-bg-hover: #2b637f;
            --storagefile-btn-separator: rgba(255, 255, 255, 0.10);
            --storagefile-btn-shadow: rgba(0, 0, 0, 0.18);
        }

        * {
            box-sizing: border-box;
            margin: 0;
            padding: 0;
        }

        body {
            font-family: system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif;
            color: var(--color-text);
            height: 100vh;
            width: 100vw;
            overflow: hidden;
            display: flex;
            flex-direction: column;
            justify-content: space-between;
            background: linear-gradient(-45deg, var(--color-primary), var(--color-secondary), #3b1c5a, #d475f0);
            background-size: 400% 400%;
            animation: meshGradient 15s ease infinite;
        }

        @keyframes meshGradient {
            0% { background-position: 0% 50%; }
            50% { background-position: 100% 50%; }
            100% { background-position: 0% 50%; }
        }

        .site-main {
            flex: 1;
            display: flex;
            justify-content: center;
            align-items: center;
            padding: 2rem;
        }

        .center-logo {
            max-width: 90vw;
            max-height: 250px;
            height: auto;
            filter: drop-shadow(0 10px 20px rgba(0,0,0,0.3));
        }

        .site-footer {
            display: flex;
            justify-content: center;
            align-items: center;
            padding: 0 1.25rem 3rem;
        }

        .button-group {
            display: inline-flex;
            flex-wrap: nowrap;
            justify-content: center;
            gap: 0;
        }

        .storagefile-btn {
            display: inline-block;
			padding: 5px 10px;
			min-height: 0;
			color: #ffffff;
			text-decoration: none;
			font-family: "Arial Narrow", "Liberation Sans Narrow", Arial, sans-serif;
			font-size: .85rem;
			font-weight: 400;
			line-height: 1.15;
			letter-spacing: 0;
			white-space: nowrap;
			border: 0;
			border-radius: 0;
			background: #5259a6bd;
			/* box-shadow: 0 1px 0 var(--storagefile-btn-shadow); */
			text-shadow: none;
			/* transition: background-color 0.12s ease; */
			border-color: #ffffff;
			text-transform: lowercase;
			margin: 1px;
        }

        .storagefile-btn + .storagefile-btn {
            border-left: 1px solid var(--storagefile-btn-separator);
        }

        .storagefile-btn:hover,
        .storagefile-btn:focus-visible {
            background: var(--storagefile-btn-bg-hover);
            color: #ffffff;
            outline: none;
        }

        .storagefile-btn:active {
            transform: translateY(1px);
            box-shadow: none;
        }

        @media (max-width: 640px) {
            .site-footer {
                padding-bottom: 2rem;
            }

            .button-group {
                flex-wrap: wrap;
                gap: 4px;
            }

            .storagefile-btn + .storagefile-btn {
                border-left: 0;
            }
        }