:root {
  --page-bg: #f3f3f3;
  --frame-bg: #ffffff;
  --ink: #ffffff;
  --stage-w: min(100vw, 1080px);
  --card-w: calc(var(--stage-w) * 0.810185);
  --active-w: calc(var(--stage-w) * 0.925926);
  --feed-gap: calc(var(--stage-w) * 0.0185);
  --ease: cubic-bezier(0.22, 1, 0.36, 1);
}

* {
  box-sizing: border-box;
}

html,
body {
  width: 100%;
  min-height: 100%;
  margin: 0;
  background: var(--page-bg);
  overscroll-behavior: none;
}

body {
  color: var(--ink);
  font-family: "SF Pro Display", "SF Pro Text", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  overflow-y: auto;
  scrollbar-width: none;
  -webkit-font-smoothing: antialiased;
}

body::-webkit-scrollbar {
  display: none;
}

body.album-open {
  overflow: hidden;
}

button {
  appearance: none;
  border: 0;
  margin: 0;
  padding: 0;
  background: transparent;
  color: inherit;
  font: inherit;
}

.feed {
  width: var(--stage-w);
  min-height: 300vh;
  margin: 0 auto;
  padding: 0 0 calc(env(safe-area-inset-bottom) + var(--feed-gap));
  background: var(--frame-bg);
}

.feed-item {
  display: grid;
  place-items: center;
  width: 100%;
  padding: calc(var(--feed-gap) / 2) 0;
  contain: layout style;
  transition:
    transform 720ms var(--ease),
    opacity 420ms ease;
}

.photo-card {
  position: relative;
  display: block;
  width: var(--card-w);
  max-height: calc(var(--stage-w) * 0.925926);
  overflow: hidden;
  border-radius: 0;
  cursor: pointer;
  transform-origin: center;
  transition:
    width 560ms var(--ease),
    opacity 320ms ease;
}

.photo-card img {
  display: block;
  width: 100%;
  height: 100%;
  max-height: calc(var(--stage-w) * 0.925926);
  object-fit: cover;
  background: #d8d8d8;
}

.feed-item.is-active .photo-card {
  width: var(--active-w);
}

.feed-item.is-transition-source .photo-card {
  visibility: hidden;
}

.album-badge {
  position: absolute;
  left: calc(var(--stage-w) * 0.02778);
  bottom: calc(var(--stage-w) * 0.02685);
  display: none;
  align-items: center;
  gap: calc(var(--stage-w) * 0.0144);
  color: white;
  text-shadow: 0 calc(var(--stage-w) * 0.00317) calc(var(--stage-w) * 0.00265) rgba(0, 0, 0, 0.15);
  pointer-events: none;
}

.photo-card[data-album="true"] .album-badge {
  display: flex;
}

