@property --cover-color-one {
            syntax: "<color>";
            inherits: true;
            initial-value: #29292d;
        }

        @property --cover-color-two {
            syntax: "<color>";
            inherits: true;
            initial-value: #202024;
        }

        @property --cover-color-three {
            syntax: "<color>";
            inherits: true;
            initial-value: #171719;
        }

        @font-face {
            font-family: "SF Pro Rounded";
            src: url("./SF-Pro-Rounded-Regular.otf") format("opentype");
            font-style: normal;
            font-weight: 400;
            font-display: swap;
        }

        :root {
            color-scheme: light;
            --cover-color-one: #29292d;
            --cover-color-two: #202024;
            --cover-color-three: #171719;
            --display-name-color: #ff0000;
            --username-color: #4d4d4d44;
            font-family: "SF Pro Rounded", ui-sans-serif, system-ui, sans-serif;
            color: #17171b;
            background: #030303;
            font-synthesis: none;
            text-rendering: optimizeLegibility;
            -webkit-font-smoothing: antialiased;
            transition:
                --cover-color-one 1400ms ease,
                --cover-color-two 1700ms ease,
                --cover-color-three 2000ms ease;
        }

        * {
            box-sizing: border-box;
        }

        html,
        body {
            width: 100%;
            height: 100%;
            overflow: hidden;
        }

        body {
            position: relative;
            isolation: isolate;
            min-width: 320px;
            min-height: 100vh;
            margin: 0;
            display: grid;
            place-items: center;
            padding: 24px;
        }

        html.zoom-active {
            overflow: hidden;
        }

        html.zoom-active,
        html.zoom-active * {
            cursor: none !important;
        }

        .zoom-cursor {
            position: fixed;
            z-index: 1000;
            top: 0;
            left: 0;
            width: 44px;
            height: 44px;
            border: 2px solid rgb(255 255 255 / 88%);
            border-radius: 50%;
            background: rgb(255 255 255 / 8%);
            box-shadow:
                0 0 0 5px rgb(255 255 255 / 8%),
                0 4px 18px rgb(0 0 0 / 38%),
                inset 0 1px 2px rgb(255 255 255 / 30%);
            pointer-events: none;
            transform: translate(-50%, -50%);
            transition: opacity 120ms ease;
        }

        .zoom-cursor[hidden] {
            display: none;
        }

        .page-layout {
            position: relative;
            display: grid;
            width: min(100%, 1440px);
            height: 100%;
            grid-template-columns: minmax(0, 1fr) minmax(280px, 410px);
            align-items: center;
            gap: clamp(24px, 5vw, 80px);
            margin: 0 auto;
            transform: scale(1);
            transform-origin: 50% 50%;
            transition:
                transform 180ms cubic-bezier(.2, .8, .2, 1),
                transform-origin 180ms cubic-bezier(.2, .8, .2, 1),
                filter 180ms ease-out;
        }

        .page-layout.zoom-active {
            transform: scale(var(--zoom-scale, 1.75));
            filter: blur(var(--zoom-motion-blur, 0px));
            will-change: transform, filter;
            transition:
                transform 420ms cubic-bezier(.16, 1, .3, 1),
                transform-origin 180ms cubic-bezier(.2, .8, .2, 1),
                filter 180ms ease-out;
        }

        .page-layout.camera-transition {
            transition:
                transform 900ms cubic-bezier(.16, 1, .3, 1),
                transform-origin 900ms cubic-bezier(.16, 1, .3, 1),
                filter 380ms ease-out;
        }

        .page-layout.camera-active {
            transform: translate(var(--camera-pan-x, 0px), var(--camera-pan-y, 0px)) scale(2.45);
            filter: blur(var(--camera-motion-blur, 0px));
            will-change: transform, filter;
            transform-origin: 0 0;
        }

        .page-layout.camera-player {
            transform: translate(var(--camera-pan-x, 0px), var(--camera-pan-y, 0px)) scale(2.2);
        }

        .page-layout.camera-top-three {
            transform: translate(var(--camera-pan-x, 0px), var(--camera-pan-y, 0px)) scale(1.55);
        }

        body::before {
            position: fixed;
            z-index: -1;
            inset: -18%;
            background:
                radial-gradient(ellipse at 24% 28%, color-mix(in srgb, var(--cover-color-one), transparent 42%), transparent 42%),
                radial-gradient(ellipse at 76% 66%, color-mix(in srgb, var(--cover-color-two), transparent 38%), transparent 44%),
                radial-gradient(ellipse at 55% 12%, color-mix(in srgb, var(--cover-color-three), transparent 34%), transparent 48%);
            filter: blur(90px);
            opacity: 0.38;
            content: "";
            pointer-events: none;
            animation: background-drift 24s ease-in-out infinite alternate;
        }

        @keyframes background-drift {
            from {
                transform: translate3d(-2%, -1%, 0) scale(1);
            }
            to {
                transform: translate3d(2%, 1%, 0) scale(1.08);
            }
        }

        main {
            width: min(100%, 520px);
            justify-self: center;
        }

        .profile-content {
            display: grid;
            gap: 26px;
            grid-template-columns: minmax(0, 1fr);
            transition:
                grid-template-columns 650ms cubic-bezier(.2, .8, .2, 1),
                gap 650ms cubic-bezier(.2, .8, .2, 1);
        }

        main.layout-expanded {
            width: min(100%, 880px);
        }

        .profile-content.layout-expanded {
            grid-template-columns: minmax(0, 1fr) minmax(280px, 350px);
            align-items: center;
            gap: clamp(24px, 5vw, 56px);
        }

        .profile-content.layout-expanded .presence-card {
            width: 100%;
            margin: 0;
        }

        .profile-content.layout-expanded > .status {
            grid-column: 1 / -1;
        }

        .profile {
            display: flex;
            align-items: center;
            justify-content: center;
            gap: clamp(20px, 5vw, 32px);
            animation: soft-enter 700ms cubic-bezier(.22, 1, .36, 1);
        }

        .avatar-wrap {
            position: relative;
            width: clamp(88px, 22vw, 128px);
            aspect-ratio: 1;
            flex: 0 0 auto;
        }

        .avatar {
            display: block;
            width: 100%;
            aspect-ratio: 1;
            border-radius: 50%;
            object-fit: cover;
            background: #171719;
            -webkit-mask-image: radial-gradient(circle, #000 62%, rgb(0 0 0 / 88%) 76%, transparent 100%);
            mask-image: radial-gradient(circle, #000 62%, rgb(0 0 0 / 88%) 76%, transparent 100%);
            filter:
                drop-shadow(0 0 12px color-mix(in srgb, var(--cover-color-one), transparent 48%))
                drop-shadow(0 0 28px color-mix(in srgb, var(--cover-color-two), transparent 62%));
        }

        .avatar-status {
            position: absolute;
            right: 3%;
            bottom: 3%;
            display: grid;
            width: 25%;
            aspect-ratio: 1;
            place-items: center;
            overflow: hidden;
            border: 3px solid #030303;
            border-radius: 50%;
            background: #030303;
            color: #fff;
            box-shadow: 0 2px 8px rgb(0 0 0 / 38%);
        }

        .status-icon {
            display: none;
            width: 100%;
            height: 100%;
            overflow: visible;
        }

        .avatar-status[data-status="online"] {
            color: #23a55a;
        }

        .status-icon-online circle {
            fill: currentColor;
        }

        .avatar-status[data-status="online"] .status-icon-online,
        .avatar-status[data-status="idle"] .status-icon-idle,
        .avatar-status[data-status="dnd"] .status-icon-dnd,
        .avatar-status[data-status="offline"] .status-icon-offline,
        .avatar-status[data-status="invisible"] .status-icon-offline {
            display: block;
        }

        .avatar-status[data-status="idle"] {
            color: #f0b232;
        }

        .status-icon-idle path {
            fill: currentColor;
        }

        .avatar-status[data-status="dnd"] {
            color: #f23f43;
        }

        .status-icon-dnd circle {
            display: none;
        }

        .status-icon-dnd rect {
            fill: currentColor;
        }

        .avatar-status[data-status="offline"],
        .avatar-status[data-status="invisible"] {
            color: #80848e;
        }

        .status-icon-offline circle {
            fill: none;
            stroke: currentColor;
            stroke-width: 2.5;
        }

        .details {
            min-width: 0;
            flex: 1 1 auto;
        }

        h1 {
            margin: 0;
            display: block;
            width: fit-content;
            max-width: 100%;
            padding: 0.08em 0.04em 0.14em;
            margin: -0.08em -0.04em -0.14em;
            color: var(--cover-color-one);
            background-image: linear-gradient(
                110deg,
                color-mix(in srgb, var(--cover-color-one), white 28%),
                color-mix(in srgb, var(--cover-color-two), white 44%) 52%,
                color-mix(in srgb, var(--cover-color-three), white 28%)
            );
            filter: saturate(1.5);
            background-clip: text;
            -webkit-background-clip: text;
            -webkit-text-fill-color: transparent;
            font-size: clamp(1.4rem, 5vw, 2.25rem);
            font-weight: 400;
            letter-spacing: -0.035em;
            line-height: 1.25;
            overflow-wrap: break-word;
            word-break: normal;
        }

        @supports not (background-clip: text) and not (-webkit-background-clip: text) {
            h1 {
                background: none;
                color: var(--cover-color-one);
                -webkit-text-fill-color: currentColor;
            }
        }

        .username {
            margin: 8px 0 0;
            color: var(--username-color);
            font-size: clamp(1rem, 3vw, 1.125rem);
            letter-spacing: -0.015em;
            overflow-wrap: anywhere;
        }

        .presence-card {
            position: relative;
            isolation: isolate;
            width: min(100%, 390px);
            margin: 0 auto;
            padding: 14px;
            border: 1px solid rgb(255 255 255 / 11%);
            border-radius: 20px;
            background-color: rgb(24 24 27 / 52%);
            background-image:
                radial-gradient(ellipse at 18% 16%, color-mix(in srgb, var(--cover-color-one), transparent 48%), transparent 58%),
                radial-gradient(ellipse at 84% 78%, color-mix(in srgb, var(--cover-color-two), transparent 52%), transparent 62%),
                linear-gradient(135deg, color-mix(in srgb, var(--cover-color-two), transparent 38%), color-mix(in srgb, var(--cover-color-three), transparent 24%) 72%);
            background-size: 155% 155%;
            background-position: 0% 0%;
            box-shadow: 0 20px 54px rgb(0 0 0 / 38%);
            -webkit-backdrop-filter: blur(22px) saturate(1.45);
            backdrop-filter: blur(22px) saturate(1.45);
            color: #f5f5f7;
            font-family: "SF Pro Rounded", ui-sans-serif, system-ui, sans-serif;
            -webkit-font-smoothing: antialiased;
            text-rendering: optimizeLegibility;
            overflow: visible;
            animation:
                soft-enter 700ms cubic-bezier(.22, 1, .36, 1),
                gradient-drift 24s ease-in-out infinite alternate;
        }

        .presence-card::before {
            position: absolute;
            z-index: 0;
            inset: 1px;
            border-radius: calc(20px - 1px);
            background: radial-gradient(ellipse at 45% 0%, rgb(255 255 255 / 11%), transparent 58%);
            content: "";
            pointer-events: none;
        }

        .presence-card > * {
            position: relative;
            z-index: 1;
        }

        @keyframes gradient-drift {
            from {
                background-position: 0% 0%;
            }
            to {
                background-position: 100% 100%;
            }
        }

        .presence-heading {
            display: flex;
            align-items: center;
            gap: 8px;
            margin: 0 0 12px;
            min-height: 24px;
            color: #f0f0f2;
            font-size: 0.82rem;
            font-weight: 400;
            letter-spacing: 0.01em;
            line-height: 1.35;
        }

        .presence-heading-spacer {
            flex: 1;
        }

        .player-menu {
            position: relative;
            z-index: 2;
            flex: 0 0 auto;
        }

        .presence-card.menu-open > .presence-heading {
            z-index: 3;
        }

        .orientation-toggle {
            width: 100%;
            padding: 9px 12px;
            border: 0;
            border-radius: 10px;
            background: transparent;
            color: #e2e2e5;
            font-family: inherit;
            font-size: 0.82rem;
            font-weight: 400;
            text-align: left;
            cursor: pointer;
            transition:
                background-color 180ms ease,
                color 180ms ease,
                transform 180ms ease;
        }

        .orientation-toggle:hover {
            background: rgb(255 255 255 / 10%);
        }

        .orientation-toggle:active {
            transform: scale(0.96);
        }

        .orientation-toggle:focus-visible {
            outline: 2px solid #fff;
            outline-offset: 3px;
        }

        .remember-player-toggle {
            display: flex;
            width: 100%;
            align-items: center;
            justify-content: space-between;
            gap: 14px;
            padding: 9px 12px;
            border: 0;
            border-radius: 10px;
            background: transparent;
            color: #e2e2e5;
            font-family: inherit;
            font-size: 0.82rem;
            font-weight: 400;
            text-align: left;
            cursor: pointer;
            transition: background-color 180ms ease, color 180ms ease;
        }

        .remember-player-toggle:hover,
        .remember-player-toggle[aria-checked="true"] {
            background: rgb(255 255 255 / 8%);
        }

        .remember-player-toggle:focus-visible {
            outline: 2px solid #fff;
            outline-offset: 2px;
        }

        .toggle-switch {
            display: flex;
            width: 31px;
            height: 18px;
            flex: 0 0 auto;
            align-items: center;
            padding: 2px;
            border-radius: 999px;
            background: #56565d;
            transition: background-color 180ms ease;
        }

        .toggle-switch > span {
            width: 14px;
            height: 14px;
            border-radius: 50%;
            background: #fff;
            box-shadow: 0 1px 3px rgb(0 0 0 / 32%);
            transition: transform 180ms cubic-bezier(.2, .8, .2, 1);
        }

        .remember-player-toggle[aria-checked="true"] .toggle-switch {
            background: #1ed760;
        }

        .remember-player-toggle[aria-checked="true"] .toggle-switch > span {
            transform: translateX(13px);
        }

        .presence-indicator {
            display: block;
            width: 13px;
            height: 13px;
            flex: 0 0 auto;
            object-fit: contain;
        }

        .presence-menu {
            display: grid;
            width: 30px;
            height: 28px;
            place-items: center;
            padding: 0;
            border: 0;
            border-radius: 9px;
            background: transparent;
            color: #a5a5aa;
            font-family: inherit;
            font-size: 1rem;
            letter-spacing: 1px;
            line-height: 1;
            cursor: pointer;
            transition: background-color 160ms ease, color 160ms ease;
        }

        .presence-menu:hover,
        .presence-menu[aria-expanded="true"] {
            background: rgb(255 255 255 / 10%);
            color: #fff;
        }

        .presence-menu:focus-visible,
        .orientation-toggle:focus-visible {
            outline: 2px solid #fff;
            outline-offset: 2px;
        }

        .player-menu-popover {
            position: absolute;
            z-index: 4;
            top: calc(100% + 8px);
            right: 0;
            width: max-content;
            min-width: 150px;
            padding: 5px;
            border: 1px solid rgb(255 255 255 / 10%);
            border-radius: 14px;
            background: rgb(30 30 33 / 68%);
            -webkit-backdrop-filter: blur(18px) saturate(1.4);
            backdrop-filter: blur(18px) saturate(1.4);
            box-shadow:
                0 14px 36px rgb(0 0 0 / 40%),
                inset 0 1px 0 rgb(255 255 255 / 5%);
            color: #f5f5f7;
            font-family: "SF Pro Rounded", ui-sans-serif, system-ui, sans-serif;
            opacity: 0;
            transform: translateY(-4px) scale(.98);
            transform-origin: top right;
            transition: opacity 140ms ease, transform 140ms ease;
        }

        .player-menu-popover:not([hidden]) {
            opacity: 1;
            transform: translateY(0) scale(1);
        }

        .horse-menu-popover {
            position: fixed;
            top: 0;
            right: auto;
            z-index: 2147483647;
            min-width: 140px;
            transform-origin: top left;
        }

        .horse-choice {
            border: 1px solid transparent;
            text-align: left;
        }

        .horse-choice[aria-checked="true"] {
            border-color: rgb(255 255 255 / 72%);
            background: rgb(255 255 255 / 12%);
            color: #fff;
        }

        .spotify-content {
            display: grid;
            grid-template-columns: 100px minmax(0, 1fr);
            align-items: center;
            gap: 12px;
            min-width: 0;
            filter: blur(0);
            transition:
                filter 420ms ease,
                grid-template-columns 650ms cubic-bezier(.22, 1, .36, 1),
                gap 650ms cubic-bezier(.22, 1, .36, 1);
        }

        .spotify-content.song-transition {
            filter: blur(12px);
        }

        .album-art {
            display: block;
            width: 100%;
            height: 100%;
            border-radius: inherit;
            object-fit: cover;
            background: #242427;
            box-shadow: 0 8px 22px rgb(0 0 0 / 24%);
            transition: filter 400ms ease, opacity 400ms ease, box-shadow 250ms ease;
        }

        .album-art-wrap {
            position: relative;
            width: 100px;
            height: 100px;
            border-radius: 12px;
            transition:
                width 650ms cubic-bezier(.2, .8, .2, 1),
                height 650ms cubic-bezier(.2, .8, .2, 1),
                border-radius 650ms cubic-bezier(.2, .8, .2, 1);
        }

        .paused-overlay {
            position: absolute;
            inset: 0;
            display: grid;
            place-items: center;
            border-radius: inherit;
            background: rgb(0 0 0 / 18%);
            color: rgb(255 255 255 / 90%);
            -webkit-backdrop-filter: blur(1px);
            backdrop-filter: blur(1px);
            opacity: 0;
            pointer-events: none;
            transition: opacity 500ms ease, backdrop-filter 500ms ease;
        }

        .paused-overlay svg {
            width: 30px;
            height: 30px;
            filter: blur(.65px) drop-shadow(0 1px 7px rgb(0 0 0 / 45%));
        }

        .spotify-content.not-playing .album-art {
            filter: blur(9px) brightness(.58) saturate(.8);
            opacity: .72;
        }

        .spotify-content.not-playing .paused-overlay {
            -webkit-backdrop-filter: blur(4px);
            backdrop-filter: blur(4px);
            opacity: 1;
        }

        .profile-content.layout-expanded .spotify-content {
            grid-template-columns: minmax(0, 1fr);
            gap: 16px;
        }

        .profile-content.layout-expanded .album-art-wrap {
            width: min(100%, 240px);
            height: auto;
            aspect-ratio: 1;
            justify-self: center;
            border-radius: 18px;
        }

        .profile-content.layout-expanded .album-art {
            box-shadow: 0 14px 32px rgb(0 0 0 / 30%);
        }

        .profile-content.layout-expanded .spotify-details {
            width: 100%;
            text-align: center;
        }

        .spotify-details {
            min-width: 0;
            flex: 1;
        }

        .spotify-title,
        .spotify-artist {
            overflow: hidden;
            margin: 0;
            text-overflow: ellipsis;
            white-space: nowrap;
        }

        .spotify-title {
            color: #f4f4f5;
            font-size: 0.92rem;
            font-weight: 400;
            letter-spacing: 0.005em;
        }

        .spotify-artist {
            margin-top: 3px;
            color: rgb(245 245 247 / 72%);
            font-size: 0.78rem;
        }

        .spotify-progress {
            display: grid;
            grid-template-columns: auto minmax(28px, 1fr) auto;
            align-items: center;
            gap: 8px;
            margin-top: 8px;
            color: #e5e5e7;
            font-size: 0.7rem;
            font-variant-numeric: tabular-nums;
        }

        .progress-track {
            height: 4px;
            overflow: hidden;
            border-radius: 999px;
            background: rgb(255 255 255 / 25%);
        }

        .progress-fill {
            width: 0;
            height: 100%;
            border-radius: inherit;
            background: #fff;
            box-shadow: 0 0 8px rgb(255 255 255 / 28%);
            transition: width 500ms linear;
        }

        .activity-content {
            padding: 4px 2px 2px;
        }

        .activity-title {
            margin: 0;
            font-size: 0.95rem;
            font-weight: 400;
            line-height: 1.35;
            overflow-wrap: anywhere;
        }

        .activity-subtitle {
            margin: 4px 0 0;
            color: #99999f;
            font-size: 0.82rem;
            line-height: 1.4;
            overflow-wrap: anywhere;
        }

        .presence-devices {
            display: flex;
            flex-wrap: wrap;
            gap: 7px;
            margin-top: 13px;
        }

        .presence-device {
            padding: 4px 9px;
            border-radius: 999px;
            background: rgb(255 255 255 / 8%);
            color: #b9b9c0;
            font-size: 0.72rem;
        }

        .top-three {
            position: absolute;
            z-index: 2;
            top: 50%;
            right: 0;
            display: grid;
            min-width: 0;
            width: min(100%, 410px);
            justify-self: end;
            grid-template-rows: auto minmax(0, 1fr);
            gap: 14px;
            transform: translateY(-50%);
        }

        .top-three-list {
            display: grid;
            gap: 12px;
        }

        .top-three-card {
            position: relative;
            display: grid;
            width: 100%;
            max-width: 390px;
            min-width: 0;
            min-height: 152px;
            grid-template-columns: 100px minmax(0, 1fr);
            align-items: center;
            gap: 12px;
            padding: 12px;
            overflow: hidden;
            border: 1px solid rgb(255 255 255 / 11%);
            border-radius: 20px;
            background:
                radial-gradient(ellipse at 18% 16%, color-mix(in srgb, var(--cover-color-one), transparent 48%), transparent 58%),
                radial-gradient(ellipse at 84% 78%, color-mix(in srgb, var(--cover-color-two), transparent 52%), transparent 62%),
                rgb(24 24 27 / 52%);
            box-shadow: 0 16px 42px rgb(0 0 0 / 30%);
            -webkit-backdrop-filter: blur(22px) saturate(1.4);
            backdrop-filter: blur(22px) saturate(1.4);
            color: #f5f5f7;
            animation: top-three-card-enter 700ms cubic-bezier(.22, 1, .36, 1) both;
        }

        .top-three-card:nth-child(2) {
            animation-delay: 120ms;
        }

        .top-three-card:nth-child(3) {
            animation-delay: 240ms;
        }

        @keyframes top-three-card-enter {
            from {
                opacity: 0;
                filter: blur(12px);
                transform: translateY(12px);
            }
            to {
                opacity: 1;
                filter: blur(0);
                transform: translateY(0);
            }
        }

        .top-three-art {
            display: grid;
            width: 100px;
            height: 100px;
            place-items: center;
            overflow: hidden;
            border-radius: 12px;
            background: linear-gradient(145deg, color-mix(in srgb, var(--cover-color-one), #222 50%), #171719);
            color: rgb(255 255 255 / 54%);
            font-size: 0.7rem;
            text-align: center;
        }

        .top-three-art img {
            display: block;
            width: 100%;
            height: 100%;
            object-fit: cover;
        }

        .top-three-details {
            min-width: 0;
        }

        .top-three-category,
        .top-three-title,
        .top-three-creator {
            overflow: hidden;
            margin: 0;
            text-overflow: ellipsis;
            white-space: nowrap;
        }

        .top-three-category {
            margin-bottom: 6px;
            color: rgb(255 255 255 / 58%);
            font-size: 0.68rem;
            letter-spacing: 0.06em;
            text-transform: uppercase;
        }

        .top-three-title {
            color: #f4f4f5;
            font-size: 0.92rem;
        }

        .top-three-creator {
            margin-top: 4px;
            color: rgb(245 245 247 / 72%);
            font-size: 0.78rem;
        }

        [hidden] {
            display: none !important;
        }

        @media (max-width: 380px) {
            .album-art-wrap {
                width: 82px;
                height: 82px;
            }
        }

        @media (max-width: 700px) {
            .page-layout {
                grid-template-columns: minmax(0, 1fr);
                grid-template-rows: minmax(0, 1fr) auto;
                gap: 12px;
                align-content: center;
            }

            .top-three {
                position: relative;
                top: auto;
                right: auto;
                height: auto;
                min-height: 0;
                width: min(100%, 390px);
                justify-self: center;
                align-self: center;
                transform: none;
            }

            .top-three-list {
                width: 100%;
                grid-template-columns: repeat(3, minmax(0, 1fr));
                gap: 8px;
            }

            .top-three-card {
                min-height: 0;
                grid-template-columns: minmax(0, 1fr);
                align-content: start;
                justify-items: center;
                gap: 7px;
                padding: 9px 7px 11px;
                border-radius: 15px;
            }

            .top-three-art {
                width: min(100%, 76px);
                height: auto;
                aspect-ratio: 1;
                border-radius: 10px;
                font-size: 0.58rem;
            }

            .top-three-details {
                width: 100%;
                text-align: center;
            }

            .top-three-category {
                margin-bottom: 3px;
                font-size: 0.55rem;
                letter-spacing: 0.03em;
            }

            .top-three-title {
                font-size: 0.68rem;
            }

            .top-three-creator {
                margin-top: 2px;
                font-size: 0.6rem;
            }

            main.layout-expanded {
                width: min(100%, 520px);
            }

            .profile-content.layout-expanded {
                grid-template-columns: minmax(0, 1fr);
                gap: 26px;
            }

            .profile-content.layout-expanded .presence-card {
                width: min(100%, 390px);
                margin: 0 auto;
            }

            .profile-content.layout-expanded > .status {
                grid-column: auto;
            }
        }

        .status {
            margin: 0;
            color: #777780;
            font-size: 0.875rem;
            text-align: center;
        }

        .status:empty {
            display: none;
        }

        @keyframes soft-enter {
            from {
                opacity: 0;
                transform: translateY(10px) scale(.99);
            }
            to {
                opacity: 1;
                transform: translateY(0) scale(1);
            }
        }

        @media (prefers-reduced-motion: reduce) {
            :root {
                transition: none;
            }

            .profile,
            .presence-card,
            .top-three-card,
            body::before {
                animation: none;
            }

            .presence-card {
                transition: none;
            }

            .page-layout,
            main,
            .profile-content,
            .spotify-content,
            .album-art-wrap,
            .album-art,
            .orientation-toggle,
            .remember-player-toggle,
            .player-menu-popover,
            .zoom-cursor {
                transition: none;
            }
        }