@font-face {
    font-family: "Geist";
    font-weight: 100 900;
    font-style: normal;
    font-display: swap;
    src: url("/fonts/geist_variable.ttf") format("truetype");
}

@font-face {
    font-family: "GeistMono";
    font-weight: 100 900;
    font-style: normal;
    font-display: swap;
    src: url("/fonts/geist_mono_variable.ttf") format("truetype");
}

@font-face {
    font-family: "SFHello";
    font-weight: 200;
    font-style: normal;
    font-display: swap;
    src: url("/fonts/apple/sf_hello_light.woff2") format("woff2");
}

@font-face {
    font-family: "SFHello";
    font-weight: 300;
    font-style: normal;
    font-display: swap;
    src: url("/fonts/apple/sf_hello_thin.woff2") format("woff2");
}

@font-face {
    font-family: "SFHello";
    font-weight: 400;
    font-style: normal;
    font-display: swap;
    src: url("/fonts/apple/sf_hello_regular.woff2") format("woff2");
}

@font-face {
    font-family: "SFHello";
    font-weight: 500;
    font-style: normal;
    font-display: swap;
    src: url("/fonts/apple/sf_hello_medium.woff2") format("woff2");
}

@font-face {
    font-family: "SFHello";
    font-weight: 600;
    font-style: normal;
    font-display: swap;
    src: url("/fonts/apple/sf_hello_semi_bold.woff2") format("woff2");
}

@font-face {
    font-family: "SFHello";
    font-weight: 700;
    font-style: normal;
    font-display: swap;
    src: url("/fonts/apple/sf_hello_bold.woff2") format("woff2");
}

/* MARK: Variables */

