:root {
    --qiyun-font-sans: "PingFang SC", "Microsoft YaHei UI", "Microsoft YaHei", "Noto Sans CJK SC", "Source Han Sans SC", system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
    --qiyun-font-display: "Noto Serif SC", "Source Han Serif SC", "Songti SC", "STSong", "SimSun", serif;
    --qiyun-font-mono: "SFMono-Regular", Consolas, "Liberation Mono", monospace;
    --qiyun-focus: #2f6fda;
}

html {
    font-family: var(--qiyun-font-sans);
    font-size: 16px;
    text-size-adjust: 100%;
    -webkit-text-size-adjust: 100%;
}

body,
button,
input,
select,
textarea {
    font-family: var(--qiyun-font-sans);
    font-kerning: normal;
    font-synthesis: none;
}

body {
    text-rendering: optimizeLegibility;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

body * {
    letter-spacing: 0 !important;
}

h1,
h2,
h3,
h4,
h5,
h6 {
    text-wrap: balance;
}

h1 {
    line-height: 0.96;
}

h2 {
    line-height: 1.08;
}

h3,
h4,
h5,
h6 {
    line-height: 1.25;
}

p,
li,
label,
input,
select,
textarea {
    line-height: 1.65;
}

p,
li {
    text-wrap: pretty;
}

button,
.pill-button,
.primary-button,
.secondary-button {
    line-height: 1.2;
}

.site-kicker,
.hero-label,
.kicker {
    font-weight: 700;
}

body[data-page] .site-header h1 {
    margin-bottom: 0.12em;
    color: #54453d;
    font-family: var(--qiyun-font-display);
    font-size: 3.8rem;
    font-weight: 700;
    letter-spacing: 0.02em !important;
}

body[data-page] .hero-copy h2 {
    color: #6e574c;
    font-family: var(--qiyun-font-display);
    font-size: 3.55rem;
    font-weight: 600;
    letter-spacing: 0.01em !important;
    line-height: 1.02;
}

html.dark body[data-page] .site-header h1,
html.dark body[data-page] .hero-copy h2 {
    color: var(--ink);
}

#birthday-title {
    font-size: 6.5rem;
}

.player-header h1,
.game-info-bar h1,
.container > header h1 {
    font-size: 3rem;
}

code,
pre,
kbd,
samp,
output,
#current-time,
#total-time,
#score,
#bestScore,
#highScore,
#lines,
.song-duration,
.result-item strong {
    font-family: var(--qiyun-font-mono);
    font-variant-numeric: tabular-nums;
}

::selection {
    color: #fff;
    background: #2f6fda;
}

:where(a, button, input, select, textarea, [tabindex]):focus-visible {
    outline: 3px solid color-mix(in srgb, var(--qiyun-focus) 72%, transparent);
    outline-offset: 3px;
}

@media (max-width: 640px) {
    html {
        font-size: 15px;
    }

    body[data-page] .site-header h1 {
        font-size: 2.55rem;
    }

    body[data-page] .hero-copy h2 {
        font-size: 2.25rem;
    }

    #birthday-title {
        font-size: 3.5rem;
    }

    .player-header h1,
    .game-info-bar h1,
    .container > header h1 {
        font-size: 2.25rem;
    }
}

@media (prefers-contrast: more) {
    :where(a, button, input, select, textarea, [tabindex]):focus-visible {
        outline-width: 4px;
    }
}