/* Colors */

:root
{

  --primary-text:           black;
  --secondary-text:         hsl(216, 15%, 40%);
  --tertiary-text:          hsl(216, 10%, 55%);

  --body-background:        hsl(216, 25%, 88%);
  --primary-background:     white;
  --secondary-background:   hsl(216, 25%, 94%);
  --tertiary-background:    hsl(216, 40%, 88%);

  --highlight:              hsl(26, 100%, 85%);

  --shadow:                 rgba(0, 0, 0, 0.15);

  --control-hover-text:     hsl(216, 15%, 10%);
  --control-active-text:    hsl(216, 15%, 60%);
  --control-highlight-text: hsl(26, 95%, 50%);

  --button-text:            white;
  --button-default:         hsl(216, 80%, 40%);
  --button-default-active:  hsl(216, 80%, 30%);
  --button-delete:          hsl(345, 80%, 40%);
  --button-delete-active:   hsl(345, 80%, 30%);
  --button-cancel:          hsl(216, 10%, 65%);
  --button-cancel-active:   hsl(216, 10%, 55%);

  --video-background:       black;
  --audio-background:       var(--tertiary-background);
  --audio-waveform:         hsl(216, 15%, 65%);
}
:root
{
  --control-text:                 var(--secondary-text);
  --control-disabled-text:        var(--tertiary-text);
  --control-hover-background:     var(--secondary-background);
  --control-active-background:    var(--body-background);
  --control-border:               var(--control-active-text);
  --control-invalid-text:         var(--button-delete);
  --control-invalid-link-active:  var(--button-delete-active);
  --control-invalid-border:       var(--button-delete);

  --overlay-background:           hsla(216, 10%, 50%, 0.6);

  --player-control-text:          white;
  --player-control-disabled-text: hsla(216, 15%, 90%, 0.4);
  --player-control-active-text:   hsl(216, 15%, 90%);

  --player-link-text:             hsl(216, 15%, 60%);
  --player-link-hover-text:       hsl(216, 15%, 90%);
  --player-link-active-text:      hsl(216, 15%, 40%);
}

/* SVG icons */

:root
{
  --checked-icon: url(
    'data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24">\
    <path d="M9 16.2 4.8 12l-1.4 1.4L9 19 21 7l-1.4-1.4L9 16.2z"></path></svg>');
  --back-icon: url(
    'data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24">\
    <path d="M17.77 3.77 16 2 6 12l10 10 1.77-1.77L9.54 12z"></path></svg>');
}

/* Eased gradient (cubic-bezier(0, 0, 0.25, 1) on https://larsenwork.com/easing-gradients/) */

:root
{
  --player-overlay-gradient: rgba(0, 0, 0, 0.6) 0%,
                             rgba(0, 0, 0, 0.592) 0.3%,
                             rgba(0, 0, 0, 0.571) 1.4%,
                             rgba(0, 0, 0, 0.538) 3.2%,
                             rgba(0, 0, 0, 0.495) 5.8%,
                             rgba(0, 0, 0, 0.444) 9.3%,
                             rgba(0, 0, 0, 0.389) 13.6%,
                             rgba(0, 0, 0, 0.33) 18.9%,
                             rgba(0, 0, 0, 0.27) 25.1%,
                             rgba(0, 0, 0, 0.211) 32.4%,
                             rgba(0, 0, 0, 0.156) 40.7%,
                             rgba(0, 0, 0, 0.105) 50.2%,
                             rgba(0, 0, 0, 0.062) 60.8%,
                             rgba(0, 0, 0, 0.029) 72.6%,
                             rgba(0, 0, 0, 0.008) 85.7%,
                             rgba(0, 0, 0, 0) 100%;
}

/* Include padding and border in element width and height by default */

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

/* Shared base styling */

body,
html,
header,
h1, h2, h3,
p,
ul,
ol,
li,
img,
form,
fieldset,
legend,
input,
textarea,
button,
turbo-frame
{
  margin: 0;
  padding: 0;
  font-size: 100%;
  font-weight: inherit;
  border: none;
}
h1
{
  font-size: 150%;
}
h2
{
  font-size: 125%;
}
li
{
  list-style-type: none;
}
button,
input[type=text],
input[type=url],
input[type=search],
textarea,
turbo-frame,
img,
svg
{
  display: block;
}
button,
input[type=text],
input[type=url],
input[type=search],
textarea
{
  color: inherit;
  background: none;
  -webkit-appearance: none;
}
button
{
  border: none;
  -webkit-tap-highlight-color: transparent;
}
button,
label
{
  cursor: pointer
}
a
{
  color: var(--control-text);
}
a:active
{
  color: var(--control-active-text);
}

/* Make body fill viewport height */

body
{
  min-height: 100vh;
  min-height: 100dvh;
  display: flex;
  flex-direction: column;
}
body > *
{
  flex: 0 0 auto;  /* Use 1 0 auto to fill remaining height. */
}

/* Font and other rules for the body element */

body
{
  font-family: system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto,
               Oxygen-Sans, Ubuntu, Cantarell, "Helvetica Neue", sans-serif;
  line-height: 1.25;
  color: var(--primary-text);
  background: var(--body-background);
  -webkit-text-size-adjust: none;
  text-size-adjust: none;
}
pre, tt,
div.copyable
{
  font-family: ui-monospace, Menlo, Monaco, "Cascadia Mono", "Segoe UI Mono",
               "Roboto Mono", "Oxygen Mono", "Ubuntu Monospace", "Source Code Pro",
               "Fira Mono", "Droid Sans Mono", "Courier New", monospace;
  font-size: 87.5%;
}

/* Turbo progress bar color */

.turbo-progress-bar
{
  height: 2px;
  background: var(--button-default);
}

/* Actions button bar */

ul.actions
{
  display: flex;
  flex-wrap: wrap;
  margin: 1rem 0;
}
ul.actions:not(.options)
{
  gap: 0.75rem;
}
ul.actions.options,
ul.actions.secondary
{
  font-size: 75%;
}
ul.actions.options
{
  justify-content: flex-end;
}
ul.actions.secondary
{
  margin: 0.5rem 0;
}
@media (max-width: 32rem)
{
  ul.actions
  {
    align-items: stretch;
  }
  ul.actions > li
  {
    flex: 1 1 auto;
  }
}
@media (max-width: 24rem)
{
  ul.actions:not(.options) > li:not(:nth-last-child(-n+2))
  {
    flex: 1 1 100%;
  }
}
ul.actions a,
ul.actions button
{
  display: block;
  width: 100%;
  padding: 0.5rem 1rem;
  color: var(--button-text);
  background: var(--button-default);
  border: 1px solid var(--button-default);
  border-radius: 0.375rem;
  font-size: 87.5%;
  line-height: 1;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  text-align: center;
  text-decoration: none;
  line-height: 1;
  cursor: default;
  -webkit-tap-highlight-color: transparent;
  user-select: none;
  -webkit-user-select: none;
}
ul.actions button:disabled
{
  opacity: 0.25;
}
ul.actions a[href],
ul.actions button:not(:disabled)
{
  cursor: pointer;
}
ul.actions a[href]:active,
ul.actions button:not(:disabled):active
{
  color: var(--button-text);
  background: var(--button-default-active);
  border-color: var(--button-default-active);
}
ul.actions button.delete
{
  background: var(--button-delete);
  border-color: var(--button-delete);
}
ul.actions button.delete:not(:disabled):active
{
  background: var(--button-delete-active);
  border-color: var(--button-delete-active);
}
ul.actions a.cancel,
ul.actions button.cancel
{
  background: var(--button-cancel);
  border-color: var(--button-cancel);
}
ul.actions a.cancel[href]:active,
ul.actions button.cancel:not(:disabled):active
{
  background: var(--button-cancel-active);
  border-color: var(--button-cancel-active);
}
ul.actions.options li a,
ul.actions.secondary a,
ul.actions.secondary button
{
  color: var(--control-text);
  background: var(--control-hover-background);
  border-color: var(--control-border);
}
ul.actions.options li a:not([href])
{
  color: var(--control-highlight-text);
  background: inherit;
}
@media (hover: hover)
{
  ul.actions.options li a[href]:hover
  {
    color: var(--control-hover-text);
    background: var(--control-hover-background);
    border-color: var(--control-border);
  }
}
ul.actions.options li a[href]:active
{
  color: var(--control-active-text);
  background: var(--control-active-background);
  border-color: var(--control-border);
}
ul.actions.options li:not(:first-child) a
{
  border-top-left-radius: 0;
  border-bottom-left-radius: 0;
  border-left: none;
}
ul.actions.options li:not(:last-child) a
{
  border-top-right-radius: 0;
  border-bottom-right-radius: 0;
}
ul.actions.secondary a,
ul.actions.secondary button
{
  padding: 0.375rem 0.625rem;
}
ul.actions.secondary a:hover:not(:active),
ul.actions.secondary button:hover:not(:active)
{
  color: var(--button-text);
  background: var(--button-default);
  border: 1px solid var(--button-default);
}
ul.actions a > span:last-child
{
  display: none;
}
@media (max-width: 40rem)
{
  ul.actions a > span:last-child
  {
    display: block;
  }
  ul.actions a > span:first-child
  {
    display: none;
  }
}
ul.actions svg
{
  display: inline-block;
  vertical-align: bottom;
  width: 1.1875rem;
  height: 1.1875rem;
  margin: -0.25rem 0.25rem -0.125rem -0.0625rem;
}