:root {
    /** MARK: Colors - Base **/

    --color-black: oklch(0 0 0);

    --color-white: oklch(1 0 0);

    /** MARK: Colours - Brand **/

    /* #001F3F; */
    --color-midnight: oklch(0.2381 0.0712 252.01);

    /* F0F2F6; */
    --color-athens: oklch(0.9608 0.0058 264.53);

    /* #CAEBE8; */
    --color-mint-tulip: oklch(0.9155 0.0347 189.86);

    /* #7ACCC6; */
    --color-monte-carlo: oklch(0.7912 0.081 189.65);

    /* 1B5D74; */
    --color-blumine: oklch(0.4484 0.0741 225.69);
    --color-blumine-50: oklch(0.947 0.027 233.93);
    --color-blumine-100: oklch(0.8835 0.063 230.96);
    --color-blumine-200: oklch(0.7749 0.128 225.89);
    --color-blumine-300: oklch(0.6647 0.11 225.93);
    --color-blumine-400: oklch(0.5527 0.092 225.74);
    --color-blumine-500: oklch(0.4484 0.0741 225.69);
    --color-blumine-600: oklch(0.3836 0.063 225.86);
    --color-blumine-700: oklch(0.3233 0.054 226.79);
    --color-blumine-800: oklch(0.2633 0.044 225.89);
    --color-blumine-900: oklch(0.1958 0.032 225.14);
    --color-blumine-950: oklch(0.1628 0.027 228.38);

    /* #FF6F61; */
    --color-bittersweet: oklch(0.7151 0.1784 27.9687);

    /** MARK: Colours - Misc **/

    --color-amber-50: oklch(0.987 0.022 95.277);
    --color-amber-100: oklch(0.962 0.059 95.617);
    --color-amber-200: oklch(0.924 0.12 95.746);
    --color-amber-300: oklch(0.879 0.169 91.605);
    --color-amber-400: oklch(0.828 0.189 84.429);
    --color-amber-500: oklch(0.769 0.188 70.08);
    --color-amber-600: oklch(0.666 0.179 58.318);
    --color-amber-700: oklch(0.555 0.163 48.998);
    --color-amber-800: oklch(0.473 0.137 46.201);
    --color-amber-900: oklch(0.414 0.112 45.904);
    --color-amber-950: oklch(0.279 0.077 45.635);

    --color-blue-50: oklch(0.97 0.014 254.604);
    --color-blue-100: oklch(0.932 0.032 255.585);
    --color-blue-200: oklch(0.882 0.059 254.128);
    --color-blue-300: oklch(0.809 0.105 251.813);
    --color-blue-400: oklch(0.707 0.165 254.624);
    --color-blue-500: oklch(0.623 0.214 259.815);
    --color-blue-600: oklch(0.546 0.245 262.881);
    --color-blue-700: oklch(0.488 0.243 264.376);
    --color-blue-800: oklch(0.424 0.199 265.638);
    --color-blue-900: oklch(0.379 0.146 265.522);
    --color-blue-950: oklch(0.282 0.091 267.935);

    --color-cyan-50: oklch(0.984 0.019 200.873);
    --color-cyan-100: oklch(0.956 0.045 203.388);
    --color-cyan-200: oklch(0.917 0.08 205.041);
    --color-cyan-300: oklch(0.865 0.127 207.078);
    --color-cyan-400: oklch(0.789 0.154 211.53);
    --color-cyan-500: oklch(0.715 0.143 215.221);
    --color-cyan-600: oklch(0.609 0.126 221.723);
    --color-cyan-700: oklch(0.52 0.105 223.128);
    --color-cyan-800: oklch(0.45 0.085 224.283);
    --color-cyan-900: oklch(0.398 0.07 227.392);
    --color-cyan-950: oklch(0.302 0.056 229.695);

    --color-emerald-50: oklch(0.979 0.021 166.113);
    --color-emerald-100: oklch(0.95 0.052 163.051);
    --color-emerald-200: oklch(0.905 0.093 164.15);
    --color-emerald-300: oklch(0.845 0.143 164.978);
    --color-emerald-400: oklch(0.765 0.177 163.223);
    --color-emerald-500: oklch(0.696 0.17 162.48);
    --color-emerald-600: oklch(0.596 0.145 163.225);
    --color-emerald-700: oklch(0.508 0.118 165.612);
    --color-emerald-800: oklch(0.432 0.095 166.913);
    --color-emerald-900: oklch(0.378 0.077 168.94);
    --color-emerald-950: oklch(0.262 0.051 172.552);

    --color-fuchsia-50: oklch(0.986 0.014 322.924);
    --color-fuchsia-100: oklch(0.972 0.046 322.968);
    --color-fuchsia-200: oklch(0.945 0.087 322.863);
    --color-fuchsia-300: oklch(0.905 0.143 322.361);
    --color-fuchsia-400: oklch(0.852 0.199 321.365);
    --color-fuchsia-500: oklch(0.675 0.188 322.72);
    --color-fuchsia-600: oklch(0.627 0.162 322.284);
    --color-fuchsia-700: oklch(0.554 0.135 321.554);
    --color-fuchsia-800: oklch(0.476 0.114 320.659);
    --color-fuchsia-900: oklch(0.421 0.095 319.715);
    --color-fuchsia-950: oklch(0.286 0.066 318.934);

    --color-green-50: oklch(0.982 0.018 155.826);
    --color-green-100: oklch(0.962 0.044 156.743);
    --color-green-200: oklch(0.925 0.084 155.995);
    --color-green-300: oklch(0.871 0.15 154.449);
    --color-green-400: oklch(0.792 0.209 151.711);
    --color-green-500: oklch(0.723 0.219 149.579);
    --color-green-600: oklch(0.627 0.194 149.214);
    --color-green-700: oklch(0.527 0.154 150.069);
    --color-green-800: oklch(0.448 0.119 151.328);
    --color-green-900: oklch(0.393 0.095 152.535);
    --color-green-950: oklch(0.266 0.065 152.934);

    --color-grey-50: oklch(0.985 0.002 247.839);
    --color-grey-100: oklch(0.967 0.003 264.542);
    --color-grey-200: oklch(0.928 0.006 264.531);
    --color-grey-300: oklch(0.872 0.01 258.338);
    --color-grey-400: oklch(0.707 0.022 261.325);
    --color-grey-500: oklch(0.551 0.027 264.364);
    --color-grey-600: oklch(0.446 0.03 256.802);
    --color-grey-700: oklch(0.373 0.034 259.733);
    --color-grey-800: oklch(0.278 0.033 256.848);
    --color-grey-900: oklch(0.21 0.034 264.665);
    --color-grey-950: oklch(0.13 0.028 261.692);

    --color-indigo-50: oklch(0.962 0.018 272.314);
    --color-indigo-100: oklch(0.93 0.034 272.788);
    --color-indigo-200: oklch(0.87 0.065 274.039);
    --color-indigo-300: oklch(0.785 0.115 274.713);
    --color-indigo-400: oklch(0.673 0.182 276.935);
    --color-indigo-500: oklch(0.585 0.233 277.117);
    --color-indigo-600: oklch(0.511 0.262 276.966);
    --color-indigo-700: oklch(0.457 0.24 277.023);
    --color-indigo-800: oklch(0.398 0.195 277.366);
    --color-indigo-900: oklch(0.359 0.144 278.697);
    --color-indigo-950: oklch(0.257 0.09 281.288);

    --color-lime-50: oklch(0.986 0.031 120.757);
    --color-lime-100: oklch(0.967 0.067 122.328);
    --color-lime-200: oklch(0.938 0.127 124.321);
    --color-lime-300: oklch(0.897 0.196 126.665);
    --color-lime-400: oklch(0.841 0.238 128.85);
    --color-lime-500: oklch(0.768 0.233 130.85);
    --color-lime-600: oklch(0.648 0.2 131.684);
    --color-lime-700: oklch(0.532 0.157 131.589);
    --color-lime-800: oklch(0.453 0.124 130.933);
    --color-lime-900: oklch(0.405 0.101 131.063);
    --color-lime-950: oklch(0.274 0.072 132.109);

    --color-neutral-50: oklch(0.985 0 0);
    --color-neutral-100: oklch(0.97 0 0);
    --color-neutral-200: oklch(0.922 0 0);
    --color-neutral-300: oklch(0.87 0 0);
    --color-neutral-400: oklch(0.708 0 0);
    --color-neutral-500: oklch(0.556 0 0);
    --color-neutral-600: oklch(0.439 0 0);
    --color-neutral-700: oklch(0.371 0 0);
    --color-neutral-800: oklch(0.269 0 0);
    --color-neutral-900: oklch(0.205 0 0);
    --color-neutral-950: oklch(0.145 0 0);

    --color-orange-50: oklch(0.98 0.016 73.684);
    --color-orange-100: oklch(0.954 0.038 75.164);
    --color-orange-200: oklch(0.901 0.076 70.697);
    --color-orange-300: oklch(0.837 0.128 66.29);
    --color-orange-400: oklch(0.75 0.183 55.934);
    --color-orange-500: oklch(0.705 0.213 47.604);
    --color-orange-600: oklch(0.646 0.222 41.116);
    --color-orange-700: oklch(0.553 0.195 38.402);
    --color-orange-800: oklch(0.47 0.157 37.304);
    --color-orange-900: oklch(0.408 0.123 38.172);
    --color-orange-950: oklch(0.266 0.079 36.259);

    --color-pink-50: oklch(0.971 0.014 343.198);
    --color-pink-100: oklch(0.948 0.028 342.258);
    --color-pink-200: oklch(0.899 0.061 343.231);
    --color-pink-300: oklch(0.823 0.12 346.018);
    --color-pink-400: oklch(0.718 0.202 349.761);
    --color-pink-500: oklch(0.656 0.241 354.308);
    --color-pink-600: oklch(0.592 0.249 0.584);
    --color-pink-700: oklch(0.525 0.223 3.958);
    --color-pink-800: oklch(0.459 0.187 3.815);
    --color-pink-900: oklch(0.408 0.153 2.432);
    --color-pink-950: oklch(0.284 0.109 3.907);

    --color-purple-50: oklch(0.977 0.014 308.299);
    --color-purple-100: oklch(0.946 0.033 307.174);
    --color-purple-200: oklch(0.902 0.063 306.703);
    --color-purple-300: oklch(0.827 0.119 306.383);
    --color-purple-400: oklch(0.714 0.203 305.504);
    --color-purple-500: oklch(0.627 0.265 303.9);
    --color-purple-600: oklch(0.558 0.288 302.321);
    --color-purple-700: oklch(0.496 0.265 301.924);
    --color-purple-800: oklch(0.438 0.218 303.724);
    --color-purple-900: oklch(0.381 0.176 304.987);
    --color-purple-950: oklch(0.291 0.149 302.717);

    --color-red-50: oklch(0.971 0.013 17.38);
    --color-red-100: oklch(0.936 0.032 17.717);
    --color-red-200: oklch(0.885 0.062 18.334);
    --color-red-300: oklch(0.808 0.114 19.571);
    --color-red-400: oklch(0.704 0.191 22.216);
    --color-red-500: oklch(0.637 0.237 25.331);
    --color-red-600: oklch(0.5771 0.2152 27.33);
    --color-red-700: oklch(0.505 0.213 27.518);
    --color-red-800: oklch(0.444 0.177 26.899);
    --color-red-900: oklch(0.396 0.141 25.723);
    --color-red-950: oklch(0.258 0.092 26.042);

    --color-rose-50: oklch(0.969 0.015 12.422);
    --color-rose-100: oklch(0.941 0.03 12.58);
    --color-rose-200: oklch(0.892 0.058 10.001);
    --color-rose-300: oklch(0.81 0.117 11.638);
    --color-rose-400: oklch(0.712 0.194 13.428);
    --color-rose-500: oklch(0.645 0.246 16.439);
    --color-rose-600: oklch(0.586 0.253 17.585);
    --color-rose-700: oklch(0.514 0.222 16.935);
    --color-rose-800: oklch(0.455 0.188 13.697);
    --color-rose-900: oklch(0.41 0.159 10.272);
    --color-rose-950: oklch(0.271 0.105 12.094);

    --color-sky-50: oklch(0.977 0.013 236.62);
    --color-sky-100: oklch(0.951 0.026 236.824);
    --color-sky-200: oklch(0.901 0.058 230.902);
    --color-sky-300: oklch(0.828 0.111 230.318);
    --color-sky-400: oklch(0.746 0.16 232.661);
    --color-sky-500: oklch(0.685 0.169 237.323);
    --color-sky-600: oklch(0.588 0.158 241.966);
    --color-sky-700: oklch(0.5 0.134 242.749);
    --color-sky-800: oklch(0.443 0.11 240.79);
    --color-sky-900: oklch(0.391 0.09 240.876);
    --color-sky-950: oklch(0.293 0.066 243.157);

    --color-slate-50: oklch(0.984 0.003 247.858);
    --color-slate-100: oklch(0.968 0.007 247.896);
    --color-slate-200: oklch(0.929 0.013 255.508);
    --color-slate-300: oklch(0.869 0.022 252.894);
    --color-slate-400: oklch(0.704 0.04 256.788);
    --color-slate-500: oklch(0.554 0.046 257.417);
    --color-slate-600: oklch(0.446 0.043 257.281);
    --color-slate-700: oklch(0.372 0.044 257.287);
    --color-slate-800: oklch(0.279 0.041 260.031);
    --color-slate-900: oklch(0.208 0.042 265.755);
    --color-slate-950: oklch(0.129 0.042 264.695);

    --color-stone-50: oklch(0.985 0.001 106.423);
    --color-stone-100: oklch(0.97 0.001 106.424);
    --color-stone-200: oklch(0.923 0.003 48.717);
    --color-stone-300: oklch(0.869 0.005 56.366);
    --color-stone-400: oklch(0.709 0.01 56.259);
    --color-stone-500: oklch(0.553 0.013 58.071);
    --color-stone-600: oklch(0.444 0.011 73.639);
    --color-stone-700: oklch(0.374 0.01 67.558);
    --color-stone-800: oklch(0.268 0.007 34.298);
    --color-stone-900: oklch(0.216 0.006 56.043);
    --color-stone-950: oklch(0.147 0.004 49.25);

    --color-teal-50: oklch(0.984 0.014 180.72);
    --color-teal-100: oklch(0.953 0.051 180.801);
    --color-teal-200: oklch(0.91 0.096 180.426);
    --color-teal-300: oklch(0.855 0.138 181.071);
    --color-teal-400: oklch(0.777 0.152 181.912);
    --color-teal-500: oklch(0.704 0.14 182.503);
    --color-teal-600: oklch(0.6 0.118 184.704);
    --color-teal-700: oklch(0.511 0.096 186.391);
    --color-teal-800: oklch(0.437 0.078 188.216);
    --color-teal-900: oklch(0.386 0.063 188.416);
    --color-teal-950: oklch(0.277 0.046 192.524);

    --color-violet-50: oklch(0.969 0.016 293.756);
    --color-violet-100: oklch(0.943 0.029 294.588);
    --color-violet-200: oklch(0.894 0.057 293.283);
    --color-violet-300: oklch(0.811 0.111 293.571);
    --color-violet-400: oklch(0.702 0.183 293.541);
    --color-violet-500: oklch(0.606 0.25 292.717);
    --color-violet-600: oklch(0.541 0.281 293.009);
    --color-violet-700: oklch(0.491 0.27 292.581);
    --color-violet-800: oklch(0.432 0.232 292.759);
    --color-violet-900: oklch(0.38 0.189 293.745);
    --color-violet-950: oklch(0.283 0.141 291.089);

    --color-yellow-50: oklch(0.987 0.026 102.212);
    --color-yellow-100: oklch(0.973 0.071 103.193);
    --color-yellow-200: oklch(0.945 0.129 101.54);
    --color-yellow-300: oklch(0.905 0.182 98.111);
    --color-yellow-400: oklch(0.852 0.199 91.936);
    --color-yellow-500: oklch(0.795 0.184 86.047);
    --color-yellow-600: oklch(0.681 0.162 75.834);
    --color-yellow-700: oklch(0.554 0.135 66.442);
    --color-yellow-800: oklch(0.476 0.114 61.907);
    --color-yellow-900: oklch(0.421 0.095 57.708);
    --color-yellow-950: oklch(0.286 0.066 53.813);

    --color-zinc-50: oklch(0.985 0 0);
    --color-zinc-100: oklch(0.967 0.001 286.375);
    --color-zinc-200: oklch(0.9194 0.0027 286.35);
    --color-zinc-300: oklch(0.871 0.006 286.286);
    --color-zinc-400: oklch(0.7057 0.0144 286.02);
    --color-zinc-500: oklch(0.552 0.016 285.938);
    --color-zinc-600: oklch(0.442 0.017 285.786);
    --color-zinc-700: oklch(0.37 0.013 285.805);
    --color-zinc-800: oklch(0.274 0.006 286.033);
    --color-zinc-900: oklch(0.21 0.006 285.885);
    --color-zinc-950: oklch(0.141 0.005 285.823);

    /** MARK: Sizes **/

    --one-sixteenth-rem: calc(0.0625 * 1rem);
    --one-tenth-rem: calc(0.1 * 1rem);
    --one-eighth-rem: calc(0.125 * 1rem);
    --one-sixth-rem: calc(0.1666666667 * 1rem);
    --three-sixteenths-rem: calc(0.1875 * 1rem);
    --one-fifth-rem: calc(0.2 * 1rem);
    --one-quarter-rem: calc(0.25 * 1rem);
    --one-third-rem: calc(0.3333333334 * 1rem);
    --six-sixteenths-rem: calc(0.375 * 1rem);
    --seven-sixteenths-rem: calc(0.4375 * 1rem);
    --one-half-rem: calc(0.5 * 1rem);
    --ten-sixteenths-rem: calc(0.625 * 1rem);
    --two-thirds-rem: calc(0.6666666667 * 1rem);
    --eleven-sixteenths-rem: calc(0.6875 * 1rem);
    --three-quarters-rem: calc(0.75 * 1rem);
    --thirteen-sixteenths-rem: calc(0.8125 * 1rem);
    --fourteen-sixteenths-rem: calc(0.875 * 1rem);
    --fifteen-sixteenths-rem: calc(0.9375 * 1rem);
    --one-rem: 1rem;
    --one-and-one-eighth-rem: calc(1.125 * 1rem);
    --one-and-one-quarter-rem: calc(1.25 * 1rem);
    --one-and-six-sixteenths-rem: calc(1.375 * 1rem);
    --one-and-one-half-rem: calc(1.5 * 1rem);
    --one-and-three-quarters-rem: calc(1.75 * 1rem);
    --two-rem: calc(2 * 1rem);
    --two-and-one-quarter-rem: calc(2.25 * 1rem);
    --two-and-one-half-rem: calc(2.5 * 1rem);
    --two-and-three-quarters-rem: calc(2.75 * 1rem);
    --three-rem: calc(3 * 1rem);
    --three-and-one-half-rem: calc(3.5 * 1rem);
    --four-rem: calc(4 * 1rem);
    --four-and-one-half-rem: calc(4.5 * 1rem);
    --five-rem: calc(5 * 1rem);
    --five-and-one-half-rem: calc(5.5 * 1rem);
    --six-rem: calc(6 * 1rem);


    /** MARK: Borders **/

    /* --border-radius-primary: var(--six-sixteenths-rem); */
    --border-radius-primary: var(--one-half-rem);
    --border-radius-subtle: var(--one-quarter-rem);
    --border-radius-base: var(--border-radius-primary);
    --border-radius-m: var(--one-rem);

    /** MARK: Fonts **/

    --geist: "Geist", -apple-system, BlinkMacSystemFont, "Segoe UI", "Helvetica Neue", "Ubuntu", sans-serif;
    --geist-mono: "GeistMono", Menlo, Consolas, monospace;
    --sf-hello: "SFHello", -apple-system, BlinkMacSystemFont, "Segoe UI", "Helvetica Neue", "Ubuntu", sans-serif;

    /** MARK: Font Sizes **/

    --font-size-primary: var(--fifteen-sixteenths-rem);
    --font-size-base: var(--font-size-primary);

    /* MARK: Gap */

    --gap-sm: var(--one-quarter-rem);
    --gap-m: var(--one-half-rem);
    --gap-l: var(--one-rem);
    --gap-xl: var(--one-and-one-half-rem);

    /** MARK: Height **/

    --header-height: var(--three-rem);
    --toolbar-height: 40px;
    --dev-tools-height: 300px;

    /** MARK: Opacity **/

    --opacity-base: 1;
    --opacity-disabled: 0.6;
    --opacity-hover: var(--opacity-disabled);

    /** MARK: Outline **/

    --outline-offset: -1px;
    --outline-width: 1px;

    /** MARK: Shadows **/

    --box-shadow-inset-primary:
        2px 4px 7px 0 oklch(0 0 0 / 15%) inset;
    --shadow-inset-base: var(--box-shadow-inset-primary);
    --shadow-inset-subtle:
        1px 2px 4px 0 oklch(0 0 0 / 30%) inset;

    /* TODO: Review the base shadow */

    --box-shadow-primary:
        0 4px 6px -1px oklch(0 0 0 / 10%),
        0 2px 4px -2px oklch(0 0 0 / 6%);
    --box-shadow-narrow:
        0 1px 3px oklch(0 0 0 / 20%),
        0 1px 1px oklch(0 0 0 / 15%);
    --shadow-base: var(--box-shadow-primary);
    --box-shadow-switch:
        0 10px 15px -3px oklch(0 0 0 / 10%),
        0 4px 6px -2px oklch(0 0 0 / 5%);
    --box-shadow-menu:
        0 4px 6px -1px oklch(0 0 0 / 10%),
        0 2px 4px -2px oklch(0 0 0 / 10%);
    /* box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow); */

    /** MARK: Transitions **/

    --transition-duration: 150ms;
    --transition-easing: cubic-bezier(0.4, 0, 0.2, 1);
    --transition-settings: var(--transition-duration) linear;
    --dev-tools-transition: var(--transition-duration) ease-in-out;


    /** MARK: Weights **/

    --thin: 100;
    --extra-light: 200;
    --light: 300;
    --normal: 400;
    --regular: var(--normal);
    --medium: 500;
    --semibold: 600;
    --semi-bold: 600;
    --bold: 700;
    --extra-bold: 800;
    --heavy: 900;
    /* normally referred to as black but we have a black color variable */
    --extra-heavy: 950;

    --ada-side-padding: var(--one-rem);
    --ada-top-padding: var(--one-half-rem);
    --ada-bottom-padding: var(--one-rem);
    --ada-page-padding: var(--ada-top-padding) var(--ada-side-padding) var(--ada-bottom-padding);
    --ada-min-width: 1000px;
    --ada-min-width-without-padding: calc(var(--ada-min-width) - (var(--ada-side-padding) * 2));
    --ada-max-width: 1400px;
    --ada-max-width-without-padding: calc(var(--ada-max-width) - (var(--ada-side-padding) * 2));

    --ada-messages-font-size: var(--one-rem);
    --ada-message-icon-size: var(--three-rem);

    --ada-slider-thumb-boxshadow:
        0 1px 1px 0 oklch(var(--blumine-oklch-values) / 14%), 0 0px 2px 1px rgba(0, 0, 0, 0.2);
    --ada-slider-thumb-holding-boxshadow:
        0 1px 1px 0 rgba(0, 0, 0, 0.14), 0 1px 2px 1px rgba(0, 0, 0, 0.2),
        0 0 0 6px oklch(var(--blumine-oklch-values) / 30%);
    --ada-slider-tooltip-bg-colour: var(--blumine);

    --ada-header-height: 40px;
    --ada-nav-width: 100px;

    --ada-side-width: 320px;

    --ada-fixed-index: 100;
    --ada-dialog-index: 10000;
    --ada-success-index: 11000;

    --ada-box-shadow: var(--shadow-base);
    --ada-border-radius: var(--ten-sixteenths-rem);
    --ada-option-border-radius: var(--five-rem);

    /** MARK: Z-Index **/

    --z-index-select-menu: 100;
    --z-index-dev-tools: 2000;
    --z-index-fullscreen-dialog: 1000;
}

