@font-face {
  font-family: "Archivo Gage";
  src: url("/assets/gage/main/archivo-variable-a338d5b8.ttf") format("truetype");
  font-style: normal;
  font-weight: 100 900;
  font-stretch: 62% 125%;
  font-display: swap;
}

:root {
  color-scheme: light;
  --radius: 4px;
  --paper: #f4f1ea;
  --paper-veil: rgba(244, 241, 234, 0.78);
  --surface: #fffefa;
  --surface-sunk: #edeae2;
  --ink: #171a18;
  --body: #3b403c;
  --muted: #6b706c;
  --faint: #8e938f;
  --line: #dedbd2;
  --line-soft: #eae7df;
  --accent: #ff6a00;
  --accent-ink: #cc3300;
  --accent-wash: #ffe9d6;
  --engaged: #00c853;
  --engaged-ink: #00963e;
  --engaged-label: #fff;
  --tag: #00b8ff;
  --tag-ink: #0084cc;
  --good-ink: #00963e;
  --alarm-ink: #9a3a1c;
  --font-display: "Archivo Gage", "Arial Black", "Helvetica Neue", sans-serif;
  --font-system: Inter, ui-sans-serif, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  --font-operator: "Andale Mono", "Courier New", Courier, "Liberation Mono", monospace;
  --display-weight: 850;
  --display-width: 78%;
  --display-leading: .92;
  --display-tracking: -.045em;
  --mono: var(--font-operator);
  --sans: var(--font-system);
  --rail-link-weight: 550;
  --on-accent: #171a18;
  --frost: color-mix(in srgb, var(--surface) 82%, transparent);
  --frost-light: color-mix(in srgb, var(--surface) 48%, transparent);
  --frost-border: color-mix(in srgb, var(--ink) 16%, transparent);
  --frost-shadow: color-mix(in srgb, var(--ink) 16%, transparent);
  --highlight: #a3711f;
  --map-ground: #ded9cd;
  --map-block: #eee9dd;
  --map-block-line: #bbb4a4;
  --map-detail: #d2ccbd;
  --map-water: #c7e2df;
  --map-water-line: #709896;
  --map-road: #bdb49d;
  --map-road-line: #746d5d;
  --map-label: #555b58;
  --map-stop-ring: #f4f1ea;
}

@media (prefers-color-scheme: dark) {
  :root:not([data-theme]) {
    color-scheme: dark;
    --paper: #15191a;
    --paper-veil: rgba(21, 25, 26, 0.82);
    --surface: #1b201f;
    --surface-sunk: #121616;
    --ink: #f1f3ee;
    --body: #ccd2cd;
    --muted: #979e99;
    --faint: #7a817c;
    --line: #2f3634;
    --line-soft: #262c2a;
    --accent: #ff8c1a;
    --accent-ink: #ffb066;
    --accent-wash: #2a1d16;
    --engaged: #00ff85;
    --engaged-ink: #7dffc0;
    --engaged-label: #0a1f10;
    --tag: #00e5ff;
    --tag-ink: #7df9ff;
    --good-ink: #7dffc0;
    --alarm-ink: #ea8460;
    --highlight: #e7a935;
    --map-ground: #24271f;
    --map-block: #30342a;
    --map-block-line: #434738;
    --map-detail: #3b4032;
    --map-water: #152f31;
    --map-water-line: #285354;
    --map-road: #65664d;
    --map-road-line: #a49c72;
    --map-label: #c5c5ac;
    --map-stop-ring: #14241e;
  }
}