/* Modal dialog */

dialog
{
  position: fixed;
  padding: 0;
  max-width: calc(100vw - 4rem);
  max-height: calc(100vh - 2rem);
  max-height: calc(100svh - 2rem);
  background: var(--primary-background);
  border: 1px solid var(--control-border);
  border-radius: 0.75rem;
  box-shadow: 0 0 1rem var(--shadow);
}
dialog div.body
{
  padding: 1.5rem 1.75rem;
}
dialog div.body > h1
{
  font-size: 125%;
  color: var(--secondary-text);
}
dialog div.body > h2
{
  margin: 1rem 0 0.375rem;
  color: var(--secondary-text);
  font-weight: bold;
  font-size: 87.5%;
}
dialog div.body > p
{
  max-width: 36rem;
}
dialog div.body > h1 + p,
dialog div.body > p + p,
dialog div.body > div + p
{
  margin-top: 1rem;
}
dialog div.field input[type=url]
{
  width: min(calc(100vw - 7.5rem), 36rem);
}
dialog::backdrop
{
  background-color: rgba(0, 0, 0, 0.25);
}
dialog p
{
  color: var(--primary-text);
  overflow-wrap: anywhere;
}
dialog ul.actions
{
  flex-direction: row-reverse;
  margin: -0.5rem 0 0 0;
  padding: 1.25rem 1.75rem;
  border-top: 1px solid var(--body-background);
}

/* Icon button */

button.icon
{
  padding: 0.5rem;
  color: var(--control-text);
}
button.icon:disabled
{
  color: var(--control-disabled-text);
  cursor: default;
}
@media (hover: hover)
{
  button.icon:not(:disabled):hover
  {
    color: var(--control-hover-text);
  }
}
button.icon:not(:disabled):active
{
  color: var(--control-active-text);
}
button.icon svg
{
  width: 1.5rem;
  height: 1.5rem;
}

/* Title wrapper for optional top-right drop-down menu */

div.title
{
  display: flex;
  align-items: flex-start;
  overflow-wrap: anywhere;
}
div.title div.menu
{
  flex: 0;
  margin-left: auto;
}

/* Drop-down menu */

div.menu
{
  position: relative;
}
div.menu div.anchor
{
  position: absolute;
  inset: 0.75rem;
  pointer-events: none;
}
div.menu div.container
{
  z-index: 1;
  position: absolute;
}
div.menu.open div.container
{
  width: calc(var(--container-width) - 1rem);  /* Defined inline. */
  height: calc(var(--container-height) - 1rem);  /* Defined inline. */
}
div.menu div.anchor.left div.container
{
  right: 100%;
}
div.menu div.anchor.right div.container
{
  left: 100%;
}
div.menu div.anchor.top div.container
{
  bottom: 100%;
}
div.menu div.anchor.bottom div.container
{
  top: 100%;
}
div.menu ul.items
{
  z-index: 1;
  position: absolute;
  max-height: 100%;
  max-width: 100%;
  background: var(--primary-background);
  border: 1px solid var(--control-border);
  border-radius: 0.375rem;
  box-shadow: 0 0 1rem var(--shadow);
  overflow: auto;
  transform: scale3d(1, 1, 1);
  transition: opacity 0.15s ease-in, transform 0.15s ease-in;
  pointer-events: auto;
}
div.menu ul.items::-webkit-scrollbar
{
  width: 9px;
}
div.menu ul.items::-webkit-scrollbar-corner
{
  background: purple;
  border: 0 solid orange;
  border-top-width: 10px;
  border-bottom-width: 10px;
}
div.menu ul.items::-webkit-scrollbar-thumb
{
  background-color: var(--control-border);
  background-clip: padding-box;
  border-radius: 0.5rem;
  border: 2px solid transparent;
}
div.menu ul.items::-webkit-scrollbar-button:start:decrement,
div.menu ul.items::-webkit-scrollbar-button:end:increment
{
  display: block;
  height: 1px;
  background: transparent;
}
div.menu ul.items::-webkit-scrollbar-button:start:increment,
div.menu ul.items::-webkit-scrollbar-button:end:decrement
{
  display: none;
}
div.menu div.anchor.left ul.items
{
  right: 0;
}
div.menu div.anchor.right ul.items
{
  left: 0;
}
div.menu div.anchor.top ul.items
{
  bottom: 0;
}
div.menu div.anchor.bottom ul.items
{
  top: 0;
}
div.menu div.anchor.left.top ul.items
{
  transform-origin: right bottom;
}
div.menu div.anchor.left.bottom ul.items
{
  transform-origin: right top;
}
div.menu div.anchor.right.top ul.items
{
  transform-origin: left bottom;
}
div.menu div.anchor.right.bottom ul.items
{
  transform-origin: left top;
}
div.menu:not(.open) ul.items
{
  opacity: 0;
  transform: scale3d(0.1, 0.1, 0.1);
  visibility: hidden;
  transition: none;
}
div.menu ul.items > li > a,
div.menu ul.items > li > button,
div.menu ul.items > li > label
{
  display: block;
  width: 100%;
  padding: 0.9375rem 1.25rem 0.875rem 1.25rem;
  font-size: 87.5%;
  color: var(--control-text);
  text-decoration: none;
  cursor: pointer;
  white-space: nowrap;
  text-align: left;
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
}
div.menu ul.items > li > label
{
  display: flex;
  align-items: center;
  gap: 0.5rem;
}
div.menu ul.items > li > label > input[type=radio]
{
  flex: 0 0 auto;
  -webkit-appearance: none;
  appearance: none;
  width: 1.5rem;
  height: 1.5rem;
  margin: 0 0 0 -0.5rem;
}
div.menu ul.items > li > label > input[type=radio]:checked
{
  background: var(--control-text);
  -webkit-mask: var(--checked-icon) no-repeat 50% 50%;
  mask: var(--checked-icon) no-repeat 50% 50%;
}
div.menu ul.items > li > label > input[type=radio]:focus,
div.menu ul.items > li > label > input[type=radio]:active
{
  outline: none;
}
@media (hover: hover)
{
  div.menu ul.items:not(:focus-within) > li > a:hover,
  div.menu ul.items:not(:focus-within) > li > button:hover,
  div.menu ul.items:not(:focus-within) > li > label:hover
  {
    color: var(--control-hover-text);
    background: var(--control-hover-background);
  }
  div.menu ul.items:not(:focus-within) > li > label:hover > input[type=radio]:checked
  {
    background: var(--control-hover-text);
  }
}
div.menu ul.items > li > a:focus,
div.menu ul.items > li > button:focus,
div.menu ul.items > li > label:has(input:focus)
{
  color: var(--control-hover-text);
  background: var(--control-hover-background);
  outline: none;
}
div.menu ul.items > li > label:hover > input[type=radio]:checked
{
  background: var(--control-hover-text);
}
div.menu ul.items > li > a:active,
div.menu ul.items > li > button:active,
div.menu ul.items > li > label:active
{
  color: var(--control-active-text) !important;
  background: var(--control-active-background) !important;
}
div.menu ul.items > li > label:active > input[type=radio]:checked
{
  background: var(--control-active-text);
}

