@font-face {
  font-display: swap;
  font-family: "Atkinson Hyperlegible Next";
  font-style: normal;
  font-weight: 200 800;
  src: url(/by-digest/b3b26749af25c757133293e9771374936927a7bd0c26396e782b9a112bb3b9c1/AtkinsonHyperlegibleNextVF-Variable.woff2) format("woff2");
}

@font-face {
  font-family: "Atkinson Fallback Verdana";
  src: local("Verdana");
  size-adjust: 91.88%;
  ascent-override: 86.64%;
  descent-override: 27.32%;
  line-gap-override: 16.33%;
}

@font-face {
  font-family: "Atkinson Fallback Roboto";
  src: local("Roboto"), local("Roboto Regular"), local("Roboto-Regular");
  size-adjust: 93.96%;
  ascent-override: 84.72%;
  descent-override: 26.71%;
  line-gap-override: 15.96%;
}

@font-face {
  font-family: "Atkinson Fallback Ubuntu";
  src: local("Ubuntu"), local("Ubuntu Regular"), local("Ubuntu-Regular");
  size-adjust: 96.39%;
  ascent-override: 82.58%;
  descent-override: 26.04%;
  line-gap-override: 15.56%;
}

@font-face {
  font-family: "Atkinson Fallback MetricArial";
  src:
    local("Liberation Sans"), local("Liberation Sans Regular"), local("LiberationSans-Regular"),
    local("Arimo"), local("Arimo Regular"), local("Arimo-Regular"),
    local("Arial"), local("ArialMT");
  size-adjust: 93.26%;
  ascent-override: 85.36%;
  descent-override: 26.92%;
  line-gap-override: 16.08%;
}

:root {
  color-scheme: dark light;

  --bg: light-dark(#fff, #000);
  --fg: light-dark(#000, #fff);
  --muted: #757575;

  --line-width: 2px;
  --border: var(--line-width) solid var(--fg);

  --padding: 1rcap;
  --gap: 3rcap;
  --min-width: min(100vw - 4rcap, 32ch + var(--gap));
  --nav-clearance: calc(var(--gap) + 3 * var(--padding) + 1rcap);

  --label-scale: 0.75;

  font-family:
    "Atkinson Hyperlegible Next",
    "Atkinson Fallback Verdana",
    "Atkinson Fallback Roboto",
    "Atkinson Fallback Ubuntu",
    "Atkinson Fallback MetricArial",
    "DejaVu Sans",
    "Noto Sans",
    sans-serif;
  font-size: clamp(1.125rem, 1rem + 0.5vw, 1.5rem);
  font-size-adjust: cap-height 0.668;
  line-height: 2rcap;
}

html {
  height: 100%;
}

body {
  background: var(--bg);
  color: var(--fg);
  display: flex;
  flex-direction: column;
  height: 100%;
  margin: 0;
}

a {
  color: var(--fg);
  text-decoration-thickness: var(--line-width);
}

h1 {
  font-size: 2rem;
  line-height: 3rcap;
}

h1,
p,
header,
hgroup {
  margin-block: 2rcap;
}

hgroup > * {
  margin-block: 1rcap;
}

:is(article, header, hgroup) {
  & > :first-child {
    margin-block-start: 0;
  }

  & > :last-child {
    margin-block-end: 0;
  }
}

h1,
p,
figcaption,
label,
.button {
  text-box: trim-both cap alphabetic;
}

main {
  align-items: center;
  display: flex;
  flex-grow: 1;
  justify-content: center;
  overflow: auto;
}

main > :nth-last-child(1 of :not([hidden])) {
  padding-block-end: var(--nav-clearance);
}

article,
form {
  margin: auto;
  min-width: var(--min-width);
  padding: var(--padding);
  width: 50%;
}

article:focus {
  outline: none;
}

form {
  align-items: center;
  display: flex;
  flex-direction: column;
  gap: var(--gap);
}

.button {
  background-color: var(--fg);
  border: var(--border);
  color: var(--bg);
  cursor: pointer;
  font: inherit;
  font-weight: bold;
  padding: calc(var(--padding) - var(--line-width)) var(--padding);
  text-decoration-line: none;
  user-select: none;

  &:focus-visible {
    outline: 2px solid var(--fg);
    outline-offset: 2px;
  }

  &:disabled,
  &[aria-current="page"] {
    background-color: var(--bg);
    color: var(--muted);
    cursor: default;
    pointer-events: none;
  }
}

.target-gallery {
  display: grid;
  gap: var(--gap);
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 250px), 1fr));
}

