/* Every page */
/* Fonts and palette are the site's own, from static/index.html. */
@font-face {
  font-family: 'Bricolage Grotesque';
  src: url('/fonts/bricolage-grotesque.woff2') format('woff2');
  font-weight: 400 800;
  font-display: swap;
}
@font-face {
  font-family: 'Newsreader';
  src: url('/fonts/newsreader.woff2') format('woff2');
  font-weight: 400 500;
  font-display: swap;
}
@font-face {
  font-family: 'JetBrains Mono';
  src: url('/fonts/jetbrains-mono.woff2') format('woff2');
  font-weight: 400;
  font-display: swap;
}

:root {
  /* One width for the header, the page and the footer, on every page,
       so the wordmark always lines up with what is under it, and text
       runs the full width. */
  --page: 52rem;
  --bg: #f2f0eb;
  --bg-raise: #e9e6df;
  --ink: #23262d;
  --ink-dim: #6a6e77;
  --rule: #d8d4cb;
  --clip-video: #2f8d7e;
  --clip-select: #b3831f;
  --clip-audio: #6a6e77;
  --clip-music: #8a6ca8;
  /* Aliases so page styles can read as intent rather than as a
       timeline colour. Same values, one definition. */
  --accent: var(--clip-video);
  --warn: var(--clip-select);
  --head: 'Bricolage Grotesque', system-ui, sans-serif;
  --body: 'Newsreader', Georgia, serif;
  --mono: 'JetBrains Mono', ui-monospace, monospace;
}

* {
  box-sizing: border-box;
}
body {
  margin: 0;
  background: var(--bg);
  color: var(--ink);
  font: 400 17px/1.55 var(--body);
  -webkit-font-smoothing: antialiased;
  min-height: 100dvh;
  display: flex;
  flex-direction: column;
}
/* Takes up whatever is left, which is what holds the footer down on a
     page with little on it. */
/* The site's own underline: a faint green rule under a link, going
     amber as it is pointed at. The colour tokens are the timeline's, so
     a link belongs to the same drawing as everything else. */
a {
  color: var(--ink);
  text-decoration-color: var(--clip-video);
  text-underline-offset: 3px;
}
a:hover {
  text-decoration-color: var(--clip-select);
}
:focus-visible {
  outline: 2px solid var(--clip-select);
  outline-offset: 3px;
  border-radius: 2px;
}

/* Navigation — the same header the landing page uses, so the
     wordmark does not change size between pages. */
/* width: 100% because body is a flex column, and a flex item with
     an auto side margin stops stretching and shrinks to its own
     content — which centred the wordmark and halved every page. */
.wrap {
  width: 100%;
  max-width: var(--page);
  margin: 0 auto;
  padding: 0 1.25rem;
}
header.site {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 1rem;
  padding: 1.5rem 0 0;
}
.wordmark {
  font-family: var(--head);
  font-weight: 800;
  font-size: 1.45rem;
  letter-spacing: -0.01em;
  text-decoration: none;
}
.wordmark i {
  font-style: normal;
  font-weight: 500;
  color: var(--ink-dim);
}
.wordmark span {
  color: var(--clip-video);
}
.top-nav {
  display: flex;
  align-items: center;
  gap: 1.25rem;
}
/* No text-decoration: none here on purpose. The header's links wear
     the site's green rule like every other link — which is what the
     original header did, by not opting out of it. */
.top-nav > a {
  font-family: var(--head);
  font-weight: 400;
  font-size: 0.92rem;
  white-space: nowrap;
  text-decoration-thickness: 1px;
}
.top-nav > a.here {
  font-weight: 500;
}
/* The invitation, which is for people who have not accepted it yet. */
.top-nav > a.top-cta {
  font-size: 0.95rem;
  color: var(--ink);
}

/* The account: a name that opens what belongs to it. Who you are,
     where your footage is up to, and the way out are one thing, so they
     live in one place rather than strung along the header. */
.account {
  position: relative;
}
/* A mark, not a name. Whose account it is, what state it is in and
     the way out are all inside; a header is not the place to spell out
     somebody's full name, and a long one has nowhere to go. */
.who {
  display: grid;
  place-items: center;
  width: 2rem;
  height: 2rem;
  padding: 0;
  background: var(--bg-raise);
  border: 1px solid var(--rule);
  border-radius: 50%;
  color: var(--ink-dim);
  cursor: pointer;
  transition:
    border-color 0.15s,
    color 0.15s;
}
.who:hover,
.who[aria-expanded='true'] {
  color: var(--ink);
  border-color: var(--ink-dim);
}
.who svg {
  width: 17px;
  height: 17px;
  stroke: currentColor;
  stroke-width: 1.7;
  fill: none;
}

.menu {
  display: none;
  position: absolute;
  top: 100%;
  right: 0;
  z-index: 20;
  min-width: 15rem;
  margin-top: 0.5rem;
  padding: 0.5rem;
  background: var(--bg);
  border: 1px solid var(--rule);
  border-radius: 10px;
  box-shadow: 0 10px 30px rgba(35, 38, 45, 0.12);
  text-align: left;
}
.menu.open {
  display: block;
}
.menu a {
  display: block;
  padding: 0.55rem 0.65rem;
  border-radius: 6px;
  font: 500 0.95rem/1.2 var(--head);
  color: var(--ink);
  text-decoration: none;
}
.menu a:hover {
  background: var(--bg-raise);
}
.menu .detail {
  padding: 0.55rem 0.65rem 0.7rem;
  border-bottom: 1px solid var(--rule);
  margin-bottom: 0.35rem;
}
.menu .detail .name {
  display: block;
  font: 600 0.95rem/1.3 var(--head);
  color: var(--ink);
  overflow-wrap: anywhere;
}
.menu .detail .email {
  display: block;
  margin-top: 0.15rem;
  font-size: 0.875rem;
  color: var(--ink-dim);
  overflow-wrap: anywhere;
}
/* The same badge the project list uses for a state. */
.pending {
  display: inline-block;
  margin-top: 0.45rem;
  font: 500 0.7rem/1 var(--head);
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: var(--warn);
  background: var(--bg-raise);
  border-radius: 5px;
  padding: 0.4rem 0.5rem;
}
/* On a wide screen these are in the header already. */
.menu .pages {
  display: none;
}