.album-icon {
  display: block;
  width: calc(var(--stage-w) * 0.06569);
  height: calc(var(--stage-w) * 0.07213);
  background: currentColor;
  filter: drop-shadow(0 calc(var(--stage-w) * 0.00317) calc(var(--stage-w) * 0.00265) rgba(0, 0, 0, 0.15));
  -webkit-filter: drop-shadow(0 calc(var(--stage-w) * 0.00317) calc(var(--stage-w) * 0.00265) rgba(0, 0, 0, 0.15));
  -webkit-mask: url("data:image/svg+xml,%3Csvg width='71' height='78' viewBox='0 0 71 78' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M15.2595 68.8818C12.4832 68.8818 10.4161 68.1725 9.05832 66.7539C7.72081 65.3556 7.05206 63.1568 7.05206 60.1575L16.901 51.4029C17.4279 50.9166 17.9852 50.5518 18.5729 50.3086C19.1808 50.0654 19.7888 49.9438 20.3968 49.9438C21.025 49.9438 21.6431 50.0756 22.251 50.339C22.859 50.5822 23.4366 50.947 23.9837 51.4333L28.8474 55.8106L40.9762 45.1106C41.6044 44.5634 42.2428 44.1682 42.8913 43.925C43.56 43.6616 44.249 43.5299 44.9583 43.5299C45.7081 43.5299 46.4174 43.6616 47.0862 43.925C47.7752 44.1885 48.4135 44.5938 49.0012 45.1409L63.9266 59.0936V60.4615C63.9266 63.2987 63.2478 65.4063 61.89 66.7843C60.5322 68.1826 58.4854 68.8818 55.7496 68.8818H15.2595ZM27.0235 45.7489C25.7873 45.7489 24.6626 45.4449 23.6493 44.837C22.6361 44.229 21.8255 43.4184 21.2175 42.4051C20.6298 41.3919 20.336 40.2773 20.336 39.0614C20.336 37.8454 20.6298 36.7308 21.2175 35.7176C21.8255 34.7043 22.6361 33.9038 23.6493 33.3161C24.6626 32.7082 25.7873 32.4042 27.0235 32.4042C28.2394 32.4042 29.354 32.7082 30.3673 33.3161C31.3806 33.9038 32.181 34.7043 32.7687 35.7176C33.3767 36.7308 33.6807 37.8454 33.6807 39.0614C33.6807 40.2773 33.3767 41.3919 32.7687 42.4051C32.181 43.4184 31.3806 44.229 30.3673 44.837C29.354 45.4449 28.2394 45.7489 27.0235 45.7489ZM13.5876 71.6176C10.1223 71.6176 7.4675 70.6955 5.62335 68.8514C3.77921 67.0275 2.85714 64.393 2.85714 60.9479V29.6076C2.85714 26.1625 3.77921 23.528 5.62335 21.7041C7.4675 19.86 10.1223 18.9379 13.5876 18.9379H57.3607C60.826 18.9379 63.4808 19.86 65.3249 21.7041C67.1691 23.528 68.0912 26.1625 68.0912 29.6076V60.9479C68.0912 64.393 67.1691 67.0275 65.3249 68.8514C63.4808 70.6955 60.826 71.6176 57.3607 71.6176H13.5876ZM14.4388 63.7749H56.4791C57.6951 63.7749 58.6273 63.4608 59.2758 62.8326C59.9242 62.2246 60.2485 61.2721 60.2485 59.9752V30.5803C60.2485 29.2833 59.9242 28.3309 59.2758 27.7229C58.6273 27.0947 57.6951 26.7806 56.4791 26.7806H14.4388C13.2228 26.7806 12.2906 27.0947 11.6421 27.7229C11.0139 28.3309 10.6998 29.2833 10.6998 30.5803V59.9752C10.6998 61.2721 11.0139 62.2246 11.6421 62.8326C12.2906 63.4608 13.2228 63.7749 14.4388 63.7749ZM10.0311 13.8918C10.2337 12.3517 10.7707 11.1459 11.6421 10.2745C12.5338 9.40308 13.8713 8.96738 15.6547 8.96738H55.324C57.0871 8.96738 58.4145 9.40308 59.3061 10.2745C60.1978 11.1459 60.745 12.3517 60.9476 13.8918H10.0311ZM16.1106 4.52927C16.212 3.07017 16.7085 1.95558 17.6001 1.1855C18.4918 0.395152 19.7179 0 21.2783 0H49.67C51.2304 0 52.4565 0.395152 53.3481 1.1855C54.2398 1.95558 54.7465 3.07017 54.868 4.52927H16.1106Z'/%3E%3C/svg%3E") center / contain no-repeat;
  mask: url("data:image/svg+xml,%3Csvg width='71' height='78' viewBox='0 0 71 78' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M15.2595 68.8818C12.4832 68.8818 10.4161 68.1725 9.05832 66.7539C7.72081 65.3556 7.05206 63.1568 7.05206 60.1575L16.901 51.4029C17.4279 50.9166 17.9852 50.5518 18.5729 50.3086C19.1808 50.0654 19.7888 49.9438 20.3968 49.9438C21.025 49.9438 21.6431 50.0756 22.251 50.339C22.859 50.5822 23.4366 50.947 23.9837 51.4333L28.8474 55.8106L40.9762 45.1106C41.6044 44.5634 42.2428 44.1682 42.8913 43.925C43.56 43.6616 44.249 43.5299 44.9583 43.5299C45.7081 43.5299 46.4174 43.6616 47.0862 43.925C47.7752 44.1885 48.4135 44.5938 49.0012 45.1409L63.9266 59.0936V60.4615C63.9266 63.2987 63.2478 65.4063 61.89 66.7843C60.5322 68.1826 58.4854 68.8818 55.7496 68.8818H15.2595ZM27.0235 45.7489C25.7873 45.7489 24.6626 45.4449 23.6493 44.837C22.6361 44.229 21.8255 43.4184 21.2175 42.4051C20.6298 41.3919 20.336 40.2773 20.336 39.0614C20.336 37.8454 20.6298 36.7308 21.2175 35.7176C21.8255 34.7043 22.6361 33.9038 23.6493 33.3161C24.6626 32.7082 25.7873 32.4042 27.0235 32.4042C28.2394 32.4042 29.354 32.7082 30.3673 33.3161C31.3806 33.9038 32.181 34.7043 32.7687 35.7176C33.3767 36.7308 33.6807 37.8454 33.6807 39.0614C33.6807 40.2773 33.3767 41.3919 32.7687 42.4051C32.181 43.4184 31.3806 44.229 30.3673 44.837C29.354 45.4449 28.2394 45.7489 27.0235 45.7489ZM13.5876 71.6176C10.1223 71.6176 7.4675 70.6955 5.62335 68.8514C3.77921 67.0275 2.85714 64.393 2.85714 60.9479V29.6076C2.85714 26.1625 3.77921 23.528 5.62335 21.7041C7.4675 19.86 10.1223 18.9379 13.5876 18.9379H57.3607C60.826 18.9379 63.4808 19.86 65.3249 21.7041C67.1691 23.528 68.0912 26.1625 68.0912 29.6076V60.9479C68.0912 64.393 67.1691 67.0275 65.3249 68.8514C63.4808 70.6955 60.826 71.6176 57.3607 71.6176H13.5876ZM14.4388 63.7749H56.4791C57.6951 63.7749 58.6273 63.4608 59.2758 62.8326C59.9242 62.2246 60.2485 61.2721 60.2485 59.9752V30.5803C60.2485 29.2833 59.9242 28.3309 59.2758 27.7229C58.6273 27.0947 57.6951 26.7806 56.4791 26.7806H14.4388C13.2228 26.7806 12.2906 27.0947 11.6421 27.7229C11.0139 28.3309 10.6998 29.2833 10.6998 30.5803V59.9752C10.6998 61.2721 11.0139 62.2246 11.6421 62.8326C12.2906 63.4608 13.2228 63.7749 14.4388 63.7749ZM10.0311 13.8918C10.2337 12.3517 10.7707 11.1459 11.6421 10.2745C12.5338 9.40308 13.8713 8.96738 15.6547 8.96738H55.324C57.0871 8.96738 58.4145 9.40308 59.3061 10.2745C60.1978 11.1459 60.745 12.3517 60.9476 13.8918H10.0311ZM16.1106 4.52927C16.212 3.07017 16.7085 1.95558 17.6001 1.1855C18.4918 0.395152 19.7179 0 21.2783 0H49.67C51.2304 0 52.4565 0.395152 53.3481 1.1855C54.2398 1.95558 54.7465 3.07017 54.868 4.52927H16.1106Z'/%3E%3C/svg%3E") center / contain no-repeat;
}