/* Formatted content */

.formatted
{
  overflow-wrap: anywhere;
}
.formatted.body
{
  margin: 0.5rem 0;
  max-width: 52.5rem;
}
.formatted p,
.formatted h1,
.formatted h2,
.formatted h3,
.formatted ul,
.formatted ol,
.formatted pre,
.formatted blockquote
{
  margin: 1rem 0;
}
.formatted *:first-child
{
  margin-top: 0;
}
.formatted *:last-child
{
  margin-bottom: 0;
}
.formatted.trix-content h1,
.formatted h2,
.formatted h3
{
  font-size: 100%;
  font-weight: bold;
}
.formatted ul,
.formatted ol
{
  padding: 0 0 0 3rem;
}
.formatted ul li
{
  list-style-type: disc;
}
.formatted ol li
{
  list-style-type: decimal;
}
.formatted pre
{
  padding: 0 0 0 3rem;
  font-size: 87.5%;
  color: var(--secondary-text);
  overflow: auto;
}
.formatted blockquote
{
  padding: 0 3rem;
  color: var(--secondary-text);
}

/* License icons, used in the player and on the home masthead video */

div.license
{
  margin: 0 0 0 auto;
  padding: 0.375rem 0.5rem;
  pointer-events: auto;
}
div.license a
{
  display: flex;
  gap: 0.25rem;
  padding: 0.5rem;
}
div.license svg
{
  width: 1.25rem;
  height: 1.25rem;
}
@media (max-width: 48rem)
{
  div.license svg
  {
    width: 0.875rem;
    height: 0.875rem;
  }
}
div.license circle
{
  fill: var(--overlay-background) !important;
}
div.license path
{
  fill: var(--player-control-text);
}

/* Top banner */

div.banner
{
  display: flex;
  justify-content: space-between;
  align-items: center;
  background: black;
}
div.banner + div.banner
{
  margin-top: 1px;
}
body > div.banner:first-child
{
  padding-top: env(safe-area-inset-top);
}
div.banner > p
{
  margin: 0.75rem
          1rem
          0.75rem
          max(env(safe-area-inset-left), 1rem);
}
div.banner > form
{
  align-self: stretch;
}
div.banner > p,
div.banner > p > a[href],
div.banner > form > button
{
  color: white;
}
div.banner > p > a[href]:active,
div.banner > form > button:active
{
  color: var(--control-active-text);
}
div.banner > form > button
{
  height: 100%;
}
div.banner > form > button svg
{
  width: 1.5rem;
  height: 100%;
  margin: 0
          max(env(safe-area-inset-right), 0.75rem)
          0
          0.75rem;
}

/* Primary navigation */

