:root {
            --ink: #111111;
            --paper: #fffdf8;
            --yellow: #ffd739;
            --coral: #ff674d;
            --blue: #65c8eb;
            --mint: #a8dfab;
            --shadow: 0 12px 0 rgba(17, 17, 17, .94);
        }

        * {
            box-sizing: border-box;
        }

        html {
            min-height: 100%;
        }

        body {
            min-height: 100vh;
            margin: 0;
            overflow-x: hidden;
            color: var(--ink);
            background:
                radial-gradient(circle at 9% 13%, rgba(255, 215, 57, .96) 0 8%, transparent 8.2%),
                radial-gradient(circle at 92% 18%, rgba(255, 103, 77, .92) 0 9%, transparent 9.2%),
                radial-gradient(circle at 13% 88%, rgba(101, 200, 235, .95) 0 12%, transparent 12.2%),
                radial-gradient(circle at 91% 86%, rgba(168, 223, 171, .9) 0 12%, transparent 12.2%),
                linear-gradient(135deg, #fff7dd 0%, #fffdf8 46%, #ffece4 100%);
            font-family: Arial, Helvetica, sans-serif;
        }

        .page {
            display: grid;
            place-items: center;
            width: 100%;
            min-height: 100vh;
            padding: 42px 18px;
        }

        .profile {
            width: min(100%, 560px);
            text-align: center;
        }

        .avatar-wrap {
            position: relative;
            display: inline-block;
            margin-bottom: 20px;
        }

        .avatar-wrap::before {
            position: absolute;
            inset: -8px;
            content: "";
            border: 3px solid var(--ink);
            border-radius: 50%;
            background: var(--yellow);
        }

        .avatar {
            position: relative;
            display: block;
            width: 132px;
            height: 132px;
            object-fit: cover;
            object-position: 50% 18%;
            border: 4px solid var(--ink);
            border-radius: 50%;
            background: white;
        }

        h1 {
            margin: 0;
            font-size: clamp(3rem, 12vw, 5rem);
            font-weight: 950;
            line-height: .92;
            letter-spacing: -.075em;
        }

        .tagline {
            max-width: 430px;
            margin: 15px auto 28px;
            font-size: 1rem;
            font-weight: 700;
            line-height: 1.45;
        }

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

        .link {
            position: relative;
            display: grid;
            grid-template-columns: 46px 1fr 46px;
            align-items: center;
            min-height: 68px;
            padding: 9px;
            overflow: hidden;
            color: var(--ink);
            border: 3px solid var(--ink);
            border-radius: 18px;
            background: var(--paper);
            box-shadow: 6px 6px 0 var(--ink);
            text-decoration: none;
            transition: transform .18s ease, box-shadow .18s ease, background-color .18s ease;
        }

        .link:hover {
            background: var(--yellow);
            box-shadow: 3px 3px 0 var(--ink);
            transform: translate(3px, 3px) rotate(-.35deg);
        }

        .link:active {
            box-shadow: 0 0 0 var(--ink);
            transform: translate(6px, 6px);
        }

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

        .link-main {
            min-height: 76px;
            background: var(--coral);
        }

        .link-main:hover {
            background: var(--coral);
        }

        .icon,
        .arrow {
            display: grid;
            place-items: center;
            width: 42px;
            height: 42px;
            border: 2px solid var(--ink);
            border-radius: 50%;
            background: white;
            font-size: 1.05rem;
            font-weight: 900;
        }

        .icon svg {
            width: 21px;
            height: 21px;
            fill: currentColor;
        }

        .label {
            padding: 0 10px;
            font-size: 1rem;
            font-weight: 900;
            letter-spacing: .025em;
        }

        .link-main .label {
            font-size: 1.08rem;
        }

        .arrow {
            border: 0;
            background: transparent;
            font-size: 1.4rem;
            transition: transform .18s ease;
        }

        .link:hover .arrow {
            transform: translateX(4px);
        }

        footer {
            margin-top: 34px;
            font-size: .78rem;
            font-weight: 800;
            letter-spacing: .13em;
        }

        .dot {
            color: var(--coral);
        }

        .videos {
            margin-top: 38px;
            text-align: left;
        }

        .videos h2 {
            margin: 0 0 18px;
            font-size: 1.25rem;
            font-weight: 900;
        }

        .video-grid {
            display: grid;
            gap: 18px;
        }

        .video-card {
            display: block;
            overflow: hidden;
            color: var(--ink);
            border: 3px solid var(--ink);
            border-radius: 18px;
            background: var(--paper);
            box-shadow: 6px 6px 0 var(--ink);
            text-decoration: none;
            transition: transform .18s ease, box-shadow .18s ease;
        }

        .video-card:hover {
            box-shadow: 3px 3px 0 var(--ink);
            transform: translate(3px, 3px);
        }

        .video-card:focus-visible {
            outline: 4px solid var(--blue);
            outline-offset: 4px;
        }

        .video-thumbnail {
            position: relative;
            display: block;
            aspect-ratio: 16 / 9;
            overflow: hidden;
            border-bottom: 3px solid var(--ink);
            background: var(--ink);
        }

        .video-thumbnail img {
            display: block;
            width: 100%;
            height: 100%;
            object-fit: cover;
        }

        .video-play {
            position: absolute;
            top: 50%;
            left: 50%;
            display: grid;
            place-items: center;
            width: 58px;
            height: 58px;
            padding-left: 3px;
            border: 3px solid var(--ink);
            border-radius: 50%;
            background: var(--yellow);
            font-size: 1.3rem;
            transform: translate(-50%, -50%);
        }

        .video-info {
            display: block;
            padding: 16px 18px;
        }

        .video-title {
            display: block;
            font-size: 1.1rem;
            font-weight: 900;
            line-height: 1.4;
        }

        .video-description {
            display: block;
            margin-top: 5px;
            font-size: .875rem;
            line-height: 1.5;
        }

        .video-action {
            display: block;
            margin-top: 12px;
            font-size: .875rem;
            font-weight: 800;
        }

        @media (max-width: 520px) {
            .page {
                align-items: start;
                padding-top: 30px;
            }

            .avatar {
                width: 116px;
                height: 116px;
            }

            .tagline {
                margin-bottom: 23px;
            }

            .link {
                min-height: 63px;
                border-radius: 16px;
            }

            .link-main {
                min-height: 70px;
            }
        }

        @media (prefers-reduced-motion: no-preference) {
            .profile {
                animation: arrive .58s cubic-bezier(.2, .8, .2, 1) both;
            }

            .link {
                animation: rise .42s ease both;
            }

            .link:nth-child(2) { animation-delay: .06s; }
            .link:nth-child(3) { animation-delay: .12s; }
            .link:nth-child(4) { animation-delay: .18s; }
            .link:nth-child(5) { animation-delay: .24s; }

            @keyframes arrive {
                from { opacity: 0; transform: translateY(12px) scale(.985); }
                to { opacity: 1; transform: none; }
            }

            @keyframes rise {
                from { opacity: 0; transform: translateY(10px); }
                to { opacity: 1; transform: none; }
            }
        }