.album-copy {
  display: grid;
  align-content: center;
  text-align: left;
  line-height: 0.98;
}

.album-copy b,
.album-copy small {
  color: white;
  letter-spacing: 0;
}

.album-copy b {
  font-size: calc(var(--stage-w) * 0.03704);
  font-weight: 500;
  opacity: 0.62;
}

.album-copy small {
  font-size: calc(var(--stage-w) * 0.03704);
  font-weight: 600;
}

.logo-item {
  padding: calc(var(--stage-w) * 0.00926) 0;
}

.feed-logo {
  width: calc(var(--stage-w) * 0.08796);
  height: calc(var(--stage-w) * 0.08056);
  background: #000;
  -webkit-mask: url("data:image/svg+xml,%3Csvg width='95' height='87' viewBox='0 0 95 87' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M66.3223 0.044411C71.6734 -0.20654 77.8466 0.562247 82.4453 3.4754C82.722 3.65066 83.9777 4.48717 84.0462 4.71953C84.1424 5.04351 83.5534 5.56798 83.2412 5.53478C80.3805 4.14858 77.5238 3.15142 74.3403 2.81416C55.7455 0.843735 34.622 13.7723 22.8197 27.4432C16.035 35.3023 7.83915 49.0767 12.082 59.7746C15.8123 69.1766 26.7727 70.2588 35.4495 68.6508C37.5525 68.2618 42.5161 67.173 44.0999 65.8824C44.8128 65.3008 45.9249 63.7009 44.7311 63.0582C43.3054 62.5138 41.7624 62.1885 40.3446 61.6362C40.1773 61.5711 39.612 61.3666 39.5211 61.2697C39.2378 60.9683 39.9822 60.5673 40.2023 60.4943C58.2596 54.2072 76.3274 47.9069 94.5085 41.9903L94.9315 42.0142C95.0303 42.0873 95.0053 42.151 94.9618 42.2466C94.8919 42.4006 94.3319 43.0021 94.1725 43.1787C93.6415 43.7656 93.038 44.2967 92.4898 44.869C86.0241 51.6194 79.3685 58.2065 72.7908 64.8521C66.2367 71.4737 59.7472 78.187 53.0587 84.6692C52.5567 85.1565 52.0916 85.6903 51.579 86.1656C51.438 86.2971 50.7555 86.9344 50.6593 86.9649C50.4695 87.026 50.2297 87.0313 50.2732 86.7804L53.0746 77.4474C53.5212 75.5672 52.3182 75.7465 50.9992 76.1528C49.4931 76.6175 47.8922 77.4434 46.39 78.0144C36.671 81.7069 24.3798 84.1686 14.2549 80.8863C2.29969 77.0119 -1.75213 66.4321 0.671054 54.5153C3.53829 40.4196 14.8254 26.7594 25.6553 17.8831C36.5076 8.98834 52.1061 0.709631 66.3223 0.0417569V0.044411Z'/%3E%3C/svg%3E") center / contain no-repeat;
  mask: url("data:image/svg+xml,%3Csvg width='95' height='87' viewBox='0 0 95 87' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M66.3223 0.044411C71.6734 -0.20654 77.8466 0.562247 82.4453 3.4754C82.722 3.65066 83.9777 4.48717 84.0462 4.71953C84.1424 5.04351 83.5534 5.56798 83.2412 5.53478C80.3805 4.14858 77.5238 3.15142 74.3403 2.81416C55.7455 0.843735 34.622 13.7723 22.8197 27.4432C16.035 35.3023 7.83915 49.0767 12.082 59.7746C15.8123 69.1766 26.7727 70.2588 35.4495 68.6508C37.5525 68.2618 42.5161 67.173 44.0999 65.8824C44.8128 65.3008 45.9249 63.7009 44.7311 63.0582C43.3054 62.5138 41.7624 62.1885 40.3446 61.6362C40.1773 61.5711 39.612 61.3666 39.5211 61.2697C39.2378 60.9683 39.9822 60.5673 40.2023 60.4943C58.2596 54.2072 76.3274 47.9069 94.5085 41.9903L94.9315 42.0142C95.0303 42.0873 95.0053 42.151 94.9618 42.2466C94.8919 42.4006 94.3319 43.0021 94.1725 43.1787C93.6415 43.7656 93.038 44.2967 92.4898 44.869C86.0241 51.6194 79.3685 58.2065 72.7908 64.8521C66.2367 71.4737 59.7472 78.187 53.0587 84.6692C52.5567 85.1565 52.0916 85.6903 51.579 86.1656C51.438 86.2971 50.7555 86.9344 50.6593 86.9649C50.4695 87.026 50.2297 87.0313 50.2732 86.7804L53.0746 77.4474C53.5212 75.5672 52.3182 75.7465 50.9992 76.1528C49.4931 76.6175 47.8922 77.4434 46.39 78.0144C36.671 81.7069 24.3798 84.1686 14.2549 80.8863C2.29969 77.0119 -1.75213 66.4321 0.671054 54.5153C3.53829 40.4196 14.8254 26.7594 25.6553 17.8831C36.5076 8.98834 52.1061 0.709631 66.3223 0.0417569V0.044411Z'/%3E%3C/svg%3E") center / contain no-repeat;
}

