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

[hidden] {
  display: none !important;
}

html {
  color-scheme: dark;
  background: var(--color-launcher-background);
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
}

body {
  margin: 0;
  min-block-size: 100dvh;
  font-family: var(--font-system);
  font-size: var(--font-size-apple-body);
  line-height: var(--leading-apple-body);
  color: var(--color-label);
  background: var(--color-launcher-background);
  -webkit-font-smoothing: antialiased;
  -webkit-tap-highlight-color: var(--color-clear);
}

.home {
  position: relative;
  display: flex;
  flex-direction: column;
  min-block-size: 100dvh;
}

.icon {
  display: block;
  inline-size: var(--size-icon);
  block-size: var(--size-icon);
  fill: none;
  stroke: currentcolor;
  stroke-width: var(--size-stroke-icon);
  stroke-linecap: round;
  stroke-linejoin: round;
}

.icon--bold {
  stroke-width: var(--size-stroke-bold);
}

.icon--solid,
.icon__fill {
  fill: currentcolor;
  stroke: none;
}

html[data-appearance='light'] {
  color-scheme: light;
}

/* The switch cross-fades the whole page from one appearance to the other. */
::view-transition-old(root),
::view-transition-new(root) {
  animation-duration: var(--duration-crossfade);
  animation-timing-function: var(--easing-gentle);
}

/* Safari and every browser on iOS have SF Pro, Apple's own face, which Inter stands in for elsewhere;
   only WebKit knows the -apple-system-body font. */
@supports (font: -apple-system-body) {
  body {
    font-family: var(--font-system-apple);
  }
}

@media (prefers-reduced-motion: no-preference) {
  html {
    scroll-behavior: smooth;
  }
}