/* As the site has always done it: the wordmark holds its size until
     there is genuinely no room, not from the first phone width. */
@media (max-width: 400px) {
  .wordmark {
    font-size: 1.25rem;
  }
}

@media (max-width: 40rem) {
  /* The padding stays as it is at every other width: cutting it here
       closed the gap the page opens with. Only the alignment changes,
       because the account mark is a circle and has no baseline. */
  header.site {
    align-items: center;
  }
  /* A wordmark, two links and an account cannot share a phone's
       width, so the pages move inside the account's own menu — but only
       when there is one. Signed out there is room, and the invitation
       to try it is the whole point of the header. */
  .top-nav:has(.account) > a {
    display: none;
  }
  .top-nav {
    gap: 0.9rem;
  }
  .top-nav > a {
    font-size: 0.85rem;
  }
  .top-nav > a.top-cta {
    font-size: 0.85rem;
  }
  .menu .pages {
    display: block;
    border-bottom: 1px solid var(--rule);
    margin-bottom: 0.35rem;
    padding-bottom: 0.35rem;
  }
  .menu {
    min-width: 13rem;
  }
  /* Same reasoning as the hero's: four rems of nothing before the
       footer is a desktop's to spend, not a phone's. */
  footer.site {
    margin-top: 2.5rem;
  }
}

main {
  /* Takes what is left of the column's height, which is what holds the
       footer at the bottom of a page with little on it. */
  flex: 1 0 auto;
  width: 100%;
  max-width: var(--page);
  margin: 0 auto;
  padding: 3rem 1.25rem 2rem;
}
h1 {
  font: 600 1.75rem/1.2 var(--head);
  letter-spacing: -0.01em;
  margin: 0 0 2rem;
}

button {
  font: 500 0.9375rem/1 var(--head);
  padding: 0.7rem 1.25rem;
  border: 1px solid var(--rule);
  border-radius: 8px;
  background: var(--bg);
  color: var(--ink);
  cursor: pointer;
  transition: border-color 0.15s;
}
button:hover:not([disabled]) {
  border-color: var(--ink-dim);
}
button.primary {
  background: var(--accent);
  border-color: var(--accent);
  color: #fff;
  padding: 0.8rem 1.75rem;
  font-size: 1rem;
}
button.primary:hover:not([disabled]) {
  background: #28796c;
}
button[disabled] {
  opacity: 0.4;
  cursor: default;
}

/* The site's footer, on every page for the same reason it is on the
     landing one: an address to write to, and where the terms are. */
/* The page ends with as much room as it began with: the header's
     1.5rem above the wordmark, the same below the footer. */
footer.site {
  padding: 1.6rem 0 1.5rem;
  margin-top: 4rem;
  font-size: 0.95rem;
  color: var(--ink-dim);
  display: flex;
  align-items: last baseline;
  justify-content: space-between;
  gap: 1rem;
}
footer.site a {
  color: var(--ink-dim);
}
/* last baseline, so the line and the links sit on the bottom edge of
     the mark rather than floating against its middle. */
footer.site .mark {
  display: flex;
  align-items: last baseline;
  gap: 0.65rem;
  flex: none;
}
footer.site .mark span {
  white-space: nowrap;
}
footer.site .footmark {
  height: 36px;
  width: auto;
  display: block;
  flex: none;
}
footer.site p {
  text-align: right;
  margin: 0;
}
@media (max-width: 430px) {
  footer.site {
    gap: 0.75rem;
  }
  footer.site .footmark {
    height: 28px;
  }
  footer.site p {
    font-size: 0.85rem;
  }
}

/* The browser's own confirm() belongs to the browser: its own type,
     its own grey, its own buttons at the top of the screen. Deleting
     someone's footage should be asked in the voice of the page asking. */
dialog.ask {
  border: 1px solid var(--rule);
  border-radius: 12px;
  background: var(--bg);
  color: var(--ink);
  padding: 1.75rem;
  max-width: 26rem;
  width: calc(100% - 2.5rem);
  font: inherit;
  box-shadow: 0 18px 48px rgba(35, 38, 45, 0.18);
}
dialog.ask::backdrop {
  background: rgba(35, 38, 45, 0.45);
}
dialog.ask h2 {
  margin: 0 0 0.75rem;
  font: 600 1.25rem/1.3 var(--head);
  overflow-wrap: anywhere;
}
dialog.ask p {
  margin: 0 0 1.5rem;
  color: var(--ink-dim);
}
dialog.ask .row {
  display: flex;
  gap: 0.75rem;
  flex-wrap: wrap;
}
dialog.ask .danger {
  background: #a8322a;
  border-color: #a8322a;
  color: #fff;
}
dialog.ask .danger:hover {
  background: #8d2a23;
  border-color: #8d2a23;
}

/* A warning: something the reader must not miss. */
.notice {
  padding: 0.875rem 1.125rem;
  border-left: 3px solid var(--warn);
  background: var(--bg-raise);
  border-radius: 0 8px 8px 0;
  font-size: 0.9375rem;
  overflow-wrap: anywhere;
}