nav.primary
{
  -webkit-tap-highlight-color: transparent;
  user-select: none;
  -webkit-user-select: none;
}
body > nav.primary:first-child
{
  padding-top: env(safe-area-inset-top);
}
nav.primary > ul
{
  display: flex;
}
nav.primary > ul > li
{
  display: flex;
  align-items: stretch;
  position: relative;
}
nav.primary > ul > li:first-child
{
  flex: 1 1 auto;
  min-width: 4rem;
  overflow: hidden;
}
nav.primary > ul > li:not(:first-child)
{
  flex: 0 0 auto;
}
nav.primary a
{
  display: inline-flex;
  max-width: 100%;
  padding: 0.5rem 1rem;
  color: var(--control-text);
  text-decoration: none;
  cursor: pointer;
}
nav.primary div.menu
{
  display: flex;
  align-items: stretch;
}
nav.primary button
{
  padding: 0 0.75rem;
}
nav.primary li:first-child a
{
  padding-left: max(env(safe-area-inset-left), 1rem);
}
nav.primary li:last-child a
{
  padding-right: max(env(safe-area-inset-right), 1rem);
}
@media (max-width: 48rem)
{
  nav.primary li:not(:first-child) a
  {
    padding-left: 0.75rem;
  }
  nav.primary li:not(:first-child):not(:last-child) a
  {
    padding-right: 0.75rem;
  }
}
nav.primary label input:checked + span
{
  color: var(--control-highlight-text);
}
@media (hover: hover)
{
  nav.primary a:hover,
  nav.primary label:hover
  {
    color: var(--control-hover-text);
  }
}
nav.primary a:active,
nav.primary label:active
{
  color: var(--control-active-text);
}
nav.primary svg
{
  flex: 0 0 auto;
  width: 1.5rem;
  height: 1.5rem;
}
nav.primary span
{
  display: block;
  min-height: 1.5rem;
  line-height: 1.5rem;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
nav.primary svg + span
{
  margin: 0 0 0 0.75rem;
}
@media (max-width: 48rem)
{
  nav.primary svg + span
  {
    display: none;
  }
}

/* Secondary navigation */

nav.secondary
{
  display: flex;
  align-items: flex-start;
  background: var(--primary-background);
  border-bottom: 1px solid var(--body-background);
  -webkit-tap-highlight-color: transparent;
  user-select: none;
  -webkit-user-select: none;
}
nav.secondary > div
{
  flex: 1 1 auto;
}
nav.secondary li a,
nav.secondary li button
{
  display: block;
  padding: 0.5rem 1rem;
  min-height: 1.5rem;
  line-height: 1.5rem;
  text-decoration: none;
  cursor: pointer;
}
nav.secondary a,
nav.secondary button
{
  color: var(--control-text);
}
nav.secondary > button
{
  display: none;
}
nav.secondary > div,
nav.secondary ul,
nav.secondary li
{
  display: flex;
}
nav.secondary ul + ul
{
  border-left: 1px solid var(--body-background);
}
nav.secondary li.current a,
nav.secondary li.current button
{
  color: var(--control-highlight-text);
}
@media (max-width: 48rem)
{
  nav.secondary > button
  {
    display: block;
    padding: 0.5rem 0.75rem;
  }
  nav.secondary > div,
  nav.secondary ul,
  nav.secondary li
  {
    display: block;
  }
  nav.secondary > div
  {
    overflow: hidden;
  }
  nav.secondary ul + ul
  {
    border-left: none;
  }
  nav.secondary.expanded ul + ul
  {
    border-top: 1px solid var(--body-background);
  }
  nav.secondary:not(.expanded) li:not(.current)
  {
    display: none;
  }
  nav.secondary li a,
  nav.secondary li button
  {
    padding: 0.5rem;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
  }
  nav.secondary li.current a,
  nav.secondary li.current button
  {
    color: var(--control-text);
    pointer-events: none;
  }
  nav.secondary.expanded li.current a,
  nav.secondary.expanded li.current button
  {
    color: var(--control-highlight-text);
  }
}
@media (hover: hover)
{
  nav.secondary li a:hover,
  nav.secondary button:hover
  {
    color: var(--control-hover-text);
  }
}
nav.secondary li a:active,
nav.secondary button:active
{
  color: var(--control-active-text);
}
nav.secondary svg
{
  width: 1.5rem;
  height: 1.5rem;
}

/* Shared section */

section
{
  background: var(--primary-background);
  padding: 1rem
           max(env(safe-area-inset-right), 1rem)
           1rem
           max(env(safe-area-inset-left), 1rem);
}
section > *:last-child
{
  margin-bottom: 0;
}
section p.details
{
  margin: 0.5rem 0;
  font-size: 87.5%;
}
section p.details,
section p.details a
{
  color: var(--tertiary-text);
}
section p.details + p.details
{
  margin-top: -0.5rem;
}
section p.details span
{
  white-space: nowrap;
}
section p.details span.badge
{
  display: inline-block;
  vertical-align: bottom;
  padding: 0.1875rem 0.4375rem;
  background: var(--tertiary-text);
  color: var(--primary-background);
  border-radius: 0.25rem;
  font-size: 75%;
  line-height: 1;
}
section p.details span.badge + span
{
  margin-left: 0.1875rem;
}
@media (hover: hover)
{
  section p.details a:hover
  {
    color: var(--control-hover-text);
  }
}
section p.details a:active
{
  color: var(--control-active-text);
}

/* Shared headers */

div.headers h1,
div.headers h2
{
  overflow-wrap: anywhere;
}
div.headers h1 a
{
  color: var(--control-highlight-text);
}
div.headers h1 a:active
{
  opacity: 0.8;
}
div.headers h2
{
  color: var(--secondary-text);
}
div.headers h2 a
{
  color: var(--control-text);
  text-decoration: none;
}
@media (hover: hover)
{
  div.headers h2 a:hover
  {
    text-decoration: underline;
  }
}
div.headers h2 a:active
{
  color: var(--control-active-text);
}
div.headers h2 a.back
{
  position: relative;
  display: inline-block;
  padding-left: 1.125rem;
}
div.headers h2 a.back:before
{
  content: '';
  display: block;
  position: absolute;
  inset: 0 -0.375rem;
  width: 1.375rem;
  height: 100%;
  background: var(--control-text);
  -webkit-mask: var(--back-icon) no-repeat 50% 50%;
  mask: var(--back-icon) no-repeat 50% 50%;
}
div.headers h2 a.back:active:before
{
  background: var(--control-active-text);
}

/* Page footer */

footer
{
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  padding: 0
           env(safe-area-inset-right)
           env(safe-area-inset-bottom)
           env(safe-area-inset-left);
  font-size: 87.5%;
}
footer ul
{
  display: flex;
}
footer li a
{
  display: block;
  padding: 0.5rem 0.375rem;
}
footer li:first-child a
{
  padding-left: 1rem;
}
footer li:last-child a
{
  padding-right: 1rem;
}
@media (max-width: 32rem)
{
  footer ul
  {
    flex-direction: column;
  }
  footer li a
  {
    padding: 0.0625rem 1rem;
  }
  footer li:first-child a
  {
    padding-top: 0.5rem;
  }
  footer li:last-child a
  {
    padding-bottom: 0.5rem;
  }
}
footer p
{
  padding: 0.5rem 1rem;
}
footer,
footer a[href]
{
  color: var(--control-text);
  text-decoration: none;
}
@media (hover: hover)
{
  footer a[href]:hover
  {
    color: var(--control-hover-text);
    text-decoration: underline;
  }
}
footer a[href]:active
{
  color: var(--control-active-text);
  text-decoration: underline;
}

/* Full-height message for error pages */

section.message
{
  flex: 1 0 auto;
  display: flex;
  justify-content: center;
  align-items: center;
  text-align: center;
}
section.message > div
{
  max-width: 42rem;
  padding: 1rem 0 3rem 0;
}
section.message svg
{
  height: 3.5rem;
  margin: 0 auto;
  fill: var(--secondary-text);
}
section.message svg + h1,
section.message h1 + p,
section.message p + p
{
  margin-top: 1rem;
}
section.message p
{
  color: var(--secondary-text);
}

/* Masthead */

section.masthead
{
  position: relative;
  height: max(min(50vw, 50vh), 12rem);
  padding: 1.5rem
           max(env(safe-area-inset-right), 2rem)
           1.5rem
           max(env(safe-area-inset-left), 2rem);
  overflow: hidden;
  text-shadow: 0 0 1px rgba(0, 0, 0, 0.5),
               0 0 0.5rem rgba(0, 0, 0, 0.25);
  -webkit-tap-highlight-color: transparent;
  user-select: none;
  -webkit-user-select: none;
}
@media (max-width: 48rem)
{
  section.masthead
  {
    padding: 1rem
             max(env(safe-area-inset-right), 1rem)
             1rem
             max(env(safe-area-inset-left), 1rem);
  }
}
section.masthead video
{
  position: absolute;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: 50% 25%;
  background: black;
}
section.masthead div.gradient-top,
section.masthead div.gradient-bottom
{
  position: absolute;
  left: 0;
  right: 0;
  height: min(12rem, 50%);
}
section.masthead div.gradient-top
{
  top: 0;
  background: linear-gradient(var(--player-overlay-gradient));
}
section.masthead div.gradient-bottom
{
  bottom: 0;
  background: linear-gradient(to top, var(--player-overlay-gradient));
}
section.masthead div.overlay
{
  position: relative;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  height: 100%;
  color: white;
}
section.masthead div.title,
section.masthead ul
{
  font-size: max(100%, min(min(3vw, 3vh), 200%));
}
section.masthead div.title h1,
section.masthead div.title p
{
  font-weight: bold;
  line-height: 1;
}
section.masthead div.title p
{
  margin-top: 0.125rem;
  font-size: 125%;
}
@media (max-width: 48rem)
{
  section.masthead div.title h1
  {
    font-size: 125%;
  }
  section.masthead div.title p
  {
    font-size: 100%;
    font-weight: normal;
  }
}
section.masthead ul
{
  flex: 1 0 auto;
  position: relative;
}
section.masthead ul li
{
  position: absolute;
  left: 0;
  bottom: 0;
  width: 100%;
  max-width: 24em;  /* Intentionally using em instead of rem here. */
  opacity: 0;
  transition: opacity 0.6s ease-in-out;
}
@media (max-width: 48rem)
{
  section.masthead ul li
  {
    font-size: 87.5%;
  }
}
section.masthead ul li.current
{
  opacity: 1;
}
section.masthead div.license
{
  position: absolute;
  right: -0.75rem;
  top: -0.625rem;
}
section.masthead div.controls
{
  z-index: 1;
  position: absolute;
  right: -0.75rem;
  bottom: -0.5rem;
  color: white;
}
@media (hover: hover)
{
  section.masthead:hover div.controls
  {
    transition: opacity 0.15s ease-in;
  }
  section.masthead:not(.paused):not(:hover) div.controls
  {
    opacity: 0;
    transition: opacity 0.3s ease-in;
  }
}

/* Homepage organizations grid */

section.organizations
{
  background: var(--primary-background);
  padding: 0
           max(calc(env(safe-area-inset-right) - 1.5rem), 0rem)
           0
           max(calc(env(safe-area-inset-left) - 1.5rem), 0rem);
}
section.organizations ul
{
  display: flex;
  flex-wrap: wrap;
  justify-content: space-around;
  align-items: center;
}
section.organizations li
{
  width: 50%;
}
@media (min-width: 32rem)
{
  section.organizations li
  {
    width: 33.33%;
  }
}
@media (min-width: 48rem)
{
  section.organizations li
  {
    width: 25%;
  }
}
@media (min-width: 64rem)
{
  section.organizations li
  {
    width: 20%;
  }
}
@media (min-width: 80rem)
{
  section.organizations li
  {
    width: 16.66%;
  }
}
@media (min-width: 96rem)
{
  section.organizations li
  {
    width: 14.28%;
  }
}
@media (min-width: 112rem)
{
  section.organizations li
  {
    width: 12.5%;
  }
}
@media (min-width: 128rem)
{
  section.organizations li
  {
    width: 11.11%;
  }
}
@media (min-width: 144rem)
{
  section.organizations li
  {
    width: 10%;
  }
}
section.organizations li a
{
  display: block;
  padding: 2rem;
  transform: scale(1);
}
section.organizations img
{
  width: 100%;
  transition: all 0.05s ease-in;
}
@media (hover: hover)
{
  section.organizations li a:hover img
  {
    transform: scale(1.15);
    transition: all 0.1s ease-in;
  }
}

/* Shared art */

div.art
{
  position: relative;
  background: var(--secondary-background);
}

div.art:has(img)
{
  background: black;
}
div.art:after
{
  content: '';
  position: absolute;
  left: 0;
  right: 0;
  top: 0;
  bottom: 0;
  box-shadow: inset 0 0 1px var(--shadow);
}
div.art img
{
  width: 100%;
  height: 100%;
  object-fit: contain;
}
div.art.audio div.waveform
{
  width: 100%;
  height: 100%;
  mask-size: 100% 100%;
  -webkit-mask-size: 100% 100%;
  background: var(--audio-waveform);
  background: linear-gradient(
    var(--audio-background),
    var(--audio-waveform),
    var(--audio-background)
  );
}
div.art.audio img
{
  background: var(--audio-background);
  object-fit: fill;
}

/* Channels overview */

#channels
{
  margin: 1rem 0 1.5rem 0;
}
#channels-items
{
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(min(24rem, 100%), 1fr));
  gap: 1.5rem;
}
#channels-items a
{
  display: flex;
  gap: 1rem;
  color: var(--primary-text);
  text-decoration: none;
}
#channels-items div.art
{
  flex: 0 0 5rem;
  width: 5rem;
  height: 2.8125rem;
}
#channels-items div.art.artwork
{
  height: 5rem;
}
@media (hover: hover)
{
  #channels-items a:hover h2
  {
    text-decoration: underline;
  }
}
#channels-items h2
{
  overflow-wrap: anywhere;
}
#channels-items p.details
{
  margin: 0.125rem 0 0 0;
}
#channels-items p.description
{
  margin: 0.5rem 0 0 0;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
  overflow-wrap: anywhere;
}

