/* Light values are the previous literals, so light mode does not shift.
   color-scheme paints scrollbars, form controls, and text selection. */
:root {
  color-scheme: light dark;
  --bg: #eee;
  --fg: #000;
  --link: #14f;
  --link-underline: #777;
  --app-name: #333;
  --app-name-hover: #111;
  --focus: #14f;
  --rule: rgba(0, 0, 0, 0.14);
  --code-bg: rgba(0, 0, 0, 0.06);
  --icon-edge: rgba(0, 0, 0, 0.18);
  --icon-soft: rgba(0, 0, 0, 0.06);
  --icon-lift: rgba(0, 0, 0, 0.10);
  --icon-edge-hover: rgba(0, 0, 0, 0.2);
  --icon-lift-hover: rgba(0, 0, 0, 0.14);
  --icon-ring: rgba(0, 0, 0, 0.05);
  --icon-shadow: rgba(0, 0, 0, 0.10);
}

@media (prefers-color-scheme: dark) {
  :root {
    /* #5b8cff on #1a1a1a is 5.5:1, the same contrast as #14f on #eee. */
    --bg: #1a1a1a;
    --fg: #e6e4e1;
    --link: #5b8cff;
    --app-name: #d0cecb;
    --app-name-hover: #f3f1ee;
    --focus: #5b8cff;
    --rule: rgba(255, 255, 255, 0.16);
    --code-bg: rgba(255, 255, 255, 0.08);
    /* Paddle Battle's icon is black; a light rim keeps that squircle visible. */
    --icon-edge: rgba(255, 255, 255, 0.28);
    --icon-soft: rgba(0, 0, 0, 0.45);
    --icon-lift: rgba(0, 0, 0, 0.55);
    --icon-edge-hover: rgba(255, 255, 255, 0.38);
    --icon-lift-hover: rgba(0, 0, 0, 0.6);
    --icon-ring: rgba(255, 255, 255, 0.2);
    --icon-shadow: rgba(0, 0, 0, 0.5);
  }
}

html, body {
  margin: 0;
  padding: 0;
  height: 100%;
  /* Safari 26 samples this for the status bar and toolbar. Transparent falls back to white. */
  background-color: var(--bg);
  color: var(--fg);
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol";
}

a {
  color: var(--link);
  text-decoration: none;
  border-bottom: 1px solid var(--link-underline);
}

a:visited {
  color: var(--link);
}

a:hover {
  border-bottom: 1px solid var(--link);
}

hr {
  height: 0;
  margin: 1.75rem 0;
  border: 0;
  border-top: 1px solid var(--rule);
}

code,
kbd,
samp {
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  font-size: 0.92em;
  background-color: var(--code-bg);
  border-radius: 0.25em;
  padding: 0.08em 0.35em;
}

pre {
  margin: 1rem 0;
  overflow-x: auto;
  background-color: var(--code-bg);
  border-radius: 0.35rem;
  padding: 0.85rem 1rem;
}

pre code {
  background-color: transparent;
  padding: 0;
}

details {
  border-top: 1px solid var(--rule);
}

details:last-child {
  border-bottom: 1px solid var(--rule);
}

summary:focus {
  outline: none;
}

summary:focus-visible {
  outline: 2px solid var(--focus);
  outline-offset: 3px;
}

main.readable {
  margin: 0 auto;
  max-width: 625px;
  padding: 2em 3em;
  padding:
    calc(2em + env(safe-area-inset-top, 0px))
    calc(3em + env(safe-area-inset-right, 0px))
    calc(2em + env(safe-area-inset-bottom, 0px))
    calc(3em + env(safe-area-inset-left, 0px));
}

b.serious {
  color: var(--link);
}

.app-icon {
  width: 80px;
  height: auto;
  border-radius: 22.5%;
  box-shadow: 0 0 0 1px var(--icon-ring), 0 4px 12px var(--icon-shadow);
}

#content {
  display: flex;
  margin: 0 auto;
  text-align: center;
  align-items: center;
  flex-direction: column;
}

#logo {
  width: 225px;
  height: 100%;
  margin: 0 auto;
  fill: var(--fg);
}

#logo-container {
  height: 100%;
  box-sizing: border-box;
  display: flex;
  align-items: center;
  background: var(--bg);
  /* viewport-fit=cover draws under the status bar and home indicator */
  padding:
    env(safe-area-inset-top, 0px)
    env(safe-area-inset-right, 0px)
    env(safe-area-inset-bottom, 0px)
    env(safe-area-inset-left, 0px);
}

/* Collapsed to no height while the logo sits centered, then grows to slide it up */
#details {
  display: grid;
  grid-template-rows: 1fr;
  animation: details-expand 0.7s cubic-bezier(.3, .7, .2, 1) 0.6s backwards;
}

#details-inner {
  display: flex;
  min-height: 0;
  align-items: center;
  flex-direction: column;
  animation: details-rise 0.6s ease 0.75s backwards;
}

@keyframes details-expand {
  0% { grid-template-rows: 0fr; }
  100% { grid-template-rows: 1fr; }
}