:root[data-theme="dark"] {
  color-scheme: dark;
  --paper: #15191a;
  --paper-veil: rgba(21, 25, 26, 0.82);
  --surface: #1b201f;
  --surface-sunk: #121616;
  --ink: #f1f3ee;
  --body: #ccd2cd;
  --muted: #979e99;
  --faint: #7a817c;
  --line: #2f3634;
  --line-soft: #262c2a;
  --accent: #ff8c1a;
  --accent-ink: #ffb066;
  --accent-wash: #2a1d16;
  --engaged: #00ff85;
  --engaged-ink: #7dffc0;
  --engaged-label: #0a1f10;
  --tag: #00e5ff;
  --tag-ink: #7df9ff;
  --good-ink: #7dffc0;
  --alarm-ink: #ea8460;
  --highlight: #e7a935;
  --map-ground: #24271f;
  --map-block: #30342a;
  --map-block-line: #434738;
  --map-detail: #3b4032;
  --map-water: #152f31;
  --map-water-line: #285354;
  --map-road: #65664d;
  --map-road-line: #a49c72;
  --map-label: #c5c5ac;
  --map-stop-ring: #14241e;
}

:root[data-theme="soft"] {
  color-scheme: dark;
  --paper: #201d1a;
  --paper-veil: rgba(32, 29, 26, 0.82);
  --surface: #29241f;
  --surface-sunk: #1c1815;
  --ink: #eee7dc;
  --body: #c7bfae;
  --muted: #8f8677;
  --faint: #6c655a;
  --line: #3a332c;
  --line-soft: #2c2822;
  --accent: #ff9a4d;
  --accent-ink: #ffbb85;
  --accent-wash: #2e2118;
  --engaged: #6dd9a0;
  --engaged-ink: #9fe8bf;
  --engaged-label: #0f2116;
  --tag: #5ecbe0;
  --tag-ink: #a3e4f0;
  --good-ink: #9fe8bf;
  --alarm-ink: #e2a084;
  --highlight: #e7a935;
  --map-ground: #24271f;
  --map-block: #30342a;
  --map-block-line: #434738;
  --map-detail: #3b4032;
  --map-water: #152f31;
  --map-water-line: #285354;
  --map-road: #65664d;
  --map-road-line: #a49c72;
  --map-label: #c5c5ac;
  --map-stop-ring: #14241e;
}