[data-theme="light"] {
    /* @note slate-900 has been replaced with blumine-900 */

    --active-color: var(--color-green-500);
    --active-color-contrast: var(--color-white);

    --brand-primary: var(--color-blumine-500);
    --brand-primary-contrast: var(--color-white);
    --brand-primary-hover: var(--color-blumine-400);
    --brand-secondary: var(--color-monte-carlo);
    --brand-secondary-contrast: var(--brand-primary);
    --brand-quaternary: var(--color-athens);

    --border-color-primary: var(--color-zinc-200);
    --border-color-subtle: var(--color-zinc-50);

    --background-color-primary: var(--color-white);
    --background-color-secondary: var(--color-zinc-50);

    --card-color-primary: var(--color-blumine-500);
    --card-color-secondary: var(--color-monte-carlo);

    --dashboard-color-primary: var(--color-blumine-500);
    --dashboard-color-secondary: var(--color-monte-carlo);
    --dashboard-color-tertiary: var(--color-mint-tulip);
    --dashboard-trim-color: var(--color-athens);
    /* --dashboard-trim-color: var(--border-color-primary); */

    --dialog-background-color: color-mix(in oklch, var(--color-black) 70%, transparent);

    --error-color-primary: var(--color-red-500);
    --error-color-secondary: var(--color-red-200);
    --error-color-subtle: var(--color-red-50);
    --error-color-primary-contrast: var(--color-white);

    --hover-color-primary: var(--color-zinc-200);
    --hover-color-subtle: var(--color-zinc-50);
    --hover-color-overt: var(--color-zinc-300);

    --nav-background-color: var(--color-zinc-50);
    --nav-hover-color: var(--color-monte-carlo);

    --outline-color-primary: var(--brand-primary);

    --text-color-primary: var(--color-zinc-900);
    --text-color-primary-subtle: var(--color-zinc-700);
    --text-color-primary-contrast: var(--color-white);
    --text-color-secondary: var(--color-zinc-500);

    /* MARK: Flow */
    --flow-node-border-color: var(--color-zinc-300);

    /* MARK: Audio Video Player */
    --video-player-overlay-background: color-mix(in oklch, var(--color-black) 50%, transparent);

    /* MARK: Ada */
    /* REVIEW */

    --color-apple-green: oklch(0.7722 0.2229 148.1);
    --color-apple-orange: oklch(0.6588 0.2086 39.26);

    --color-apple-blue-50: oklch(0.957 0.021 274.08);
    --color-apple-blue-100: oklch(0.915 0.041 271.91);
    --color-apple-blue-200: oklch(0.831 0.084 268.85);
    --color-apple-blue-300: oklch(0.736 0.135 264.73);
    --color-apple-blue-400: oklch(0.651 0.187 258.72);
    --color-apple-blue-500: oklch(0.564 0.191 255.75); /* this is the blue on the website */
    --color-apple-blue-600: oklch(0.478 0.162 255.75);
    --color-apple-blue-700: oklch(0.391 0.133 255.77);
    --color-apple-blue-800: oklch(0.312 0.106 255.93);
    --color-apple-blue-900: oklch(0.226 0.075 255.34);
    --color-apple-blue-950: oklch(0.178 0.061 256.18);

    --color-apple-adsu-blue: oklch(0.8257 0.0957 241.88);
    --color-apple-adsu-blue-subtle: oklch(0.963 0.01 238.45);
    --color-apple-adsu-blue-overt: oklch(0.4619 0.1098 242.1);

    --ada-color-green-faint: var(--color-green-100);
    --ada-color-green-subtle: var(--color-green-400);
    --ada-color-green: var(--color-green-500);
    /* REVIEW apple #00d959, was #28a662 */
    --ada-color-red: var(--color-red-500);
    /* REVIEW, in tables this was #ed9647 */
    --ada-color-orange: var(--color-orange-300);
    /* REVIEW, was #ed9647 */
    --ada-color-red-contrast: var(--color-white);
    /* REVIEW */
    --ada-color-blue: oklch(0.6401 0.1851 251.12);
    /* REVIEW apple blue #068EF7, was #3fbcfd */
    --ada-color-lime: oklch(0.8113 0.2209 146.13);
    /* REVIEW #41e560 */
    --ada-color-orange: var(--color-orange-400);
    /* REVIEW apple #f55404, was F9AE00 */
    --ada-color-sky-blue: oklch(0.7552 0.1419 236.23);
    /* REVIEW #3FBCFD */

    --ada-color-bad: var(--color-red-500);
    /* REVIEW, was #dc2626 */
    --ada-color-poor: var(--color-orange-500);
    /* REVIEW, was #f97316 */
    --ada-color-average: var(--color-yellow-500);
    /* REVIEW, was #facc15 */
    --ada-color-good: var(--color-green-500);
    /* REVIEW, was #84cc16 */
    --ada-color-great: var(--color-teal-500);
    /* REVIEW, was #0d9488 */

    --ada-background-color: var(--color-white);
    /* REVIEW, was rgb(23, 31, 53) */
    --ada-background-color-subtle: var(--color-zinc-50);
    /* REVIEW, was rgb(23, 31, 53) */
    --ada-secondary-background-color: var(--color-zinc-100);
    /* REVIEW, was rgb(33, 41, 63) */
    --ada-secondary-background-color-darker: color-mix(in oklch, var(--ada-secondary-background-color) 98%, black);
    --ada-tertiary-background-color: var(--color-zinc-200);
    /* REVIEW, was rgb(44, 51, 72) */
    --ada-quaternary-background-color: var(--color-zinc-300);
    /* REVIEW, was rgb(54, 61, 83) */

    /* #2C3348 */
    --ada-text-color: var(--text-color-primary);
    /* REVIEW */
    --ada-text-color-contrast: var(--color-white);
    --ada-border-color: var(--border-color-primary);
    /* REVIEW */
    --ada-highlight-color: var(--ada-color-green);
    --ada-highlight-color-contrast: var(--color-white);
    --ada-highlight-color-hover: var(--color-green-400);
    --ada-hover-color: var(--hover-color-primary);
    --ada-option-border-color: var(--ada-text-color);
    --ada-error-color: var(--color-red-500);
    --ada-error-color-contrast: var(--color-white);
    /*va REVIEW 0, 25, 77; */

    --ada-metric-highlight-border-color: var(--ada-color-green);
    --ada-metric-highlight-background-color: var(--ada-color-green-faint);
    

    --ada-table-prompt-border-radius: var(--three-quarters-rem);
    --ada-table-cell-header-color: var(--color-sky-900);
    --ada-table-cell-content-background: var(--color-zinc-50);
    --ada-table-cell-prompt-background: var(--color-zinc-100);
    --ada-table-cell-answer-background: var(--color-white);

    /*
--colour-ada-primary: rgb(23, 31, 53);
        --colour-ada-secondary: rgb(33, 41, 63);
        --colour-ada-white: rgb(255, 255, 255);
        --colour-ada-red: rgb(242, 74, 105);
        --colour-ada-gray: rgb(213, 213, 213);
        --colour-ada-green: rgb(40, 166, 98);
        --colour-ada-blue: rgb(90, 127, 252);
        --colour-ada-lime: rgb(65, 229, 96);
        --colour-ada-gray: rgb(213, 213, 213);
        --colour-ada-orange: #F9AE00;
        --colour-ada-sky-blue: #3FBCFD;

        --ada-green: var(--colour-ada-green);
        --ada-red: var(--colour-ada-red);

        --ada-side-padding: var(--one-rem);
        --ada-top-padding: var(--one-half-rem);
        --ada-bottom-padding: var(--one-rem);
        --ada-page-padding: var(--ada-top-padding) var(--ada-side-padding) var(--ada-bottom-padding);
        --ada-min-width: 1000px;
        --ada-min-width-without-padding: calc(var(--ada-min-width) - (var(--ada-side-padding) * 2));
        --ada-max-width: 1400px;
        --ada-max-width-without-padding: calc(var(--ada-max-width) - (var(--ada-side-padding) * 2));

        --ada-bad-color: #dc2626;
        --ada-poor-color: #f97316;
        --ada-average-color: #facc15;
        --ada-good-color: #84cc16;
        --ada-great-color: #0d9488;

        --ada-awaiting-reply-color: #ed9647;
        --ada-table-error-color: #ed9647;

        --ada-messages-font-size: var(--one-rem);

        --ada-background-color: var(--colour-ada-primary);
        --ada-secondary-background-color: var(--colour-ada-secondary);
        --ada-tertiary-background-color: rgb(44, 51, 72);

        --ada-text-color: var(--colour-ada-white);
        --ada-border-color: var(--colour-ada-gray);
        --ada-highlight-color: var(--colour-ada-green);
        --ada-positive-colour: var(--colour-ada-green);
        --ada-negative-colour: var(--colour-ada-red);

        --ada-tooltip-text-colour: var(--color-white);
        --ada-tooltip-background-colour: var(--rhino);
        --ada-progress-incomplete-colour: var(--rhino);
        --ada-progress-complete-colour: var(--ada-text-color);

        --ada-reflections-background-colour: var(--athens);
        --ada-reflections-highlight-colour: var(--blumine);

        --ada-paged-content-field-border-colour: var(--athens);

        --ada-slider-thumb-boxshadow: 
            0 1px 1px 0 oklch(var(--blumine-oklch-values) / 14%), 0 0px 2px 1px rgba(0, 0, 0, 0.2);
        --ada-slider-thumb-holding-boxshadow:
            0 1px 1px 0 rgba(0, 0, 0, 0.14), 0 1px 2px 1px rgba(0, 0, 0, 0.2),
            0 0 0 6px oklch(var(--blumine-oklch-values) / 30%);
        --ada-slider-tooltip-bg-colour: var(--blumine);
    */

}

