@font-face {
    font-family: "Space Grotesk";
    src: url("/assets/fonts/space-grotesk.ttf") format("truetype");
    font-weight: 300 700;
    font-display: swap;
}
:root {
    color-scheme: dark;
    --bg: #12121d;
    --panel: #18181c;
    --ink: #eeedf8;
    --muted: #aaa8bd;
    --faint: #77748d;
    --yellow: #f5d76e;
    --orange: #ffa65a;
    --red: #ff6b6b;
    --footer-color: var(--muted);
    --line: #353346;

    --panel-backdrop-blur: 6px; /* Blur behind settings panel and appeal card helper */
    --panel-backdrop-dim: 0.3;
    --panel-backdrop-duration: 170ms;

    /* -----------Theme palettes----------- */
    --exceed-background: url("/assets/background.png");
    --exceed-background-offset-x-mobile: 0px; /* Mobile horizontal offset to center the face for example, >0px shifts to the right  */
    --exceed-accent: rgb(147, 225, 243); /* And avg100, ...*/
    --exceed-chart-total: #5e8ee6;
    --exceed-chart-plays: #607e90;
    --exceed-chart-play-points: #6b8fa6;
    --exceed-chart-best: #708295;
    --exceed-chart-avg10: #6d93ad;
    --exceed-chart-top50: #a3afb8;
    --exceed-timing-early-color: #72d4d1;
    --exceed-timing-late-color: #6ba8de;
    --exceed-timing-curve-color: #4d6a84;
    --exceed-notice-accent: #78a6d6;
    --exceed-notice-text: #cadbe9;
    --exceed-chart-summary-color: #c8dce8;

    --nabla-background: url("/assets/background-nabla.png");
    --nabla-background-offset-x-mobile: 300px;
    --nabla-accent: #c8efa5; /*And avg100, ...*/
    --nabla-chart-total: #47ca91;
    --nabla-chart-plays: #7e9174;
    --nabla-chart-play-points: #91aa7f;
    --nabla-chart-best: #868f81;
    --nabla-chart-avg10: #64855f;
    --nabla-chart-top50: #b4c5a5;
    --nabla-timing-early-color: #d5e08d;
    --nabla-timing-late-color: #83ca89;
    --nabla-timing-curve-color: #7f9b68;
    --nabla-notice-accent: #a4c77f;
    --nabla-notice-text: #d4e8c9;
    --nabla-chart-summary-color: #d3e5c3;
    /* ------------------------------------ */

    --theme-transition-duration: 520ms;
    --theme-transition-easing: cubic-bezier(0.22, 1, 0.36, 1);

    --accent: var(--exceed-accent);
    --accent-wash: color-mix(
        in srgb,
        var(--accent) calc(100% * 27 / 255),
        transparent
    );
    --chart-total: var(--exceed-chart-total);
    --chart-plays: var(--exceed-chart-plays);
    --chart-play-points: var(--exceed-chart-play-points);
    --chart-best: var(--exceed-chart-best);
    --chart-avg10: var(--exceed-chart-avg10);
    --chart-avg100: var(--accent);
    --chart-top50: var(--exceed-chart-top50);
    --timing-center-color: var(--accent);
    --timing-early-color: var(--exceed-timing-early-color);
    --timing-late-color: var(--exceed-timing-late-color);
    --timing-curve-color: var(--exceed-timing-curve-color);
    --notice-accent: var(--exceed-notice-accent);
    --notice-text: var(--exceed-notice-text);
    --chart-summary-color: var(--exceed-chart-summary-color);
    --calculator-grade-color: color-mix(
        in srgb,
        var(--accent) 70%,
        var(--faint)
    );
    --sans: "Space Grotesk", sans-serif;
    --panel-radius: 16px;
    --control-radius: 10px;

    /* Some buttons */
    --button-height-desktop: 40px;
    --button-height-mobile: 40px;
    --button-height: var(--button-height-desktop);
    --difficulty-button-height-desktop: 30px;
    --difficulty-button-height-mobile: 26px;

    --control-bg: #12121b7a; /* Shared translucent background for inputs */
    --item-radius: 7px;

    /* Popup settings */
    --popup-radius: 12px;
    --popup-bg: #17181bec;
    --popup-color: var(--muted);
    --popup-shadow: 0 8px 30px #0005;
    --popup-padding: 12px 14px;
    --popup-font-size: 11px;
    /* Animations */
    --popup-enter-duration: 240ms;
    --popup-exit-duration: 240ms;
    --popup-offset: 2px;
    --popup-easing: cubic-bezier(0.16, 1, 0.3, 1);

    --panel-padding-inline: 27px;
    --list-padding-inline: 25px;
    --search-width: 320px;
    --entry-title-size: 15px;
    --entry-position-size: 12px; /* Very left column, Top 1 2 3 etc*/
    --entry-position-width: 38px;
    --entry-detail-size: 13px;
    --diff-badge-size: 10px;
    --entry-clear-size: 11px;
    --entry-score-size: 12px;
    --entry-vf-size: 13px;
    --entry-vf-color: var(--accent);
    --entry-cover-size: 40px;
    --entry-gap: 11px;
    --entry-padding-block: 13px;
    --entry-details-gap: 8px;
    --entry-section-bg: #10101563;
    --score-header-bg: #10101544; /*#ffffff06*/
    --row-separator: #ffffff09;
    --row-hover: color-mix(
        in srgb,
        var(--accent) calc(100% * 17 / 255),
        transparent
    );
    --chart-label-color: #928da7;
    --chart-caption-color: #c0b7d0;
    --chart-grid-color: var(--row-separator);

    --vf-class-sienna: #b1814b;
    --vf-class-cobalt: #496dcc;
    --vf-class-dandelion: #f2c029;
    --vf-class-cyan: #56c7c4;
    --vf-class-scarlet: #dc3b4b;
    --vf-class-coral: #ef9fb7;
    --vf-class-argento: #b9c0ce;
    --vf-class-eldora: #e5c35a;
    --vf-class-crimson: #b52f45;
    --vf-class-imperial: #a277cf;
    --vf-distribution-raw-color: #999;

    /* Should not be changed (by much) to match in-game radar */
    --radar-center-color: #4948ff;
    --radar-gradient-start: #365ab8;
    --radar-gradient-middle: #d22eab;
    --radar-gradient-end: #ff0030;
    --radar-fill-opacity: 0.85;
    --radar-grid-bg: #101714a6;
    --radar-grid-color: #e4e9e0a6;
    --radar-transition-duration: 220ms;

    /* Increased brightness a bit to make the text more readable */
    --radar-label-notes: #2ee8e4;
    --radar-label-peak: #ff4d71;
    --radar-label-tsumami: #ff56e0;
    --radar-label-tricky: #ebee6a;
    --radar-label-hand-trip: #ab74da;
    --radar-label-one-hand: #1bee7e;

    /* Not sure about the colors here though */
    --profile-radar-center-color: #ff7914;
    --profile-radar-gradient-start: #692000;
    --profile-radar-gradient-middle: #e85800;
    --profile-radar-gradient-end: #ff8a0a;
    --profile-radar-fill-opacity: 1;
    --profile-radar-stroke-color: #ef6b0a;
    --profile-radar-grid-bg: color-mix(in srgb, var(--panel) 20%, transparent);

    --performance-background-dim: 0.6;
    --performance-panel-dim: 0.85;
    --performance-background-blur: 9px;
    --performance-background-blur-mobile: 4.5px;
}
:root[data-theme="nabla"] {
    --accent: var(--nabla-accent);
    --chart-total: var(--nabla-chart-total);
    --chart-plays: var(--nabla-chart-plays);
    --chart-play-points: var(--nabla-chart-play-points);
    --chart-best: var(--nabla-chart-best);
    --chart-avg10: var(--nabla-chart-avg10);
    --chart-top50: var(--nabla-chart-top50);
    --timing-early-color: var(--nabla-timing-early-color);
    --timing-late-color: var(--nabla-timing-late-color);
    --timing-curve-color: var(--nabla-timing-curve-color);
    --notice-accent: var(--nabla-notice-accent);
    --notice-text: var(--nabla-notice-text);
    --chart-summary-color: var(--nabla-chart-summary-color);
}
* {
    box-sizing: border-box;
}
body {
    margin: 0;
    background: var(--bg);
    color: var(--ink);
    font-family: var(--sans);
    font-variant-numeric: tabular-nums;
    font-size: 14px;
    line-height: 1.5;
}
button,
input,
select {
    font: inherit;
}
button,
a,
input,
select {
    -webkit-tap-highlight-color: transparent;
}
button {
    cursor: pointer;
    color: inherit;
    transition:
        background 0.16s,
        color 0.16s,
        border-color 0.16s;
}
button:disabled {
    opacity: 0.35;
    cursor: default;
}
a {
    color: inherit;
    text-decoration: none;
}
button:focus-visible,
a:focus-visible,
input:focus-visible,
select:focus-visible {
    outline: 2px solid var(--accent);
    outline-offset: 4px;
}
button:hover {
    color: var(--accent);
}
[hidden] {
    display: none !important;
}
.sr-only {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
}
.skip-link {
    position: fixed;
    top: -60px;
    left: 15px;
    z-index: 5;
    background: var(--panel);
    padding: 10px 20px;
}
.skip-link:focus {
    top: 15px;
}
h1 {
    font-size: 53px;
    line-height: 1.14;
    font-weight: 550;
    margin: 11px 0 8px;
}