:root:not([data-theme="soft"])[data-variant="protanopia"] { --accent: #0072b2; --accent-ink: #005b8f; }
:root:not([data-theme="soft"])[data-variant="tritanopia"] { --accent: #d55e00; --accent-ink: #a84a00; }
@media (prefers-color-scheme: dark) {
  :root:not([data-theme])[data-variant="protanopia"] { --accent: #56b4e9; --accent-ink: #8ecdf2; }
  :root:not([data-theme])[data-variant="tritanopia"] { --accent: #ff8f5c; --accent-ink: #ffb38f; }
}
:root[data-theme="dark"][data-variant="protanopia"] { --accent: #56b4e9; --accent-ink: #8ecdf2; }
:root[data-theme="dark"][data-variant="tritanopia"] { --accent: #ff8f5c; --accent-ink: #ffb38f; }

:root,
:root:not([data-theme]),
:root[data-theme="dark"],
:root[data-theme="soft"],
:root[data-theme="space-orange"] {
  color-scheme: light;
  --paper: #b33d0c;
  --paper-veil: rgba(179, 61, 12, 0.82);
  --surface: #f66b25;
  --surface-sunk: #d84a10;
  --ink: #120c08;
  --body: #120c08;
  --muted: #3f1e10;
  --faint: #572a18;
  --line: rgba(18, 12, 8, 0.3);
  --line-soft: rgba(18, 12, 8, 0.17);
  --accent: #120c08;
  --accent-ink: #120c08;
  --accent-wash: rgba(18, 12, 8, 0.12);
  --engaged: #153d2c;
  --engaged-ink: #0d3022;
  --engaged-label: #b33d0c;
  --tag: #120c08;
  --tag-ink: #000;
  --good-ink: #0d3826;
  --alarm-ink: #6d0e09;
  --on-accent: #b33d0c;
  --highlight: #6b3708;
  --gage-distress-image: url("/assets/gage/main/distressed-orange-c460e569.svg");
  --gage-technical-grid-image: url("/assets/gage/main/technical-grid-7e42d794.svg");
  --map-ground: #070706;
  --map-block: #10100f;
  --map-block-line: #595956;
  --map-detail: #1a1a18;
  --map-water: #030303;
  --map-water-line: #d5d2c9;
  --map-road: #080807;
  --map-road-line: #f4f1ea;
  --map-label: #f4f1ea;
  --map-stop-ring: #070706;
}

/* ONE PALETTE MATRIX FOR EVERY AUTHENTICATED SURFACE. Start and the main bay
   deliberately have different layouts, but Appearance promises that a named
   palette means the same thing in both places. These intermediate tokens are
   the treaty: each surface maps them into its own semantic vocabulary. The
   marketing documents do not carry either class and retain their own defaults. */
:root:is(.start-surface-page, .gage-main-page) {
  --gage-palette-color-scheme: light;
  --gage-palette-ground: #c9c8be;
  --gage-palette-panel: #ece7d8;
  --gage-palette-panel-hover: #f6f0df;
  --gage-palette-sunk: #b9b8ad;
  --gage-palette-ink: #11100e;
  --gage-palette-body: #3d3b36;
  --gage-palette-muted: #5f5d56;
  --gage-palette-faint: #77746b;
  --gage-palette-line: rgba(17, 16, 14, .25);
  --gage-palette-line-soft: rgba(17, 16, 14, .13);
  --gage-palette-accent: #ff6a00;
  --gage-palette-signal: #ff6a00;
  --gage-palette-action-ink: #11100e;
  --gage-palette-active: #070706;
  --gage-palette-active-ink: #ece7d8;
  --gage-palette-texture-filter: none;
  --gage-palette-shadow: rgba(17, 16, 14, .16);
  --gage-palette-engaged: #00c853;
  --gage-palette-engaged-ink: #00963e;
  --gage-palette-engaged-label: #fff;
  --gage-palette-good-ink: #00963e;
  --gage-palette-alarm-ink: #9a3a1c;
  --gage-palette-highlight: #a3711f;
  --gage-palette-map-ground: #ded9cd;
  --gage-palette-map-block: #eee9dd;
  --gage-palette-map-block-line: #bbb4a4;
  --gage-palette-map-detail: #d2ccbd;
  --gage-palette-map-water: #c7e2df;
  --gage-palette-map-water-line: #709896;
  --gage-palette-map-road: #bdb49d;
  --gage-palette-map-road-line: #746d5d;
  --gage-palette-map-label: #555b58;
  --gage-palette-map-stop-ring: #f4f1ea;
}

:root:is(.start-surface-page, .gage-main-page)[data-variant="protanopia"] {
  --gage-palette-accent: #0072b2;
  --gage-palette-signal: #e69f00;
  --gage-palette-action-ink: #f4f1ea;
}

:root:is(.start-surface-page, .gage-main-page)[data-variant="tritanopia"] {
  --gage-palette-accent: #d55e00;
  --gage-palette-signal: #0072b2;
  --gage-palette-action-ink: #f4f1ea;
}

:root:is(.start-surface-page, .gage-main-page)[data-theme="dark"] {
  --gage-palette-color-scheme: dark;
  --gage-palette-ground: #15191a;
  --gage-palette-panel: #252b29;
  --gage-palette-panel-hover: #303735;
  --gage-palette-sunk: #101413;
  --gage-palette-ink: #f1f3ee;
  --gage-palette-body: #ccd2cd;
  --gage-palette-muted: #a0a7a2;
  --gage-palette-faint: #7a817c;
  --gage-palette-line: rgba(241, 243, 238, .27);
  --gage-palette-line-soft: rgba(241, 243, 238, .13);
  --gage-palette-accent: #ff8c1a;
  --gage-palette-signal: #ff8c1a;
  --gage-palette-action-ink: #15191a;
  --gage-palette-active: #f1f3ee;
  --gage-palette-active-ink: #15191a;
  --gage-palette-texture-filter: invert(1) grayscale(1);
  --gage-palette-shadow: rgba(0, 0, 0, .34);
  --gage-palette-engaged: #00ff85;
  --gage-palette-engaged-ink: #7dffc0;
  --gage-palette-engaged-label: #0a1f10;
  --gage-palette-good-ink: #7dffc0;
  --gage-palette-alarm-ink: #ea8460;
  --gage-palette-highlight: #e7a935;
  --gage-palette-map-ground: #24271f;
  --gage-palette-map-block: #30342a;
  --gage-palette-map-block-line: #434738;
  --gage-palette-map-detail: #3b4032;
  --gage-palette-map-water: #152f31;
  --gage-palette-map-water-line: #285354;
  --gage-palette-map-road: #65664d;
  --gage-palette-map-road-line: #a49c72;
  --gage-palette-map-label: #c5c5ac;
  --gage-palette-map-stop-ring: #14241e;
}

:root:is(.start-surface-page, .gage-main-page)[data-theme="dark"][data-variant="protanopia"] {
  --gage-palette-accent: #56b4e9;
  --gage-palette-signal: #e6b800;
  --gage-palette-action-ink: #15191a;
}

:root:is(.start-surface-page, .gage-main-page)[data-theme="dark"][data-variant="tritanopia"] {
  --gage-palette-accent: #ff8f5c;
  --gage-palette-signal: #56b4e9;
  --gage-palette-action-ink: #15191a;
}

:root:is(.start-surface-page, .gage-main-page)[data-theme="soft"] {
  --gage-palette-color-scheme: dark;
  --gage-palette-ground: #201d1a;
  --gage-palette-panel: #332d27;
  --gage-palette-panel-hover: #403830;
  --gage-palette-sunk: #171310;
  --gage-palette-ink: #eee7dc;
  --gage-palette-body: #c7bfae;
  --gage-palette-muted: #a39989;
  --gage-palette-faint: #776f62;
  --gage-palette-line: rgba(238, 231, 220, .26);
  --gage-palette-line-soft: rgba(238, 231, 220, .13);
  --gage-palette-accent: #ff9a4d;
  --gage-palette-signal: #ff9a4d;
  --gage-palette-action-ink: #201d1a;
  --gage-palette-active: #eee7dc;
  --gage-palette-active-ink: #201d1a;
  --gage-palette-texture-filter: invert(1) grayscale(1);
  --gage-palette-shadow: rgba(0, 0, 0, .38);
  --gage-palette-engaged: #6dd9a0;
  --gage-palette-engaged-ink: #9fe8bf;
  --gage-palette-engaged-label: #0f2116;
  --gage-palette-good-ink: #9fe8bf;
  --gage-palette-alarm-ink: #e2a084;
  --gage-palette-highlight: #e7a935;
  --gage-palette-map-ground: #24271f;
  --gage-palette-map-block: #30342a;
  --gage-palette-map-block-line: #434738;
  --gage-palette-map-detail: #3b4032;
  --gage-palette-map-water: #152f31;
  --gage-palette-map-water-line: #285354;
  --gage-palette-map-road: #65664d;
  --gage-palette-map-road-line: #a49c72;
  --gage-palette-map-label: #c5c5ac;
  --gage-palette-map-stop-ring: #14241e;
}

:root:is(.start-surface-page, .gage-main-page)[data-theme="space-orange"] {
  --gage-palette-color-scheme: light;
  --gage-palette-ground: #b33d0c;
  --gage-palette-panel: #f66b25;
  --gage-palette-panel-hover: #ff7b38;
  --gage-palette-sunk: #d84a10;
  --gage-palette-ink: #120c08;
  --gage-palette-body: #120c08;
  --gage-palette-muted: #3f1e10;
  --gage-palette-faint: #572a18;
  --gage-palette-line: rgba(18, 12, 8, .3);
  --gage-palette-line-soft: rgba(18, 12, 8, .17);
  --gage-palette-accent: #120c08;
  --gage-palette-signal: #120c08;
  --gage-palette-action-ink: #b33d0c;
  --gage-palette-active: #120c08;
  --gage-palette-active-ink: #b33d0c;
  --gage-palette-texture-filter: none;
  --gage-palette-shadow: rgba(18, 12, 8, .24);
  --gage-palette-engaged: #153d2c;
  --gage-palette-engaged-ink: #0d3022;
  --gage-palette-engaged-label: #b33d0c;
  --gage-palette-good-ink: #0d3826;
  --gage-palette-alarm-ink: #6d0e09;
  --gage-palette-highlight: #6b3708;
  --gage-palette-map-ground: #070706;
  --gage-palette-map-block: #10100f;
  --gage-palette-map-block-line: #595956;
  --gage-palette-map-detail: #1a1a18;
  --gage-palette-map-water: #030303;
  --gage-palette-map-water-line: #d5d2c9;
  --gage-palette-map-road: #080807;
  --gage-palette-map-road-line: #f4f1ea;
  --gage-palette-map-label: #f4f1ea;
  --gage-palette-map-stop-ring: #070706;
}

@media (prefers-color-scheme: dark) {
  :root:is(.start-surface-page, .gage-main-page):not([data-theme]) {
    --gage-palette-color-scheme: dark;
    --gage-palette-ground: #15191a;
    --gage-palette-panel: #252b29;
    --gage-palette-panel-hover: #303735;
    --gage-palette-sunk: #101413;
    --gage-palette-ink: #f1f3ee;
    --gage-palette-body: #ccd2cd;
    --gage-palette-muted: #a0a7a2;
    --gage-palette-faint: #7a817c;
    --gage-palette-line: rgba(241, 243, 238, .27);
    --gage-palette-line-soft: rgba(241, 243, 238, .13);
    --gage-palette-accent: #ff8c1a;
    --gage-palette-signal: #ff8c1a;
    --gage-palette-action-ink: #15191a;
    --gage-palette-active: #f1f3ee;
    --gage-palette-active-ink: #15191a;
    --gage-palette-texture-filter: invert(1) grayscale(1);
    --gage-palette-shadow: rgba(0, 0, 0, .34);
    --gage-palette-engaged: #00ff85;
    --gage-palette-engaged-ink: #7dffc0;
    --gage-palette-engaged-label: #0a1f10;
    --gage-palette-good-ink: #7dffc0;
    --gage-palette-alarm-ink: #ea8460;
    --gage-palette-highlight: #e7a935;
    --gage-palette-map-ground: #24271f;
    --gage-palette-map-block: #30342a;
    --gage-palette-map-block-line: #434738;
    --gage-palette-map-detail: #3b4032;
    --gage-palette-map-water: #152f31;
    --gage-palette-map-water-line: #285354;
    --gage-palette-map-road: #65664d;
    --gage-palette-map-road-line: #a49c72;
    --gage-palette-map-label: #c5c5ac;
    --gage-palette-map-stop-ring: #14241e;
  }

  :root:is(.start-surface-page, .gage-main-page):not([data-theme])[data-variant="protanopia"] {
    --gage-palette-accent: #56b4e9;
    --gage-palette-signal: #e6b800;
    --gage-palette-action-ink: #15191a;
  }

  :root:is(.start-surface-page, .gage-main-page):not([data-theme])[data-variant="tritanopia"] {
    --gage-palette-accent: #ff8f5c;
    --gage-palette-signal: #56b4e9;
    --gage-palette-action-ink: #15191a;
  }
}

html {
  background-color: var(--paper);
  color: var(--ink);
}

body {
  background-image: var(--gage-technical-grid-image), var(--gage-distress-image);
  background-position: right top, left top;
  background-size: 7rem 320px, 320px 320px;
  background-repeat: repeat-y, repeat;
  background-attachment: fixed, fixed;
}

@media (min-width: 100rem) {
  body {
    background-size: clamp(12rem, 20vw, 20rem) 320px, 320px 320px;
  }
}

@media (max-width: 55.9375rem) {
  body {
    background-size: 3.5rem 320px, 320px 320px;
  }
}

:root[data-motion="reduced"],
:root[data-motion="reduced"] *,
:root[data-motion="reduced"] *::before,
:root[data-motion="reduced"] *::after {
  animation: none !important;
  transition: none !important;
  scroll-behavior: auto !important;
}

@media (prefers-reduced-motion: reduce) {
  :root, :root *, :root *::before, :root *::after {
    animation: none !important;
    transition: none !important;
    scroll-behavior: auto !important;
  }
}