/* [data-theme="dark"] {

} */

/* MARK: Reset */

*,
*::before,
*::after {
    box-sizing: border-box;
}

* {
    margin: 0;
}

body {
    /*line-height: 1.5;*/
    -webkit-font-smoothing: antialiased;
}

/* 
    This reset is to prevent images/media from overflowing their containers - responsive by default.
    max-width: 100% ensures media scales down on small screens. But it's a blunt tool that breaks 
    some SVG rendering in Chromium, especially when SVGs are positioned absolutely or use viewBox 
    calculations (like SvelteFlow edges).

    If you set max-width: 100% it basically forces the SVG container to fit to the maximum width 
    of the surrounding <div class="react-flow__edges"> which has no width or height so it basically 
    amounts to setting the width to 0. To counter this you need to either use 
    svg:not(.svelte-flow__edge-wrapper) or specially remove svelte flow edges from the CSS rule 
    with .svelte-flow__edge-wrapper { max-width: none !important; } or, if using Svelte, 
    :global(.svelte-flow__edge-wrapper) { max-width: none !important; }
}
*/
img,
picture,
video,
canvas,
svg {
    display: block;
    max-width: 100%;
}

input,
button,
textarea,
select {
    font-family: inherit;
}

p,
h1,
h2,
h3,
h4,
h5,
h6 {
    overflow-wrap: break-word;
}

