@font-face {
  font-family: "Hanken Grotesk";
  src: url("/fonts/hanken-grotesk-latin-var.woff2") format("woff2");
  font-weight: 100 900;
  font-style: normal;
  font-display: swap;
}
:root {
  color-scheme: light;
  --ground: #FFFFFF;
  --ground-2: #F5F5F4;
  --ink: #111214;
  --ink-2: #55585E;
  --rule: #E2E2E0;
  --accent: #0A56D0;
  --family: "Hanken Grotesk", system-ui, sans-serif;
  --h1: clamp(2.5rem, 1.97183rem + 2.2535vw, 4rem);
  --h2: clamp(1.75rem, 1.48592rem + 1.1268vw, 2.5rem);
  --h3: clamp(1.375rem, 1.24296rem + 0.5634vw, 1.75rem);
  --body: clamp(1.0625rem, 1.01849rem + 0.1878vw, 1.1875rem);
  --small: clamp(0.875rem, 0.85299rem + 0.0939vw, 0.9375rem);
  --action: 1rem;
  --gutter: 16px;
  --col-gap: 32px;
  --stage-pad: 64px;
  --head-gap: clamp(32px, 26.366px + 1.5023vw, 48px);
  --pair-gap: 16px;
}
@media (min-width: 768px) { :root { --gutter: 32px; } }
@media (min-width: 1024px) { :root { --stage-pad: 96px; --pair-gap: 32px; } }
@media (min-width: 1440px) { :root { --gutter: 64px; } }
*, *::before, *::after { box-sizing: border-box; }
html {
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
}
body {
  margin: 0;
  background: var(--ground);
  color: var(--ink);
  font-family: var(--family);
  font-size: var(--body);
  line-height: 1.5;
  font-weight: 400;
  -webkit-font-smoothing: antialiased;
}
h1, h2, h3, p, ul, ol, figure, table, fieldset { margin: 0; }
ul, ol { padding: 0; list-style: none; }
img { display: block; max-width: 100%; }
picture { display: block; }
a { color: var(--ink); }
:focus-visible {
  outline: 2px solid var(--ink);
  outline-offset: 2px;
}
main:focus { outline: none; }
.defs { position: absolute; }
.vh {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: 0;
  clip-path: inset(50%);
  white-space: nowrap;
}
.wrap {
  width: min(100% - 2 * var(--gutter), 1320px);
  margin-inline: auto;
}
h1 {
  font-size: var(--h1);
  line-height: 1.05;
  font-weight: 500;
  letter-spacing: -0.02em;
  text-wrap: balance;
}
h2 {
  font-size: var(--h2);
  line-height: 1.15;
  font-weight: 500;
  letter-spacing: -0.01em;
  max-width: 22em;
  text-wrap: balance;
}
h3 {
  font-size: var(--h3);
  line-height: 1.2;
  font-weight: 500;
}
.body { max-width: 34em; text-wrap: pretty; }
.small {
  font-size: var(--small);
  line-height: 1.4;
  font-weight: 500;
}
.label {
  font-size: var(--body);
  line-height: 1.5;
  font-weight: 500;
}
.quiet { color: var(--ink-2); }
.skip {
  position: absolute;
  left: var(--gutter);
  top: 8px;
  z-index: 2;
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  padding-inline: 16px;
  background: var(--ground);
  color: var(--ink);
  font-size: var(--action);
  font-weight: 500;
  transform: translateY(-96px);
}
.skip:focus { transform: none; }
.top { border-bottom: 1px solid var(--rule); }
.top-in {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  column-gap: 32px;
  padding-block: 8px;
}
.brand {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  min-height: 44px;
  font-size: var(--body);
  font-weight: 500;
  line-height: 1;
  text-decoration: none;
}
.brand svg { width: 32px; height: 32px; }
.top nav { order: 3; width: 100%; }
.top nav ul {
  display: flex;
  justify-content: space-between;
}
.top nav a,
.foot a {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 44px;
  min-width: 44px;
  font-size: var(--small);
  line-height: 1.4;
  font-weight: 500;
  text-decoration: none;
}
@media (hover: hover) { .top nav a:hover, .foot a:hover { text-decoration: underline; } }
@media (min-width: 768px) {
  .top nav { order: 0; width: auto; margin-inline-start: auto; }
  .top nav a { padding-inline: 16px; }
  .top-in { column-gap: 16px; }
}
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  height: 44px;
  padding-inline: 24px;
  border: 1px solid var(--ink);
  border-radius: 4px;
  background: var(--ground);
  color: var(--ink);
  font-size: var(--action);
  line-height: 1;
  font-weight: 500;
  text-decoration: none;
  white-space: nowrap;
  transition: background-color 150ms, color 150ms, border-color 150ms;
}
@media (hover: hover) { .btn:hover { background: var(--ink); color: var(--ground); } }
.btn--primary {
  border-color: var(--accent);
  background: var(--accent);
  color: #FFFFFF;
}
@media (hover: hover) { .btn--primary:hover { border-color: var(--ink); } }
.acts {
  display: flex;
  flex-wrap: wrap;
  gap: 16px;
}
.block { padding-block: var(--stage-pad); }
.ruled { margin-top: -1px; border-top: 1px solid var(--rule); }
h2 + p { margin-top: 16px; }
.head { margin-bottom: var(--head-gap); }
@media (min-width: 1024px) {
  .g {
    display: grid;
    grid-template-columns: repeat(12, minmax(0, 1fr));
    column-gap: var(--col-gap);
  }
}
.hero { padding-top: 32px; }
.hero-copy > * + * { margin-top: 24px; }
.assur {
  display: flex;
  flex-wrap: wrap;
  gap: 4px 24px;
}
@media (min-width: 1024px) {
  .hero { padding-top: 64px; }
  .hero-top { align-items: start; }
  .hero-top h1 { grid-column: 1 / span 8; }
  .hero-copy { grid-column: 9 / span 4; }
}
@media (max-width: 1023.98px) { .hero-copy { margin-top: 24px; } }
@media (max-width: 767.98px) { .hero { padding-bottom: 48px; } }
.strip {
  margin-top: var(--head-gap);
  overflow-x: auto;
  scroll-snap-type: x proximity;
  padding-bottom: 16px;
}
.row {
  display: flex;
  gap: 12px;
  width: max-content;
}
.row li {
  width: min-content;
  scroll-snap-align: start;
}
.row img {
  height: min(432px, calc((100vw - 84px) * 0.724));
  width: auto;
  max-width: none;
}
.row figcaption { margin-top: 12px; }
@media (min-width: 768px) {
  .strip { overflow-x: visible; padding-bottom: 0; }
  .row {
    width: auto;
    gap: 16px;
    justify-content: space-between;
  }
  .row img { height: min(432px, calc((100vw - 2 * var(--gutter) - 96px) * 0.4336)); }
  .row figcaption { margin-top: 16px; }
}
[data-t="screen"] {
  outline: 1px solid var(--rule);
  outline-offset: -1px;
}
.scr-p { border-radius: 6.5% / 2.99%; }
.scr-pt { border-radius: 6.5% / 2.73%; }
.scr-w { border-radius: 8px; }
.work { padding-block: var(--stage-pad); }
.stage-words > * + * { margin-top: 4px; }
.stage-words > .body { margin-top: 24px; }
.stage-words > .status { margin-top: 24px; }
.stage-words > .caveat { margin-top: 16px; max-width: 34em; }
.facts {
  display: flex;
  flex-wrap: wrap;
  gap: 4px 16px;
}
.pair {
  display: flex;
  gap: var(--pair-gap);
}
.pair img {
  width: auto;
  max-width: none;
}
.solo img { width: 100%; height: auto; }
.tabs {
  display: none;
  min-width: 0;
  padding: 0;
  border: 0;
}
@media (max-width: 1023.98px) {
  .picker {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    row-gap: 64px;
  }
  .stage {
    container-type: inline-size;
    --slot: min(88svh, calc(min((100cqw - 16px) / 2, 296px) * 1301 / 600));
  }
  .pair { align-items: flex-end; }
  .pair img { height: var(--slot); }
  .stage-words { margin-top: 24px; }
}
@media (min-width: 768px) and (max-width: 1023.98px) {
  .picker {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    column-gap: var(--col-gap);
  }
}
@media (min-width: 1024px) {
  .pair {
    container-type: inline-size;
    align-items: flex-start;
    --w: 440px;
    --r: calc(2607 / 1200);
  }
  .pair--kidos { --r: calc(2862 / 1200); }
  .pair--dear { --w: 300px; --r: calc(1301 / 600); }
  .pair--limkor { --w: 300px; --r: calc(1304 / 600); }
  .pair img { height: min(88svh, 650px, calc(min(var(--w), (100cqw - var(--pair-gap)) / 2) * var(--r))); }
  .solo img { max-width: 864px; }
  .stage-words { grid-column: 1 / span 4; grid-row: 1; }
  .stage-shots { grid-column: 5 / span 8; grid-row: 1; }
  .picker .stage { padding-top: var(--stage-pad); }
  .picker .stage + .stage {
    margin-top: var(--stage-pad);
    border-top: 1px solid var(--rule);
  }
}
@supports selector(:has(*)) {
  @media (min-width: 1024px) {
    .tabs {
      display: block;
      border-bottom: 1px solid var(--rule);
    }
    .tabs-in {
      display: flex;
      flex-wrap: wrap;
      margin-inline: -16px;
    }
    .tabs label {
      display: inline-flex;
      margin-bottom: -1px;
      padding-inline: 16px;
      color: var(--ink-2);
      cursor: pointer;
    }
    .tabs label span {
      display: inline-flex;
      align-items: center;
      min-height: 44px;
      border-bottom: 2px solid transparent;
      transition: color 150ms, border-color 150ms;
    }
    @media (hover: hover) { .tabs label:hover { color: var(--ink); } }
    @media (hover: hover) { .tabs label:hover span { border-bottom-color: var(--rule); } }
    .tabs label:has(:checked) { color: var(--ink); }
    .tabs label:has(:checked) span { border-bottom-color: var(--ink); }
    .tabs label:has(:focus-visible) {
      outline: 2px solid var(--ink);
      outline-offset: 2px;
    }
    .picker .stage { padding-top: var(--head-gap); }
    .picker .stage + .stage { margin-top: 0; border-top: 0; }
    .picker:not(:has(#p-blayer:checked)) #s-blayer,
  .picker:not(:has(#p-kidos:checked)) #s-kidos,
  .picker:not(:has(#p-dear:checked)) #s-dear,
  .picker:not(:has(#p-limkor:checked)) #s-limkor,
  .picker:not(:has(#p-adam:checked)) #s-adam,
  .picker:not(:has(#p-bot:checked)) #s-bot { display: none; }
    .picker .stage-shots {
      display: flex;
      align-items: flex-start;
      min-height: min(88svh, 650px);
    }
    .picker .solo picture { flex: 1 1 auto; max-width: 864px; }
  }
}
.footnote { margin-top: 32px; }
.frame {
  display: block;
  width: 96px;
  height: auto;
  aspect-ratio: 600 / 1304;
  border-radius: 6.5% / 2.99%;
  outline: 1px solid var(--rule);
  outline-offset: -1px;
  background: var(--ground);
}
svg.frame {
  border: 1.5px solid var(--ink-2);
  outline: 0;
}
svg.frame--guarded {
  outline: 1.5px solid var(--ink-2);
  outline-offset: -7px;
}
.moves h3 {
  font-size: var(--body);
  line-height: 1.5;
}
.moves h3 + p { margin-top: 8px; text-wrap: pretty; }
.moves .who { display: block; margin-top: 16px; }
.moves .cap { margin-top: 16px; }
@media (max-width: 1023.98px) {
  .moves li {
    display: grid;
    grid-template-columns: 96px minmax(0, 1fr);
    column-gap: 24px;
    align-content: start;
  }
  .moves li + li { margin-top: 32px; }
  .moves li > .frame,
  .moves li > picture { grid-column: 1; grid-row: 1 / span 5; }
  .moves li > h3,
  .moves li > p,
  .moves li > .who { grid-column: 2; }
}
@media (min-width: 1024px) {
  .frame { width: min(200px, 100%); }
  .moves {
    display: grid;
    grid-template-columns: repeat(5, minmax(0, 1fr));
    column-gap: var(--col-gap);
  }
  .moves li > h3 { margin-top: 24px; }
  @supports (grid-template-rows: subgrid) {
    .moves li {
      display: grid;
      grid-row: span 5;
      grid-template-rows: subgrid;
      align-content: start;
    }
  }
}
.addr {
  display: block;
  width: 100%;
  min-height: 44px;
  margin-top: 8px;
  padding: 8px 12px;
  border: 1px solid var(--ink-2);
  border-radius: 4px;
  background: var(--ground);
  color: var(--ink);
  font: inherit;
  font-size: var(--body);
  line-height: 1.5;
  resize: none;
}
.fine { max-width: 34em; }
.fine strong { font-weight: 500; color: var(--ink); }
.foot-in {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 8px 32px;
  padding-block: 24px;
}
.foot nav {
  display: flex;
  flex-wrap: wrap;
  margin-inline: -12px;
}
.foot nav a { padding-inline: 12px; }
.foot .sections { display: contents; }
@supports (animation-timeline: scroll()) and (animation-range: entry 0% cover 50%) {
  @media screen and (prefers-reduced-motion: no-preference) and (min-width: 768px) {
    @keyframes lag { to { transform: translateY(var(--lag)); } }
    .row li {
      animation: lag linear both;
      animation-timeline: scroll(root block);
      animation-range: 0 60vh;
    }
    .row li { --lag: 0px; }
    .row li:nth-child(1),
    .row li:nth-child(5) { --lag: 64px; }
    .row li:nth-child(2),
    .row li:nth-child(4) { --lag: 32px; }
  }
  @media screen and (prefers-reduced-motion: no-preference) and (min-width: 1024px) {
    .row li:nth-child(1),
    .row li:nth-child(5) { --lag: 96px; }
    .row li:nth-child(2),
    .row li:nth-child(4) { --lag: 48px; }
  }
}
#team .vh { overflow: hidden; }
#team .sq {
  display: block;
  width: 12px;
  height: 12px;
  border: 1.5px solid var(--ink-2);
}
#team h3 {
  font-size: var(--body);
  line-height: 1.5;
}
#team .roster {
  --line: 1.5px solid var(--ink-2);
  --call: 1.5px solid var(--accent);
  --x: 22.25px;
}
#team .roster h3 { font-size: var(--body); line-height: 1.5; }
#team .roster .ic {
  display: block;
  width: 24px;
  height: 24px;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.5;
  stroke-linecap: round;
  stroke-linejoin: round;
}
#team .roster .tile {
  display: grid;
  place-items: center;
  flex: none;
  width: 40px;
  height: 40px;
  border-radius: 8px;
  background-color: var(--ground-2);
  color: var(--ink-2);
}
#team .roster .tile--s { width: 32px; height: 32px; }
#team .roster .tile--s .ic { width: 24px; height: 24px; }
#team .roster .sq--you {
  display: block;
  flex: none;
  width: 12px;
  height: 12px;
  border: 6px solid var(--ink);
}
#team .roster .small { text-wrap: pretty; }
#team .roster .r-you {
  position: relative;
  display: flex;
  align-items: center;
  gap: 16px;
  padding: 16px;
  border: 1px solid var(--rule);
  border-radius: 8px;
}
#team .roster .r-you::after {
  content: "";
  position: absolute;
  left: calc(var(--x) - 1px);
  top: calc(50% + 6px);
  bottom: -25px;
  border-left: var(--call);
}
#team .roster .r-you .label + .small { margin-top: 4px; }
#team .roster .r-groups { margin-top: 24px; }
#team .roster .r-g {
  position: relative;
  display: flex;
  flex-direction: column;
}
#team .roster .r-line {
  order: -1;
  position: relative;
  padding: 8px 0 16px calc(var(--x) + 12.75px);
}
#team .roster .r-line::before {
  content: "";
  position: absolute;
  left: var(--x);
  top: 0;
  bottom: 0;
  border-left: var(--line);
}
#team .roster .r-line--call::before { border-left: var(--call); z-index: 1; }
#team .roster .r-line::after,
#team .roster .r-pass::after {
  content: "";
  position: absolute;
  left: var(--x);
  width: 8.75px;
  top: calc(8px + var(--small) * 0.7 - 0.75px);
  border-top: var(--line);
}
#team .roster .r-line--call::after { border-top: var(--call); }
#team .roster .r-pass::after { top: calc(var(--small) * 0.7 - 0.75px); }
#team .roster .r-head {
  position: relative;
  display: flex;
  align-items: flex-start;
  gap: 12px;
  padding-left: 3px;
}
#team .roster .r-head .small { margin-top: 4px; }
#team .roster h3,
#team .roster .label,
#team .roster .roles > li { text-wrap: balance; }
#team .roster .roles {
  font-size: var(--small);
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(min(100%, 8.5em), 1fr));
  gap: 8px;
  margin-top: 16px;
}
#team .roster .roles:has(details[open]) > li { align-self: start; }
#team .roster .roles > li {
  padding: 12px;
  border-radius: 8px;
  background-color: var(--ground-2);
  overflow-wrap: anywhere;
}
#team .roster .nb { white-space: nowrap; }
#team .roster .r-card {
  margin-top: 16px;
  padding: 16px;
  border: 1px solid var(--rule);
  border-radius: 8px;
}
#team .roster .r-k ~ .r-k { margin-top: 16px; }
#team .roster .r-k + .small { margin-top: 4px; }
#team .roster .kit {
  display: flex;
  flex-wrap: wrap;
  gap: 8px 16px;
  margin-top: 8px;
}
#team .roster .kit > li { display: flex; align-items: center; gap: 8px; }
#team .roster .r-pair { margin-top: 16px; }
#team .roster .r-pass {
  position: relative;
  padding-left: calc(var(--x) + 12.75px);
}
#team .roster .r-pass::before {
  content: "";
  position: absolute;
  left: var(--x);
  top: 0;
  bottom: -16px;
  border-left: var(--line);
}
#team .roster .r-pass + .r-pass { margin-top: 16px; }
#team .roster .r-pass:last-child::before { bottom: 0; }
@media (max-width: 63.999em) {
  #team .roster .r-g + .r-g { margin-top: 0; }
  #team .roster .r-g:not(:last-child)::after {
    content: "";
    position: absolute;
    left: var(--x);
    top: 0;
    bottom: 0;
    border-left: var(--line);
  }
  #team .roster .r-g:not(:last-child) { padding-bottom: 32px; }
  #team .roster .r-pass { margin-left: 0; }
  #team .roster .r-head,
  #team .roster .roles,
  #team .roster .r-card { margin-left: calc(var(--x) + 12.75px); }
  #team .roster .r-head { padding-left: 0; }
  #team .roster .r-head::before {
    content: "";
    position: absolute;
    left: -12.75px;
    top: 0;
    width: 12.75px;
    height: 20.75px;
    border-left: var(--line);
    border-bottom: var(--line);
  }
}
@media (min-width: 64em) {
  #team .roster .r-groups {
    display: grid;
    grid-template-columns: minmax(0, 2fr) minmax(0, 2fr) minmax(0, 3fr);
    column-gap: 24px;
  }
  #team .roster .r-build { margin-right: 96px; }
  #team .roster .r-g:not(:last-child)::after {
    content: "";
    position: absolute;
    top: 0;
    left: var(--x);
    width: calc(100% + 24px + 1.5px);
    border-top: var(--call);
  }
  #team .roster .r-g.r-build::after { width: calc(100% + 96px + 24px + 1.5px); }
  #team .roster .r-line { min-height: calc(var(--small) * 2.8 + 24px); }
  #team .roster .r-pair {
    --card-top: calc(var(--small) * 2.8 + 24px + max(40px, var(--body) * 1.5 + 4px + var(--small) * 1.4) + 16px);
    --row-mid: calc(var(--card-top) + (var(--small) * 1.4 + 24px) / 2);
    position: absolute;
    left: 100%;
    width: calc(96px + 24px);
    top: calc(var(--row-mid) - 6.75px);
    height: 13.5px;
    margin: 0;
    border-top: var(--line);
    border-bottom: var(--line);
  }
  #team .roster .r-pass {
    position: absolute;
    left: 0;
    right: 0;
    padding: 0 8px;
    text-align: center;
  }
  #team .roster .r-pass::before,
  #team .roster .r-pass::after { content: none; }
  #team .roster .r-out { bottom: calc(100% + 8px); }
  #team .roster .r-back { top: calc(100% + 4px); margin: 0; }
}
@media (min-width: 80em) {
  #team .roster .r-groups { column-gap: 32px; }
  #team .roster .r-g:not(:last-child)::after { width: calc(100% + 32px + 1.5px); }
  #team .roster .r-g.r-build::after { width: calc(100% + 96px + 32px + 1.5px); }
  #team .roster .r-pair { width: calc(96px + 32px); }
}
#team .roster .roles > li:has(> details) { padding: 0; }
#team .roster .roles details > summary {
  position: relative;
  display: block;
  min-height: 44px;
  padding: 12px 28px 12px 12px;
  overflow-wrap: normal;
  border-radius: 8px;
  cursor: pointer;
  list-style: none;
}
#team .roster .roles details > summary::-webkit-details-marker { display: none; }
#team .roster .roles details > summary::after {
  content: "";
  position: absolute;
  right: 12px;
  top: calc(12px + var(--small) * 0.7 - 0.43em);
  width: 0.5em;
  height: 0.5em;
  border-right: 1.5px solid var(--ink-2);
  border-bottom: 1.5px solid var(--ink-2);
  transform: rotate(45deg);
}
#team .roster .roles details[open] > summary::after {
  top: calc(12px + var(--small) * 0.7 - 0.14em);
  transform: rotate(225deg);
}
#team .roster .roles details > p { padding: 0 12px 12px; text-wrap: balance; }
#team .roster .r-rules {
  margin-top: 32px;
  padding-top: 24px;
  border-top: 1px solid var(--rule);
}
#team .roster .r-rules ul {
  display: grid;
  gap: 16px;
  margin-top: 16px;
}
#team .roster .r-rules li {
  padding-left: 16px;
  border-left: 1.5px solid var(--ink-2);
}
#team .roster .r-rules li .small { text-wrap: balance; }
#team .roster .r-rules li .small + .small { margin-top: 4px; }
#team .roster .r-rules .r-yours { border-left-color: var(--accent); }
@media (min-width: 64em) {
  #team .roster .r-rules ul {
    grid-template-columns: repeat(3, minmax(0, 1fr));
    column-gap: 32px;
  }
}
#people .pair-people {
  display: grid;
  gap: 24px;
}
#people .pair-people article {
  display: flex;
  align-items: center;
  gap: 16px;
}
#people .pair-people picture { flex: none; }
#people .pair-people img {
  width: 96px;
  height: 96px;
  max-width: none;
  border-radius: 4px;
}
#people .pair-people h3,
#people .pair-people p { overflow-wrap: break-word; }
@media (max-width: 19.99em) { #people .pair-people article { align-items: start; } }
#start .nb2,
#people .nb2 { display: inline-block; }
@media (forced-colors: active) {
  #start .nb2,
  #people .nb2 { display: inline; }
}
#people .pair-people p { margin-top: 4px; }
@media (min-width: 48em) {
  #people .pair-people {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    column-gap: var(--col-gap);
  }
}
@media (min-width: 1024px) and (min-width: 48em) {
  #people .pair-people { grid-template-columns: repeat(12, minmax(0, 1fr)); }
  #people .pair-people article { grid-column: span 6; }
}
#start .end-call > * + * { margin-top: 24px; }
#start .end-call > .acts { margin-top: 32px; }
#start .end-call h2 {
  line-height: 1.05;
  letter-spacing: -0.02em;
  max-width: 14em;
  overflow-wrap: break-word;
}
@media (min-width: 20em) { #start .end-call h2 { font-size: var(--h1); } }
#start .btn {
  height: auto;
  min-height: 44px;
  padding-block: 8px;
  line-height: 1.25;
  white-space: normal;
  text-align: center;
}
#start .end-band {
  padding-block: var(--stage-pad);
  background: var(--ground-2);
}
#start .end-facts {
  display: grid;
  gap: 24px;
}
#start .end-facts label { display: block; }
#start .end-facts .fine { text-wrap: pretty; }
@media (min-width: 1024px) and (min-width: 64em) {
  #start .end-facts {
    grid-template-columns: repeat(3, minmax(0, 1fr));
    column-gap: var(--col-gap);
  }
}
#start .addr {
  field-sizing: content;
  min-height: 44px;
  overflow-wrap: anywhere;
}
@supports not (field-sizing: content) { #start .addr { min-height: calc(3em + 18px); } }
@media (forced-colors: active) { #start .end-band { border-top: 1px solid CanvasText; border-bottom: 1px solid CanvasText; } }
#why .why-text { margin-top: var(--head-gap); }
#why .why-text .body + .body { margin-top: 16px; }
@media (min-width: 1024px) and (min-width: 64em) {
  #why .why-split {
    display: grid;
    grid-template-columns: repeat(12, minmax(0, 1fr));
    column-gap: var(--col-gap);
    align-items: baseline;
  }
  #why .why-split h2 { grid-column: 1 / span 6; }
  #why .why-text { grid-column: 7 / span 6; margin-top: 0; }
}
#why h2 { overflow-wrap: break-word; }
.btn {
  height: auto;
  min-height: 44px;
  padding-block: 8px;
  line-height: 1.25;
  white-space: normal;
  text-align: center;
}
@media (hover: hover) {
  .btn--primary:hover {
    background: var(--accent);
    color: #FFFFFF;
    border-color: var(--ink);
  }
}
h1, h2 { overflow-wrap: break-word; }
.top nav a { white-space: nowrap; }
.top nav ul { flex-wrap: wrap; }
@media (max-width: 767.98px) { .top nav ul { column-gap: 8px; } }
@media (min-width: 768px) and (max-width: 1023.98px) and (max-width: 41.99em),
       (min-width: 1024px) and (max-width: 35.49em) {
  .top nav { order: 3; width: 100%; margin-inline-start: 0; }
  .top nav a { padding-inline: 0; }
  .top-in { column-gap: 32px; }
}
@media (max-width: 767.98px) { .row img { height: min(432px, calc((100vw - 84px) * 0.724), calc(88svh - 72px)); } }
@media (max-width: 1023.98px) { .solo img { width: min(100%, calc(88svh * 2000 / 1181)); max-height: 88svh; } }
@media (forced-colors: active) { .tabs label:not(:has(:checked)) span { border-bottom-color: Canvas; } }
:root { --brand: #B84A0D; --on-accent: #FFFFFF; --mark: #EDD0C0; --env-banner-bg: #B00020; --env-banner-ink: #FFFFFF; --env-banner-h: 2.1rem; }
.brand svg { color: var(--brand); }
.brand .pt { color: var(--brand); }
@media (forced-colors: active) { .brand svg, .brand .pt { color: inherit; } }
:root { --accent-line: var(--accent); }
#team .roster { --call: 1.5px solid var(--accent-line); }
#team .roster .r-rules .r-yours { border-left-color: var(--accent-line); }
@media (forced-colors: none) { #pf-words g { stroke: var(--ink-2); } }
:root { color-scheme: light dark; }
@media print { :root { color-scheme: light; } }
@supports (animation-timeline: view()) and (animation-range: entry 0% cover 50%) {
  @media screen and (prefers-reduced-motion: no-preference) and (min-width: 64em) {
    #team .roster { timeline-scope: --groups; }
    #team .roster .r-groups { view-timeline: --groups block; }
    @keyframes down { from { transform: scaleY(0); } }
    @keyframes across { from { transform: scaleX(0); } }
    @keyframes tick { 0%, 40% { transform: scaleX(0); } }
    #team .roster .r-you::after,
    #team .roster .r-line::before,
    #team .roster .r-g::after,
    #team .roster .r-line::after,
    #team .roster .r-pass::after {
      animation-timeline: --groups;
      animation-timing-function: linear;
      animation-fill-mode: both;
    }
    #team .roster .r-you::after { transform-origin: top; animation-name: down; animation-range: entry 0% entry 25%; }
    #team .roster .r-g::after { transform-origin: left; animation-name: across; }
    #team .roster .r-g:nth-child(1)::after { animation-range: entry 25% entry 50%; }
    #team .roster .r-g:nth-child(2)::after { animation-range: entry 50% entry 75%; }
    #team .roster .r-line::before { transform-origin: top; animation-name: down; }
    #team .roster .r-line::after, #team .roster .r-pass::after { transform-origin: left; animation-name: tick; }
    #team .roster .r-g:nth-child(1) .r-line::before,
    #team .roster .r-g:nth-child(1) .r-line::after { animation-range: entry 25% entry 50%; }
    #team .roster .r-g:nth-child(2) .r-line::before,
    #team .roster .r-g:nth-child(2) .r-line::after,
    #team .roster .r-g:nth-child(2) .r-pass::after { animation-range: entry 50% entry 75%; }
    #team .roster .r-g:nth-child(3) .r-line::before,
    #team .roster .r-g:nth-child(3) .r-line::after { animation-range: entry 75% entry 100%; }
  }
}
.doc {
  width: min(100% - 2 * var(--gutter), 34em);
  margin-inline: auto;
  padding-block: 32px var(--stage-pad);
}
@media (min-width: 1024px) { .doc { padding-top: 64px; } }
.doc h1 { max-width: none; }
.doc h2 { max-width: none; }
.doc .lede { margin-top: 24px; color: var(--ink-2); }
.doc p, .doc ul, .doc ol, .doc pre, .doc .table-scroll { max-width: 34em; }
.doc p + p, .doc p + ul, .doc ul + p, .doc ol + p, .doc p + ol { margin-top: 16px; }
.doc strong { font-weight: 500; }
.doc .ic { width: 24px; height: 24px; flex: none; color: var(--ink-2); }
@media (forced-colors: active) { .doc .ic { color: CanvasText; } }
.doc h1 .ic, .doc h2 .ic { display: inline-block; margin-left: 12px; vertical-align: -0.1em; }
.doc ul:not(.steps), .doc ol:not(.steps) { padding-left: 24px; }
.doc ul:not(.steps) { list-style: disc; }
.doc ol:not(.steps) { list-style: decimal; }
.doc li::marker { color: var(--ink-2); }
.doc li + li { margin-top: 8px; }
.doc .steps { list-style: none; padding: 0; }
.need { display: grid; gap: 24px; margin-top: 48px; }
.need-title { display: flex; align-items: center; gap: 12px; font-weight: 500; }
.need-title + p { margin-top: 8px; }
.note { margin-top: 48px; }
.note strong .ic { display: inline-block; margin-right: 12px; vertical-align: -0.25em; }
.note ol { margin-top: 16px; }
.see { display: flex; align-items: flex-start; gap: 12px; margin-top: 24px; }
.step h2 { padding-left: 48px; text-indent: -48px; }
.step h2 .num {
  display: inline-block; width: 32px; margin-right: 16px; text-indent: 0;
  font-variant-numeric: tabular-nums;
}
.note > p:first-child:has(> strong:first-child > .ic:first-child) { padding-left: calc(24px + 12px); text-indent: calc(-24px - 12px); }
.note > p:first-child strong .ic { text-indent: 0; }
.see .ic { margin-top: 4px; }
.hint { color: var(--ink-2); }
p.hint, ul.hint { margin-top: 16px; }
.doc pre {
  margin: 16px 0 0;
  padding: 12px 16px;
  font-size: var(--body);
  line-height: 1.5;
  white-space: pre-wrap;
  overflow-wrap: anywhere;
  tab-size: 2;
}
.doc pre code { font: inherit; }
.doc pre, .doc code, .doc kbd { font-family: var(--family); font-size: inherit; }
.doc pre { font-size: var(--body); }
:where(.doc pre) + * { margin-top: 16px; }
.doc pre.long {
  max-height: calc(7.5em + 26px);
  overflow-y: auto;
  user-select: all;
  -webkit-user-select: all;
}
.doc li:not(.step) > pre { margin-top: 12px; }
.doc :not(pre) > code { overflow-wrap: anywhere; }
.doc kbd { font: inherit; font-weight: 500; }
.doc details { margin-top: 0; }
.doc summary {
  display: list-item;
  padding-block: 12px;
  font-weight: 500;
  cursor: pointer;
}
.doc summary::marker { color: var(--ink-2); }
.doc details[open] > summary { margin-bottom: 8px; }
.doc details > :last-child { margin-bottom: 24px; }
.table-scroll { overflow-x: auto; }
.doc table { width: 100%; border-collapse: collapse; }
.doc th { text-align: left; font-weight: 500; padding: 0 16px 12px 0; }
.doc td { vertical-align: top; padding: 12px 16px 12px 0; }
.doc td:first-child { width: 40%; }
@media (max-width: 39.99em) {
  .doc table, .doc tbody, .doc tr, .doc td { display: block; width: auto; }
  .doc thead { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); }
  .doc td:first-child { width: auto; padding-bottom: 4px; font-weight: 500; }
  .doc td + td { padding-top: 0; border-top: 0; }
}
.more { margin-top: 96px; margin-bottom: 24px; }
.terms-line { margin-top: 48px; }
.doc pre, .doc code, .doc kbd { font-variant-ligatures: none; }
.doc pre, .doc code { letter-spacing: 0.05em; }
.doc .steps > .step { margin-top: 48px; padding-top: 48px; border-top: 1px solid var(--rule); }
.doc .steps { margin-top: 48px; }
.step h2 + p { margin-top: 16px; }
.need { gap: 0; }
.need > div { padding-block: 24px; border-top: 1px solid var(--rule); }
.need > div:last-child { border-bottom: 1px solid var(--rule); }
.doc pre { border: 1px solid var(--rule); }
.doc :not(pre) > code {
  padding: 0 4px;
  border-inline: 1px solid var(--rule);
}
.doc kbd { padding: 0 4px; border: 1px solid var(--rule); }
@media (forced-colors: active) { .doc :not(pre) > code { border-color: GrayText; } }
.doc td > pre { margin-bottom: 24px; }
.see strong:first-child { display: block; }
.doc details { border-top: 1px solid var(--rule); }
.doc details:last-of-type { border-bottom: 1px solid var(--rule); }
.step details:last-of-type { border-bottom: 0; }
.doc pre + .see, .doc pre + p { margin-top: 24px; }
.step details:first-of-type { margin-top: 32px; }
.doc th, .doc td { border-top: 1px solid var(--rule); }
.doc th { padding-top: 12px; }
.doc {
  width: min(100% - 2 * var(--gutter), 1320px);
  margin-inline: auto;
}
.doc pre, .doc .table-scroll { max-width: none; }
.doc .steps { max-width: none; }
@media (min-width: 64em) {
  .step h2 { padding-left: 48px; text-indent: -48px; }
  .note > p:first-child:has(> strong:first-child > .ic:first-child) { padding-left: calc(24px + 12px); text-indent: calc(-24px - 12px); }
  .step h2 .num { position: static; width: 32px; margin-right: 16px; }
  .need-title .ic, .see .ic { position: static; }
  .note > p:first-child strong .ic { position: static; margin-right: 12px; }
  .see { display: flex; }
}
@media (min-width: 64em) {
  .doc, .doc .step {
    display: grid;
    grid-template-columns: repeat(12, minmax(0, 1fr));
    column-gap: var(--col-gap);
    align-items: start;
  }
  .doc > * { grid-column: 6 / -1; }
  .doc > h1, .doc > .lede { grid-column: 1 / 9; }
  .doc > .need { grid-column: 1 / -1; grid-template-columns: repeat(3, minmax(0, 1fr)); column-gap: var(--col-gap); }
  .doc > .need > div:last-child { border-bottom: 0; }
  .doc > .note { grid-column: 1 / -1; }
  .doc > .steps { grid-column: 1 / -1; }
  .doc .steps > .step { margin-top: 64px; padding-top: 64px; }
  .doc .step > * { grid-column: 6 / -1; }
  .doc .step > h2 { grid-column: 1 / 6; grid-row: 1 / span 2; }
  .doc .step > h2 + * { margin-top: 0; }
  .doc > h2.more { grid-column: 1 / 6; grid-row: span 4; margin-top: 64px; padding-top: 64px; position: relative; }
  .doc > h2.more::before {
    content: ""; position: absolute; top: 0; left: 0;
    width: calc((100% - 4 * var(--col-gap)) * 12 / 5 + 11 * var(--col-gap));
    border-top: 1px solid var(--rule);
  }
  .doc > h2.more ~ details { margin-top: 0; }
  .doc > h2.more + details { margin-top: 64px; padding-top: 64px; border-top: 0; }
}
.doc pre { border-color: var(--ink-2); }
.legal .updated { margin-top: 16px; color: var(--ink-2); }
.legal h1 + .updated + p { margin-top: 32px; }
.legal .note { margin-top: 48px; }
.legal .note ul { margin-top: 16px; }
.legal .toc { margin-top: 48px; }
.legal .toc h2 { font-size: var(--body); line-height: 1.5; font-weight: 500; letter-spacing: 0; }
.legal .toc ol { margin-top: 12px; }
.legal h2[id] { margin-top: 64px; }
.legal h2[id] + p, .legal h2[id] + ul { margin-top: 16px; }
.legal p + .table-scroll, .legal .table-scroll + p { margin-top: 24px; }
.legal main a, .legal a:not(.btn) { text-decoration: underline; text-underline-offset: 0.15em; }
.legal p a { overflow-wrap: anywhere; }
.legal .table-scroll { overflow-x: auto; }
.legal td:first-child { width: auto; }
.legal th { width: 33%; }
@media (max-width: 39.99em) {
  .legal table { display: table; width: 100%; min-width: 36em; }
  .legal td + td { padding-top: 12px; border-top: 1px solid var(--rule); }
  .legal thead {
    display: table-header-group; position: static; width: auto; height: auto; overflow: visible;
    clip-path: none;
  }
  .legal tbody { display: table-row-group; }
  .legal tr { display: table-row; }
  .legal td, .legal th { display: table-cell; width: auto; }
  .legal td:first-child { padding-bottom: 12px; font-weight: 400; }
}
.legal th { vertical-align: bottom; }
.legal h2[id] { margin-top: 48px; padding-top: 48px; border-top: 1px solid var(--rule); }
.legal .note { padding-block: 24px; border-block: 1px solid var(--rule); }
.legal .toc ol { padding-left: 0; list-style-position: inside; }
.legal .toc li { margin: 0; border-top: 1px solid var(--rule); }
.legal .toc li + li { margin-top: 0; }
.legal .toc a { display: inline-block; padding-block: 8px; min-height: 44px; box-sizing: border-box; }
.legal th, .legal td { border-top: 1px solid var(--rule); }
.legal--b h2[id^="s"] { scroll-margin-top: 32px; }
.legal--b .toc a { max-width: calc(100% - 2em); }
@media (min-width: 64em) {
  .doc.legal--b > * { grid-column: 1 / 8; }
  .doc.legal--b > .toc { grid-column: 9 / -1; grid-row: 1 / span 80; margin-top: 0; }
  .legal--b .toc ol { max-width: none; }
  .legal--b h2[id] { margin-top: 64px; padding-top: 64px; }
}
@media (min-width: 64em) and (min-height: 40em) {
  .doc.legal--b > .toc {
    position: sticky; top: 32px;
    max-height: calc(100dvh - 64px);
    overflow-y: auto;
    overscroll-behavior: contain;
  }
  .legal--b .toc a:focus-visible { outline-offset: -2px; }
}
@media (min-width: 64em) and (max-height: 39.99em) {
  .doc.legal--b > .toc { grid-column: 1 / -1; grid-row: auto; margin-top: 48px; }
  .legal--b .toc ol { columns: 2; column-gap: var(--col-gap); }
  .legal--b .toc li { break-inside: avoid; }
}
@media (min-width: 80em) and (max-height: 39.99em) { .legal--b .toc ol { columns: 3; } }
.legal--b .toc a { vertical-align: top; }
@media print { .doc.legal--b > .toc { position: static; grid-column: 1 / -1; grid-row: auto; max-height: none; overflow: visible; } }
.legal .mk {
  padding: 0 4px;
  border-radius: 4px;
  background: var(--mark);
  color: var(--ink);
  font-weight: 700;
  -webkit-box-decoration-break: clone;
  box-decoration-break: clone;
}
.legal .mk strong { font-weight: inherit; }
@media (forced-colors: active) { .legal .mk { background: Mark; color: MarkText; } }
@media print { .legal .mk { print-color-adjust: exact; -webkit-print-color-adjust: exact; } }
body.doc--404-page { display: flex; flex-direction: column; min-height: 100svh; }
.nf { flex: 1 0 auto; margin-inline: auto; }
.nf h1 { max-width: none; align-self: start; }
.nf .lede { margin-top: 24px; color: var(--ink-2); text-wrap: balance; }
.nf .acts { display: flex; margin-top: 32px; }
.nf--stage {
  width: min(100% - 2 * var(--gutter), 1320px);
  padding-block: 32px var(--stage-pad);
}
.nf--stage .acts { margin-top: 24px; }
@media (min-width: 1024px) {
  .nf--stage {
    padding-top: 64px;
    display: grid;
    grid-template-columns: repeat(12, minmax(0, 1fr));
    grid-template-rows: auto 1fr;
    column-gap: var(--col-gap);
    align-content: start;
  }
  .nf--stage h1 { grid-column: 1 / span 8; grid-row: 1 / span 2; }
  .nf--stage .lede { grid-column: 9 / span 4; grid-row: 1; margin-top: 0; }
  .nf--stage .acts { grid-column: 9 / span 4; grid-row: 2; align-self: start; }
}
@media screen and (prefers-color-scheme: dark) {
  :root { color-scheme: dark; --ground: #2C2C2E; --ground-2: #3A3A3C; --ink: #F5F5F7; --ink-2: #BDBDC2; --rule: #48484A; --accent: #0071E3; --accent-line: #2997FF; --edge: #7C7C80; --brand: #F96A16; --on-accent: #FFFFFF; --mark: #613C28; }
  @media (forced-colors: none) {
    :root .moves use[fill="#FFFFFF"] { fill: var(--ground); }
    :root .moves use[stroke="#FFFFFF"] { stroke: var(--ground); }
    :root .moves use[fill="#E2E2E0"] { fill: var(--rule); }
    :root .moves use[stroke="#55585E"] { stroke: var(--ink-2); }
  }
  :root [data-t="screen"] { outline-color: var(--edge); }
  :root .btn--primary { color: var(--on-accent); }
  @media (hover: hover) { :root .btn--primary:hover { color: var(--on-accent); } }
}
.env-banner {
  position: sticky;
  top: 0;
  z-index: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: var(--env-banner-h);
  padding: 0 16px;
  background: var(--env-banner-bg);
  color: var(--env-banner-ink);
  font: 500 var(--small)/1 var(--family);
  text-align: center;
}
.has-env-banner { scroll-padding-top: var(--env-banner-h); }
@media (min-width: 64em) and (min-height: 40em) { .has-env-banner .doc.legal--b > .toc { top: calc(var(--env-banner-h) + 32px); max-height: calc(100dvh - 64px - var(--env-banner-h)); } }
@media (forced-colors: active) { .moves svg.frame { --ground: #FFFFFF; --rule: #E2E2E0; --ink-2: #55585E; } }