/* The landing page */
body:has(.page-landing) {
  font-size: 1.125rem;
  line-height: 1.65;
}
body:has(.page-landing) main {
  padding-top: 0;
  padding-bottom: 0;
}
body:has(.page-landing) footer.site {
  margin-top: 0;
}
:where(body:has(.page-landing)) * {
  box-sizing: border-box;
  margin: 0;
}
html:has(.page-landing) {
  scroll-behavior: smooth;
}
@media (prefers-reduced-motion: reduce) {
  html:has(.page-landing) {
    scroll-behavior: auto;
  }
}
.page-landing .hero {
  padding: 4.5rem 0 0;
}
@media (max-width: 40rem) {
  .page-landing .hero {
    padding-top: 2.5rem;
  }
}
.page-landing .cards-dump {
  font-family: var(--mono);
  font-size: 0.72rem;
  color: var(--ink-dim);
  display: flex;
  flex-wrap: wrap;
  gap: 0.35rem 1.1rem;
  margin-bottom: 2.2rem;
  opacity: 0.75;
}
.page-landing .cards-dump s {
  text-decoration: none;
  opacity: 0.45;
}
@media (max-width: 40rem) {
  .page-landing .cards-dump span:nth-child(n + 9):not(.more) {
    display: none;
  }
}
.page-landing h1 {
  font-family: var(--head);
  font-weight: 800;
  font-size: clamp(2.1rem, 6vw, 3.4rem);
  line-height: 1.04;
  letter-spacing: -0.025em;
  max-width: 22ch;
  margin: 0;
}
.page-landing h1 span {
  display: block;
}
.page-landing h1 em {
  font-style: normal;
}
.page-landing .hero p.sub {
  margin-top: 1.4rem;
  max-width: 34rem;
  font-size: clamp(1.2rem, 1rem + 1vw, 1.35rem);
  color: var(--ink);
}
.page-landing .timeline {
  margin: 3.2rem 0 0;
  border: 1px solid var(--rule);
  border-radius: 6px;
  background: var(--bg-raise);
  padding: 0.9rem 0.9rem 0.7rem;
  overflow: hidden;
}
.page-landing .track {
  display: grid;
  grid-template-columns: 3.2rem 1fr;
  align-items: center;
  gap: 0.6rem;
  padding: 0.22rem 0;
}
.page-landing .track + .track {
  border-top: 1px dashed var(--rule);
}
.page-landing .track .lbl {
  font-family: var(--mono);
  font-size: 0.62rem;
  color: var(--ink-dim);
}
.page-landing .lane {
  display: flex;
  gap: 3px;
  height: 16px;
}
.page-landing .clip {
  border-radius: 3px;
  min-width: 6px;
  flex: none;
}
.page-landing .c-v {
  background: var(--clip-video);
}
.page-landing .c-s {
  background: var(--clip-select);
}
.page-landing .c-m {
  background: var(--clip-music);
}
.page-landing .c-a {
  background: var(--clip-audio);
}
.page-landing .clip.dim {
  opacity: 0.28;
}
@media (max-width: 560px) {
  .page-landing .timeline {
    margin-top: 1.8rem;
  }
  .page-landing .track {
    grid-template-columns: 2.2rem 1fr;
    gap: 0.4rem;
  }
}
.page-landing .playhead-note {
  font-family: var(--mono);
  font-size: 0.62rem;
  color: var(--ink-dim);
  margin-top: 0.6rem;
}
@media (prefers-reduced-motion: no-preference) {
  .page-landing .lane .clip {
    transform: translateX(-140%);
    animation: slidein 0.7s cubic-bezier(0.2, 0.7, 0.2, 1) forwards;
  }
  .page-landing .lane .clip:nth-child(2) {
    animation-delay: 0.07s;
  }
  .page-landing .lane .clip:nth-child(3) {
    animation-delay: 0.14s;
  }
  .page-landing .lane .clip:nth-child(4) {
    animation-delay: 0.21s;
  }
  .page-landing .lane .clip:nth-child(5) {
    animation-delay: 0.28s;
  }
  .page-landing .lane .clip:nth-child(6) {
    animation-delay: 0.35s;
  }
  .page-landing .track:nth-child(2) .clip {
    animation-delay: 0.18s;
  }
  .page-landing .track:nth-child(3) .clip {
    animation-delay: 0.3s;
  }
  .page-landing .track:nth-child(4) .clip {
    animation-delay: 0.42s;
  }
  @keyframes slidein {
    to {
      transform: none;
    }
  }
}
.page-landing .limits p {
  padding: 1.1rem 0;
  border-bottom: 1px solid var(--rule);
}
.page-landing .limits p strong {
  font-family: var(--head);
  font-weight: 700;
}
.page-landing .intro {
  padding: 3.2rem 0 0;
}
.page-landing .intro p {
  color: var(--ink);
}
.page-landing .intro p + p {
  margin-top: 1em;
}
@media (max-width: 560px) {
  .page-landing .intro {
    padding-top: 1.6rem;
  }
}
.page-landing .qa {
  padding: 3.5rem 0 1rem;
}
.page-landing .qa h2 {
  font-family: var(--head);
  font-weight: 800;
  font-size: 1.85rem;
  color: var(--ink);
  letter-spacing: -0.02em;
  line-height: 1.15;
  border-bottom: 1px solid var(--rule);
  padding-bottom: 0.7rem;
}
.page-landing .qa-hint {
  margin-top: 0.8rem;
}
.page-landing .qa-hint button {
  font-family: var(--head);
  font-size: 0.9rem;
  font-weight: 500;
  color: var(--ink-dim);
  background: none;
  border: 1px solid var(--rule);
  border-radius: 6px;
  padding: 0.35rem 0.8rem;
  cursor: pointer;
}
.page-landing .qa-hint button:hover {
  color: var(--ink);
  border-color: var(--ink-dim);
}
.page-landing .qa h3 {
  font-family: var(--head);
  font-weight: 800;
  font-size: 1.4rem;
  letter-spacing: -0.015em;
  line-height: 1.2;
  margin: 4rem 0 0.4rem;
}
.page-landing .illo * {
  transform-box: fill-box;
}
@media (prefers-reduced-motion: no-preference) {
  .page-landing .illo.play .s-clip {
    animation: illo-slide 0.6s cubic-bezier(0.2, 0.7, 0.2, 1) both;
  }
  .page-landing .illo.play .s-clip.s2 {
    animation-delay: 0.1s;
  }
  .page-landing .illo.play .s-clip.s3 {
    animation-delay: 0.2s;
  }
  .page-landing .illo.play .s-clip.s4 {
    animation-delay: 0.32s;
  }
  @keyframes illo-slide {
    from {
      transform: translateX(-56px);
      opacity: 0;
    }
    to {
      transform: none;
      opacity: 1;
    }
  }
  .page-landing .illo.play .p-dot {
    transform-origin: center;
    animation: illo-pop 0.4s cubic-bezier(0.3, 1.4, 0.4, 1) both;
  }
  .page-landing .illo.play .p-dot.d2 {
    animation-delay: 0.12s;
  }
  .page-landing .illo.play .p-dot.d3 {
    animation-delay: 0.24s;
  }
  .page-landing .illo.play .p-dot.d4 {
    animation-delay: 0.36s;
  }
  .page-landing .illo.play .p-dot.d5 {
    animation-delay: 0.48s;
  }
  @keyframes illo-pop {
    from {
      transform: scale(0);
    }
    to {
      transform: scale(1);
    }
  }
  .page-landing .illo.play .p-arc {
    animation: illo-fade 0.5s ease both;
  }
  .page-landing .illo.play .p-arc.a1 {
    animation-delay: 0.3s;
  }
  .page-landing .illo.play .p-arc.a2 {
    animation-delay: 0.45s;
  }
  .page-landing .illo.play .p-arc.a3 {
    animation-delay: 0.6s;
  }
  @keyframes illo-fade {
    from {
      opacity: 0;
    }
    to {
      opacity: 1;
    }
  }
  .page-landing .illo.play .w-bar {
    transform-origin: bottom;
    animation: illo-grow 0.45s cubic-bezier(0.2, 0.7, 0.2, 1) both;
  }
  .page-landing .illo.play .w-bar:nth-of-type(2n) {
    animation-delay: 0.08s;
  }
  .page-landing .illo.play .w-bar:nth-of-type(3n) {
    animation-delay: 0.16s;
  }
  @keyframes illo-grow {
    from {
      transform: scaleY(0);
    }
    to {
      transform: scaleY(1);
    }
  }
  .page-landing .illo.play .m-full {
    animation: illo-fade 0.4s ease both;
  }
  .page-landing .illo.play .m-duck {
    transform-origin: center;
    animation: illo-duck 0.6s cubic-bezier(0.2, 0.7, 0.2, 1) 0.45s both;
  }
  @keyframes illo-duck {
    from {
      transform: scaleY(2.33);
      opacity: 1;
    }
    to {
      transform: scaleY(1);
      opacity: 0.45;
    }
  }
  .page-landing .illo.play .c-sel {
    transform-origin: center;
    animation: illo-trim 0.7s cubic-bezier(0.2, 0.7, 0.2, 1) both;
  }
  @keyframes illo-trim {
    from {
      transform: scaleX(6.1);
      opacity: 0.4;
    }
    to {
      transform: scaleX(1);
      opacity: 1;
    }
  }
  .page-landing .illo.play .c-h.l {
    animation: illo-hl 0.7s cubic-bezier(0.2, 0.7, 0.2, 1) both;
  }
  .page-landing .illo.play .c-h.r {
    animation: illo-hr 0.7s cubic-bezier(0.2, 0.7, 0.2, 1) both;
  }
  @keyframes illo-hl {
    from {
      transform: translateX(-325.6px);
    }
    to {
      transform: none;
    }
  }
  @keyframes illo-hr {
    from {
      transform: translateX(325.6px);
    }
    to {
      transform: none;
    }
  }
  .page-landing .illo.play .xf-in {
    animation: xf-right 0.9s cubic-bezier(0.2, 0.7, 0.2, 1) both;
  }
  .page-landing .illo.play .xf-in.i2 {
    animation-delay: 0.1s;
  }
  .page-landing .illo.play .xf-in.i3 {
    animation-delay: 0.2s;
  }
  @keyframes xf-right {
    from {
      transform: translateX(-70px);
      opacity: 0;
    }
    to {
      transform: none;
      opacity: 1;
    }
  }
  .page-landing .illo.play .xf-out {
    animation: xf-left 0.9s cubic-bezier(0.2, 0.7, 0.2, 1) 0.7s both;
  }
  @keyframes xf-left {
    from {
      transform: translateX(90px);
      opacity: 0;
    }
    to {
      transform: none;
      opacity: 1;
    }
  }
  .page-landing .illo.play .o-film {
    transform-origin: center;
    animation: illo-pop 0.5s cubic-bezier(0.3, 1.4, 0.4, 1) both;
  }
  .page-landing .illo.play .o-plus {
    animation: illo-fade 0.4s ease 0.3s both;
  }
  .page-landing .illo.play .o-lane {
    animation: illo-slide 0.5s cubic-bezier(0.2, 0.7, 0.2, 1) both;
  }
  .page-landing .illo.play .o-lane.l1 {
    animation-delay: 0.35s;
  }
  .page-landing .illo.play .o-lane.l2 {
    animation-delay: 0.45s;
  }
  .page-landing .illo.play .o-lane.l3 {
    animation-delay: 0.55s;
  }
  .page-landing .illo.play .o-lane.l4 {
    animation-delay: 0.65s;
  }
  .page-landing .illo.play .o-lane.l5 {
    animation-delay: 0.75s;
  }
  .page-landing .illo.play .o-lane.l6 {
    animation-delay: 0.85s;
  }
}
.page-landing .qa .illo {
  display: block;
  width: 100%;
  height: auto;
  margin: 1.4rem 0 1.3rem;
}
.page-landing .qa details {
  border-bottom: 1px solid var(--rule);
}
.page-landing .qa summary {
  font-family: var(--head);
  font-weight: 700;
  font-size: 1.12rem;
  letter-spacing: -0.01em;
  line-height: 1.3;
  padding: 1.1rem 2rem 1.1rem 0;
  cursor: pointer;
  list-style: none;
  position: relative;
}
.page-landing .qa summary::-webkit-details-marker {
  display: none;
}
.page-landing .qa summary::after {
  content: '+';
  position: absolute;
  right: 0.2rem;
  top: 50%;
  transform: translateY(-50%);
  font-weight: 500;
  font-size: 1.3rem;
  color: var(--clip-video);
}
.page-landing .qa details[open] summary::after {
  content: '\2212';
}
.page-landing .qa details p {
  padding: 0 0 1.2rem;
}
.page-landing .qa details p + p {
  margin-top: 0.8rem;
}
@media (prefers-reduced-motion: no-preference) {
  .page-landing .qa details[open] p {
    animation: qa-reveal 0.28s cubic-bezier(0.2, 0.7, 0.2, 1) both;
  }
  .page-landing .qa details[open] p + p {
    animation-delay: 0.06s;
  }
  @keyframes qa-reveal {
    from {
      opacity: 0;
      transform: translateY(-6px);
    }
    to {
      opacity: 1;
      transform: translateY(0);
    }
  }
}
.page-landing .cta {
  margin: 4.5rem 0;
  border-top: 2px solid var(--clip-video);
  padding-top: 2.2rem;
}
@media (max-width: 40rem) {
  .page-landing .cta {
    margin: 2.5rem 0;
  }
}
.page-landing .cta h2 {
  font-family: var(--head);
  font-weight: 800;
  font-size: clamp(1.6rem, 4vw, 2.2rem);
  letter-spacing: -0.02em;
  line-height: 1.1;
  max-width: 20ch;
}
.page-landing .cta p {
  margin-top: 1rem;
  color: var(--ink-dim);
}
.page-landing a.button {
  display: inline-block;
  margin-top: 1.75rem;
  font-family: var(--head);
  font-weight: 700;
  font-size: 1.05rem;
  color: var(--bg);
  background: var(--clip-video);
  padding: 0.8rem 1.5rem;
  border-radius: 6px;
  text-decoration: none;
}
.page-landing a.button:hover {
  background: #28796c;
}
.page-landing .cta .alt-contact {
  margin-top: 1.1rem;
}