.target {
  container-type: inline-size;
  display: flex;
  flex-direction: column;
  margin: 0;
  overflow: hidden;

  & > figcaption {
    margin-block: auto 1rcap;
  }

  & > iframe {
    border: 0;
    height: round(100cqi * 5 / 4, 1rcap);
    width: 100%;
  }
}

input,
textarea {
  appearance: none;
  background: transparent;
  border: 0;
  color: inherit;
  font: inherit;
  outline: none;
  padding: 0;
}

:is(input, textarea):read-only {
  pointer-events: none;
}

input {
  align-self: baseline;
  height: 2rcap;
  margin-block: -0.5rcap -1rcap;
  z-index: 1;
}

textarea {
  border-block-end: var(--border);
  border-inline-end: var(--border);
  height: 8rcap;
  margin-block: -0.5rcap calc(-1 * var(--line-width));
  overflow-wrap: break-word;
  padding-block-end: 0.5rcap;
  resize: none;

  &:read-only {
    color: transparent;
    overflow: hidden;
    overflow-wrap: unset;
  }
}

.input-container {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  width: 100%;

  &:has(input) {
    overflow-x: clip;
  }
}

.input-underline {
  align-self: baseline;
  color: var(--bg);
  height: 2rcap;
  margin-block: -0.5rcap -1rcap;
  pointer-events: none;
  text-decoration: underline var(--line-width) var(--fg);
  user-select: none;
  white-space: pre;
}

:where(.input-container > *) {
  grid-area: 1 / 1;
  width: 100%;
}

.horizontal-container {
  display: flex;
  flex-wrap: wrap;
  gap: var(--gap);
  justify-content: space-between;
  width: 100%;

  & .input-container {
    flex: 16ch;
  }
}

.input-container {
  & > label {
    --label-offset: 0.25rcap;
    color: var(--muted);
    pointer-events: none;
    transform-origin: bottom left;
    user-select: none;
  }

  & > input + label {
    --label-offset: 0.5rcap;
    align-self: baseline;
  }

  & > :is(input, textarea):is(:focus, :not(:placeholder-shown)) + label {
    color: var(--fg);
    transform:
      translateY(var(--label-offset))
      scale(var(--label-scale))
      translateY(calc(100% + var(--line-width)));
    width: calc(100% / var(--label-scale));
  }

  & > label:has(> .label-status:not(:empty)) {
    color: var(--muted);
    transform: none;
    width: 100%;

    & > .label-text {
      display: none;
    }
  }
}

@media (prefers-reduced-motion: no-preference) {
  .input-container > label {
    transition:
      color 0.25s,
      transform 0.25s;
  }
}

nav {
  background: var(--bg);
  box-shadow: 0 0 0.5rcap 1rcap var(--bg);
  display: flex;
  gap: var(--padding);
  inset-block-end: var(--padding);
  inset-inline: 0;
  justify-content: center;
  margin-inline: auto;
  position: fixed;
  user-select: none;
  width: fit-content;
}

.visually-hidden {
  clip-path: inset(50%);
  height: 1px;
  overflow: hidden;
  position: absolute;
  white-space: nowrap;
  width: 1px;
}

.debug-baseline {
  background-image: repeating-linear-gradient(
    transparent 0 calc(1rcap - 1px),
    color-mix(in srgb, var(--fg) 20%, transparent) calc(1rcap - 1px) 1rcap
  );
}

[hidden], div.input-container:has(#given-name) {
  display: none !important;
}