#root,
#__next {
    isolation: isolate;
}

button {
    background-color: transparent;
    border: none;
    padding: 0;
}

ul,
ol {
    list-style: none;
    /*list-style-position: outside;*/
    padding: 0;
}

iframe {
    border: none;
}

table {
    /* remove the gaps between the cells, making border appear as a single line */
    /* make sure adjacent borders don't double up */
    border-collapse: collapse;
}

/* MARK: Base */

* {
    /* fix for flexbox issues */
    min-width: 0;
    color: var(--text-color-primary);
    font-family: var(--geist);
    font-weight: normal;
    scrollbar-width: thin;
    scrollbar-color: rgb(23, 32, 52) rgb(44, 51, 72);
}

html {
    background-color: var(--background-color-primary);
    overscroll-behavior: none;
}

a,
input,
button,
select,
textarea,
.radio,
.checkbox,
.field,
.outlined,
.focus,
.focusable,
.outline,
.outlineable {

    &:focus-visible,
    &:focus-within:focus-visible {
        outline-offset: var(--outline-offset);
        outline: var(--outline-width) solid var(--outline-color-primary);

        &.error-outline {
            outline: 1px solid var(--error-color-primary) !important;
        }
    }

    &:focus:not(:focus-visible),
    &:focus-within:not(:focus-visible) {
        outline: none;
    }
}