/* Upload */
.page-upload #drop {
  display: flex;
  flex-direction: column;
  border: 1.5px dashed var(--rule);
  border-radius: 10px;
  background: var(--bg-raise);
  padding: 2rem 1.5rem 1.5rem;
  text-align: left;
  transition:
    border-color 0.15s,
    background 0.15s;
}
.page-upload #drop:not(.chosen) {
  min-height: 16rem;
}
.page-upload #drop.over {
  border-color: var(--accent);
  background: #fff;
}
.page-upload #drop.holding {
  border-style: solid;
}
/* A plain block, so the gaps between the wizard's parts overlap rather
   than add up: every gap is the larger of the two, 28 px. */
.page-upload #drop .centre {
  flex: 1;
  width: 100%;
}
.page-upload #invite {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
}
.page-upload #about {
  margin-bottom: 1.75rem;
}
.page-upload #about h2,
.page-upload .folder,
.page-upload #clear,
.page-upload #issues h2,
.page-upload #status {
  font: 600 1.0625rem/1.3 var(--head);
}
.page-upload #about h2 {
  margin: 0;
}
.page-upload #about p {
  margin: 0.5rem 0 0;
  font-size: 1rem;
  line-height: 1.5;
  color: var(--ink-dim);
  white-space: pre-line;
}
.page-upload #drop.holding #about p {
  color: var(--warn);
}
.page-upload #drop .main {
  display: block;
  font: 500 1rem/1.4 var(--head);
}
.page-upload #drop .or {
  display: block;
  font-size: 0.875rem;
  color: var(--ink-dim);
  margin: 0.75rem 0;
}
.page-upload input[type='file'] {
  display: none;
}
@media (hover: none) and (pointer: coarse) {
  .page-upload #drop .main,
  .page-upload #drop .or {
    display: none;
  }
}
.page-upload #no-folders {
  display: none;
  font: 500 1.0625rem/1.45 var(--head);
  max-width: 22rem;
}
.page-upload #drop.unsupported #invite > :not(#no-folders) {
  display: none;
}
.page-upload #drop.unsupported #no-folders {
  display: block;
}
.page-upload #chosen {
  display: none;
  width: 100%;
  text-align: left;
}
.page-upload .head {
  display: flex;
  align-items: baseline;
  gap: 0.25rem 1rem;
  flex-wrap: wrap;
}
/* Hidden until a folder is chosen; above the step's heading after. */
.page-upload #picked {
  display: none;
  margin-bottom: 1.75rem;
}
/* The folder's name, then a dot, then what it holds. */
.page-upload #picked {
  gap: 0.25rem 0.5rem;
}
.page-upload #picked .meta::before {
  content: '· ';
}
.page-upload .folder {
  overflow-wrap: anywhere;
}
.page-upload .meta {
  font-family: var(--mono);
  font-size: 0.875rem;
  color: var(--ink-dim);
  white-space: nowrap;
}
.page-upload #progress {
  display: none;
  margin-top: 0;
}
.page-upload .bar {
  height: 8px;
  background: var(--rule);
  border-radius: 4px;
  overflow: hidden;
}
.page-upload .bar > i {
  display: block;
  height: 100%;
  width: 0;
  background: var(--accent);
  transition: width 0.3s linear;
}
.page-upload #stats {
  margin-top: 0.75rem;
  font-family: var(--mono);
  font-size: 0.8125rem;
  color: var(--ink);
}
.page-upload #current {
  margin-top: 0.75rem;
  font-family: var(--mono);
  font-size: 0.8125rem;
  color: var(--ink-dim);
  overflow-wrap: anywhere;
}
.page-upload #actions {
  margin-top: 1.75rem;
  display: none;
  gap: 0.75rem;
  align-items: center;
  flex-wrap: wrap;
}
.page-upload #pause,
.page-upload #cancel,
.page-upload #togo,
.page-upload #another {
  display: none;
}
.page-upload #skipped {
  display: none;
  margin-top: 0.5rem;
  font-size: 0.9375rem;
  color: var(--ink-dim);
}
.page-upload #skipped summary {
  cursor: pointer;
}
.page-upload #skipped ul {
  margin: 0.5rem 0 0;
  padding-left: 1.25rem;
  font-family: var(--mono);
  font-size: 0.8125rem;
}
.page-upload #skipped li {
  margin-top: 0.2rem;
  overflow-wrap: anywhere;
}
.page-upload #togo {
  align-items: center;
  font: 500 1rem/1 var(--head);
  padding: 0.8rem 1.75rem;
  border-radius: 8px;
  background: var(--accent);
  color: #fff;
  text-decoration: none;
  transition: background 0.15s;
}
.page-upload #togo:hover {
  background: #28796c;
}
.page-upload #consent {
  display: none;
  margin: 0;
  font-size: 1rem;
  line-height: 1.5;
}
.page-upload #consent label {
  display: flex;
  gap: 0.65rem;
  align-items: flex-start;
  cursor: pointer;
}
.page-upload #consent input {
  flex: none;
  width: 1.15rem;
  height: 1.15rem;
  margin: 0.2rem 0 0;
  accent-color: var(--accent);
}
.page-upload #upload:disabled {
  opacity: 0.45;
  cursor: not-allowed;
}
.page-upload #status {
  display: none;
  margin: 1.75rem 0 0;
}
.page-upload #clear {
  margin: 1.75rem 0 0;
}
.page-upload #error {
  margin-top: 1rem;
  font-size: 0.9375rem;
  color: #a8322a;
}
.page-upload #steps {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  list-style: none;
  margin: 0 0 1.75rem;
  padding: 0;
  font: 500 0.875rem/1.2 var(--head);
  color: var(--ink-dim);
  text-align: left;
}
.page-upload #steps li {
  display: flex;
  align-items: center;
  gap: 0.45rem;
}
.page-upload #steps .label {
  white-space: nowrap;
}
.page-upload #steps li + li::before {
  content: '';
  width: 1.25rem;
  height: 1px;
  background: var(--rule);
  margin-right: 0.05rem;
}
.page-upload #steps .n {
  flex: none;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 1.5rem;
  height: 1.5rem;
  border-radius: 50%;
  border: 1.5px solid var(--rule);
  font-size: 0.75rem;
}
.page-upload #steps .done {
  color: var(--ink);
}
.page-upload #steps .done .n {
  border-color: var(--accent);
  color: var(--accent);
  font-size: 0;
}
.page-upload #steps .done .n::after {
  content: '✓';
  font-size: 0.8rem;
}
.page-upload #steps .skipped .n {
  border-color: var(--rule);
  background: none;
  color: var(--ink-dim);
  font-size: 0;
}
.page-upload #steps .skipped .n::after {
  content: '–';
  font-size: 0.8rem;
}
.page-upload #steps .here {
  color: var(--ink);
  font-weight: 600;
}
.page-upload #steps .here .n {
  border-color: var(--accent);
  background: var(--accent);
  color: #fff;
}
@media (max-width: 40rem) {
  .page-upload #steps li:not(.here) .label {
    display: none;
  }
  .page-upload #steps li + li::before {
    width: 0.75rem;
  }
}
.page-upload #checking {
  display: none;
  margin-top: 0;
}
.page-upload #checking-text {
  margin-top: 0.75rem;
  font-family: var(--mono);
  font-size: 0.8125rem;
  color: var(--ink-dim);
}
.page-upload #issues {
  display: none;
  margin-top: 1.75rem;
}
.page-upload #issues h2 {
  margin: 0;
}
.page-upload #issues ol {
  margin: 0.75rem 0 0;
  padding-left: 1.25rem;
  font-size: 1rem;
  line-height: 1.5;
}
.page-upload #issues li {
  margin-top: 0.5rem;
  overflow-wrap: anywhere;
}
.page-upload #issues p {
  margin: 1rem 0 0;
  font-size: 1rem;
  line-height: 1.5;
  color: var(--ink-dim);
}
.page-upload #ignore,
.page-upload #onward {
  display: none;
}

