:root {
  --surface: #17161b;
  --raised: #232228;
  --raised-high: #36353b;
  --raised-hover: #45444b;
  --edge: #6b6a72;
  --text: #e7e7e9;
  --muted: #b4b2b4;
  --ok: #7fbf8a;
  --warn: #e0a458;
  --fail: #e88070;
  --ember: #ff8c1a;
  --primary-top: #c8561a;
  --primary-bottom: #a63a16;
  --primary-hover-top: #d4601c;
  --primary-hover-bottom: #b2421a;
  --primary-word: #ffffff;
  --word-size: 14;
  --small-size: 13;
  --primary-size: 24;
  --primary-weight: 600;
  --launcher-width: 960;
  --launcher-height: 590;
  --caption-y: 8;
  --caption-height: 32;
  --language-x: 784;
  --language-width: 72;
  --minimise-x: 864;
  --close-x: 912;
  --caption-button-width: 40;
  --globe-x: 15;
  --globe-radius: 6.5;
  --globe-meridian: 2.75;
  --chevron-x: 11;
  --chevron-half: 3.5;
  --chevron-top: 1.5;
  --chevron-bottom: 2;
  --code-left: 27;
  --code-right: 16;
  --column-x: 680;
  --column-width: 248;
  --login-label-y: 304;
  --login-y: 326;
  --password-label-y: 372;
  --password-y: 394;
  --label-height: 20;
  --field-height: 38;
  --field-inset-x: 10;
  --field-inset-y: 9;
  --links-y: 442;
  --links-height: 22;
  --register-width: 120;
  --primary-y: 492;
  --primary-height: 64;
  --plate-x: 620;
  --plate-y: 56;
  --plate-width: 316;
  --plate-height: 44;
  --account-x: 636;
  --account-width: 184;
  --sign-out-x: 826;
  --sign-out-y: 62;
  --sign-out-width: 104;
  --sign-out-height: 32;
  --status-x: 54;
  --status-y: 488;
  --status-width: 602;
  --status-height: 44;
  --mark-x: 41;
  --mark-y: 510;
  --mark-radius: 5;
  --strip-x: 36;
  --strip-y: 536;
  --strip-height: 20;
  --link-gap: 18;
  --link-dot-radius: 1;
  --bar-y: 522;
  --bar-height: 4;
  --bar-room: 16;
  --primary-radius: 10;
  --plate-radius: 8;
  --control-radius: 6;
  --caption-radius: 4;
  --ring-gap: 2;
  --ring-width: 1.5;
  --link-ring-radius: 3;
  --fade-right-from: 600;
  --fade-right-to: 700;
  --fade-bottom-from: 400;
  --fade-bottom-to: 486;
  --logo-x: 36;
  --logo-y: 33;
  --logo-width: 340;
  --logo-height: 90;
  --art-box-x: 0;
  --art-box-y: 5;
  --art-box-width: 2624;
  --art-box-height: 1613;
  --logo-box-x: 258;
  --logo-box-y: 443;
  --logo-box-width: 2286;
  --logo-box-height: 604;
  --embers: 24;
  --ember-life-least: 6;
  --ember-life-spread: 8;
  --ember-left: 30;
  --ember-width: 530;
  --ember-bottom: 440;
  --ember-height: 170;
  --ember-rise-least: 80;
  --ember-rise-spread: 90;
  --ember-sway-least: 5;
  --ember-sway-spread: 11;
  --ember-sway-rate-least: 0.5;
  --ember-sway-rate-spread: 1;
  --ember-radius-least: 0.7;
  --ember-radius-spread: 1;
  --ember-alpha-least: 0.35;
  --ember-alpha-spread: 0.45;
  --ember-glow: 3;
  --ember-glow-alpha: 0.22;
  --phone-logo-share: 72;
}

/* The front page (website_blueprint.md, 2.5): the launcher's window in a browser. The build puts LauncherLook.h's values
   before this as :root's custom properties - c_uSurface as --surface, c_iColumnX as --column-x - with the phone's logo
   share, and fills (max-width: 719.98px), (orientation: portrait), the query the page's image sizes take too, so no colour and no measure the launcher has is
   one of this file's own. A place is the launcher's, at 96 dots an inch, and the whole window is scaled as one picture by
   the screen's height (D4): --u is a launcher unit in CSS pixels, s = max(1, height / 590), and every place, size and word
   is a number of units. A phone's layout stacks the same parts at a unit of a pixel. */

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

html, body {
  background: var(--surface);
}

body {
  --u: max(1px, 100dvh / var(--launcher-height));
  color: var(--text);
  font-family: "Segoe UI", system-ui, sans-serif;
  font-size: calc(var(--word-size) * var(--u));
  line-height: 1.36;
}

a {
  color: inherit;
  text-decoration: none;
}

a:focus-visible, summary:focus-visible {
  outline: calc(var(--ring-width) * var(--u)) solid var(--ember);
  outline-offset: calc(var(--ring-gap) * var(--u));
}

