:root {
  color-scheme: light;
  --bg: #f4efe7;
  --body-glow: linear-gradient(
    180deg,
    rgba(255, 255, 255, 0.48),
    rgba(255, 255, 255, 0)
  );
  --ink: #202124;
  --tile: #fefefe;
  --tile-ink: #2f2b27;
  --tile-line: rgba(77, 61, 45, 0.13);
  --tile-shadow: 0 5px 0 #d7c9b7, 0 10px 18px rgba(43, 32, 23, 0.09);
}

* {
  box-sizing: border-box;
}

html,
body {
  margin: 0;
  min-height: 100%;
  width: 100%;
}

body {
  background: var(--body-glow), var(--bg);
  color: var(--ink);
  font-family: ui-rounded, "SF Pro Rounded", "Avenir Next", system-ui, sans-serif;
  letter-spacing: 0;
}

.landing {
  align-items: center;
  display: flex;
  min-height: 100svh;
  justify-content: center;
  padding: max(18px, env(safe-area-inset-top)) 24px max(18px, env(safe-area-inset-bottom));
}

.logo {
  margin: 0;
}

.logo-word {
  --logo-step: clamp(50px, 15vw, 66px);
  --logo-tile: clamp(44px, 13.2vw, 58px);
  display: grid;
  grid-template-columns: repeat(5, var(--logo-step));
  justify-content: center;
  min-height: var(--logo-tile);
  overflow: visible;
  padding: 10px 0;
  position: relative;
}

.tile {
  align-items: center;
  background: var(--tile);
  border: 1px solid var(--tile-line);
  border-radius: 8px;
  box-shadow: var(--tile-shadow);
  color: var(--tile-ink);
  display: flex;
  font-weight: 950;
  justify-content: center;
  line-height: 1;
  min-height: 0;
  min-width: 0;
  position: relative;
  user-select: none;
  -webkit-user-select: none;
}

.logo-tile {
  height: var(--logo-tile);
  justify-items: center;
  width: var(--logo-tile);
}

.logo-letter {
  align-items: center;
  display: flex;
  font-size: clamp(1.64rem, 7.4vw, 2.34rem);
  font-weight: 950;
  justify-content: center;
  line-height: 1;
}