:root {
  color-scheme: only light;

  /* Lockup width: ~2/3 of a phone, ~45% of a laptop, capped so it never shouts on wide screens. */
  --lockup-width: clamp(16rem, 46vw, 42rem);

  /* Lift the mark above geometric centre: extra bottom padding of 2x moves the centre up by x. */
  --optical-lift: 4svh;
}

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

html,
body {
  height: 100%;
}

body {
  background: #fff;
  color: #000;
  -webkit-tap-highlight-color: transparent;
  touch-action: manipulation;
  user-select: none;
  -webkit-user-select: none;
}

main {
  display: grid;
  place-items: center;
  min-height: 100vh;
  min-height: 100svh;
  padding:
    max(1.5rem, env(safe-area-inset-top))
    max(1.5rem, env(safe-area-inset-right))
    calc(max(1.5rem, env(safe-area-inset-bottom)) + 2 * var(--optical-lift))
    max(1.5rem, env(safe-area-inset-left));
}

h1 {
  display: block;
  width: var(--lockup-width);
  max-width: 100%;
  line-height: 0;
}

.lockup {
  display: block;
  width: 100%;
  height: auto;
  overflow: visible;
}

/* Inactive styles stay rendered at opacity 0 so their files are fetched up front. During a swap
   both the leaving and the incoming style are visible, each clipped to its share of the dissolve
   cells (see script.js). */
.xi-layer {
  opacity: 0;
}

.xi-layer.is-active,
.xi-layer.is-leaving {
  opacity: 1;
}