.album-overlay {
  position: fixed;
  inset: 0;
  z-index: 20;
  overflow-x: hidden;
  overflow-y: auto;
  overscroll-behavior-y: contain;
  scrollbar-width: none;
  -webkit-overflow-scrolling: touch;
  background-color: rgba(243, 243, 243, 0);
  visibility: hidden;
  pointer-events: none;
  transition:
    background-color 480ms cubic-bezier(0.45, 0, 0.2, 1),
    visibility 0s linear 850ms;
}

.album-overlay::-webkit-scrollbar {
  display: none;
}

.album-overlay.is-open {
  background-color: var(--page-bg);
  visibility: visible;
  pointer-events: auto;
  transition-delay: 0s;
}

.album-overlay.is-closing {
  background-color: rgba(243, 243, 243, 0);
  pointer-events: none;
  transition:
    background-color 500ms cubic-bezier(0.45, 0, 0.2, 1) 350ms,
    visibility 0s linear 880ms;
}

.album-stack {
  width: var(--stage-w);
  min-height: 300vh;
  margin: 0 auto;
  padding-bottom: var(--feed-gap);
  background-color: rgba(255, 255, 255, 0);
  transition: background-color 480ms cubic-bezier(0.45, 0, 0.2, 1);
}

.album-photo {
  position: relative;
  width: var(--card-w);
  margin: 0 auto var(--feed-gap);
  overflow: hidden;
  border-radius: 0;
  transform-origin: center;
  transition: width 560ms var(--ease);
}