.not-focusable,
.no-focus,
.no-outline,
.no-outlineable {
    &:focus,
    &:focus-visible,
    &:focus-within,
    &:focus-within:focus-visible {
        outline: none;
    }
}

/* @todo Update for extended white labelling - style sheet */
.org-apple {
    outline-offset: 1px !important;
    outline-color: var(--color-apple-blue-500) !important;
}

a:disabled,
input:disabled,
button:disabled,
select:disabled,
textarea:disabled,
.radio:disabled,
.checkbox:disabled,
.field:disabled,
.disabled,
div[data-disabled="true"],
button[data-disabled="true"] {
    cursor: not-allowed !important;
    opacity: var(--opacity-disabled);
}

a {
    text-decoration: none;

    &:hover,
    &:visited {
        color: inherit;
    }
}

button,
p,
div,
li,
input,
select,
textarea {
    font-size: var(--font-size-base);
    line-height: calc(var(--font-size-base) + var(--one-quarter-rem));
}

input::placeholder,
select::placeholder,
textarea::placeholder,
.placeholder {
    color: var(--text-color-secondary);
}


.underlined {
    text-decoration: underline;
}

.hover-underlined {
    &:hover {
        text-decoration: underline;
    }
}

.active-scaled {
    transition: scale var(--transition-duration) cubic-bezier(0.4, 0, 0.2, 1);

    &:active {
        scale: 0.95;
    }
}

