@font-face {
    font-display: swap;
    font-family: "Fira Code";
    src: url("/assets/fira_code.woff2") format("woff2");
}

@font-face {
    font-display: swap;
    font-family: "JetBrains Mono";
    src: url("/assets/jetbrains_mono.woff2") format("woff2");
}

@font-face {
    font-display: swap;
    font-family: "RuneScape Bold";
    src: url("/assets/runescape_bold.woff2") format("woff2");
}

:root {
    --unit: 1rem;
    --pct: 1%;
    --deg: 1deg;
    --ms: 1ms;
    --ch: 1ch;
    --em: 1em;
    --vw: 1vw;
    --vh: 1vh;
    --border-color-subtle: rgb(232 220 180 / 12%);
    --color-azure: #6a90b8;
    --color-cream: #e8ecf2;
    --color-ember: #b33535;
    --color-gold: #e0c96e;
    --color-gold-faint: rgb(224 201 110 / 28%);
    --color-gold-soft: rgb(224 201 110 / 60%);
    --color-graphite: #1d2027;
    --color-graphite-dark: #0d0e10;
    --color-graphite-light: #8a8b8d;
    --color-green: #3c783c;
    --color-live: #5fd13f;
    --color-silver: #b8c0cc;
    --color-warn: #d99c2e;
    --color-code-string: #a8c98f;
    --color-code-number: #d6a374;
    --surface-code: rgb(8 9 11 / 85%);
    --surface-fill: rgb(224 201 110 / 14%);
    --surface-fill-set: rgb(95 209 63 / 16%);
    --col-guide-nav: calc(var(--unit) * 15);
    --code-max-height: calc(var(--unit) * 30);
    --seq-max-width: calc(var(--unit) * 44);
    --input-min-height: calc(var(--unit) * 2.25);
    --motion-step: calc(var(--ms) * 600);
    --motion-pulse: calc(var(--ms) * 900);
    --pulse-count: 6;
    --opacity-dim: 0.18;
    --dash-draw: 400;
    --surface-bar: rgb(13 14 16 / 80%);
    --font-body: "Fira Code", "Cascadia Code", "Cascadia Mono", "Consolas", ui-monospace, monospace;
    --font-data: "JetBrains Mono", "Cascadia Code", "Cascadia Mono", "Consolas", ui-monospace, monospace;
    --font-heading: "Cascadia Code", "Fira Code", "Cascadia Mono", "Consolas", ui-monospace, monospace;
    --font-brand: "RuneScape Bold", var(--font-heading);
    --font-weight-regular: 400;
    --font-weight-strong: 600;
    --fs-xs: calc(var(--unit) * 0.688);
    --fs-sm: calc(var(--unit) * 0.75);
    --fs-md: calc(var(--unit) * 0.813);
    --fs-base: calc(var(--unit) * 0.875);
    --fs-xl: calc(var(--unit) * 1.125);
    --lh-normal: 1.6;
    --ls-wide: calc(var(--em) * 0.08);
    --radius-md: calc(var(--unit) * 0.15);
    --radius-full: calc(var(--unit) * 999);
    --space-1: calc(var(--unit) * 0.25);
    --space-2: calc(var(--unit) * 0.5);
    --space-3: calc(var(--unit) * 0.75);
    --space-4: calc(var(--unit) * 1);
    --space-6: calc(var(--unit) * 1.5);
    --space-8: calc(var(--unit) * 2);
    --border-width-hair: calc(var(--unit) * 0.063);
    --border-width-strong: calc(var(--unit) * 0.125);
    --border-subtle: var(--border-width-hair) solid var(--border-color-subtle);
    --border-subtle-dashed: var(--border-width-hair) dashed var(--border-color-subtle);
    --border-tab: var(--border-width-strong) solid transparent;
    --outline-focus: var(--border-width-strong) solid var(--color-gold);
    --scrollbar-thickness: calc(var(--unit) * 0.5);
    --scrollbar-thickness-thin: calc(var(--unit) * 0.375);
    --dot-size: calc(var(--unit) * 0.5);
    --badge-size: calc(var(--unit) * 7);
    --badge-size-compact: calc(var(--unit) * 4);
    --chart-height: calc(var(--unit) * 8);
    --table-scroll-height: calc(var(--unit) * 16);
    --strip-height: calc(var(--unit) * 2);
    --col-min-card: calc(var(--unit) * 14);
    --col-min-index: calc(var(--unit) * 16);
    --col-min-mix: calc(var(--unit) * 17);
    --col-min-live: calc(var(--unit) * 18);
    --col-min-wide: calc(var(--unit) * 22);
    --col-share: calc(var(--unit) * 4.5);
    --col-label: calc(var(--unit) * 6.5);
    --measure: calc(var(--ch) * 80);
    --scroll-offset: calc(var(--unit) * 4);
    --viewport-height: calc(var(--vh) * 100);
    --offscreen: calc(var(--vw) * -100);
    --opacity-stale: 0.45;
    --z-bar: 2;
    --z-skip: 3;
    --motion-fast: calc(var(--ms) * 120);
    --gradient-bg-bloom: radial-gradient(
        ellipse at calc(var(--pct) * 20) calc(var(--pct) * 30),
        rgb(201 168 76 / 8%) 0%,
        transparent calc(var(--pct) * 55)
    );
    --gradient-bg-steel: radial-gradient(
        ellipse at calc(var(--pct) * 80) calc(var(--pct) * 20),
        rgb(106 117 133 / 8%) 0%,
        transparent calc(var(--pct) * 60)
    );
    --gradient-bg-components: linear-gradient(calc(var(--deg) * 160), rgb(21 23 28 / 92%) 0%, rgb(13 14 16 / 92%) 100%);
    --gradient-border-gold: linear-gradient(
        calc(var(--deg) * 90),
        transparent,
        var(--color-gold) calc(var(--pct) * 50),
        transparent
    );
    --bg-page: var(--gradient-bg-bloom), var(--gradient-bg-steel), var(--color-graphite-dark);
    --blur-glass: calc(var(--unit) * 0.5);
    --gutter: clamp(var(--unit), calc(var(--vw) * 2.5), calc(var(--unit) * 2.5));

    color-scheme: dark;
}