.album-photo img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.album-photo.is-active {
  z-index: 4;
  width: var(--active-w);
}

.album-logo-item {
  display: grid;
  place-items: center;
  width: 100%;
  padding: calc(var(--stage-w) * 0.00926) 0 calc(var(--feed-gap) + var(--stage-w) * 0.00926);
}

.album-overlay.is-animating .album-photo,
.album-overlay.is-animating .album-logo-item {
  transition:
    width 760ms cubic-bezier(0.45, 0, 0.2, 1),
    transform 1050ms cubic-bezier(0.45, 0, 0.2, 1),
    opacity 800ms ease-in-out;
}

.album-overlay.is-animating .album-photo:not(.is-static),
.album-overlay.is-animating .album-logo-item:not(.is-static),
.album-overlay.is-closing .album-photo:not(.is-static),
.album-overlay.is-closing .album-logo-item:not(.is-static) {
  will-change: transform, opacity;
}

.album-overlay.is-animating .is-static {
  transition: none;
}

.album-overlay.is-animating:not(.is-presented) .album-photo,
.album-overlay.is-animating:not(.is-presented) .album-logo-item {
  opacity: 0;
  transform: translateY(var(--open-shift-y, 0));
}

.album-overlay.is-animating:not(.is-presented) .is-static {
  opacity: 1;
  transform: none;
}

.album-overlay.is-animating:not(.is-presented) .album-photo.is-origin {
  opacity: 1;
  transform-origin: top left;
  transform:
    translate(var(--open-shift-x, 0), var(--open-shift-y, 0))
    scale(var(--open-scale-x, 1), var(--open-scale-y, 1));
}

.album-overlay.is-presented .album-photo,
.album-overlay.is-presented .album-logo-item {
  opacity: 1;
  transform: translate(0, 0) scale(1);
}

.album-overlay.is-presented .album-stack {
  background-color: var(--frame-bg);
}

.album-overlay.is-closing .album-stack {
  background-color: rgba(255, 255, 255, 0);
  transition: background-color 500ms cubic-bezier(0.45, 0, 0.2, 1) 350ms;
}

.album-overlay.is-closing .album-photo,
.album-overlay.is-closing .album-logo-item {
  opacity: 0;
  transform: translateY(var(--close-shift-y, 0)) scale(0.99);
  transition:
    transform 700ms cubic-bezier(0.45, 0, 0.2, 1),
    opacity 420ms ease-in-out;
}

.album-overlay.is-closing .album-photo.is-active {
  transform: scale(0.985);
  transition:
    transform 700ms cubic-bezier(0.45, 0, 0.2, 1),
    opacity 450ms ease-in-out 350ms;
}

.album-overlay.is-closing .is-static {
  transition: none;
}

.close-album {
  position: fixed;
  left: 50%;
  bottom: calc(var(--stage-w) * 0.17176 + env(safe-area-inset-bottom));
  z-index: 27;
  display: grid;
  place-items: center;
  width: calc(var(--stage-w) * 0.18519);
  height: calc(var(--stage-w) * 0.18519);
  border-radius: 50%;
  background: rgba(13, 16, 16, 0.72);
  backdrop-filter: blur(calc(var(--stage-w) * 0.02));
  -webkit-backdrop-filter: blur(calc(var(--stage-w) * 0.02));
  opacity: 0;
  transform: translate(-50%, calc(var(--stage-w) * 0.024)) scale(0.92);
  transition:
    opacity 460ms ease 700ms,
    transform 680ms cubic-bezier(0.45, 0, 0.2, 1) 700ms;
}

.album-overlay.is-presented .close-album {
  opacity: 1;
  transform: translate(-50%, 0) scale(1);
}

.album-overlay.is-closing .close-album {
  opacity: 0;
  transform: translate(-50%, calc(var(--stage-w) * 0.018)) scale(0.96);
  transition:
    opacity 300ms ease,
    transform 480ms cubic-bezier(0.45, 0, 0.2, 1);
}

.close-album-icon {
  display: block;
  width: calc(var(--stage-w) * 0.11111);
  height: calc(var(--stage-w) * 0.11111);
  color: rgba(255, 255, 255, 0.72);
}

.feed.is-album-opening .feed-item.is-above {
  transform: translateY(calc(var(--stage-w) * -0.42));
  opacity: 0;
}

.feed.is-album-opening .feed-item.is-below {
  transform: translateY(calc(var(--stage-w) * 0.42));
  opacity: 0;
}

.feed.is-album-opening .feed-item.is-active {
  opacity: 0;
  transition: opacity 260ms ease 140ms;
}