/* The window: the screen's height, never less than the launcher's. The column stands where the launcher's does, or
   further left where the screen is too narrow for it, and the scene keeps its place under the column. */
.stage {
  --column-left: min(calc(var(--column-x) * var(--u)), calc(100% - (var(--launcher-width) - var(--column-x)) * var(--u)));
  position: relative;
  height: calc(var(--launcher-height) * var(--u));
  overflow: hidden;
}

.scene {
  position: absolute;
  top: 0;
  left: calc(var(--column-left) - var(--column-x) * var(--u));
  width: calc(var(--launcher-width) * var(--u));
  height: calc(var(--launcher-height) * var(--u));
}

/* The launcher's 960 x 590: every place in it a share of it. */
.frame {
  position: absolute;
  inset: 0;
}

.art {
  position: absolute;
  inset: 0;
  display: block;
  width: 100%;
  height: 100%;
}

/* Into the surface, right of the scene and below it. */
.frame::before, .frame::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 1;
}

.frame::before {
  background: linear-gradient(to right, transparent calc(var(--fade-right-from) / var(--launcher-width) * 100%),
                              var(--surface) calc(var(--fade-right-to) / var(--launcher-width) * 100%));
}

.frame::after {
  background: linear-gradient(to bottom, transparent calc(var(--fade-bottom-from) / var(--launcher-height) * 100%),
                              var(--surface) calc(var(--fade-bottom-to) / var(--launcher-height) * 100%));
}

/* Placed by its script over the embers' reach. */
.embers {
  position: absolute;
  z-index: 2;
  pointer-events: none;
}

/* At the window's corner, so a scene cut at the left keeps the logo whole. */
.logo {
  position: absolute;
  z-index: 3;
  left: calc(var(--logo-x) * var(--u));
  top: calc(var(--logo-y) * var(--u));
  width: calc(var(--logo-width) * var(--u));
  height: calc(var(--logo-height) * var(--u));
}

.logo img {
  display: block;
  width: 100%;
  height: 100%;
}

/* The language's selector: the launcher's face, and its list a link a language. */
.language {
  position: absolute;
  z-index: 4;
  top: calc(var(--caption-y) * var(--u));
  right: calc((var(--launcher-width) - var(--column-x) - var(--column-width)) * var(--u));
}

.language summary {
  position: relative;
  display: block;
  width: calc(var(--language-width) * var(--u));
  height: calc(var(--caption-height) * var(--u));
  border-radius: calc(var(--caption-radius) * var(--u));
  color: var(--muted);
  cursor: pointer;
  list-style: none;
}

.language summary::-webkit-details-marker {
  display: none;
}

.language summary:hover, .language[open] summary {
  background: var(--raised-high);
  color: var(--text);
}

.language svg {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
}

.code {
  position: absolute;
  top: 0;
  bottom: 0;
  left: calc(var(--code-left) * var(--u));
  right: calc(var(--code-right) * var(--u));
  display: flex;
  align-items: center;
  font-size: calc(var(--small-size) * var(--u));
}

/* Windows' own list in the launcher; here a plate of the launcher's colours. */
.languages {
  position: absolute;
  top: calc(100% + 4 * var(--u));
  right: 0;
  padding: calc(4 * var(--u)) 0;
  list-style: none;
  background: var(--raised);
  border: var(--u) solid var(--edge);
  border-radius: calc(var(--control-radius) * var(--u));
}

.languages a {
  display: block;
  padding: calc(4 * var(--u)) calc(16 * var(--u));
  font-size: calc(var(--small-size) * var(--u));
  color: var(--muted);
  white-space: nowrap;
}

.languages a:hover, .languages a[aria-current] {
  color: var(--text);
}

.languages a:hover {
  background: var(--raised-high);
}

.languages a:focus-visible {
  outline-offset: calc(var(--ring-width) * -1 * var(--u));
}

/* The column, stacked up from the primary button where the launcher has Play, 34 above the window's foot, by the launcher's
   gaps: above it the account's two links where the launcher has Create Account and Forgot Password, and above them a line
   where it has its password's box - or, on the account's pages, the launcher's boxes with their labels. */
.column {
  position: absolute;
  z-index: 3;
  left: var(--column-left);
  bottom: calc((var(--launcher-height) - var(--primary-y) - var(--primary-height)) * var(--u));
  width: calc(var(--column-width) * var(--u));
}

.column, .view {
  display: flex;
  flex-direction: column;
}

.view[hidden] {
  display: none;
}

.line {
  min-height: calc(var(--field-height) * var(--u));
  display: flex;
  align-items: center;
  text-wrap: balance;
}

.account {
  margin-top: calc((var(--links-y) - var(--password-y) - var(--field-height)) * var(--u));
  height: calc(var(--links-height) * var(--u));
  display: flex;
  align-items: center;
  justify-content: space-between;
  font-size: calc(var(--small-size) * var(--u));
}

.account a, .links a {
  color: var(--muted);
  border-radius: calc((var(--link-ring-radius) - var(--ring-gap)) * var(--u));
}

