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

html,
body {
  min-height: 100%;
  margin: 0;
  padding: 0;
}

body {
  font-family: "Rubik", sans-serif;
  color: rgba(0, 0, 0, .88);
  background: #f2f2f7;
  background-image: radial-gradient(ellipse at 25% 15%, rgba(255, 220, 220, .15) 0%, transparent 45%), radial-gradient(ellipse at 75% 85%, rgba(255, 210, 210, .1) 0%, transparent 45%);
  overflow-x: hidden;
}

.ambient {
  position: fixed;
  border-radius: 50%;
  filter: blur(80px);
  opacity: .5;
  pointer-events: none;
}

.ambient-a {
  width: 24rem;
  height: 24rem;
  left: -4rem;
  top: 3rem;
  background: rgba(255, 255, 255, .8);
}

.ambient-b {
  width: 28rem;
  height: 28rem;
  right: -7rem;
  top: 10rem;
  background: rgba(230, 240, 255, .3);
}

.ambient-c {
  width: 22rem;
  height: 22rem;
  right: 6rem;
  bottom: -2rem;
  background: rgba(240, 245, 255, .3);
}

.noise {
  position: fixed;
  inset: 0;
  pointer-events: none;
  opacity: .03;
  mix-blend-mode: soft-light;
  background-image: radial-gradient(circle at 20% 20%, rgba(255, 255, 255, .9) 0 .6px, transparent .8px), radial-gradient(circle at 80% 60%, rgba(0, 0, 0, .5) 0 .45px, transparent .7px);
  background-size: 18px 18px, 22px 22px;
}

.fx-defs {
  position: absolute;
}

.bento-outer {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  min-height: 100vh;
  padding: 60px 40px;
}
@media only screen and (max-width: 1259px) {
  .bento-outer {
    padding: 40px 24px;
  }
}
@media only screen and (max-width: 767px) {
  .bento-outer {
    padding: 32px 16px;
  }
}

.bento-header {
  text-align: center;
  margin-bottom: 48px;
  position: relative;
  z-index: 2;
}
@media only screen and (max-width: 767px) {
  .bento-header {
    margin-bottom: 32px;
  }
}
.bento-header__title {
  font-size: 32px;
  line-height: 1.25;
  font-weight: 500;
  color: rgba(0, 0, 0, .88);
  margin-bottom: 8px;
}
.bento-header__subtitle {
  font-size: 16px;
  line-height: 1.5;
  color: rgba(0, 0, 0, .55);
}

.bento-control {
  position: sticky;
  top: 24px;
  z-index: 10;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 16px;
  width: 100%;
  max-width: 560px;
  margin-bottom: 40px;
  padding: 16px;
  border-radius: 28px;
  background: linear-gradient(180deg, rgba(255, 255, 255, .32) 0%, rgba(255, 255, 255, .13) 46%, rgba(255, 255, 255, .2) 100%);
  border: 1px solid rgba(255, 255, 255, .34);
  box-shadow: 0 8px 24px rgba(0, 0, 0, .04), 0 2px 8px rgba(0, 0, 0, .03);
          backdrop-filter: blur(18px) saturate(155%);
  -webkit-backdrop-filter: blur(18px) saturate(155%);
  overflow: hidden;
}
.bento-control:before {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  pointer-events: none;
  background: linear-gradient(180deg, rgba(255, 255, 255, .34), rgba(255, 255, 255, .08) 30%, transparent 56%), radial-gradient(circle at 16% 10%, rgba(255, 255, 255, .9), transparent 22%), radial-gradient(circle at 84% 120%, rgba(106, 163, 255, .08), transparent 28%);
  mix-blend-mode: screen;
}
.bento-control:after {
  content: "";
  position: absolute;
  inset: 1px;
  border-radius: inherit;
  pointer-events: none;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .76), inset 0 14px 26px rgba(255, 255, 255, .1), inset 0 -18px 18px rgba(255, 255, 255, .06);
}
@media only screen and (max-width: 767px) {
  .bento-control {
    padding: 12px;
    gap: 12px;
    top: 16px;
    margin-bottom: 24px;
  }
}

.bento-control__search {
  position: relative;
  width: 100%;
  z-index: 2;
}

