:root {
            color-scheme: dark;

            --background: #0d0e12;
            --background-image: url("https://itzuki87.it/images/bg.png");
            --background-secondary: #15161c;

            --card-background: rgba(255, 255, 255, 0.1);
            --card-background-hover: rgba(255, 255, 255, 0.12);

            --text: #ffffff;
            --text-secondary: #b6b7c1;

            --border: rgba(255, 255, 255, 0.13);
            --border-hover: rgba(255, 255, 255, 0.28);

            --accent: #98a8ff;
            --shadow: 0 18px 50px rgba(0, 0, 0, 0.32);

            --content-width: 680px;
            --radius: 20px;
        }

        * {
            box-sizing: border-box;
        }

        html {
            min-height: 100%;
            background: var(--background);

        }

        body {
            min-height: 100vh;
            min-height: 100svh;
            margin: 0;

            font-family:
                Inter,
                -apple-system,
                BlinkMacSystemFont,
                "Segoe UI",
                Roboto,
                Helvetica,
                Arial,
                sans-serif;

            color: var(--text);
            background:
                radial-gradient(
                    circle at 50% -10%,
                    rgba(117, 92, 255, 0.25),
                    transparent 38%
                ),
                radial-gradient(
                    circle at 95% 65%,
                    rgba(255, 79, 155, 0.12),
                    transparent 34%
                ),
                var(--background);

            -webkit-font-smoothing: antialiased;
            text-rendering: optimizeLegibility;
            background-color: var(--background);
            background-image:
                linear-gradient(
                    rgba(7, 10, 24, 0.28),
                    rgba(7, 10, 24, 0.28)
                ),
                var(--background-image);

    background-repeat: repeat;
    background-size: 780px auto;
    background-position: top center;

        }

        a {
            color: inherit;
        }

        .page {
            width: min(
                calc(100% - 32px),
                var(--content-width)
            );

            min-height: 100vh;
            min-height: 100svh;

            margin-inline: auto;
            padding:
                max(48px, env(safe-area-inset-top))
                0
                max(32px, env(safe-area-inset-bottom));
        }

        .profile {
            margin-bottom: 34px;
            text-align: center;
        }

        .profile__image-wrapper {
            position: relative;
            width: 132px;
            height: 132px;
            margin: 0 auto 20px;
        }

        .profile__image-wrapper::before {
            content: "";
            position: absolute;
            inset: -4px;
            z-index: -1;
            border-radius: 50%;

            background:
                linear-gradient(
                    135deg,
                    #ff9f43,
                    #ff4f9b,
                    #7957ff,
                    #55b8ff
                );

            filter: blur(1px);
        }

        .profile__image {
            display: block;
            width: 100%;
            height: 100%;

            border: 4px solid var(--background);
            border-radius: 50%;

            object-fit: cover;
            background: var(--background-secondary);
            box-shadow: var(--shadow);
        }

        .profile__name {
            margin: 0;
            font-size: clamp(1.8rem, 6vw, 2.5rem);
            line-height: 1.1;
            letter-spacing: -0.035em;
        }

        .profile__username {
            margin: 8px 0 0;
            color: var(--accent);
            font-size: 1rem;
            font-weight: 650;
        }

        .profile__bio {
            max-width: 560px;
            margin: 18px auto 0;

            color: var(--text-secondary);
            font-size: clamp(1rem, 3vw, 1.08rem);
            line-height: 1.55;
        }

        .links {
            display: grid;
            gap: 14px;
        }

        .link-card {
            position: relative;

            display: grid;
            grid-template-columns: 46px minmax(0, 1fr) 24px;
            align-items: center;
            gap: 14px;

            min-height: 82px;
            padding: 15px 18px;

            color: var(--text);
            text-decoration: none;

            background: var(--card-background);
            border: 1px solid var(--border);
            border-radius: var(--radius);

            box-shadow:
                0 8px 24px rgba(0, 0, 0, 0.13);

            backdrop-filter: blur(2px);
            -webkit-backdrop-filter: blur(16px);

            transition:
                transform 160ms ease,
                background-color 160ms ease,
                border-color 160ms ease,
                box-shadow 160ms ease;
        }

        .link-card:hover {
            transform: translateY(-2px);
            background: var(--card-background-hover);
            border-color: var(--border-hover);

            box-shadow:
                0 14px 34px rgba(0, 0, 0, 0.22);
        }

        .link-card:active {
            transform: translateY(0) scale(0.99);
        }

        .link-card:focus-visible {
            outline: 3px solid var(--accent);
            outline-offset: 4px;
        }

        .link-card__icon {
            display: grid;
            place-items: center;

            width: 46px;
            height: 46px;

            font-size: 1.4rem;

            background: rgba(152, 168, 255, 0.28);
            border: 1px solid rgba(255, 255, 255, 0.1);
            border-radius: 14px;
        }

        .link-card__content {
            min-width: 0;
        }

        .link-card__title {
            display: block;

            overflow: hidden;
            margin: 0;

            font-size: 1.04rem;
            font-weight: 720;
            line-height: 1.3;

            text-overflow: ellipsis;
            white-space: nowrap;
        }

        .link-card__description {
            display: block;

            overflow: hidden;
            margin-top: 4px;

            color: var(--text-secondary);
            font-size: 0.88rem;
            line-height: 1.35;

            text-overflow: ellipsis;
            white-space: nowrap;
        }

        .link-card__arrow {
            color: var(--text-secondary);
            font-size: 1.35rem;
            text-align: right;

            transition:
                transform 160ms ease,
                color 160ms ease;
        }

        .link-card:hover .link-card__arrow {
            color: var(--text);
            transform: translateX(3px);
        }

        .footer {
            padding-top: 34px;
            color: var(--text-secondary);
            font-size: 0.8rem;
            line-height: 1.5;
            text-align: center;
        }

        .footer a {
            text-decoration: none;
        }

        .footer a:hover {
            color: var(--text);
            text-decoration: underline;
        }

        @media (max-width: 480px) {
            .page {
                width: min(calc(100% - 24px), var(--content-width));
                padding-top: max(32px, env(safe-area-inset-top));
            }

            .profile__image-wrapper {
                width: 96px;
                height: 96px;
            }

            .link-card {
                grid-template-columns: 42px minmax(0, 1fr) 20px;
                gap: 12px;

                min-height: 76px;
                padding: 13px 14px;
                border-radius: 17px;
            }

            .link-card__icon {
                width: 42px;
                height: 42px;
                border-radius: 12px;
            }
        }

        @media (prefers-reduced-motion: reduce) {
            *,
            *::before,
            *::after {
                scroll-behavior: auto !important;
                transition-duration: 0.01ms !important;
                animation-duration: 0.01ms !important;
                animation-iteration-count: 1 !important;
            }
        }