.bordered {
    border: 1px solid var(--border-color-primary);

    /* @todo Update for extended white labelling - style sheet */
    &.org-apple {
        /* border-color: var(--color-apple-adsu-blue) !important; */
        border-color: var(--border-color-primary) !important;
    }
}

.rounded {
    border-radius: var(--border-radius-base);
}

.no-resize {
    resize: none;

    &::-webkit-resizer {
        display: none;
    }
}

.no-scrollbar {
    scrollbar-width: none;

    &::-webkit-scrollbar {
        display: none;
    }
}

.scrollbar-padding {
    padding-right: 12px;
}

.no-overscroll {
    overscroll-behavior: none;
}

.error-color {
    color: var(--error-color-primary) !important;
}

.error-border {
    border: 1px solid var(--error-color-primary) !important;
}

/* MARK: Layouts - Position */

.relative {
    position: relative;
}

.absolute {
    position: absolute;
}

.fixed {
    position: fixed;
}

.sticky {
    position: sticky;
}

.static {
    position: static;
}

/* MARK: Layouts - Width */

.full-width {
    width: 100%;
}

.mw-max-content {
    min-width: max-content;
}

/* MARK: Layouts - Flexbox */

.flex {
    display: flex;
    gap: var(--one-half-rem);

    &.row {
        flex-direction: row;
    }

    &.column {
        flex-direction: column;
    }

    &.justify-between {
        justify-content: space-between;
    }

    &.justify-center {
        justify-content: center;
    }

    &.justify-start {
        justify-content: flex-start;
    }

    &.justify-end {
        justify-content: flex-end;
    }

    &.justify-stretch {
        justify-content: stretch;
    }

    &.justify-around {
        justify-content: space-around;
    }

    &.align-start {
        align-items: flex-start;
    }

    &.align-center {
        align-items: center;
    }

    &.align-end {
        align-items: flex-end;
    }

    &.align-stretch {
        align-items: stretch;
    }
}

.no-gap {
    gap: none !important;
}

.gap-quarter {
    gap: var(--one-quarter-rem);
}

.gap-half {
    gap: var(--one-half-rem);
}

.gap-one {
    gap: var(--one-half-rem);
}

@keyframes fly-in {
    from {
        opacity: 0;
        transform: translateY(-50px);
    }

    to {
        opacity: 1;
        transform: translateY(0);
    }
}

@keyframes fly-out {
    from {
        opacity: 1;
        transform: translateY(0);
    }

    to {
        opacity: 0;
        transform: translateY(-50px);
    }
}

/* animation: spin 1s linear infinite */
@keyframes spin {
    to {
        transform: rotate(360deg);
    }
}

/* animation: spin 1s linear infinite */
@keyframes reverse-spin {
    to {
        transform: rotate(-360deg);
    }
}

/* animation: pulse 2s cubic-bezier(0.4, 0, 0.6, 1) infinite */
@keyframes pulse {
    50% {
        opacity: 0.5;
    }
}

/* animation: ping 1s cubic-bezier(0, 0, 0.2, 1) infinite */
@keyframes ping {

    75%,
    100% {
        transform: scale(2);
        opacity: 0;
    }
}

/* animation: bounce 1s infinite */
@keyframes bounce {

    0%,
    100% {
        transform: translateY(-25%);
        animation-timing-function: cubic-bezier(0.8, 0, 1, 1);
    }

    50% {
        transform: none;
        animation-timing-function: cubic-bezier(0, 0, 0.2, 1);
    }
}

