:root {
  font-family: "IBM Plex Sans JP", sans-serif;
  font-size: 15px;
  --bd: #bbd3e6;
  --bg: #fcfaf2;
  --fg: #082752;
}
* {
  box-sizing: border-box;
  margin: 0;
  overscroll-behavior: none;
  padding: 0;
  user-select: none;
  -webkit-user-select: none;
}
a {
  color: var(--fg);
  text-decoration: none;
}
body {
  background: var(--bg);
  color: var(--fg);
  display: grid;
  font-size: 1rem;
  font-weight: 400;
  gap: 0 0;
  grid-auto-flow: row;
  grid-template-areas:
    "splash"
    "footer";
  grid-template-columns: 1fr;
  grid-template-rows: 1fr 6rem;
  height: 100dvh;
  overflow: hidden;
}
/* --- Grid elements -------------------------------------------------------- */

.footer {
  align-items: center;
  display: flex;
  grid-area: footer;
  justify-content: center;
  padding-block: 1rem 1.8rem;
}
.splash {
  align-items: center;
  display: flex;
  flex-direction: column;
  grid-area: splash;
  justify-content: center;
}

/* --- Element styling ------------------------------------------------------ */

img.logo {
  width: 3.2rem;
}
nav.tree {
  width: 18.8rem;
}
nav.tree li {
  position: relative;
}
nav.tree li::before {
  color: var(--bd);
  content: "├" / "";
  left: -1.4rem;
  position: absolute;
  top: 0.2rem;
}
nav.tree li:last-child::before {
  content: "└" / "";
}
nav.tree li > a,
nav.tree li > span,
span.root {
  display: inline-block;
  padding-block: 0.2rem;
}
nav.tree ul {
  list-style: none;
  padding-left: 1.4rem;
}