/* Infinite scroll pagination link and loading animation */

a.load_more
{
  display: block;
  margin: 1.5rem 0 0.5rem 0;
  padding: 0.5rem 1rem;
  color: transparent;
  background: transparent
              url("data:image/svg+xml;charset=utf-8,%3Csvg width='38' height='38' viewBox='0 0 38 38' xmlns='http://www.w3.org/2000/svg'%3E%3Cstyle%3E svg %7B --color: hsl%28216%2C 10%25%2C 55%25%29%3B %7D stop %7B stop-color: var%28--color%29%3B %7D circle %7B fill: var%28--color%29%3B %7D %3C/style%3E%3Cdefs%3E%3ClinearGradient x1='8.042%25' y1='0%25' x2='65.682%25' y2='23.865%25' id='gradient'%3E%3Cstop stop-opacity='0' offset='0%25' /%3E%3Cstop stop-opacity='.631' offset='63.146%25' /%3E%3Cstop offset='100%25' /%3E%3C/linearGradient%3E%3C/defs%3E%3Cg fill='none' fill-rule='evenodd'%3E%3Cg transform='translate%281 1%29'%3E%3Cpath d='M36 18c0-9.94-8.06-18-18-18' stroke='url%28%23gradient%29' stroke-width='2'%3E%3CanimateTransform attributeName='transform' type='rotate' from='0 18 18' to='360 18 18' dur='0.9s' repeatCount='indefinite' /%3E%3C/path%3E%3Ccircle cx='36' cy='18' r='1'%3E%3CanimateTransform attributeName='transform' type='rotate' from='0 18 18' to='360 18 18' dur='0.9s' repeatCount='indefinite' /%3E%3C/circle%3E%3C/g%3E%3C/g%3E%3C/svg%3E")
              50% 50% / auto 100%
              no-repeat;
  border: 1px solid transparent;
  border-radius: 0.375rem;
  text-align: center;
  text-decoration: none;
  cursor: default;z
}
a[href].load_more
{
  color: var(--control-text);
  background: none;
  border-color: var(--control-border);
  cursor: pointer;
}
@media (hover: hover)
{
  a[href].load_more:hover
  {
    color: var(--control-hover-text);
    background: var(--control-hover-background);
  }
}
a[href].load_more:active
{
  color: var(--control-active-text);
  background: var(--control-active-background);
}

/* Notice */

section.notice
{
  padding: 0.75rem
           max(env(safe-area-inset-right), 1rem)
           0.75rem
           max(env(safe-area-inset-left), 1rem);
  color: var(--secondary-text);
  background: var(--tertiary-background);
}
nav.secondary + section.notice
{
  margin-top: -1px;
}
section.notice p
{
  margin: 0 auto;
  max-width: 64rem;
}

/* Pending channel collaborator invitations */

section.invitations
{
  padding: 0;
}
nav.secondary + section.invitations
{
  margin-top: -1px;
}
section.invitations > div
{
  display: flex;
  padding: 0.75rem
           max(env(safe-area-inset-right), 1rem)
           0.75rem
           max(env(safe-area-inset-left), 1rem);
  color: var(--secondary-text);
  background: var(--tertiary-background);
}
section.invitations > div.accept_all
{
  background: var(--secondary-background);
}
section.invitations > div + div
{
  margin-top: 1px;
}
section.invitations p
{
  flex: 1;
  margin: 0;
}
section.invitations > div > ul.actions
{
  flex-direction: row-reverse;
  margin: 0 0 0 1rem;
}
@media (max-width: 48rem)
{
  section.invitations > div
  {
    display: block;
  }
  section.invitations > div > ul.actions
  {
    flex-direction: row;
    margin: 0.75rem 0 0 0;
  }
}

/* Channel header */

#channel header div.art
{
  float: left;
  width: 4.625rem;
  margin: 0 1rem 0.5rem 0;
}
#channel header div.formatted.body
{
  clear: both;
}
#channel header > div
{
  display: flex;
  align-items: flex-start;
}
#channel header > div > div
{
  flex: 1;
}
#channel header > div > div.art
{
  flex: 0 0 min(max(10vw, 4.625rem), 12rem);
}
@media (max-width: 48rem)
{
  #channel header > div
  {
    display: block;
  }
}

/* Videos overview */

#videos
{
  margin: 1rem 0 1.5rem 0;
}
#videos-items
{
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(min(12rem, 100%), 1fr));
  gap: 1.5rem;
}
#videos-items a
{
  display: block;
  color: var(--primary-text);
  text-decoration: none;
}
#videos-items div.art
{
  aspect-ratio: 16/9;
}
#videos-items div.art.processing
{
  background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg width='38' height='38' viewBox='0 0 38 38' xmlns='http://www.w3.org/2000/svg'%3E%3Cstyle%3E svg %7B --color: hsl%28216%2C 10%25%2C 55%25%29%3B %7D stop %7B stop-color: var%28--color%29%3B %7D circle %7B fill: var%28--color%29%3B %7D %3C/style%3E%3Cdefs%3E%3ClinearGradient x1='8.042%25' y1='0%25' x2='65.682%25' y2='23.865%25' id='gradient'%3E%3Cstop stop-opacity='0' offset='0%25' /%3E%3Cstop stop-opacity='.631' offset='63.146%25' /%3E%3Cstop offset='100%25' /%3E%3C/linearGradient%3E%3C/defs%3E%3Cg fill='none' fill-rule='evenodd'%3E%3Cg transform='translate%281 1%29'%3E%3Cpath d='M36 18c0-9.94-8.06-18-18-18' stroke='url%28%23gradient%29' stroke-width='2'%3E%3CanimateTransform attributeName='transform' type='rotate' from='0 18 18' to='360 18 18' dur='0.9s' repeatCount='indefinite' /%3E%3C/path%3E%3Ccircle cx='36' cy='18' r='1'%3E%3CanimateTransform attributeName='transform' type='rotate' from='0 18 18' to='360 18 18' dur='0.9s' repeatCount='indefinite' /%3E%3C/circle%3E%3C/g%3E%3C/g%3E%3C/svg%3E");
  background-position: 50% 50%;
  background-size: auto 33.33%;
  background-repeat: no-repeat;
}
#videos-items div.art.failed
{
  background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24'%3E%3Cg fill='hsl%28216%2C 10%25%2C 55%25%29'%3E%3Cpath d='M12 5.99 19.53 19H4.47L12 5.99M12 2 1 21h22L12 2z'/%3E%3Cpath d='M13 16h-2v2h2zM13 10h-2v5h2z'/%3E%3C/g%3E%3C/svg%3E");
  background-position: 50% 50%;
  background-size: auto 33.33%;
  background-repeat: no-repeat;
}
#videos-items div.duration
{
  position: absolute;
  right: 0.37rem;
  bottom: 0.375rem;
  padding: 0.0625rem 0.375rem;
  font-size: 75%;
  color: white;
  background: black;
  border: 1px solid black;
  box-shadow: 0 0 1px white,
              0 0 0.5rem rgba(0, 0, 0, 0.25);
}
#videos-items h2
{
  margin: 0.5rem 0 0 0;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
  overflow-wrap: anywhere;
  font-size: 100%;
}
#videos-items h2.missing
{
  font-weight: bold;
}
@media (hover: hover)
{
  #videos-items a:hover h2
  {
    text-decoration: underline;
  }
}
#videos-items p.details
{
  margin: 0.25rem 0 0 0;
}

