@font-face {
    font-family: "Inter";
    font-style: normal;
    font-weight: 400 600;
    font-display: swap;
    src: url("fonts/inter-latin.woff2") format("woff2");
}

@font-face {
    font-family: "Barlow Condensed";
    font-style: normal;
    font-weight: 500;
    font-display: swap;
    src: url("fonts/barlow-condensed-500-latin.woff2") format("woff2");
}

@font-face {
    font-family: "Barlow Condensed";
    font-style: normal;
    font-weight: 600;
    font-display: swap;
    src: url("fonts/barlow-condensed-600-latin.woff2") format("woff2");
}

@font-face {
    font-family: "Barlow Condensed";
    font-style: normal;
    font-weight: 700;
    font-display: swap;
    src: url("fonts/barlow-condensed-700-latin.woff2") format("woff2");
}

:root {
    color-scheme: light;
    --font-display: "Barlow Condensed", "Arial Narrow", sans-serif;
    --font-body: "Inter", "Segoe UI", Arial, sans-serif;
    --clay-950: #713322;
    --clay-900: #9e4931;
    --clay-800: #aa5035;
    --clay-700: #b85a3c;
    --clay-600: #c16040;
    --clay-500: #c96a45;
    --clay-200: #e4bcae;
    --clay-100: #efdad2;
    --clay-50: #faf0ec;
    --cream: #f6f3f0;
    --white: #ffffff;
    --ink: #1c1c1c;
    --muted: #6b625e;
    --success: #3e6956;
    --success-soft: #e5f0ea;
    --error: #a2332a;
    --border: #e8ddd8;
    --shadow: 0 24px 70px rgba(94, 48, 33, 0.13);
    --shadow-sm: 0 8px 26px rgba(94, 48, 33, 0.08);
    --shadow-lg: 0 24px 70px rgba(94, 48, 33, 0.18);
}

body,
input,
select,
textarea {
    font-family: var(--font-body);
}

h1,
h2,
h3,
h4,
button,
.link-button,
.brand-name,
.token-icon,
.balance-card strong,
.date-badge strong,
.fc .fc-toolbar-title,
.session-count,
.event-status {
    font-family: var(--font-display);
}

.brand-logo {
    display: block;
    width: 100%;
    height: auto;
}

.page-loader {
    position: fixed;
    inset: 0;
    width: 100vw;
    height: 100dvh;
    max-width: none;
    max-height: none;
    margin: 0;
    border: 0;
    padding: 1.5rem;
    box-sizing: border-box;
    background: rgba(246, 243, 240, 0.68);
    -webkit-backdrop-filter: blur(5px);
    backdrop-filter: blur(5px);
}

.page-loader:not([open]) {
    display: none;
}

.js .page-loader[open] {
    display: grid;
    place-items: center;
}

.page-loader::backdrop {
    background: transparent;
}

.page-loader-content {
    display: grid;
    justify-items: center;
    color: var(--clay-900);
}

.page-loader-animation {
    width: min(52vw, 210px);
    overflow: visible;
    filter: drop-shadow(0 12px 14px rgba(94, 48, 33, 0.14));
}

.page-loader-racket {
    transform-box: view-box;
    transform-origin: 72px 138px;
    animation: loader-racket-hit 1.35s cubic-bezier(0.45, 0, 0.25, 1) infinite;
}

.page-loader-racket-frame {
    fill: var(--clay-900);
}

.page-loader-racket-inner {
    fill: var(--white);
    stroke: var(--clay-950);
    stroke-width: 1.5;
}

.page-loader-racket-strings {
    fill: none;
    stroke: var(--clay-200);
    stroke-width: 1.35;
    stroke-linecap: round;
}

.page-loader-racket-throat,
.page-loader-racket-shaft,
.page-loader-racket-grip {
    fill: none;
    stroke: var(--clay-900);
    stroke-linecap: round;
    stroke-linejoin: round;
}

.page-loader-racket-throat {
    stroke-width: 5;
}

.page-loader-racket-shaft {
    stroke-width: 7;
}

.page-loader-racket-grip {
    stroke: var(--clay-950);
    stroke-width: 13;
}

.page-loader-racket-grip-detail {
    fill: none;
    stroke: var(--clay-200);
    stroke-width: 2;
    stroke-linecap: round;
}

.page-loader-ball {
    transform-box: view-box;
    transform-origin: 145px 48px;
    animation: loader-ball-flight 1.35s cubic-bezier(0.45, 0, 0.25, 1) infinite;
}

.page-loader-ball circle {
    fill: var(--clay-500);
}

.page-loader-ball path {
    fill: var(--white);
}

.page-loader-content p {
    margin: -0.3rem 0 0;
    font-family: var(--font-display);
    font-size: 1rem;
    font-weight: 600;
    letter-spacing: 0.12em;
    text-transform: uppercase;
}

@keyframes loader-racket-hit {
    0%,
    22%,
    100% {
        transform: rotate(-16deg);
    }

    40% {
        transform: rotate(12deg);
    }

    55% {
        transform: rotate(3deg);
    }
}

@keyframes loader-ball-flight {
    0%,
    100% {
        transform: translateX(34px) translateY(-5px) rotate(0deg);
    }

    35% {
        transform: translateX(-17px) translateY(5px) scaleX(0.86) rotate(-35deg);
    }

    43% {
        transform: translateX(-11px) translateY(1px) scaleX(1.08) rotate(-50deg);
    }

    76% {
        transform: translateX(38px) translateY(-8px) rotate(-150deg);
    }
}