.bento-control__input {
  width: 100%;
  height: 44px;
  padding: 0 16px 0 44px;
  border: 1px solid rgba(0, 0, 0, .06);
  border-radius: 999px;
  background: rgba(0, 0, 0, .03);
  box-shadow: inset 0 2px 4px rgba(0, 0, 0, .06);
  font-family: "Rubik", sans-serif;
  font-size: 14px;
  color: rgba(0, 0, 0, .88);
  outline: none;
  box-sizing: border-box;
  transition: border-color .2s, box-shadow .2s;
}
.bento-control__input::-moz-placeholder {
  color: rgba(0, 0, 0, .35);
}
.bento-control__input::placeholder {
  color: rgba(0, 0, 0, .35);
}
.bento-control__input:focus {
  border-color: rgba(0, 0, 0, .1);
  box-shadow: inset 0 2px 4px rgba(0, 0, 0, .06), 0 0 0 3px rgba(0, 0, 0, .04);
}

.bento-control__search-icon {
  position: absolute;
  top: 50%;
  left: 14px;
  transform: translateY(-50%);
  width: 20px;
  height: 20px;
  opacity: .5;
  pointer-events: none;
  z-index: 2;
}
.bento-control__search-icon svg {
  display: block;
  width: 100%;
  height: 100%;
}

.bento-control__filters {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  justify-content: center;
  position: relative;
  z-index: 2;
}

.bento-control__filter {
  padding: 8px 14px;
  border: 1px solid rgba(0, 0, 0, .06);
  border-radius: 999px;
  background: rgba(0, 0, 0, .02);
  box-shadow: 0 1px 3px rgba(0, 0, 0, .04);
  font-family: "Rubik", sans-serif;
  font-size: 14px;
  line-height: 1.43;
  font-weight: 600;
  color: rgba(0, 0, 0, .55);
  cursor: pointer;
  transition: all .2s;
  -webkit-tap-highlight-color: transparent;
}
.bento-control__filter:hover {
  background: rgba(180, 40, 40, .05);
  border-color: rgba(180, 40, 40, .12);
  color: rgba(160, 30, 30, .7);
}
.bento-control__filter.bento--active {
  background: rgba(180, 40, 40, .07);
  border-color: rgba(180, 40, 40, .14);
  box-shadow: 0 1px 3px rgba(180, 40, 40, .08), inset 0 1px 2px rgba(180, 40, 40, .04);
  color: rgba(160, 30, 30, .75);
}

.bento-list {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 24px;
  width: 100%;
  max-width: 1120px;
  position: relative;
  z-index: 2;
}
@media only screen and (max-width: 767px) {
  .bento-list {
    flex-direction: column;
    align-items: stretch;
    gap: 16px;
  }
}
.bento-list__bento {
  position: relative;
  transition: opacity .2s, transform .2s;
}

.bento-empty {
  text-align: center;
  padding: 80px 20px;
  width: 100%;
  font-size: 16px;
  line-height: 1.5;
  color: rgba(0, 0, 0, .35);
  display: none;
}