/* Video player */

div.player
{
  position: relative;
  padding: 0 
           env(safe-area-inset-left, 0)
           0
           env(safe-area-inset-right, 0);
  background: var(--video-player-background);
  user-select: none;
  -webkit-user-select: none;
  touch-action: none;
}
div.player.embedded
{
  position: absolute;
  left: 0;
  right: 0;
  top: 0;
  bottom: 0;
}
div.player.video
{
  background: var(--video-background);
}
div.player.audio
{
  background: var(--audio-background);
}
div.player:fullscreen
{
  width: 100%;
  height: 100%;
}
div.player:-webkit-full-screen
{
  width: 100%;
  height: 100%;
}
div.player > div
{
  position: relative;
  height: 100%;  /* Needed for fullscreen. */
  pointer-events: none;  /* Use player as direct target for events outside chrome elements. */
}
div.player div.screen
{
  display: block;
}
div.player.video div.screen
{
  margin: 0 auto;
  aspect-ratio: 16/9;  /* Overridden with the video aspect ratio using inline styling. */
  min-height: 8rem;
  max-height: calc(100vh - 7.5rem);
  max-height: calc(100svh - 7.5rem);
}
div.player.video div.screen > video
{
  width: 100%;
  height: 100%;
}
div.player.video div.screen[style] > video
{
  object-fit: cover;  /* Container size matches video aspect ratio, cover fit prevents 1px gaps. */
}
div.player.embedded.video div.screen > video,
div.player.video:fullscreen div.screen > video
{
  position: absolute;  /* The div.screen container is ignored in fullscreen, and when embedded. */
  left: 0;
  top: 0;
  object-fit: contain;
}
div.player.video:-webkit-full-screen div.screen > video
{
  position: absolute;
  left: 0;
  top: 0;
  object-fit: contain;
}
div.player.video div.message
{
  width: 100%;
  height: 100%;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  text-align: center;
  font-size: 150%;
  color: white;
  pointer-events: auto;
}
div.player.video div.message a
{
  color: var(--player-link-text);
}
@media (hover: hover)
{
  div.player.video div.message a:hover
  {
    color: var(--player-link-hover-text);
  }
}
div.player.video div.message a:active
{
  color: var(--player-link-active-text);
}
div.player.audio div.screen
{
  position: relative;
  margin: 0 1rem;
  min-height: 8rem;
  height: calc(40vh);
  height: calc(40svh);
}
div.player.embedded.audio div.screen
{
  height: 100%;
}
div.player.audio div.screen div.waveform
{
  position: absolute;
  inset: 1rem 0 3.5rem 0;
  mask-size: 100% 100%;
  -webkit-mask-size: 100% 100%;
  background: var(--audio-waveform);
  background: linear-gradient(
    var(--audio-background),
    var(--audio-waveform),
    var(--audio-background)
  );
}
div.player.audio div.screen div.waveform > div
{
  position: absolute;
  inset: 0 auto 0 0;
  background: var(--control-highlight-text);
}
div.player div.overlay,
div.player div.gradient-top,
div.player div.gradient-bottom,
div.player div.progress,
div.player div.controls
{
  position: absolute;
  left: 0;
  right: 0;
}
div.player div.overlay
{
  top: 0;
  bottom: 0;
  color: var(--player-control-text);
  background: rgba(0, 0, 0, 0.05);
  transition: opacity 0.15s ease-in;
}
div.player.hiding div.overlay
{
  opacity: 0;
  transition: opacity 0.3s ease-in;
}
div.player.hidden div.overlay
{
  display: none;
}
div.player.video div.gradient-top
{
  top: 0;
  height: min(6rem, 25%);
  background: linear-gradient(var(--player-overlay-gradient));
  opacity: 0.25;
}
div.player.video:has(div.title) div.gradient-top
{
  height: max(12rem, 25%);
  opacity: 0.5; 
}
div.player div.gradient-bottom
{
  bottom: 0;
  height: min(24rem, 75%);
  background: linear-gradient(to top, var(--player-overlay-gradient));
}
div.player.audio div.gradient-bottom
{
  opacity: 0.5;
}
div.player div.details
{
  position: relative;
  display: flex;
}
div.player div.title
{
}
div.player:has(button.autoplay-unmute:not(.hidden)) div.overlay div.title
{
  margin-top: 4rem;
}
@media (max-width: 40rem), (max-height: 16rem) {
  div.player:has(button.autoplay-unmute:not(.hidden)) div.overlay div.title
  {
    display: none;
  }
}
div.player div.title a
{
  display: inline-block;
  padding: 0.5rem 1rem;
  max-width: 100%;
  color: var(--player-control-text);
  text-decoration: none;
  pointer-events: auto;
}
div.player div.title a:hover
{
  text-decoration: underline;
}
div.player div.title h1,
div.player div.title h2
{
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
  overflow: hidden;
}
div.player div.title h2
{
  -webkit-line-clamp: 1;
}
@media (max-width: 48rem), (max-height: 16rem)
{
  div.player div.title h1
  {
    font-size: 125%;
  }
  div.player div.title h2
  {
    font-size: 100%;
  }
}
div.player div.controls
{
  display: flex;
  bottom: 0;
  padding: 0 0.5rem;
}
div.player div.controls > div,
div.player div.controls div.menu
{
  display: flex;
}
div.player div.controls > div.primary
{
  flex: 0;
}
div.player div.controls > div.secondary
{
  flex: 1;
  pointer-events: auto;
}
div.controls button,
div.controls div.position
{
  display: flex;
  align-items: center;
  font-size: 87.5%;
  line-height: 1;
  text-align: left;
  font-variant-numeric: tabular-nums;
  pointer-events: auto;
  transform: scale3d(1, 1, 1);
  transition: transform 0.05s ease-out, color 0.1s ease-in-out;
}
div.controls button
{
  color: inherit !important;
}
div.controls button > div,
div.controls div.position > div
{
  margin: 0 0.5rem;
}
div.controls button:not(.position):not(:disabled):active
{
  transform: scale3d(0.9, 0.9, 0.9);
}
div.controls button:disabled
{
  color: var(--player-control-disabled-text) !important;
  cursor: default;
}
div.controls button.active
{
  color: var(--control-highlight-text) !important;
}
div.controls button:not(:disabled):active,
div.player div.title a:active
{
  color: var(--player-control-active-text) !important;
}
div.controls button.hidden
{
  display: none;
}
div.controls button svg.hidden
{
  display: none;
}
div.controls button.position,
div.controls div.position
{
  margin: 0 auto 0 0.25rem;
  transition: none;
}
@media (max-width: 40rem)
{
  div.player div.controls
  {
    top: 0;
    flex-direction: column;
  }
  div.player div.controls > div.primary
  {
    flex: 1;
    justify-content: center;
    align-items: center;
  }
  div.player div.controls > div.secondary
  {
    flex: 0;
  }
  div.player div.controls > div.primary button.back
  {
    order: -1;
  }
  div.player div.controls > div.primary button.play
  {
    margin: -1.5rem 0;
    padding: 1.5rem;
  }
  div.player div.controls > div.primary button svg
  {
    width: 3rem;
    height: 3rem;
  }
}
div.player div.progress
{
  bottom: 2.5rem;
  padding: 0 1rem;
}
div.player div.progress > div
{
  display: flex;
  flex-direction: column;
  justify-content: center;
  height: 1em;
  cursor: pointer;
  pointer-events: auto;
}
div.player div.progress > div > div
{
  position: relative;
  height: 0.25rem;
  background: var(--overlay-background);
  border-radius: 0.5rem;
  overflow: hidden;
  transition: all 0.15s ease-in;
}
@media (hover: hover)
{
  div.player div.progress:hover > div > div
  {
    height: 0.625rem;
    box-shadow: 0 0.25rem 1rem rgba(0, 0, 0, 0.5);
  }
  div.player.audio div.progress:hover > div > div
  {
    box-shadow: 0 0.125rem 0.5rem rgba(0, 0, 0, 0.125);
  }
}
body.scrubbing
{
  user-select: none;
  -webkit-user-select: none;
}
body.scrubbing div.player div.progress > div > div
{
  height: 0.625rem;
  box-shadow: 0 0.25rem 1rem rgba(0, 0, 0, 0.5);
}
body.scrubbing div.player.audio div.progress > div > div
{
  box-shadow: 0 0.125rem 0.5rem rgba(0, 0, 0, 0.125);
}
div.player div.progress > div > div > div
{
  position: absolute;
  left: 0;
  top: 0;
  bottom: 0;
  background: var(--player-control-text);
}