.account a:hover, .links a:hover {
  color: var(--text);
}

.primary {
  margin-top: calc((var(--primary-y) - var(--links-y) - var(--links-height)) * var(--u));
  height: calc(var(--primary-height) * var(--u));
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0 calc(var(--primary-radius) * var(--u));
  border-radius: calc(var(--primary-radius) * var(--u));
  background: linear-gradient(var(--primary-top), var(--primary-bottom));
  color: var(--primary-word);
  font-size: calc(var(--primary-size) * var(--u));
  font-weight: var(--primary-weight);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.primary:hover {
  background: linear-gradient(var(--primary-hover-top), var(--primary-hover-bottom));
}

.primary:active {
  background: var(--primary-bottom);
}

/* The bottom strip: the servers' state beside its mark, and under it the links, a dot between each two. */
.strip {
  position: absolute;
  z-index: 3;
  left: 0;
  bottom: 0;
  width: calc((var(--status-x) + var(--status-width)) * var(--u));
}

.status {
  position: absolute;
  left: calc(var(--status-x) * var(--u));
  right: 0;
  bottom: calc((var(--launcher-height) - var(--status-y) - var(--status-height)) * var(--u));
  height: calc(var(--status-height) * var(--u));
  display: flex;
  align-items: center;
}

.status:empty {
  display: none;
}

.status::before {
  content: "";
  position: absolute;
  left: calc((var(--mark-x) - var(--mark-radius) - var(--status-x)) * var(--u));
  top: calc((var(--mark-y) - var(--mark-radius) - var(--status-y)) * var(--u));
  width: calc(var(--mark-radius) * 2 * var(--u));
  height: calc(var(--mark-radius) * 2 * var(--u));
  border-radius: 50%;
  background: currentColor;
}

.status[data-world="up"] {
  color: var(--ok);
}

.status[data-world="down"] {
  color: var(--warn);
}

.links {
  position: absolute;
  left: calc(var(--strip-x) * var(--u));
  bottom: calc((var(--launcher-height) - var(--strip-y) - var(--strip-height)) * var(--u));
  height: calc(var(--strip-height) * var(--u));
  display: flex;
  align-items: center;
  font-size: calc(var(--small-size) * var(--u));
  white-space: nowrap;
}

.links:empty {
  display: none;
}

.links a {
  position: relative;
}

.links a + a {
  margin-left: calc(var(--link-gap) * var(--u));
}

.links a + a::before {
  content: "";
  position: absolute;
  left: calc((var(--link-gap) * -0.5 - var(--link-dot-radius)) * var(--u));
  top: calc(50% - var(--link-dot-radius) * var(--u));
  width: calc(var(--link-dot-radius) * 2 * var(--u));
  height: calc(var(--link-dot-radius) * 2 * var(--u));
  border-radius: 50%;
  background: var(--muted);
}

/* A phone, or any window narrower than the column's room or taller than it is wide: the same parts stacked at a unit of
   a pixel - the scene filling the screen above the column, scaled to its height and centred on the embers' middle so its
   bottom fade ends where the column begins, the logo centred over it below the selector, then the column and the strip,
   centred. */
@media (max-width: 719.98px), (orientation: portrait) {
  body {
    --u: 1px;
  }

  .stage {
    height: auto;
    min-height: 100dvh;
    display: flex;
    flex-direction: column;
    align-items: center;
    padding-bottom: 32px;
  }

  .scene {
    position: relative;
    left: auto;
    width: 100%;
    height: auto;
    flex: 1 0 calc(var(--launcher-height) * 0.5px);
    overflow: hidden;
  }

  .frame {
    inset: 0 auto auto 50%;
    height: calc(100% * var(--launcher-height) / var(--fade-bottom-to));
    aspect-ratio: var(--launcher-width) / var(--launcher-height);
    translate: calc((var(--ember-left) + var(--ember-width) * 0.5) / var(--launcher-width) * -100%) 0;
  }

  .logo {
    left: calc((100 - var(--phone-logo-share)) * 0.5%);
    top: calc((var(--caption-y) * 2 + var(--caption-height)) * 1px);
    width: calc(var(--phone-logo-share) * 1%);
    height: auto;
  }

  .logo img {
    height: auto;
  }

  .language {
    right: calc(var(--caption-y) * 1px);
  }

  .column, .strip, .plate {
    position: relative;
    left: auto;
    top: auto;
    bottom: auto;
    width: min(360px, 100% - 32px);
  }

  .column > *, .strip > * {
    position: relative;
    left: auto;
    right: auto;
    bottom: auto;
  }

  .line {
    justify-content: center;
    text-align: center;
    min-height: 0;
  }

  .strip {
    display: flex;
    flex-direction: column;
    align-items: center;
    margin-top: calc((var(--launcher-height) - var(--primary-y) - var(--primary-height)) * 1px);
  }

  .status {
    right: auto;
  }

  .links {
    left: auto;
  }
}