@keyframes details-rise {
  0% {
    opacity: 0;
    transform: translateY(16px);
  }
  100% {
    opacity: 1;
    transform: translateY(0);
  }
}

#description {
  max-width: 300px;
  line-height: 1.4em;
  margin-top: 1.5rem;
  margin-bottom: 0.35rem;
}

.apps {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  align-items: flex-start;
  gap: 1.35rem 1.85rem;
  list-style: none;
  margin: 1.9rem 0 0.9rem;
  padding: 0;
  max-width: 100%;
}

a.app {
  display: block;
  position: relative;
  color: var(--app-name);
  text-decoration: none;
  border-bottom: none;
}

a.app:visited {
  color: var(--app-name);
}

a.app:hover,
a.app:focus {
  color: var(--app-name-hover);
  border-bottom: none;
}

:root {
  --squircle: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100'%3E%3Cpath d='M100 50L100 65.4L99.9 70.3L99.8 73.8L99.6 76.7L99.3 79.1L99 81.3L98.6 83.2L98.2 84.9L97.7 86.5L97.2 87.9L96.6 89.2L95.9 90.4L95.2 91.5L94.4 92.6L93.5 93.5L92.6 94.4L91.5 95.2L90.4 95.9L89.2 96.6L87.9 97.2L86.5 97.7L84.9 98.2L83.2 98.6L81.3 99L79.1 99.3L76.7 99.6L73.8 99.8L70.3 99.9L65.4 100L50 100L34.6 100L29.7 99.9L26.2 99.8L23.3 99.6L20.9 99.3L18.7 99L16.8 98.6L15.1 98.2L13.5 97.7L12.1 97.2L10.8 96.6L9.6 95.9L8.5 95.2L7.4 94.4L6.5 93.5L5.6 92.6L4.8 91.5L4.1 90.4L3.4 89.2L2.8 87.9L2.3 86.5L1.8 84.9L1.4 83.2L1 81.3L0.7 79.1L0.4 76.7L0.2 73.8L0.1 70.3L0 65.4L0 50L0 34.6L0.1 29.7L0.2 26.2L0.4 23.3L0.7 20.9L1 18.7L1.4 16.8L1.8 15.1L2.3 13.5L2.8 12.1L3.4 10.8L4.1 9.6L4.8 8.5L5.6 7.4L6.5 6.5L7.4 5.6L8.5 4.8L9.6 4.1L10.8 3.4L12.1 2.8L13.5 2.3L15.1 1.8L16.8 1.4L18.7 1L20.9 0.7L23.3 0.4L26.2 0.2L29.7 0.1L34.6 0L50 0L65.4 0L70.3 0.1L73.8 0.2L76.7 0.4L79.1 0.7L81.3 1L83.2 1.4L84.9 1.8L86.5 2.3L87.9 2.8L89.2 3.4L90.4 4.1L91.5 4.8L92.6 5.6L93.5 6.5L94.4 7.4L95.2 8.5L95.9 9.6L96.6 10.8L97.2 12.1L97.7 13.5L98.2 15.1L98.6 16.8L99 18.7L99.3 20.9L99.6 23.3L99.8 26.2L99.9 29.7L100 34.6Z'/%3E%3C/svg%3E");
}

/* The mask clips a box-shadow, so the shadow is a filter on the wrapper */
a.app picture {
  display: block;
  line-height: 0;
  border-radius: 22.5%;
  filter: drop-shadow(0 0 1px var(--icon-edge)) drop-shadow(0 1px 1px var(--icon-soft)) drop-shadow(0 6px 8px var(--icon-lift));
  transition: transform 0.18s ease, filter 0.18s ease;
}

/* iOS icon squircle (a superellipse); the radius is the fallback without mask support */
a.app img {
  display: block;
  width: 80px;
  height: 80px;
  border-radius: 22.5%;
  -webkit-mask: var(--squircle) center / 100% 100% no-repeat;
  mask: var(--squircle) center / 100% 100% no-repeat;
}

.app-name {
  position: absolute;
  top: calc(100% - 4px);
  left: 50%;
  font-size: 13px;
  line-height: 1.2;
  text-align: center;
  white-space: nowrap;
  opacity: 0;
  pointer-events: none;
  transform: translate(-50%, 4px);
  transition: opacity 0.18s ease, transform 0.18s ease;
}

a.app:focus-visible picture {
  transform: translateY(-12px);
}

a.app:focus-visible .app-name {
  opacity: 1;
  transform: translate(-50%, 0);
}

#contact-line {
  margin-top: 1.15rem;
}

@media (hover: hover) {
  a.app:hover picture {
    transform: translateY(-12px);
    filter: drop-shadow(0 0 1px var(--icon-edge-hover)) drop-shadow(0 8px 9px var(--icon-lift-hover));
  }

  a.app:hover .app-name {
    opacity: 1;
    transform: translate(-50%, 0);
  }
}

a.app:focus {
  outline: none;
}

a.app:focus-visible picture {
  outline: 2px solid var(--focus);
  outline-offset: 3px;
}