/** MARK: Classes **/

.pulse {
    animation: pulse 2s cubic-bezier(0.4, 0, 0.6, 1) infinite;
}

/*
    @note
    Source: https://www.tonnitools.com/liquid-glass/
*/

.glass-container {
    --glass-corner-radius: 24px;
    --glass-base-strength: 14px;
    --glass-extra-blur: 2px;
    --glass-softness: 12px;
    --glass-tint-amount: 0;
    --glass-tint-saturation: 2;
    --glass-tint-hue: 180deg;
    --glass-contrast: 1;
    --glass-brightness: 1;
    --glass-invert: 10%;

    --glass-total-strength: calc(var(--glass-base-strength) + var(--glass-extra-blur));
    --glass-edge-width: calc(0.3px + (var(--glass-softness) * 0.1));
    --glass-emboss-width: calc((var(--glass-softness) * 0.38));
    --glass-refraction-width: calc((var(--glass-softness) * 0.3));

    position: relative;
    overflow: visible;
    pointer-events: none;
}

.glass-content {
    position: relative;
    display: block;
    z-index: 100;
    overflow: hidden;
    border-radius: var(--glass-corner-radius);
    pointer-events: auto;
}

.glass-material {
    position: absolute;
    inset: 0;
    z-index: 1;
    overflow: visible;
    pointer-events: none;
}

.glass-material:after {
    content: '';
    display: block;
    position: absolute;
    inset: 0;
    z-index: 3;
    overflow: hidden;
    border-radius: var(--glass-corner-radius);
    background-color: rgba(128, 128, 128, 0);
}

.glass-material>div {
    position: absolute;
    inset: 0;
    box-sizing: border-box;
    border-radius: var(--glass-corner-radius);
    z-index: 2;
    overflow: hidden;
}

.glass-material .glass-edge-reflection {
    z-index: 4;
    margin: calc(var(--glass-total-strength) * -1);
    border-radius: calc(var(--glass-corner-radius) + var(--glass-total-strength));
    backdrop-filter: blur(var(--glass-total-strength)) brightness(1.2) saturate(1.2);
    padding: var(--glass-edge-width);
    border: var(--glass-total-strength) solid transparent;
    mask:
        linear-gradient(white 0 0) padding-box,
        linear-gradient(white 0 0) content-box;
    mask-composite: exclude, exclude;
}

.GlassMaterial .GlassEmbossReflection {
    backdrop-filter: blur(calc(var(--glass-total-strength) * 1.5)) invert(0.25) brightness(1.11) saturate(1.2) hue-rotate(-10deg) contrast(2.3);
    padding: var(--glass-emboss-width);
    border: 0 solid transparent;
    mask:
        linear-gradient(white 0 0) padding-box,
        linear-gradient(white 0 0) content-box;
    mask-composite: exclude, exclude;
}

.GlassMaterial .GlassRefraction {
    backdrop-filter: invert(0.1) brightness(1.2) contrast(1.5);
    padding: var(--glass-refraction-width);
    border: calc(var(--glass-emboss-width)) solid transparent;
    mask:
        linear-gradient(white 0 0) padding-box,
        linear-gradient(white 0 0) content-box;
    mask-composite: exclude, exclude;
}

.GlassMaterial .GlassBlur {
    backdrop-filter: blur(var(--glass-extra-blur)) brightness(1.25);
    border-radius: calc(var(--glass-corner-radius) - (var(--glass-emboss-width) + var(--glass-refraction-width)));
    margin: calc(var(--glass-emboss-width) + var(--glass-refraction-width));
}

.GlassMaterial .BlendLayers {
    z-index: 3;
    backdrop-filter: blur(calc((var(--glass-softness) * 0.2) + (var(--glass-extra-blur) * 0.2)));
}

.GlassMaterial .BlendEdge {
    z-index: 8;
    backdrop-filter: blur(calc(var(--glass-edge-width) * 0.4)) contrast(1.6) saturate(1.5);
}

.GlassContainer:before {
    content: '';
    position: absolute;
    inset: 0;
    z-index: 20;
    display: block;
    border-radius: var(--glass-corner-radius);
    backdrop-filter: invert(var(--glass-invert));
}

.GlassMaterial:before {
    content: '';
    position: absolute;
    inset: 0;
    z-index: 11;
    display: block;
    border-radius: var(--glass-corner-radius);
    padding: 1px;
    border: 0 solid transparent;
    background: linear-gradient(155deg, hsla(0, 0%, 100%, 0.15) 0%, hsla(0, 0%, 0%, 0.2) 50%, hsla(0, 0%, 100%, 0.15) 100%);
    backdrop-filter: invert(0.15) opacity(1);
    mask:
        linear-gradient(white 0 0) padding-box,
        linear-gradient(white 0 0) content-box;
    mask-composite: exclude, exclude;
}

.GlassMaterial .Highlight {
    z-index: 12;
    display: block;
    border-radius: var(--glass-corner-radius);
    padding: 1px;
    border: 0 solid transparent;
    backdrop-filter: brightness(1.2) contrast(1.6) saturate(1.2) opacity(1);
    mask:
        linear-gradient(white 0 0) padding-box,
        linear-gradient(white 0 0) content-box;
    mask-composite: exclude, exclude;
}


/* Webkit browsers (Chrome, Safari, Edge) */
.custom-scrollbar::-webkit-scrollbar {
    width: 8px;
    height: 8px;
}

.custom-scrollbar::-webkit-scrollbar-track {
    background: transparent;
}

.custom-scrollbar::-webkit-scrollbar-thumb {
    background: var(--text-color-primary);
    border-radius: 6px;
}

.custom-scrollbar::-webkit-scrollbar-thumb:hover {
    background: var(--text-color-secondary);
}

/* Firefox */
.custom-scrollbar {
    scrollbar-width: thin;
    scrollbar-color: var(--text-color-primary) transparent;
}

/* Modern approach for consistent appearance */
.visible-scrollbar {
    overflow-y: scroll !important;
    scrollbar-width: thin;
    scrollbar-gutter: stable;
    /* Prevents layout shift */
    scrollbar-color: var(--text-color-primary) transparent;
}