/* Projects */
.page-projects .empty {
  border: 1px dashed var(--rule);
  border-radius: 10px;
  background: var(--bg-raise);
  padding: 1.5rem 1.25rem;
  color: var(--ink-dim);
}
.page-projects .empty a {
  color: var(--accent);
}
.page-projects .projects {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: 0.875rem;
  grid-template-columns: repeat(auto-fill, minmax(17rem, 1fr));
}
.page-projects .card {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
  padding: 1.125rem 1.25rem;
  background: var(--bg-raise);
  border-radius: 12px;
}
.page-projects .card .top {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 0.75rem;
}
.page-projects .card .name {
  font: 600 1.0625rem/1.3 var(--head);
  margin: 0;
  overflow-wrap: anywhere;
}
.page-projects .card .meta {
  margin: 0;
  font-family: var(--mono);
  font-size: 0.8125rem;
  color: var(--ink-dim);
}
.page-projects .card .act {
  margin-top: 0.25rem;
}
.page-projects .state {
  font: 500 0.7rem/1 var(--head);
  text-transform: uppercase;
  letter-spacing: 0.05em;
  padding: 0.4rem 0.5rem;
  border-radius: 5px;
  white-space: nowrap;
  flex: none;
}
.page-projects .state.uploading {
  background: var(--bg);
  color: var(--warn);
}
.page-projects .state.uploaded {
  background: var(--bg);
  color: var(--ink-dim);
}
.page-projects .state.processing {
  background: var(--bg);
  color: var(--accent);
}
.page-projects .state.ready {
  background: var(--accent);
  color: #fff;
}
.page-projects .state.failed {
  background: var(--bg);
  color: #a8322a;
}
.page-projects .state.deleted {
  background: var(--bg);
  color: var(--ink-dim);
}
.page-projects .said {
  margin: 0.5rem 0 0;
  font-size: 0.9375rem;
  white-space: pre-line;
}
.page-projects .kept {
  margin: 0.25rem 0 0;
  font-size: 0.8125rem;
  color: var(--ink-dim);
}
.page-projects .files {
  list-style: none;
  margin: 0.25rem 0 0;
  padding: 0;
  display: grid;
  gap: 0.4rem;
}
.page-projects .files li {
  display: flex;
  gap: 0.6rem;
  align-items: baseline;
  font-size: 0.9375rem;
}
.page-projects .files .kind {
  font: 500 0.7rem/1 var(--head);
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: var(--ink-dim);
  flex: none;
  width: 4.5rem;
}
.page-projects .files a {
  overflow-wrap: anywhere;
}
.page-projects .files .size {
  font-family: var(--mono);
  font-size: 0.8125rem;
  color: var(--ink-dim);
  flex: none;
  margin-left: auto;
}
.page-projects .drop {
  border: 0;
  background: none;
  padding: 0;
  cursor: pointer;
  font: 500 0.8125rem/1 var(--head);
  color: var(--ink-dim);
  text-decoration: underline;
  text-decoration-color: var(--rule);
}
.page-projects .drop:hover:not([disabled]) {
  color: #a8322a;
}
.page-projects .drop[disabled] {
  opacity: 0.5;
  cursor: default;
}
.page-projects .oops {
  margin: 0;
  font-size: 0.875rem;
  color: #a8322a;
}
.page-projects .save {
  margin-top: 0.75rem;
}
.page-projects .save-how,
.page-projects .save-state {
  margin: 0.5rem 0 0;
  font-size: 0.875rem;
  color: var(--ink-dim);
}
.page-projects .save-state:empty {
  display: none;
}
.page-projects .added {
  margin: 0.5rem 0 0;
  font-size: 0.9375rem;
}