.project-modal {
  position: fixed;
  inset: 0;
  z-index: 100;
  display: none;
  align-items: center;
  justify-content: center;
  padding: 24px;
}
.project-modal--open {
  display: flex;
}
.project-modal__backdrop {
  position: absolute;
  inset: 0;
  background: rgba(0, 0, 0, .25);
          backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
}
.project-modal__card {
  position: relative;
  width: 100%;
  max-width: 640px;
  max-height: 90vh;
  overflow-y: auto;
  border-radius: 32px;
  background: rgba(255, 255, 255, .95);
  border: 1px solid rgba(255, 255, 255, .6);
  box-shadow: 0 24px 80px rgba(0, 0, 0, .12), 0 8px 24px rgba(0, 0, 0, .08);
  padding: 16px;
  z-index: 1;
}
.project-modal__close {
  position: absolute;
  top: 20px;
  right: 20px;
  width: 36px;
  height: 36px;
  border-radius: 50%;
  border: 1px solid rgba(0, 0, 0, .06);
  background: rgba(255, 255, 255, .5);
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 10;
  transition: background .2s;
}
.project-modal__close:hover {
  background: rgba(255, 255, 255, .8);
}
.project-modal__close svg {
  width: 16px;
  height: 16px;
}
.project-modal__preview {
  position: relative;
  border-radius: 24px;
  overflow: hidden;
  background: rgba(0, 0, 0, .03);
  margin-bottom: 20px;
  z-index: 2;
}
.project-modal__preview img {
  display: block;
  width: 100%;
  height: auto;
  max-height: 420px;
  -o-object-fit: cover;
     object-fit: cover;
}
.project-modal__body {
  position: relative;
  z-index: 2;
  padding: 0 8px 8px;
}
.project-modal__category {
  display: inline-block;
  padding: 3px 10px;
  margin-bottom: 10px;
  border-radius: 20px;
  background: rgba(180, 40, 40, .08);
  font-size: 12px;
  line-height: 1.33;
  color: rgba(160, 30, 30, .65);
  text-transform: uppercase;
  letter-spacing: .5px;
}
.project-modal__title {
  font-size: 32px;
  line-height: 1.25;
  font-weight: 500;
  color: rgba(0, 0, 0, .88);
  margin-bottom: 8px;
}
.project-modal__description {
  font-size: 16px;
  line-height: 1.5;
  color: rgba(0, 0, 0, .55);
  margin-bottom: 24px;
}
.project-modal__actions {
  display: flex;
  gap: 12px;
  align-items: center;
}
.project-modal__actions a {
  text-decoration: none;
}

.bento-link--subtle {
  display: inline-flex;
  align-items: center;
  padding: 0;
  margin: 0;
  background: none;
  border: none;
  box-shadow: none;
          backdrop-filter: none;
  -webkit-backdrop-filter: none;
  font-size: 14px;
  line-height: 1.43;
  color: rgba(0, 0, 0, .35);
  text-decoration: none;
  cursor: pointer;
  transition: color .2s;
}
.bento-link--subtle:before,
.bento-link--subtle:after {
  display: none;
}
.bento-link--subtle:hover {
  color: rgba(0, 0, 0, .55);
  background: none;
  border: none;
  box-shadow: none;
  transform: none;
}