div.player button.autoplay-unmute
{
  position: absolute;
  left: 0;
  top: 0;
  padding: 1rem;
  pointer-events: auto;
  cursor: default;
}
div.player button.autoplay-unmute.hidden
{
  display: none;
}
div.player button.autoplay-unmute div
{
  display: inline-flex;
  gap: 0.5rem;
  align-items: center;
  width: auto;
  padding: 0.675rem;
  color: var(--control-text);
  background: var(--primary-background);
  border: 1px solid var(--control-border);
  border-radius: 0.375rem;
  white-space: nowrap;
  box-shadow: 0 0 1rem var(--shadow);
  cursor: pointer;
}
@media (hover: hover)
{
  div.player button.autoplay-unmute div:hover
  {
    color: var(--control-hover-text);
    background: var(--control-hover-background);
  }
}
div.player button.autoplay-unmute:active div
{
  color: var(--control-active-text);
  background: var(--control-active-background);
}
div.player button.autoplay-unmute div span
{
  padding-right: 0.25rem;
}
div.player button.autoplay-unmute svg
{
  width: 1.5rem;
  height: 1.5rem;
}

div.player div.indicator
{
  content: '';
  position: absolute;
  left: 50%;
  top: 50%;
  margin: -2.5rem;
  opacity: 0;
}
div.player.hidden div.indicator
{
  opacity: 1;
}
div.player div.indicator > div
{
  width: 5rem;
  height: 5rem;
  padding: 1rem;
  border-radius: 2.5rem;
  background: var(--player-control-text);
}
div.player.paused div.indicator svg.play,
div.player:not(.paused) div.indicator svg.pause
{
  display: none;
}
div.player.playing div.indicator > div
{
  animation: ease-out 0.3s 1 fade-indicator-play both;
}
@keyframes fade-indicator-play
{
  from
  {
    opacity: 1;
  }
  to
  {
    opacity: 0;
  }
}
div.player.paused div.indicator > div
{
  animation: ease-out 0.3s 1 fade-indicator-pause both;
}
@keyframes fade-indicator-pause
{
  from
  {
    opacity: 1;
  }
  to
  {
    opacity: 0;
  }
}

/* Documents on video page */

#documents
{
  margin: 1rem 0 0 0;
}
#documents > ul
{
  margin: 1rem 0;
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(min(24rem, 100%), 1fr));
  gap: 1rem 1.5rem;
}
#documents > ul > li
{
  display: flex;
}
#documents > ul > li > form.delete
{
  margin: -0.5rem -0.5rem 0 auto;
}
#documents > ul > li > a
{
  color: var(--primary-text);
  text-decoration: none;
}
#documents > ul > li > a h2
{
  font-size: 100%;
  overflow-wrap: anywhere;
}
@media (hover: hover)
{
  #documents > ul > li > a:hover h2
  {
    text-decoration: underline;
  }
}
#documents > ul > li > a p
{
  font-size: 87.5%;
  color: var(--tertiary-text);
}

/* Comments on video page */

#comments
{
  max-width: 52.5rem;
  margin: 1rem 0 0 0;
}
#comments > ul > li
{
  display: flex;
  align-items: flex-start;
  gap: 1rem;
  margin: 1rem 0;
}
#comments > ul > li > div
{
  flex: 1;
}
#comments > ul > li > form.delete
{
  margin: -0.5rem -0.5rem 0 -1rem;
}
#comments h3
{
  margin: 0 0 0.25rem 0;
  color: var(--secondary-text);
  font-size: 87.5%;
}
#comments h3 a
{
  text-decoration: none;
}
@media (hover: hover)
{
  #comments h3 a:hover
  {
    text-decoration: underline;
  }
}

/* Text tracks */

div#processing-jobs:has(p)
{
  margin: 1rem 0;
}

ul#text-tracks
{
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(min(24rem, 100%), 1fr));
  gap: 1rem 1.5rem;
}
ul#text-tracks:has(li)
{
  margin: 1.5rem 0;
}
ul#text-tracks > li
{
  display: flex;
  align-items: flex-start;
}
ul#text-tracks > li > div:first-child
{
  flex: 1 1 auto;
}
ul#text-tracks > li > div:first-child h2
{
  font-size: 100%;
}
ul#text-tracks > li > div:first-child p
{
  font-size: 87.5%;
  color: var(--tertiary-text);
}
ul#text-tracks > li > form ul
{
  margin: -0.125em 0 0 1rem;
}
ul#text-tracks > li > div.menu
{
  margin: -0.5rem 0 0 0;
}

/* Poll */

#poll ul.options
{
  margin: 1rem 0;
}
#poll ul.options li
{
  margin: 0.75rem 0;
}
#poll ul.options li p
{
  margin: 0.25rem 0;
  color: var(--secondary-text);
}
#poll ul.options li p span
{
  color: var(--tertiary-text);
}
#poll ul.options li div.bar
{
  width: 100%;
  height: 0.75rem;
  max-width: 48rem;
  background: var(--secondary-background);
  border-radius: 0.375rem;
}
#poll ul.options li div.bar > div
{
  width: max(0.75rem, var(--width));
  height: 100%;
  background: var(--button-default);
  border-radius: 0.375rem;
}
#poll p.total
{
  color: var(--tertiary-text);
}

/* Avatar photo or initials */

a.avatar
{
  flex: 0 0 auto;
  position: relative;
  width: max(2rem, min(10vw, 4rem));
  height: max(2rem, min(10vw, 4rem));
  display: block;
  border-radius: 50%;
  overflow: clip;
  text-decoration: none;
}
a.avatar:has(img)::after
{
  content: '';
  position: absolute;
  left: 0;
  right: 0;
  top: 0;
  bottom: 0;
  border-radius: 50%;
  box-shadow: inset 0 0 0.5rem var(--shadow);
}
a.avatar img
{
  width: 100%;
  height: 100%;
  object-fit: cover;
}
a.avatar span
{
  display: flex;
  justify-content: center;
  align-items: center;
  height: 100%;
  font-size: 150%;
  color: white;
  background-color: var(--color);
}

/* Copyable text */