/* Sign in */
body:has(.page-signin) main {
  padding-top: 4rem;
}
.page-signin h1 {
  margin-bottom: 2rem;
}
.page-signin .gsi {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  height: 40px;
  padding: 0 12px;
  background: #fff;
  border: 1px solid #747775;
  border-radius: 4px;
  font:
    500 14px/1 'Roboto',
    var(--head);
  color: #1f1f1f;
  text-decoration: none;
  cursor: pointer;
  transition:
    background 0.15s,
    box-shadow 0.15s,
    opacity 0.15s;
}
.page-signin .gsi:hover {
  background: #f8f9fa;
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.12);
}
.page-signin .gsi svg {
  width: 18px;
  height: 18px;
  flex: none;
}
.page-signin .next-step {
  margin: 1.25rem 0 0;
  font-size: 0.9375rem;
  color: var(--ink-dim);
}
.page-signin .next-step a {
  color: var(--ink);
}
.page-signin .notice {
  margin: -1rem 0 2rem;
}
.page-signin .dev {
  display: inline-flex;
  align-items: center;
  height: 44px;
  padding: 0 1.5rem;
  background: var(--clip-video);
  border: 0;
  border-radius: 8px;
  color: #fff;
  font: 500 0.9375rem/1 var(--head);
  cursor: pointer;
}
.page-signin .dev:hover {
  background: #28796c;
}

