/* Generated by scripts/brand/build_fonts.py. Do not edit.
 * Manrope, DM Sans and Rubik: the files Google Fonts serves, self-hosted.
 * Licence: SIL Open Font License 1.1 (the OFL-*.txt files next to this one). */

/* Manrope, latin */
@font-face {
  font-family: 'Manrope';
  font-style: normal;
  font-weight: 800;
  font-display: swap;
  src: url('/fonts/manrope-latin.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

/* Manrope, latin-ext */
@font-face {
  font-family: 'Manrope';
  font-style: normal;
  font-weight: 800;
  font-display: swap;
  src: url('/fonts/manrope-latin-ext.woff2') format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

/* DM Sans, latin */
@font-face {
  font-family: 'DM Sans';
  font-style: normal;
  font-weight: 400 700;
  font-display: swap;
  src: url('/fonts/dm-sans-latin.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

/* DM Sans, latin-ext */
@font-face {
  font-family: 'DM Sans';
  font-style: normal;
  font-weight: 400 700;
  font-display: swap;
  src: url('/fonts/dm-sans-latin-ext.woff2') format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

/* Rubik, hebrew */
@font-face {
  font-family: 'Rubik';
  font-style: normal;
  font-weight: 400 800;
  font-display: swap;
  src: url('/fonts/rubik-hebrew.woff2') format('woff2');
  unicode-range: U+0307-0308, U+0590-05FF, U+200C-2010, U+20AA, U+25CC, U+FB1D-FB4F;
}

/* While a font loads, the computer's Arial stands in, resized to take the same space,
 * so the text does not jump when the font arrives. Each covers only its font's alphabet. */

@font-face {
  font-family: 'Manrope Fallback';
  font-style: normal;
  font-weight: 800;
  src: local('Arial Bold'), local('Arial-BoldMT');
  size-adjust: 102.20%;
  ascent-override: 104.30%;
  descent-override: 29.35%;
  line-gap-override: 0.00%;
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD, U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

@font-face {
  font-family: 'DM Sans Fallback';
  font-style: normal;
  font-weight: 400;
  src: local('Arial'), local('ArialMT');
  size-adjust: 104.69%;
  ascent-override: 94.76%;
  descent-override: 29.61%;
  line-gap-override: 0.00%;
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD, U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

@font-face {
  font-family: 'DM Sans Fallback';
  font-style: normal;
  font-weight: 700;
  src: local('Arial Bold'), local('Arial-BoldMT');
  size-adjust: 102.40%;
  ascent-override: 96.87%;
  descent-override: 30.27%;
  line-gap-override: 0.00%;
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD, U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

@font-face {
  font-family: 'Rubik Fallback';
  font-style: normal;
  font-weight: 400;
  src: local('Arial'), local('ArialMT');
  size-adjust: 103.69%;
  ascent-override: 90.17%;
  descent-override: 24.11%;
  line-gap-override: 0.00%;
  unicode-range: U+0307-0308, U+0590-05FF, U+200C-2010, U+20AA, U+25CC, U+FB1D-FB4F;
}

@font-face {
  font-family: 'Rubik Fallback';
  font-style: normal;
  font-weight: 700;
  src: local('Arial Bold'), local('Arial-BoldMT');
  size-adjust: 103.23%;
  ascent-override: 90.58%;
  descent-override: 24.22%;
  line-gap-override: 0.00%;
  unicode-range: U+0307-0308, U+0590-05FF, U+200C-2010, U+20AA, U+25CC, U+FB1D-FB4F;
}

@font-face {
  font-family: 'Rubik Fallback';
  font-style: normal;
  font-weight: 800;
  src: local('Arial Bold'), local('Arial-BoldMT');
  size-adjust: 105.01%;
  ascent-override: 89.04%;
  descent-override: 23.81%;
  line-gap-override: 0.00%;
  unicode-range: U+0307-0308, U+0590-05FF, U+200C-2010, U+20AA, U+25CC, U+FB1D-FB4F;
}

/**
 * Generated from design/tokens/clixafe.tokens.json by web/packages/tokens/build.ts. Do not edit.
 */

:root {
  --color-brand-slate: #1e293b; /** Text, the logo, hero blocks, the Blocked status */
  --color-brand-slate-2: #2a3650; /** Second-level dark surfaces, dark quiet buttons */
  --color-brand-slate-3: #3a4865; /** Tiles on slate, borders on dark */
  --color-brand-light-blue: #a5b8f5; /** Main buttons (with slate text), numbers on slate, the cursor on dark */
  --color-brand-light-blue-hover: #96abef; /** Main buttons under the pointer: light blue with 20% cornflower (slate text 6.53:1). */
  --color-brand-cornflower: #5877d6; /** The cursor on light backgrounds */
  --color-brand-cornflower-deep: #4a63c4; /** Allowed, links, the word Safe., focus on light */
  --color-brand-deeper: #3a4fa3; /** Allowed label text, link hover */
  --color-brand-tint: #e8edfb; /** Allowed tiles, the active tab */
  --color-brand-mist: #f3f6fa; /** Panels, tiles, quiet buttons */
  --color-brand-line: #e4e9f0; /** Borders */
  --color-brand-hairline: #eef2f6; /** Row dividers */
  --color-brand-text-muted: #52606f; /** Body and captions */
  --color-brand-text-on-dark: #cbd3e1; /** Secondary text on slate */
  --color-brand-honey: #f6efdd; /** Waiting and needs-attention tiles */
  --color-brand-honey-text: #7a5a12; /** Waiting and needs-attention marks and text */
  --color-brand-danger: #b42318; /** Real danger only: protection off, tampering, destructive actions, errors. Never for blocked, never a brand colour */
  --color-brand-danger-hover: #99241e; /** Destructive buttons under the pointer: danger with 18% slate (white text 8.00:1). */
  --color-brand-danger-tint: #fdecea; /** Danger tiles and rows */
  --color-brand-danger-on-dark: #e9655b; /** The danger red on dark surfaces: the tray icon's cursor on a dark taskbar now (5.0:1), dark mode later (4.5:1 on slate). Same meaning as danger: real danger only. */
  --color-brand-white: #ffffff; /** Page background */
  --color-brand-one-colour: #111418; /** The one-colour logo */
  --color-brand-signal-amber: #f0b429; /** Needs attention, as a small status mark on dark surfaces only (the tray icon's cursor on a dark taskbar: 8.7:1). Never text, never a surface. */
  --color-brand-signal-amber-deep: #ad721d; /** Needs attention, as a small status mark on light surfaces only (the tray icon's cursor on a light taskbar: 3.6:1, and 3.2:1 on hover). Never text. */
  --font-family-display: Manrope, 'Manrope Fallback', Rubik, 'Rubik Fallback', sans-serif; /** Logo, headlines, big numbers, buttons. Rubik supplies the Hebrew letters. */
  --font-family-text: 'DM Sans', 'DM Sans Fallback', Rubik, 'Rubik Fallback', sans-serif; /** Everything else. Rubik supplies the Hebrew letters. */
  --font-weight-regular: 400;
  --font-weight-medium: 500;
  --font-weight-semibold: 600;
  --font-weight-bold: 700;
  --font-weight-extrabold: 800;
  --font-size-display: 2.5rem;
  --font-size-title: 1.5rem;
  --font-size-heading: 1.0625rem;
  --font-size-body: 0.9375rem;
  --font-size-small: 0.78125rem;
  --font-size-label: 0.75rem; /** Small labels above a group, in capitals with wide letter-spacing in English. Hebrew labels get neither. */
  --font-size-button-large: 1rem; /** Button words (Manrope 800), by button size (boards 07 and 08). */
  --font-size-button-medium: 0.9375rem;
  --font-size-button-small: 0.875rem;
  --font-line-height-display: 1.1;
  --font-line-height-title: 1.2;
  --font-line-height-heading: 1.3;
  --font-line-height-body: 1.5;
  --font-line-height-small: 1.45;
  --font-line-height-label: 1.35;
  --font-line-height-button-large: 1.2;
  --font-line-height-button-medium: 1.2;
  --font-line-height-button-small: 1.2;
  --font-tracking-display: -0.03;
  --font-tracking-title: -0.02;
  --font-tracking-heading: -0.01;
  --font-tracking-body: 0;
  --font-tracking-small: 0;
  --font-tracking-label: 0.1;
  --font-tracking-button-large: -0.01;
  --font-tracking-button-medium: -0.01;
  --font-tracking-button-small: -0.01;
  --space-0: 0px;
  --space-1: 4px;
  --space-2: 8px;
  --space-3: 12px;
  --space-4: 16px;
  --space-5: 20px;
  --space-6: 24px;
  --space-8: 32px;
  --space-10: 40px;
  --space-12: 48px;
  --space-16: 64px;
  --space-20: 80px;
  --space-24: 96px;
  --space-0_5: 2px;
  --space-1_5: 6px;
  --size-mark-small: 22px;
  --size-mark-large: 40px;
  --size-mark-glyph-small: 18px;
  --size-mark-glyph-large: 34px;
  --size-button-large: 54px;
  --size-button-medium: 48px;
  --size-button-small: 40px;
  --radius-button-tip: 6px;
  --radius-button-round: 19px;
  --radius-button-medium-tip: 5px;
  --radius-button-medium-round: 17px;
  --radius-button-small-tip: 4px;
  --radius-button-small-round: 14px;
  --radius-tile-tip: 5px;
  --radius-tile-round: 14px;
  --radius-chip-tip: 3px;
  --radius-chip-round: 8px;
  --radius-card-tip: 8px;
  --radius-card-round: 24px;
  --radius-hero-tip: 8px;
  --radius-hero-round: 26px;
  --radius-app-icon-tip: 0.07;
  --radius-app-icon-round: 0.31;
  --layout-page-width: 1200px; /** The widest the content gets on big screens. */
  --layout-text-width: 35rem; /** The widest a block of running text gets, for comfortable reading (about 75 characters). Written in rem on the web, so it keeps the same number of characters when the text size changes. */
  --breakpoint-medium: 37.5rem;
  --breakpoint-expanded: 52.5rem;
  --breakpoint-large: 75rem;
  --breakpoint-extra-large: 100rem;
  --motion-duration-press: 120ms; /** Buttons and rows sink slightly when pressed (see press-scale). Also hover changes. */
  --motion-duration-approve: 250ms; /** The tick draws itself. */
  --motion-duration-block: 180ms; /** Our X settles in. */
  --motion-duration-enter: 200ms; /** Popups, menus, tooltips and messages appearing. */
  --motion-duration-exit: 150ms; /** The same, leaving: a little faster than appearing. */
  --motion-easing-move: cubic-bezier(0.2, 0.8, 0.2, 1); /** Movement: things arriving, sliding or growing. */
  --motion-easing-fade: cubic-bezier(0, 0, 0.58, 1); /** Fades, presses and hover changes (the CSS ease-out). */
  --motion-easing-exit: cubic-bezier(0.42, 0, 1, 1); /** Things leaving (the CSS ease-in). */
  --motion-press-scale: 0.97;
  --focus-width: 3px;
  --focus-offset: 3px;
  --logo-letter-spacing-em: -0.045; /** In em (DTCG dimensions allow only px and rem). */
  --logo-symbol-box-em: 0.6;
  --logo-tagline-scale: 0.125; /** Tagline font size as a share of the logo font size. */
  --color-surface-page: var(--color-brand-white);
  --color-surface-panel: var(--color-brand-mist);
  --color-surface-hero: var(--color-brand-slate);
  --color-surface-hero-2: var(--color-brand-slate-2);
  --color-text-primary: var(--color-brand-slate);
  --color-text-muted: var(--color-brand-text-muted);
  --color-text-on-dark: var(--color-brand-white);
  --color-text-on-dark-soft: var(--color-brand-text-on-dark);
  --color-text-link: var(--color-brand-cornflower-deep);
  --color-text-link-hover: var(--color-brand-deeper);
  --color-border-default: var(--color-brand-line);
  --color-border-row: var(--color-brand-hairline);
  --color-border-on-dark: var(--color-brand-slate-3);
  --color-action-primary-background: var(--color-brand-light-blue);
  --color-action-primary-text: var(--color-brand-slate);
  --color-action-primary-background-hover: var(--color-brand-light-blue-hover);
  --color-action-secondary-background: var(--color-brand-slate);
  --color-action-secondary-text: var(--color-brand-white);
  --color-action-secondary-background-hover: var(--color-brand-slate-2);
  --color-action-quiet-background: var(--color-brand-mist);
  --color-action-quiet-text: var(--color-brand-slate);
  --color-action-quiet-background-hover: var(--color-brand-line);
  --color-action-quiet-on-dark-background: var(--color-brand-slate-2);
  --color-action-quiet-on-dark-text: var(--color-brand-white);
  --color-action-quiet-on-dark-background-hover: var(--color-brand-slate-3);
  --color-action-outline-border: var(--color-brand-slate);
  --color-action-outline-text: var(--color-brand-slate);
  --color-action-outline-background-hover: var(--color-brand-mist);
  --color-action-destructive-background: var(--color-brand-danger);
  --color-action-destructive-text: var(--color-brand-white);
  --color-action-destructive-background-hover: var(--color-brand-danger-hover);
  --color-action-disabled-background: var(--color-brand-line);
  --color-action-disabled-text: var(--color-brand-text-muted);
  --color-status-allowed-tile: var(--color-brand-tint);
  --color-status-allowed-mark: var(--color-brand-cornflower-deep);
  --color-status-allowed-text: var(--color-brand-deeper);
  --color-status-blocked-tile: var(--color-brand-slate);
  --color-status-blocked-mark: var(--color-brand-white);
  --color-status-blocked-text: var(--color-brand-slate);
  --color-status-waiting-tile: var(--color-brand-honey);
  --color-status-waiting-mark: var(--color-brand-honey-text);
  --color-status-waiting-text: var(--color-brand-honey-text);
  --color-status-attention-tile: var(--color-brand-honey);
  --color-status-attention-mark: var(--color-brand-honey-text);
  --color-status-attention-text: var(--color-brand-honey-text);
  --color-status-attention-signal-on-dark: var(--color-brand-signal-amber); /** A small status mark on a dark surface (the tray icon cursor). */
  --color-status-attention-signal-on-light: var(--color-brand-signal-amber-deep); /** A small status mark on a light surface (the tray icon cursor). */
  --color-status-danger-tile: var(--color-brand-danger-tint);
  --color-status-danger-mark: var(--color-brand-danger);
  --color-status-danger-text: var(--color-brand-danger);
  --color-status-danger-signal-on-dark: var(--color-brand-danger-on-dark); /** A small status mark on a dark surface (the tray icon cursor). */
  --color-status-danger-signal-on-light: var(--color-brand-danger); /** A small status mark on a light surface (the tray icon cursor). */
  --color-focus-on-light: var(--color-brand-cornflower-deep);
  --color-focus-on-dark: var(--color-brand-light-blue);
  --color-selection-background: var(--color-brand-light-blue);
  --color-selection-text: var(--color-brand-slate);
  --color-logo-on-white-letters: var(--color-brand-slate);
  --color-logo-on-white-cursor: var(--color-brand-cornflower);
  --color-logo-on-white-cutout: var(--color-brand-white);
  --color-logo-on-slate-letters: var(--color-brand-white);
  --color-logo-on-slate-cursor: var(--color-brand-light-blue);
  --color-logo-on-slate-cutout: var(--color-brand-slate);
  --color-logo-on-blue-letters: var(--color-brand-white);
  --color-logo-on-blue-cursor: var(--color-brand-slate);
  --color-logo-on-blue-cutout: var(--color-brand-cornflower-deep);
  --color-logo-one-colour-letters: var(--color-brand-one-colour);
  --color-logo-one-colour-cursor: var(--color-brand-one-colour);
  --layout-gutter-compact: var(--space-5);
  --layout-gutter-medium: var(--space-6);
  --layout-gutter-expanded: var(--space-8);
}

/* clixafe.com. The build puts our fonts and the design tokens before this, so every value here is a token, a
 * brand value from design/decisions, or a layout measure. One look on purpose: the brand's slate hero. */

:root {
  color-scheme: dark;
  --logo-width: clamp(16rem, 64vw, 32rem);
  --big-x: clamp(19rem, 58vmin, 44rem);
  --gutter-inline: clamp(var(--space-5), 5vw, var(--space-16));
  --gutter-block: clamp(var(--space-5), 5vh, var(--space-12));
}

/* Phones on their side: a smaller X, so it stays clear of the logo. */
@media (max-height: 30rem) {
  :root {
    --big-x: 62vmin;
  }
}

html {
  height: 100%;
}

body {
  min-height: 100%;
  margin: 0;
  display: flex;
  flex-direction: column;
  background: var(--color-surface-hero);
  color: var(--color-text-on-dark);
  font: var(--font-weight-regular) var(--font-size-body) / var(--font-line-height-body) var(--font-family-text);
  -webkit-font-smoothing: antialiased;
}

/* One screen: the logo in the middle, the language switch in the top corner, the Big X in the bottom corner. */
.stage {
  flex: 1;
  position: relative;
  overflow: clip;
  display: grid;
  place-items: center;
  padding-inline: var(--gutter-inline);
  padding-block: var(--gutter-block);
}

.lockup {
  position: relative;
  z-index: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--space-4);
  text-align: center;
  /* A little above the middle, where the eye expects it. */
  margin-block-end: 6vh;
}

/* The lockup from the logo animation (design/brand/animation): the line above the logo is 0.122 of the logo's
 * letter size (0.0406 of its width), bold, light blue, spaced 0.36em, with the same space before the first letter
 * so it stays centred. Never smaller than the label size. */
.eyebrow {
  margin: 0;
  padding-inline-start: 0.36em;
  font: var(--font-weight-bold) clamp(var(--font-size-label), calc(var(--logo-width) * 0.0406), 1.375rem) / 1
    var(--font-family-text);
  letter-spacing: 0.36em;
  text-transform: uppercase;
  color: var(--color-brand-light-blue);
}

h1 {
  margin: 0;
}

.logo {
  display: block;
  width: var(--logo-width);
  height: auto;
}

.note {
  margin: 0;
  margin-block-start: clamp(var(--space-5), 4vh, var(--space-10));
  font-weight: var(--font-weight-medium);
  color: var(--color-text-on-dark-soft);
}

.title {
  margin: 0;
  margin-block-start: clamp(var(--space-5), 4vh, var(--space-10));
  font: var(--font-weight-extrabold) var(--font-size-title) / var(--font-line-height-title) var(--font-family-display);
  letter-spacing: calc(var(--font-tracking-title) * 1em);
  text-wrap: balance;
}

/* Our quiet button on dark. The tip corner stays top left in both directions, so the corners are physical. */
.lang,
.home {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: var(--size-button-small);
  padding-inline: var(--space-4);
  border: 0;
  border-radius: var(--radius-button-small-tip) var(--radius-button-small-round) var(--radius-button-small-round)
    var(--radius-button-small-round);
  background: var(--color-action-quiet-on-dark-background);
  color: var(--color-action-quiet-on-dark-text);
  font: var(--font-weight-extrabold) var(--font-size-button-small) / var(--font-line-height-button-small)
    var(--font-family-display);
  letter-spacing: calc(var(--font-tracking-button-small) * 1em);
  text-decoration: none;
  cursor: pointer;
  touch-action: manipulation;
  transition: background-color var(--motion-duration-press) var(--motion-easing-fade);
}

/* Above everything else, so no other box can take its taps. */
.lang {
  position: absolute;
  z-index: 2;
  top: var(--gutter-block);
  inset-inline-end: var(--gutter-inline);
}

/* Hidden until the script can make it work (our display rule would otherwise override `hidden`). */
.lang[hidden] {
  display: none;
}

.home {
  min-height: var(--size-button-medium);
  padding-inline: var(--space-6);
  border-radius: var(--radius-button-medium-tip) var(--radius-button-medium-round) var(--radius-button-medium-round)
    var(--radius-button-medium-round);
  font-size: var(--font-size-button-medium);
}

/* Phones keep a hover shade after a tap, so the shade is only for screens with a real pointer. */
@media (hover: hover) {
  .lang:hover,
  .home:hover {
    background: var(--color-action-quiet-on-dark-background-hover);
  }
}

.lang:focus-visible,
.home:focus-visible {
  outline: var(--focus-width) solid var(--color-focus-on-dark);
  outline-offset: var(--focus-offset);
}

/* The Big X banner (design decisions, section 10.8): our X cropped large into the bottom corner at about 14%. It
 * moves to the other corner in Hebrew but never mirrors. It slides in once, as a brand moment. */
.big-x {
  position: absolute;
  z-index: 0;
  width: var(--big-x);
  height: var(--big-x);
  inset-inline-end: calc(var(--big-x) * -0.14);
  inset-block-end: calc(var(--big-x) * -0.18);
  color: var(--color-brand-white);
  opacity: 0.14;
  pointer-events: none;
  animation: big-x-in 1.1s var(--motion-easing-move) both;
}

[dir='rtl'] .big-x {
  --big-x-direction: -1;
}

@keyframes big-x-in {
  from {
    translate: calc(var(--big-x-direction, 1) * 7%) 7%;
  }
}

/* Hebrew: no capitals and no letter-spacing. */
.eyebrow:lang(he) {
  padding-inline-start: 0;
  letter-spacing: 0;
  text-transform: none;
}

.title:lang(he),
.lang:lang(he),
.home:lang(he) {
  letter-spacing: 0;
}

@media (prefers-reduced-motion: reduce) {
  .big-x {
    animation: none;
  }

  .lang,
  .home {
    transition: none;
  }
}