/* Generated from config.js — edit that file, not this one. */
@font-face {
  font-family: "Michroma";
  src: url("/fonts/Michroma-400.a319bc41.woff2") format("woff2");
  font-weight: 400;
  font-display: block;
}

@font-face {
  font-family: "Liberation Sans";
  src: url("/fonts/LiberationSans-700.cc81b2b5.woff2") format("woff2");
  font-weight: 700;
  font-display: block;
}

@font-face {
  font-family: "Inter";
  src: url("/fonts/Inter-400.9c973c94.woff2") format("woff2");
  font-weight: 400;
  font-display: swap;
}

@font-face {
  font-family: "Roboto Condensed";
  src: url("/fonts/RobotoCondensed-700.f423f5ca.woff2") format("woff2");
  font-weight: 700;
  font-display: swap;
}

:root {
  --top-block-height: 101.4px;
  --band-height: 16.7px;
  --bottom-block-height: 55.4px;
  --photo-window-height: 593.1px;
  --reference-screen-height: 852px;
  --status-bar-height: 58.2px;
  --safari-bottom-bar-height: 91.4px;
  --block-bleed: 300px;
  --main-top-block-colour: #ee2427;
  --main-band-colour: #f8b000;
  --main-bottom-block-colour: #3893cc;
  --main-band-text-colour: #251b19;
  --main-input-button-colour: #251b19;
  --main-vertical-name-colour: #3893cc;
  --main-vertical-info-colour: #3893cc;
  --design-top-block-colour: #4e4f54;
  --design-band-colour: #ee2427;
  --design-bottom-block-colour: #f15c25;
  --design-band-text-colour: #ffffff;
  --design-output-button-colour: #ffffff;
  --design-vertical-name-colour: #c9f4f3;
  --design-vertical-info-colour: #c9f4f3;
  --about-top-block-colour: #f8b000;
  --about-band-colour: #ee2427;
  --about-bottom-block-colour: #4e4f54;
  --about-band-text-colour: #ffffff;
  --about-back-button-colour: #ffffff;
  --about-text-colour: #e3eef8;
  --about-background-fill: #333977;
  --about-background-line: #808080;
  --about-background-surround: #333977;
  --main-copyright-colour: #000000;
  --design-copyright-colour: #000000;
  --about-copyright-colour: #e3eef8;
  --copyright-font: "Liberation Sans";
  --copyright-font-size: 8px;
  --copyright-tracking: -0.05em;
  --copyright-from-screen-bottom: 107.58px;
  --photo-placeholder-colour: #251b19;
  --about-button-light: #c9f4f3;
  --about-button-dark: #333977;
  --about-button-colour: #333977;
  --about-button-fade: 150ms;
  --code-number-light: #e3eef8;
  --code-number-dark: #251b19;
  --vertical-text-blend-mode: normal;
  --band-font: "Michroma";
  --band-font-size: 11.6px;
  --band-tracking: 0.01em;
  --button-font: "Liberation Sans";
  --button-font-size: 20.7px;
  --button-tracking: -0.05em;
  --info-font: "Inter";
  --info-font-size: 8.76px;
  --info-tracking: 0.01em;
  --info-line-height: 1.2;
  --code-number-font: "Roboto Condensed";
  --code-number-font-size: 12px;
  --code-number-tracking: -0.05em;
  --top-button-left: 8.7px;
  --top-button-top: 80.2px;
  --top-button-height: 25.3px;
  --top-button-arrow-gap: 2.2px;
  --about-button-left: 8.7px;
  --about-button-top: 110.4px;
  --about-button-width: 25.3px;
  --about-button-height: 95.6px;
  --about-arrow-inset: 1.56px;
  --about-arrow-gap: 0.7px;
  --arrow-width: 17.34px;
  --arrow-height: 15.03px;
  --vertical-name-right: 11.8px;
  --vertical-name-from-bottom: 168.9px;
  --vertical-name-width: 21.8px;
  --vertical-info-right: 35.9px;
  --vertical-info-from-bottom: 168.4px;
  --code-number-left: 7.3px;
  --code-number-bottom: 9px;
  --tap-target-min: 44px;
  --selection-frame-colour: #0000ff;
  --back-button-arrow-gap: 0px;
  --about-intro-left: 34px;
  --about-intro-top: 144.6px;
  --about-intro-font-size: 12px;
  --about-intro-line-height: 14.4px;
  --about-intro-tracking: -0.05em;
  --about-contact-right: 31.2px;
  --about-contact-from-bottom: 191.2px;
  --about-contact-font-size: 12px;
  --about-contact-line-height: 14.4px;
  --about-contact-tracking: -0.05em;
  --about-text-scale: 1;
  --triangle-width: 5.5px;
  --triangle-height: 14.9px;
  --triangle-gap: 0.99px;
  --triangle-text-gap: 3.26px;
}

@media (max-width: 392.98px) {
  .about-intro br { display: none; }
}

@media (min-width: 1024px) {
  :root { --about-text-scale: 2; }
}