/* Welcome: the terms, before an account */
body:has(.page-welcome) main {
  padding-top: 4rem;
}
.page-welcome h1 {
  margin-bottom: 1rem;
}
.page-welcome .signed-as {
  margin: 0 0 2rem;
  color: var(--ink-dim);
  overflow-wrap: anywhere;
}
.page-welcome .signed-as strong {
  color: var(--ink);
  font-weight: 500;
}
.page-welcome .agree {
  display: flex;
  gap: 0.6rem;
  align-items: flex-start;
  font-size: 0.9375rem;
  color: var(--ink-dim);
  margin-bottom: 1.75rem;
  cursor: pointer;
}
.page-welcome .agree input {
  margin: 0.25rem 0 0;
  accent-color: var(--clip-video);
  width: 1rem;
  height: 1rem;
  flex: none;
  cursor: pointer;
}
.page-welcome .agree a {
  color: var(--ink);
  text-decoration: underline;
  text-decoration-color: var(--rule);
}
.page-welcome .agree a:hover {
  text-decoration-color: var(--ink);
}
.page-welcome .go {
  display: inline-flex;
  align-items: center;
  height: 44px;
  padding: 0 1.5rem;
  background: var(--clip-video);
  border: 0;
  border-radius: 8px;
  color: #fff;
  font: 500 0.9375rem/1 var(--head);
  cursor: pointer;
}
.page-welcome .go:hover:not([disabled]) {
  background: #28796c;
}
.page-welcome .go[disabled] {
  opacity: 0.4;
  cursor: default;
}
.page-welcome .other {
  margin: 1.25rem 0 0;
  font-size: 0.9375rem;
}
.page-welcome .other a {
  color: var(--ink-dim);
}

