:root {
  color-scheme: dark;
  font: 14px ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace;
  color: #d8d8dc;
  background: #08090b;
  --muted: #9b9ba3;
  --line: #34353a;
}

* {
  box-sizing: border-box;
  border-radius: 0 !important
}

body {
  margin: 0;
  min-width: 320px;
  background: #08090b
}

.topbar {
  display: flex;
  align-items: center;
  gap: 10px;
  min-height: 62px;
  padding: 8px 16px;
  background: rgb(12 13 16/.97);
  border-bottom: 1px solid #2c2e33;
  flex-wrap: wrap;
}

.sync-button {
  flex: none;
  width: 34px;
  height: 34px;
  border: 1px solid #393c42;
  background: #202126;
  color: #eee;
  font: inherit;
  font-size: 22px;
  cursor: pointer
}

.sync-dialog {
  width: min(460px, calc(100% - 28px));
  padding: 20px;
  border: 1px solid #393c42;
  background: #141519;
  color: #eee;
  font: inherit
}

.sync-dialog::backdrop {
  background: rgb(0 0 0/.72)
}

.sync-dialog h2 {
  margin: 0 0 10px;
  font-size: 17px
}

.sync-dialog p {
  color: var(--muted);
  font-size: 12px;
  line-height: 1.5
}

.sync-dialog label {
  display: block;
  margin: 18px 0 6px;
  font-size: 11px
}

.sync-dialog input {
  width: 100%;
  padding: 10px;
  border: 1px solid #393c42;
  background: #08090b;
  color: #eee;
  font: inherit;
  font-size: 12px
}

.sync-dialog-actions {
  display: flex;
  justify-content: flex-end;
  gap: 8px;
  margin-top: 16px
}

.sync-dialog-actions button {
  padding: 9px 12px;
  border: 1px solid #393c42;
  background: #202126;
  color: #eee;
  font: inherit;
  font-size: 11px;
  cursor: pointer
}

.sync-message {
  margin: 12px 0 0;
  color: #aaa;
  font-size: 12px
}

.brand {
  display: flex;
  align-items: center;
  gap: 8px;
  flex: none;
  color: inherit;
  font-size: 13px;
  font-weight: 700;
  text-decoration: none;
  white-space: nowrap
}

.brand-mark {
  display: grid;
  width: 30px;
  height: 30px;
  place-items: center;
  background: #d4d4d8;
  color: #17181b;
  font-size: 12px
}

#search-form {
  display: flex;
  flex: 1 1 300px;
  align-items: center;
  gap: 5px;
  min-width: 0;
  min-height: 42px;
  padding: 4px 5px;
  border-radius: 7px !important;
  border: 1px solid #33363c;
  background: #141519;
  color: #aaa
}

#search-form:focus-within {
  border-color: #626673;
  box-shadow: 0 0 0 2px rgb(120 125 145/.12)
}

#search-form .search-icon {
  flex: none;
  display: grid;
  width: 34px;
  height: 34px;
  place-items: center;
  border: 0;
  background: transparent;
  color: #888a94
}

#search-form .search-icon svg {
  width: 16px;
  height: 16px;
  fill: none;
  stroke: currentColor;
  stroke-linecap: round;
  stroke-width: 2
}

#search-form input[type=search] {
  flex: 1;
  width: 100%;
  min-width: 0;
  border: 0;
  outline: 0;
  background: transparent;
  color: #f4f4f5;
  font: inherit;
  font-size: 12px
}

#search-form input::placeholder {
  color: #85858d
}

#search-form input[type=hidden] {
  display: none
}

#search-form .search-button {
  height: 32px;
  padding: 0 14px;
  border: 1px solid #4a4d57;
  border-radius: 5px !important;
  background: #30323a;
  color: #e4e4e7;
  font: inherit;
  font-size: 11px;
  cursor: pointer
}

.nav-tools {
  display: flex;
  flex: none;
  align-items: center;
  gap: 6px;
}

.category-wrap {
  position: relative;
  display: flex;
  align-items: center;
  gap: 6px;
  min-height: 36px;
  padding: 0 10px;
  border: 1px solid #33363c;
  border-radius: 5px !important;
  background: #17181d;
  color: #a9abb4;
  cursor: pointer;
  transition: border-color .15s, background .15s, color .15s
}

.category-wrap:hover,
.category-wrap:focus-within {
  border-color: #5a5d68;
  background: #202127;
  color: #eee
}

.filter-label {
  font-size: 10px;
  font-weight: 650;
  letter-spacing: .02em;
  white-space: nowrap
}

.category-wrap>svg {
  flex: none;
  width: 14px;
  height: 14px;
  fill: none;
  stroke: currentColor;
  stroke-linecap: round;
  stroke-linejoin: round;
  stroke-width: 1.7;
  pointer-events: none
}