.bento {
  position: relative;
  display: flex;
  flex-direction: column;
  width: 528px;
  height: 100%;
  box-sizing: border-box;
  overflow: hidden;
  border-radius: 32px;
  text-decoration: none;
  cursor: pointer;
  isolation: isolate;
  padding: 12px;
  background: linear-gradient(180deg, rgba(255, 255, 255, .32) 0%, rgba(255, 255, 255, .13) 46%, rgba(255, 255, 255, .2) 100%);
  border: 1px solid rgba(255, 255, 255, .34);
  box-shadow: 0 8px 24px rgba(0, 0, 0, .04), 0 2px 8px rgba(0, 0, 0, .03);
          backdrop-filter: blur(18px) saturate(155%);
  -webkit-backdrop-filter: blur(18px) saturate(155%);
  transition: box-shadow 220ms ease, border-color 220ms ease, transform 220ms ease;
}
@media only screen and (max-width: 767px) {
  .bento {
    width: 100%;
    border-radius: 28px;
  }
}
.bento *,
.bento *:before,
.bento *:after {
  box-sizing: inherit;
}
.bento img {
  display: block;
}
.bento:before {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  pointer-events: none;
  background: linear-gradient(180deg, rgba(255, 255, 255, .34), rgba(255, 255, 255, .08) 30%, transparent 56%), radial-gradient(circle at 16% 10%, rgba(255, 255, 255, .9), transparent 22%), radial-gradient(circle at 84% 120%, rgba(106, 163, 255, .08), transparent 28%);
  mix-blend-mode: screen;
  z-index: 1;
}
.bento:after {
  content: "";
  position: absolute;
  inset: 1px;
  border-radius: inherit;
  pointer-events: none;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .76), inset 0 14px 26px rgba(255, 255, 255, .1), inset 0 -18px 18px rgba(255, 255, 255, .06);
  z-index: 1;
}
.bento:hover {
  box-shadow: 0 12px 32px rgba(0, 0, 0, .06), 0 4px 12px rgba(0, 0, 0, .04);
  border-color: rgba(255, 255, 255, .72);
  transform: scale(1.008);
}
.bento:hover .bento__gif {
  opacity: 1;
}
.bento:hover .bento__poster {
  opacity: 0;
}
.bento:hover .bento__shine {
  opacity: .4;
}
.bento:hover .bento__caustic {
  opacity: .3;
}
.bento:hover .bento__edge {
  opacity: .3;
}
.bento:hover .bento__refract {
  opacity: .15;
}
.bento__shine {
  position: absolute;
  inset: 0;
  pointer-events: none;
  border-radius: inherit;
  background: radial-gradient(260px circle at var(--mx, 50%) var(--my, 18%), rgba(255, 255, 255, .5), rgba(255, 255, 255, .14) 15%, rgba(255, 255, 255, .04) 28%, transparent 44%);
  mix-blend-mode: screen;
  opacity: 0;
  transform: translate3d(calc(var(--rx, 0) * 1px), calc(var(--ry, 0) * 1px), 0);
  transition: opacity .25s ease;
  z-index: 4;
}
.bento__caustic {
  position: absolute;
  inset: 0;
  pointer-events: none;
  border-radius: inherit;
  background: radial-gradient(160px 100px at calc(var(--mx, 50%) + 5%) calc(var(--my, 18%) + 10%), rgba(255, 255, 255, .12), transparent 60%), radial-gradient(120px 60px at calc(var(--mx, 50%) - 18%) calc(var(--my, 18%) - 6%), rgba(255, 255, 255, .1), transparent 58%);
  opacity: 0;
  mix-blend-mode: screen;
  filter: blur(10px);
  transition: opacity .25s ease;
  z-index: 4;
}
.bento__edge {
  position: absolute;
  inset: 0;
  pointer-events: none;
  border-radius: inherit;
  background: linear-gradient(135deg, rgba(255, 255, 255, .3), transparent 25%, transparent 72%, rgba(255, 255, 255, .12)), radial-gradient(560px circle at var(--mx, 50%) calc(var(--my, 18%) - 10%), rgba(255, 255, 255, .14), transparent 34%);
  opacity: 0;
  transition: opacity .25s ease;
  z-index: 4;
}
.bento__refract {
  position: absolute;
  inset: 6px;
  pointer-events: none;
  border-radius: calc(32px - 6px);
  opacity: 0;
  filter: url(#liquidWarp) blur(3px);
  background: linear-gradient(90deg, rgba(255, 255, 255, 0) 0%, rgba(255, 255, 255, .18) 10%, rgba(255, 255, 255, 0) 20%), linear-gradient(180deg, rgba(255, 255, 255, .16) 0%, rgba(255, 255, 255, 0) 22%, rgba(255, 255, 255, 0) 78%, rgba(255, 255, 255, .14) 100%);
          mask: linear-gradient(#000000 0 0) content-box, linear-gradient(#000000 0 0);
  -webkit-mask: linear-gradient(#000000 0 0) content-box, linear-gradient(#000000 0 0);
          mask-composite: exclude;
  -webkit-mask-composite: xor;
  padding: 5px;
  transition: opacity .25s ease;
  z-index: 4;
}
.bento__preview {
  position: relative;
  overflow: hidden;
  border-radius: 24px;
  height: 336px;
  background: linear-gradient(145deg, rgba(220, 215, 230, .45), rgba(200, 210, 225, .3) 40%, rgba(215, 205, 220, .25) 70%, rgba(225, 220, 235, .35));
  border: 1px solid rgba(255, 255, 255, .22);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .3), inset 0 -14px 18px rgba(255, 255, 255, .05);
  z-index: 2;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 20px;
}
.bento__preview:after {
  display: none;
}
.bento__window {
  position: relative;
  width: 100%;
  height: 100%;
  border-radius: 10px;
  overflow: hidden;
  background: #1e1e1e;
  box-shadow: 0 8px 32px rgba(0, 0, 0, .18), 0 2px 8px rgba(0, 0, 0, .12);
}
.bento__window-bar {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 10px 12px;
  background: linear-gradient(180deg, #3a3a3a, #2d2d2d);
  border-bottom: 1px solid rgba(0, 0, 0, .3);
}
.bento__window-dot {
  width: 10px;
  height: 10px;
  border-radius: 50%;
}
.bento__window-dot--close {
  background: #ff5f57;
  box-shadow: inset 0 -1px 1px rgba(0, 0, 0, .15);
}
.bento__window-dot--min {
  background: #ffbd2e;
  box-shadow: inset 0 -1px 1px rgba(0, 0, 0, .15);
}
.bento__window-dot--max {
  background: #28c840;
  box-shadow: inset 0 -1px 1px rgba(0, 0, 0, .15);
}
.bento__window-content {
  position: relative;
  width: 100%;
  height: calc(100% - 31px);
  overflow: hidden;
}
.bento__window-content img {
  width: 100%;
  height: 100%;
  -o-object-fit: cover;
     object-fit: cover;
  display: block;
  filter: saturate(1.08) contrast(1.04);
  transition: opacity .3s ease;
}
.bento__poster {
  position: absolute;
  top: 0;
  left: 0;
  z-index: 2;
  opacity: 1;
}
.bento__gif {
  position: absolute;
  top: 0;
  left: 0;
  z-index: 3;
  opacity: 0;
}
.bento--gif-only .bento__poster {
  opacity: 0;
}
.bento--gif-only .bento__gif {
  opacity: 1;
}
.bento__inner {
  position: relative;
  z-index: 5;
  flex-grow: 1;
  padding: 16px 8px 8px;
}
.bento__details {
  position: relative;
  z-index: 5;
  padding: 0 4px;
}
.bento__category {
  display: inline-block;
  padding: 3px 10px;
  margin-bottom: 10px;
  border-radius: 20px;
  background: rgba(180, 40, 40, .08);
  font-size: 12px;
  line-height: 1.33;
  color: rgba(160, 30, 30, .65);
  text-transform: uppercase;
  letter-spacing: .5px;
}
.bento__title {
  margin-bottom: 8px;
  font-size: 20px;
  line-height: 1.2;
  font-weight: 500;
  color: rgba(0, 0, 0, .88);
}
.bento__content {
  margin-bottom: 16px;
  font-size: 16px;
  line-height: 1.5;
  color: rgba(0, 0, 0, .55);
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.bento__actions {
  display: flex;
  gap: 10px;
  align-items: center;
}

.bento-button {
  position: relative;
  display: inline-block;
  text-decoration: none;
  margin: 0;
  padding: 12px 24px;
  overflow: hidden;
  font-family: "Rubik", sans-serif;
  font-size: 16px;
  line-height: 1.5;
  font-weight: 500;
  border-radius: 999px;
  color: rgba(160, 30, 30, .7);
  background: linear-gradient(180deg, rgba(200, 50, 50, .1), rgba(180, 40, 40, .06));
  border: 1px solid rgba(180, 40, 40, .14);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .6), inset 0 -6px 12px rgba(180, 40, 40, .04), 0 4px 12px rgba(0, 0, 0, .04);
          backdrop-filter: blur(18px) saturate(155%);
  -webkit-backdrop-filter: blur(18px) saturate(155%);
  cursor: pointer;
  transition: transform 180ms ease, box-shadow 180ms ease, border-color 180ms ease;
}
.bento-button:before {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  pointer-events: none;
  background: linear-gradient(180deg, rgba(255, 255, 255, .34), rgba(255, 255, 255, .08) 30%, transparent 56%), radial-gradient(circle at 16% 10%, rgba(255, 255, 255, .9), transparent 22%), radial-gradient(circle at 84% 120%, rgba(106, 163, 255, .08), transparent 28%);
  mix-blend-mode: screen;
}
.bento-button:after {
  content: "";
  position: absolute;
  inset: 1px;
  border-radius: inherit;
  pointer-events: none;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .76), inset 0 14px 26px rgba(255, 255, 255, .1), inset 0 -18px 18px rgba(255, 255, 255, .06);
}
.bento-button__title {
  position: relative;
  z-index: 2;
}
.bento-button:hover {
  transform: translateY(-1px);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .92), inset 0 -6px 12px rgba(255, 255, 255, .12), 0 6px 16px rgba(0, 0, 0, .05);
  border-color: rgba(255, 255, 255, .62);
}