/* Admin pages */
.page-admin .admin-head {
  display: flex;
  align-items: baseline;
  flex-wrap: wrap;
  gap: 0.5rem 1.5rem;
  margin: 0 0 2rem;
}
.page-admin .admin-head h1 {
  margin: 0;
}
.page-admin .admin-head nav {
  display: flex;
  flex-wrap: wrap;
  gap: 0.25rem 1.1rem;
}
.page-admin .admin-head nav a {
  color: var(--ink-dim);
  text-decoration: none;
  font: 500 0.9375rem/1.6 var(--head);
}
.page-admin .admin-head nav a:hover {
  color: var(--ink);
}
.page-admin .admin-head nav a[aria-current='page'] {
  color: var(--ink);
  text-decoration: underline;
  text-decoration-color: var(--accent);
  text-underline-offset: 0.35em;
}
.page-admin .you {
  font-family: var(--mono);
  font-size: 0.8125rem;
  color: var(--ink-dim);
}
.page-admin .short {
  color: var(--warn);
  font-weight: 600;
}
.page-admin .state {
  font: 500 0.7rem/1 var(--head);
  text-transform: uppercase;
  letter-spacing: 0.05em;
  padding: 0.35rem 0.5rem;
  border-radius: 5px;
  white-space: nowrap;
}
.page-admin .state.uploading {
  background: var(--bg-raise);
  color: var(--warn);
}
.page-admin .state.uploaded {
  background: var(--bg-raise);
  color: var(--ink-dim);
}
.page-admin h2 {
  font: 600 1.125rem/1.3 var(--head);
  margin: 2.5rem 0 0.75rem;
}
.page-admin .scroll {
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
}
.page-admin table {
  width: 100%;
  border-collapse: collapse;
  min-width: 32rem;
}
.page-admin th {
  text-align: left;
  font: 500 0.8125rem/1 var(--head);
  color: var(--ink-dim);
  padding: 0 0.75rem 0.5rem 0;
  border-bottom: 1px solid var(--rule);
}
.page-admin td {
  padding: 0.7rem 0.75rem 0.7rem 0;
  border-bottom: 1px solid var(--rule);
  font-size: 0.9375rem;
  vertical-align: middle;
}
.page-admin td.email {
  font-family: var(--mono);
  font-size: 0.8125rem;
  word-break: break-all;
}
.page-admin td.when {
  font-family: var(--mono);
  font-size: 0.8125rem;
  color: var(--ink-dim);
  white-space: nowrap;
}
.page-admin td.act {
  text-align: right;
  white-space: nowrap;
}
.page-admin button.small {
  padding: 0.45rem 0.8rem;
  font-size: 0.8125rem;
}
.page-admin button.go {
  background: var(--accent);
  border-color: var(--accent);
  color: #fff;
}
.page-admin .none {
  color: var(--ink-dim);
  font-size: 0.9375rem;
}
.page-admin td.act form {
  display: inline;
}
.page-admin td.act form + form {
  margin-left: 0.4rem;
}
.page-admin button.danger {
  color: #a8322a;
}
.page-admin form.invite {
  display: flex;
  gap: 0.6rem;
  flex-wrap: wrap;
  margin: 0 0 1rem;
}
.page-admin form.invite input {
  flex: 1 1 16rem;
  padding: 0.6rem 0.75rem;
  font: inherit;
  font-family: var(--mono);
  font-size: 0.875rem;
  border: 1px solid var(--rule);
  border-radius: 8px;
  background: var(--bg);
  color: var(--ink);
}
.page-admin td.mono {
  font-family: var(--mono);
  font-size: 0.8125rem;
  word-break: break-word;
}
.page-admin .dim {
  color: var(--ink-dim);
}
.page-admin .age {
  font-family: var(--mono);
  font-size: 0.875rem;
  color: var(--ink-dim);
}
.page-admin .loud {
  background: #a8322a;
  color: #fff;
  border-radius: 8px;
  padding: 0.9rem 1.1rem;
  font: 600 1rem/1.4 var(--head);
  white-space: pre-wrap;
  overflow-wrap: anywhere;
}
.page-admin .state.final {
  color: var(--ink-dim);
}
.page-admin .state.job_failed,
.page-admin .state.debug_waiting,
.page-admin .state.dropped {
  background: #a8322a;
  color: #fff;
}
.page-admin .state.expired {
  color: var(--warn);
}
.page-admin .state.running {
  background: var(--bg-raise);
  color: var(--accent);
}
.page-admin .alert-message {
  font-weight: 600;
}
.page-admin .row {
  display: flex;
  gap: 0.75rem;
  flex-wrap: wrap;
  align-items: center;
}

/* Terms, Privacy and the agreements */
:where(body:has(.page-doc)) * {
  box-sizing: border-box;
  margin: 0;
}
.page-doc h1 {
  font-family: var(--head);
  font-weight: 800;
  font-size: clamp(2rem, 1.4rem + 3vw, 2.8rem);
  line-height: 1.1;
  letter-spacing: -0.02em;
  margin-top: 3rem;
}
.page-doc .updated {
  color: var(--ink-dim);
  margin-top: 0.6rem;
  font-size: 1rem;
}
.page-doc .lede {
  margin-top: 1.6rem;
}
.page-doc h2 {
  font-family: var(--head);
  font-weight: 700;
  font-size: 1.3rem;
  letter-spacing: -0.01em;
  margin-top: 2.4rem;
  padding-top: 1.4rem;
  border-top: 1px solid var(--rule);
}
.page-doc p + p,
.page-doc h2 + p,
.page-doc h2 + ul,
.page-doc p + ul,
.page-doc ul + p {
  margin-top: 0.8rem;
}
.page-doc ul {
  padding-left: 1.2rem;
}
.page-doc li + li {
  margin-top: 0.4rem;
}
.page-doc .fill {
  background: #f7e7b8;
  padding: 0 0.2em;
  border-radius: 3px;
}
:where(body:has(.page-doc)) * {
  box-sizing: border-box;
  margin: 0;
}
.page-doc h1 {
  font-family: var(--head);
  font-weight: 800;
  font-size: clamp(2rem, 1.4rem + 3vw, 2.8rem);
  line-height: 1.1;
  letter-spacing: -0.02em;
  margin-top: 3rem;
}
.page-doc .updated {
  color: var(--ink-dim);
  margin-top: 0.6rem;
  font-size: 1rem;
}
.page-doc .lede {
  margin-top: 1.6rem;
}
.page-doc .lede + .lede {
  margin-top: 0.8rem;
}
.page-doc h2 {
  font-family: var(--head);
  font-weight: 700;
  font-size: 1.3rem;
  letter-spacing: -0.01em;
  margin-top: 2.4rem;
  padding-top: 1.4rem;
  border-top: 1px solid var(--rule);
}
.page-doc h2 .no {
  font-family: var(--mono);
  font-weight: 400;
  font-size: 0.95rem;
  color: var(--ink-dim);
  margin-right: 0.6rem;
}
.page-doc h2 + p,
.page-doc p + p {
  margin-top: 0.8rem;
}
.page-doc .end {
  display: flex;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 0.4rem 1rem;
  margin-top: 2.4rem;
  padding-top: 1.4rem;
  border-top: 1px solid var(--rule);
  font-family: var(--mono);
  font-size: 0.8125rem;
  letter-spacing: 0.04em;
  color: var(--ink-dim);
}