div.copyable
{
  display: flex;
  border-radius: 0.125rem;
  background: var(--secondary-background);
}
div.copyable p
{
  align-self: center;
  padding: 0.375rem 0 0.375rem 0.875rem;
  color: var(--secondary-text);
  word-break: break-all;
}
dialog.embed div.copyable p
{
  max-width: 36rem;
}
div.copyable button
{
  margin: 0 0 0 auto;
}
div.copyable button:disabled svg.copy,
div.copyable button:not(:disabled) svg.done
{
  display: none;
}
div.copyable button:disabled svg.done
{
  color: var(--control-highlight-text);
  animation: 0.6s ease-in 1.8s 1 fade-copy-done both;
}
@keyframes fade-copy-done
{
  from
  {
    opacity: 1;
  }
  to
  {
    opacity: 0;
  }
}

/* Files */

section.file .hidden
{
  display: none;
}

/* Forms */

div.errors
{
  margin: 1rem 0;
}
fieldset
{
  margin: 0.75rem 0;
}
fieldset:first-child
{
  margin-top: 0;
}
fieldset:last-child
{
  margin-bottom: 0;
}
div.field
{
  margin: 0.375rem 0;
}
div.field label
{
  display: block;
  width: fit-content;
  color: var(--secondary-text);
}
div.field label.checkbox,
div.field label.radio
{
  display: flex;
  align-items: flex-start;
  gap: 0.5rem;
}
div.field label.checkbox > div,
div.field label.radio > div
{
  min-height: 1.25rem;  /* Matches line height. */
}
div.field label.checkbox > div:first-child,
div.field label.radio > div:first-child
{
  display: flex;
  align-items: center;
}
div.field label.checkbox > div:first-child > input,
div.field label.radio > div:first-child > input
{
  display: block;
}
div.field select
{
  margin: 0.25rem 0;
}
div.field input[type=text],
div.field input[type=url],
div.field trix-editor,
div.field input[type=search]
{
  border: 1px solid var(--control-border);
}
div.field input[type=text],
div.field input[type=url],
div.field trix-editor
{
  padding: 0.25rem 0.5rem;
  border-radius: 0.125rem;
}
div.field input[type=search]
{
  padding: 0.25rem 0.25rem 0.25rem 1rem;
  border-radius: 1rem;
}
div.field trix-editor
{
  min-height: 10rem;
}
div.field trix-editor.small
{
  min-height: 5rem;
}
div.field ::placeholder,
div.field trix-editor:empty:not(:focus)::before
{
  color: var(--tertiary-text);
}
div.invalid
{
  display: flex;
  align-items: center;
  gap: 0.25rem;
}
div.invalid,
div.invalid a
{
  color: var(--control-invalid-text);
}
div.invalid a:active
{
  color: var(--control-invalid-link-active);
}
div.invalid svg
{
  width: 1.5rem;
  height: 1.5rem;
}

/* Trix rich text editor */

trix-toolbar
{
  position: sticky;
  top: 0;
  margin: 0 -1rem;
  padding: 0 0 -0.25rem 0;
}
div.field:not(.below_top) trix-toolbar
{
  backdrop-filter: blur(0.5rem);
  -webkit-backdrop-filter: blur(0.5rem);
}
div.field:not(.below_top) trix-toolbar::before
{
  z-index: 1;
  content: '';
  position: absolute;
  left: 0;
  right: 0;
  top: 0;
  bottom: 0;
  background: var(--primary-background);
  opacity: 0.75;
}
trix-toolbar div.buttons
{
  z-index: 2;
  position: relative;
  display: flex;
  justify-content: space-between;
  padding: 0 0.5rem;
  overflow-y: auto;
}
trix-toolbar div.buttons > div
{
  display: flex;
}
@media (max-width: 32rem)
{
  trix-toolbar div.buttons button
  {
    padding: 0.25rem;
  }
}
trix-toolbar div.buttons button.icon.trix-active
{
  color: var(--control-highlight-text);
}
trix-toolbar div.dialogs
{
  visibility: hidden;
}
trix-toolbar [data-trix-dialog] [data-trix-validate]:invalid
{
  border-color: var(--control-invalid-border);
  background: inherit;
}
trix-editor [data-trix-mutable]::-moz-selection,
trix-editor [data-trix-cursor-target]::-moz-selection,
trix-editor [data-trix-mutable] ::-moz-selection
{
  background: none;
}
trix-editor [data-trix-mutable]::selection,
trix-editor [data-trix-cursor-target]::selection,
trix-editor [data-trix-mutable] ::selection
{
  background: none;
}

/* Search and results */

#search div.field input[type=search]
{
  width: 100%;
  max-width: 48rem;
  margin: 0 auto;
}
#search p.help
{
  max-width: max-content;
  margin: 1rem auto 0 auto;
}
#search p.results
{
  color: var(--tertiary-text);
  font-size: 87.5%;
  max-width: 48rem;
  margin: 0.625rem auto 0 auto;
}

#results
{
  margin: 1rem 0 1.5rem 0;
}
#results-items
{
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(min(48rem, 100%), 1fr));
  gap: 1.5rem;
}
#results-items a
{
  display: flex;
  align-items: flex-start;
  gap: 1rem;
  color: var(--primary-text);
  text-decoration: none;
}
#results-items div.art
{
  flex: 0 0 auto;
  aspect-ratio: 16/9;
  width: min(max(10vw, 3rem), 9rem);
}
#results-items div.art.artwork
{
  aspect-ratio: 1;
}
@media (hover: hover)
{
  #results-items a:hover h2
  {
    text-decoration: underline;
  }
}
#results-items em
{
  display: inline-block;
  margin: 0 -0.25rem -0.0625rem -0.25rem;
  padding: 0 0.25rem 0.0625rem 0.25rem;
  border-radius: 0.1875rem;
  background: var(--highlight);
  font-style: normal;
  mix-blend-mode: darken;
}
#results-items p.details
{
  margin: 0.125rem 0 0 0;
}
#results-items p.excerpt
{
  margin: 0.5rem 0 0 0;
  overflow-wrap: anywhere;
}

/* Recently deleted overview */

#trash p.help
{
  margin: 1rem 0 0 0;
}

#trash-entries-items
{
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(min(24rem, 100%), 1fr));
  gap: 1.5rem;
  margin: 1rem 0 1.5rem 0;
}
#trash-entries-items > div
{
  display: flex;
  gap: 1rem;
  color: var(--primary-text);
  text-decoration: none;
}
#trash-entries-items div.art
{
  flex: 0 0 5rem;
  width: 5rem;
  height: 2.8125rem;
}
#trash-entries-items div.art.artwork
{
  height: 5rem;
}
#trash-entries-items p.details
{
  margin: 0.125rem 0 0.675rem 0;
}

/* Impersonation controls for admins */

div#impersonate
{
  position: fixed;
  right: 0.5rem;
  bottom: 0.5rem;
  padding: 0.375rem;
  margin: 0 0 0 0.5rem;
  border-radius: 0.625rem;
  background: var(--overlay-background);
  color: var(--primary-text);
  backdrop-filter: blur(0.25rem);
  -webkit-backdrop-filter: blur(0.5rem);
  z-index: 9;
}
div#impersonate form
{
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 0.375rem;
}
div#impersonate span,
div#impersonate button
{
  font-size: 75%;
  line-height: 1;
}
div#impersonate span
{
  display: block;
  padding: 0.375rem 0.375rem 0.375rem 0.625rem;
}
div#impersonate button
{
  padding: 0.375rem 0.75rem;
  border-radius: 0.375rem;
  background: var(--button-default);
  color: var(--button-text);
  white-space: nowrap;
}
div#impersonate button:active
{
  background: var(--button-default-active);
}
@media (max-width: 24rem)
{
  div#impersonate form
  {
    flex-direction: column;
  }
  div#impersonate span
  {
    padding: 0.125rem;
  }
  div#impersonate button
  {
    width: 100%;
  }
}