.animate {
  animation-duration: 0.75s;
  animation-delay: 0.5s;
  animation-name: animate-fade;
  animation-timing-function: cubic-bezier(.26, .53, .74, 1.48);
  animation-fill-mode: backwards;
}

/* Fade In */
.animate.fade {
  animation-name: animate-fade;
  animation-timing-function: ease;
}

@keyframes animate-fade {
  0% { opacity: 0; }
  100% { opacity: 1; }
}

/* Blur In */
.animate.blur {
  animation-name: animate-blur;
  animation-timing-function: ease;
}

@keyframes animate-blur {
  0% {
    opacity: 0;
    filter: blur(15px);
  }
  100% {
    opacity: 1;
    filter: blur(0px);
  }
}

/* Animation Delays */
.animate.delay {
  animation-delay: 1.2s;
}

@media screen and (prefers-reduced-motion: reduce) {
  .animate,
  #details,
  #details-inner {
    animation: none !important;
  }

  a.app picture,
  .app-name {
    transition: none;
  }
}

/* Phone Screen */
@media screen and (max-width: 600px) {
  #logo {
    width: 150px;
  }

  .apps {
    gap: 1rem 1.6rem;
  }

  a.app img {
    width: 64px;
    height: 64px;
  }

  .app-name {
    font-size: 12px;
  }
}

/* No hover to reveal the app names, so always show them */
@media screen and (max-width: 600px), (hover: none) {
  a.app {
    padding-bottom: 1.35rem;
  }

  a.app:hover,
  a.app:focus {
    color: var(--app-name);
  }

  a.app:hover picture,
  a.app:focus-visible picture {
    transform: none;
    filter: drop-shadow(0 0 1px var(--icon-edge)) drop-shadow(0 1px 1px var(--icon-soft)) drop-shadow(0 6px 8px var(--icon-lift));
  }

  .app-name {
    top: auto;
    bottom: 0;
    opacity: 1;
    transform: translateX(-50%);
    transition: none;
  }

  a.app:hover .app-name,
  a.app:focus-visible .app-name {
    transform: translateX(-50%);
  }
}

/* In-flow footer (not fixed or sticky). Short pages pin it to the viewport
   bottom; long pages keep it after the content. */
body:has(> .site-footer) {
  height: auto;
  min-height: 100vh;
  min-height: 100dvh;
  display: flex;
  flex-direction: column;
}

body:has(> .site-footer):has(> #logo-container) {
  background: var(--bg);
}

body:has(> .site-footer) > #logo-container {
  flex: 1 0 auto;
  height: auto;
}

.site-footer {
  margin-top: auto;
  flex-shrink: 0;
  padding: 0.85rem 1rem 1.15rem;
  text-align: center;
}

.site-footer-link {
  display: inline-block;
  line-height: 0;
  border-bottom: none;
  opacity: 0.6;
}

.site-footer-link:visited {
  border-bottom: none;
}

.site-footer-link:hover,
.site-footer-link:focus-visible {
  border-bottom: none;
  opacity: 1;
}

.site-footer-link:focus {
  outline: none;
}

.site-footer-link:focus-visible {
  outline: 2px solid var(--focus);
  outline-offset: 4px;
}

.site-footer-logo {
  display: block;
  width: 32px;
  height: 32px;
}

/* favradlad.svg paints itself #fff under prefers-color-scheme: dark.
   The page background follows that same query, so leave the mark uninverted. */

.help {
  line-height: 1.45;
}

.help h1 {
  font-size: 1.75rem;
  font-weight: 600;
  margin: 0 0 0.55rem;
}

.help .lede {
  margin: 0;
}

.help-back {
  margin: 0 0 1rem;
}

.toc {
  display: flex;
  flex-wrap: wrap;
  gap: 0.4rem 1.05rem;
  list-style: none;
  margin: 1.15rem 0 0;
  padding: 0;
}

.help section {
  margin-top: 2rem;
  scroll-margin-top: 1rem;
}

.help h2 {
  font-size: 1.15rem;
  font-weight: 600;
  margin: 0 0 0.55rem;
}

.help section ul {
  margin: 0.4rem 0 0;
  padding-left: 1.15rem;
}

.faq {
  margin-top: 0.85rem;
}

.help .lede + .faq {
  margin-top: 1.75rem;
}

.faq summary {
  cursor: pointer;
  font-weight: 600;
  padding: 0.7rem 0.1rem;
}

.faq summary:focus {
  outline: none;
}

.faq summary:focus-visible {
  outline: 2px solid var(--focus);
  outline-offset: 3px;
}

.faq details p {
  margin: 0 0 0.75rem;
}

.faq details p:last-child {
  margin-bottom: 0.85rem;
}

.help-note {
  margin: 2rem 0 0;
}

@media screen and (max-width: 600px) {
  main.help {
    padding-right: calc(1.25rem + env(safe-area-inset-right, 0px));
    padding-left: calc(1.25rem + env(safe-area-inset-left, 0px));
  }

  .help h1 {
    font-size: 1.55rem;
  }
}