.category-wrap select {
  min-width: 0;
  max-width: 136px;
  height: 30px;
  padding: 0 15px 0 0;
  border: 0;
  outline: 0;
  background: transparent;
  color: #dedee3;
  font: inherit;
  font-size: 10px;
  appearance: none;
  cursor: pointer;
  text-overflow: ellipsis
}

.category-wrap select option {
  background: #202126;
  color: #eee;
  font: 13px ui-monospace, SFMono-Regular, Menlo, monospace
}

.category-wrap:after {
  content: "";
  position: absolute;
  right: 8px;
  width: 5px;
  height: 5px;
  border-right: 1px solid #8d8f99;
  border-bottom: 1px solid #8d8f99;
  transform: rotate(45deg) translateY(-2px);
  pointer-events: none
}

.brand-mark {
  border-radius: 6px !important
}

.sync-button {
  width: 40px;
  height: 40px;
  border-radius: 6px !important;
  background: #393b45;
  font-size: 24px;
  transition: background .15s, transform .15s
}

.sync-button:hover {
  background: #4a4d58;
  transform: translateY(-1px)
}

.topbar,
.topbar * {
  border-radius: 0 !important
}

main {
  width: min(100% - 28px, 1320px);
  margin: auto
}

.feed-heading {
  display: flex;
  align-items: end;
  justify-content: space-between;
  gap: 16px;
  padding: 25px 0 15px;
  border-bottom: 1px solid #292a30
}

.eyebrow {
  margin: 0 0 6px;
  color: #d4d4d8;
  font-size: 9px;
  font-weight: 750;
  letter-spacing: .14em
}

h1 {
  margin: 0;
  font-size: clamp(24px, 4vw, 32px);
  letter-spacing: -.045em
}

.result-count {
  margin: 0 0 4px;
  color: var(--muted);
  font-size: 12px
}

.feed {
  min-height: 1px
}

.single-feed {
  display: grid;
  justify-items: center;
  gap: 18px
}

.single-feed .clip-card {
  width: min(100%, 700px)
}

.double-feed,
.triple-feed {
  columns: 2;
  column-gap: 6px
}

.triple-feed {
  columns: 3
}

.clip-card {
  position: relative;
  display: inline-block;
  width: 100%;
  margin: 0 0 6px;
  overflow: hidden;
  break-inside: avoid;
  border: 1px solid #292a30;
  background: #111216
}

.single-feed .clip-card {
  margin: 0
}

.video-frame {
  position: relative;
  width: 100%;
  overflow: hidden;
  background: #08090b
}

.video-frame video,
.video-frame img {
  display: block;
  width: 100%;
  height: auto;
  max-height: 76svh;
  object-fit: contain;
  background: #08090b;
  touch-action: pan-y
}

.double-feed video,
.double-feed img,
.triple-feed video,
.triple-feed img {
  max-height: 62svh
}

.triple-feed img,
.double-feed img {
  max-width: 100%;
  object-fit: fill
}

.media-badge {
  position: absolute;
  z-index: 3;
  right: 8px;
  bottom: 8px;
  padding: 4px 6px;
  border: 1px solid #73747a;
  background: rgb(12 13 16/.82);
  color: #f1f1f2;
  font-size: 9px;
  font-weight: 700;
  letter-spacing: .08em;
  line-height: 1;
  pointer-events: none
}

.video-overlay {
  position: absolute;
  z-index: 2;
  inset: 0;
  opacity: 0;
  pointer-events: none;
  transition: opacity .14s
}

.controls-visible .video-overlay,
.video-frame:fullscreen .video-overlay {
  opacity: 1;
  pointer-events: auto
}

.overlay-votes {
  position: absolute;
  top: 10px;
  left: 10px;
  display: flex;
  gap: 5px
}

.vote-form {
  display: flex;
  gap: 5px
}

.overlay-button {
  display: grid;
  width: 38px;
  height: 38px;
  place-items: center;
  padding: 0;
  border: 1px solid #575960;
  background: rgb(8 9 11/.82);
  color: #f1f1f2;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent
}

.overlay-button[aria-pressed=true][data-vote=like],
.overlay-button[aria-pressed=true][data-audio] {
  color: #f4f4f5
}

.overlay-button[aria-pressed=true][data-vote=dislike] {
  color: #f0a3a3
}

.overlay-button svg {
  width: 17px;
  height: 17px;
  fill: none;
  stroke: currentColor;
  stroke-linecap: round;
  stroke-linejoin: round;
  stroke-width: 1.8
}

.fullscreen-button,
.audio-button {
  position: absolute;
  top: 10px;
  right: 10px
}

.audio-button {
  right: 56px
}

.overlay-caption {
  position: absolute;
  right: 12px;
  bottom: 12px;
  left: 12px;
  display: grid;
  gap: 4px;
  color: white;
  text-shadow: 0 1px 3px #000;
  pointer-events: none
}

.overlay-caption strong {
  display: -webkit-box;
  overflow: hidden;
  font-size: 13px;
  font-weight: 650;
  line-height: 1.3;
  text-overflow: ellipsis;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2
}

.overlay-caption span {
  color: #fffc;
  font-size: 10px
}

.overlay-votes,
.fullscreen-button,
.audio-button {
  pointer-events: none
}

.overlay-votes button,
.fullscreen-button,
.audio-button {
  pointer-events: auto
}

.video-frame:fullscreen {
  display: grid;
  width: 100vw;
  height: 100dvh;
  max-height: 100dvh;
  place-items: center;
  background: #000
}

.video-frame:fullscreen video,
.video-frame:fullscreen img {
  width: 100%;
  height: 100%;
  max-height: 100dvh;
  object-fit: contain
}

.pagination {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 18px;
  padding: 24px 10px;
  color: var(--muted);
  font-size: 12px
}

.pagination a {
  padding: 9px 13px;
  border: 1px solid var(--line);
  color: #eee;
  text-decoration: none
}

.pagination a:hover {
  border-color: #888
}

.empty-state {
  padding: 48px 18px 72px;
  color: var(--muted);
  text-align: center
}

.empty-state h2 {
  margin: 0 0 8px;
  color: #eee;
  font-size: 16px
}

.empty-state p {
  margin: 0;
  font-size: 12px
}

.speed-toast {
  position: fixed;
  z-index: 20;
  right: 14px;
  bottom: calc(18px + env(safe-area-inset-bottom));
  padding: 10px 14px;
  background: #202126;
  color: #eee;
  font-size: 13px;
  font-weight: 750;
  pointer-events: none
}

footer {
  padding: 26px 0 38px;
  color: #888;
  font-size: 10px;
  text-align: center
}

.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0
}

@media(max-width:760px) {
  .topbar {
    gap: 8px;
    padding: 8px 10px
  }

  .sync-button {
    order: 2;
    margin-left: auto
  }

  .brand {
    gap: 5px;
    font-size: 11px
  }

  .brand-mark {
    width: 24px;
    height: 24px
  }

  #search-form {
    order: 3;
    flex-basis: 100%;
    min-height: 38px;
    gap: 5px
  }

  #search-form .search-icon {
    display: grid;
    width: 28px;
    height: 28px
  }

  #search-form input[type=search] {
    font-size: 12px
  }

  #search-form .search-button {
    height: 29px;
    padding: 0 11px;
    font-size: 10px
  }

  .nav-tools {
    order: 4;
    flex: 1 1 100%;
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 6px
  }

  .category-wrap {
    width: 100%;
    flex: none;
    justify-content: flex-start;
    min-width: 0;
    min-height: 34px;
    padding: 0 8px
  }

  .category-wrap select {
    flex: 0 1 auto;
    max-width: 115px;
    font-size: 9px
  }

  .filter-label {
    font-size: 9px
  }

  .category-wrap>svg {
    width: 13px;
    height: 13px
  }

  main {
    width: 100%
  }

  .feed-heading {
    padding: 18px 10px 10px
  }

  .single-feed {
    gap: 10px
  }

  .single-feed .clip-card {
    width: 100%;
    border-right: 0;
    border-left: 0
  }

  .single-feed video,
  .single-feed img {
    max-height: 74svh
  }

  .double-feed,
  .triple-feed {
    column-gap: 4px
  }

  .double-feed .clip-card,
  .triple-feed .clip-card {
    margin-bottom: 4px
  }

  .double-feed video,
  .double-feed img,
  .triple-feed video,
  .triple-feed img {
    max-height: 48svh
  }

  .overlay-votes {
    top: 6px;
    left: 6px;
    gap: 3px
  }

  .vote-form {
    gap: 3px
  }

  .overlay-button {
    width: 32px;
    height: 32px
  }

  .overlay-button svg {
    width: 15px;
    height: 15px
  }

  .fullscreen-button {
    top: 6px;
    right: 6px
  }

  .audio-button {
    top: 6px;
    right: 44px
  }

  .overlay-caption {
    right: 7px;
    bottom: 7px;
    left: 7px;
    gap: 2px
  }

  .overlay-caption strong {
    font-size: 11px
  }

  .overlay-caption span {
    font-size: 9px
  }

  footer {
    padding-bottom: calc(26px + env(safe-area-inset-bottom))
  }
}

@media(max-width:420px) {
  .brand span:last-child {
    display: none
  }

  #search-form {
    gap: 3px;
    padding: 3px
  }

  #search-form .search-button {
    width: auto;
    padding: 0 9px;
    font-size: 9px
  }

  .nav-tools {
    overflow: visible
  }

  .category-wrap {
    flex: none;
    gap: 4px;
    min-width: 0;
    padding: 0 7px
  }

  .category-wrap select {
    flex: 1 1 auto;
    max-width: none
  }
}

@media(prefers-reduced-motion:reduce) {

  *,
  *::before,
  *::after {
    scroll-behavior: auto !important;
    transition-duration: .01ms !important
  }
}