*,
*::before,
*::after {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
  -webkit-user-select: none;
  user-select: none;
  -webkit-tap-highlight-color: transparent;
}

@property --details-fade-alpha {
  syntax: "<number>";
  inherits: false;
  initial-value: 1;
}

@property --carousel-progress {
  syntax: "<number>";
  inherits: true;
  initial-value: 0;
}

input:not([readonly]),
textarea {
  -webkit-user-select: text;
  user-select: text;
}

html,
body {
  width: 100%;
  height: 100%;
  min-height: 100%;
  background-color: #2984B0;
}

:root {
  --font-family: 'Roboto Flex', sans-serif;
  --page-dots-bottom: 35px;
  --app-background: #2984B0;
  --window-radius: 45px;
  --window-padding-y: 26px;
  --window-padding-x: 26px;
  --window-divider-gap: 26px;
  --window-list-padding-right: 35px;
  --window-label-size: 18px;
  --window-label-line-height: 21px;
  --window-label-gap: 8px;
  --window-bg: rgba(255, 255, 255, 0.8);
}

html {
  font-family: var(--font-family);
  overflow: hidden;
  background: var(--app-background);
}

body {
  font-family: var(--font-family);
  -webkit-font-smoothing: antialiased;
  min-height: 100vh;
  min-height: 100lvh;
  min-height: 100dvh;
  overflow: hidden;
  background: var(--app-background);
}

body::before {
  content: '';
  position: fixed;
  z-index: -1;
  inset: -2px;
  background: var(--app-background);
  pointer-events: none;
}

button,
input,
select,
textarea {
  font-family: inherit;
}

button,
a,
[role='button'],
input,
select,
textarea {
  -webkit-tap-highlight-color: transparent;
}

button,
a,
[role='button'] {
  touch-action: manipulation;
}

/* Белые окна */
.window {
  border-radius: var(--window-radius);
  background: var(--window-bg);
  backdrop-filter: blur(38.9px);
  overflow: hidden;
}

.window:not(.window--list):not(.window-row) {
  padding: var(--window-padding-y) var(--window-padding-x);
}

.window.window--list {
  display: flex;
  flex-direction: column;
  padding: var(--window-padding-y) var(--window-list-padding-right) var(--window-padding-y)
    var(--window-padding-x);
}

button.window.window-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--window-label-gap);
  width: 100%;
  padding: var(--window-padding-y) var(--window-padding-x);
  border: none;
  background: var(--window-bg);
  backdrop-filter: blur(38.9px);
  text-align: left;
  cursor: pointer;
  font: inherit;
  color: inherit;
  -webkit-appearance: none;
  appearance: none;
}

.window__divider {
  height: 1px;
  flex-shrink: 0;
  background: rgba(0, 0, 0, 0.15);
  margin: 0;
}

.window--list > .window__divider {
  margin-block: var(--window-divider-gap);
}

.window:not(.window--list) > .window__divider {
  margin-block: var(--window-divider-gap);
}

.window-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--window-label-gap);
  width: 100%;
  padding: 0;
  border: none;
  background: transparent;
  text-align: left;
  cursor: pointer;
  font: inherit;
  color: inherit;
  -webkit-appearance: none;
  appearance: none;
}

button.window-row {
  display: flex;
}

.window-row--static {
  display: flex;
  align-items: center;
  padding: 0;
  cursor: default;
}

.window-row__label {
  display: flex;
  align-items: center;
  gap: var(--window-label-gap);
  flex: 1;
  min-width: 0;
  font-family: var(--font-family);
  font-size: var(--window-label-size);
  font-weight: 500;
  line-height: var(--window-label-line-height);
  color: #000;
}

.window-row__muted {
  color: rgba(0, 0, 0, 0.5);
}

.window-row__chevron {
  flex-shrink: 0;
}

.window-row__chevron--down {
  transform: none;
}

.icon {
  display: block;
  flex-shrink: 0;
}

.icon--22 {
  width: 22px;
  height: 22px;
}

.icon--16 {
  width: 16px;
  height: 16px;
}

.icon--17 {
  width: 17px;
  height: 17px;
}

.main-app {
  position: relative;
  width: 100%;
  max-width: 440px;
  min-height: 100vh;
  min-height: 100lvh;
  min-height: 100dvh;
  margin: 0 auto;
  overflow: hidden;
  background: var(--app-background);
}

.main-app__viewport {
  overflow: hidden;
  width: 100%;
  min-height: 100dvh;
  touch-action: pan-y;
}

.main-app__track {
  display: flex;
  min-height: 100dvh;
  transition: transform 0.45s cubic-bezier(.22,.72,.24,1);
  will-change: transform;
}

.main-app__track--profile {
  transform: translateX(-100%);
}

.main-app__page {
  flex: 0 0 100%;
  width: 100%;
  min-width: 100%;
  min-height: 100dvh;
}

@media (min-width: 768px) {
  .main-app,
  .main-app__viewport {
    overflow: visible;
  }

  .main-app__track {
    transition:
      transform 450ms cubic-bezier(.22,.72,.24,1),
      --carousel-progress 450ms cubic-bezier(.22,.72,.24,1);
  }

  #home-screen {
    opacity: calc(1 - var(--carousel-progress));
  }

  .main-app__track:not(.main-app__track--profile) #profile-screen,
  .main-app__track--profile #home-screen {
    pointer-events: none;
  }

  #profile-screen > .profile-page__header,
  #profile-screen > .profile-page__content {
    opacity: var(--carousel-progress);
  }
}

.page-dots {
  position: absolute;
  left: 50%;
  bottom: var(--page-dots-bottom);
  transform: translateX(-50%);
  z-index: 10;
  pointer-events: none;
}

.page-dots__pill {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  box-sizing: border-box;
  width: 30px;
  height: 18px;
  padding: 6px;
  border-radius: 9px;
  background: transparent;
  transition: background 0.35s ease;
}

.page-dots__pill--flip {
  transition: background 0.05s ease;
}

.page-dots__pill--on-light {
  background: rgba(0, 0, 0, 0.15);
}

.page-dots__dot {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.5);
}

.page-dots__dot--active {
  background: #fff;
}

.profile-page {
  position: relative;
  overflow: hidden;
  background: transparent;
}

.profile-page__header {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  z-index: 2;
  padding: calc(84 / 956 * 100dvh) 0 22px;
  pointer-events: none;
}

.profile-page__title {
  position: relative;
  z-index: 1;
  left: 30px;
  width: fit-content;
  margin: 0;
  font-size: clamp(24px, 7.27vw, 32px);
  font-weight: 700;
  line-height: normal;
  color: #fff;
  white-space: nowrap;
  transform-origin: left center;
  transition: transform 420ms cubic-bezier(.38, .12, .22, 1);
  will-change: transform;
}

.profile-page--scrolled .profile-page__title {
  transform: translate3d(var(--profile-title-shift, 0px), 0, 0) scale(.66);
}

.profile-page__content {
  position: absolute;
  z-index: 1;
  top: 157px;
  right: 0;
  bottom: 0;
  left: 0;
  display: flex;
  flex-direction: column;
  gap: 18px;
  padding: 2px 18px calc(var(--page-dots-bottom) + var(--page-dots-bottom));
  box-sizing: border-box;
  overflow-x: hidden;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
  overscroll-behavior: contain;
  scrollbar-width: none;
  -ms-overflow-style: none;
}

.profile-page__content::-webkit-scrollbar {
  display: none;
}

.profile-window {
  position: relative;
  box-sizing: border-box;
  border-radius: 45px;
  background: rgba(255, 255, 255, 0.8);
  backdrop-filter: blur(38.9px);
  -webkit-backdrop-filter: blur(38.9px);
  overflow: hidden;
  flex: 0 0 auto;
}

.profile-window--navigation {
  display: flex;
  flex-direction: column;
  height: 268px;
}

.profile-window__row {
  position: relative;
  touch-action: pan-y;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 5px;
  width: 100%;
  height: 134px;
  padding: 0;
  border: 0;
  background: transparent;
  font: inherit;
  text-align: center;
  cursor: pointer;
}

.profile-window__divider {
  position: absolute;
  z-index: 1;
  top: 134px;
  left: 19px;
  right: 19px;
  height: 1px;
  background: rgba(0, 0, 0, 0.15);
}

.profile-window__icon {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 22px;
  height: 22px;
  flex-shrink: 0;
}

.profile-window__icon img {
  display: block;
  width: 22px;
  height: 22px;
}


.profile-window__text {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 21px;
  font-family: var(--font-family);
  font-size: 18px;
  font-weight: 500;
  line-height: 21px;
  color: #000;
}

.profile-links {
  display: flex;
  flex-direction: column;
  flex: 0 0 auto;
}

.profile-links__divider {
  height: 1px;
  margin: 0 20px;
  background: rgba(255, 255, 255, 0.2);
}

.profile-notifications {
  display: flex;
  align-items: center;
  gap: 10px;
  flex: 0 0 auto;
  width: 100%;
  min-height: 58px;
  padding: 0 20px;
  border: 0;
  background: transparent;
  color: #fff;
  font: inherit;
  text-align: left;
  touch-action: pan-y;
  cursor: pointer;
}

.profile-notifications__icon {
  width: 22px;
  height: 22px;
  flex: 0 0 22px;
}

.profile-notifications__text {
  font-family: var(--font-family);
  font-size: 18px;
  font-weight: 500;
  line-height: 22px;
}

.profile-notifications__arrow {
  width: 16px;
  height: 16px;
  margin-left: auto;
  filter: invert(1);
}

.profile-window--support {
  display: block;
  width: 100%;
  height: 228px;
  padding: 0;
  border: 0;
  font: inherit;
  touch-action: pan-y;
  cursor: pointer;
}

.profile-support__copy {
  position: absolute;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 5px;
  top: 37px;
  left: 0;
  right: 0;
}

.profile-support__heart {
  display: block;
  width: 22px;
  height: 22px;
}

.profile-support__text {
  height: 21px;
  color: #000;
  font-family: var(--font-family);
  font-size: 18px;
  font-weight: 500;
  line-height: 21px;
  white-space: nowrap;
}

.profile-support__face {
  position: absolute;
  top: 121px;
  left: 50%;
  display: block;
  width: 160px;
  height: 160px;
  transform: translateX(-50%);
}

.profile-support__face-ring {
  position: absolute;
  inset: 0;
  box-sizing: border-box;
  border: 10px solid #2984B0;
  border-radius: 50%;
}

.profile-support__face-eye {
  position: absolute;
  top: 33px;
  width: 10px;
  height: 20.5px;
  border-radius: 999px;
  background: #2984B0;
  transform: scaleY(1);
  transform-origin: center;
  transition: transform 70ms cubic-bezier(.3,0,.7,1);
  will-change: transform;
  backface-visibility: hidden;
}

.profile-support__face-eye--left {
  left: 56px;
}

.profile-support__face-eye--right {
  left: 93px;
}

.profile-support__face--blinking .profile-support__face-eye {
  transform: scaleY(.1364);
}

.profile-support__face-mouth {
  position: absolute;
  top: 59px;
  left: 49px;
  display: block;
  width: 62px;
  height: 38px;
  color: #2984B0;
}

.profile-support__face-mouth svg {
  display: block;
  width: 100%;
  height: 100%;
  overflow: visible;
}

.profile-support__face-mouth path {
  fill: none;
  stroke: currentColor;
  stroke-width: 10px;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.profile-page__fade {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: 149px;
  background: linear-gradient(180deg, rgba(41, 132, 176, 0) 0%, #2984B0 100%);
  backdrop-filter: blur(11.5px);
  pointer-events: none;
}

#profile-screen {
  transform: scale(1);
  transform-origin: center;
  opacity: 1;
  backface-visibility: hidden;
  will-change: transform, opacity;
  transition:
    transform 330ms cubic-bezier(.2,.28,.58,.72),
    opacity 315ms cubic-bezier(.2,.28,.58,.72);
}

.main-app--subscreen-open #profile-screen {
  transform: scale(.9);
  opacity: .5;
}

.my-lenses-screen {
  position: fixed;
  inset: 0;
  z-index: 70;
  width: 100%;
  max-width: 440px;
  min-height: 100dvh;
  margin: 0 auto;
  overflow: hidden;
  color: #fff;
  background: var(--app-background);
  box-shadow: -12px 0 36px rgba(17,64,87,.2);
  animation: my-lenses-screen-in 350ms cubic-bezier(.2,.52,.24,1) both;
  touch-action: pan-y;
  will-change: transform;
}

.my-lenses-screen[hidden] {
  display: none;
}

.my-lenses-screen__header {
  position: absolute;
  inset: 0 0 auto;
  height: 135px;
}

.my-lenses-screen__header h1 {
  position: absolute;
  top: 87px;
  left: 50%;
  margin: 0;
  transform: translateX(-50%);
  font-size: 18px;
  font-weight: 600;
  line-height: normal;
  white-space: nowrap;
}

.my-lenses-screen__back {
  position: absolute;
  top: 72px;
  left: 18px;
  display: grid;
  place-items: center;
  width: 50px;
  height: 50px;
  padding: 0;
  border: 1px solid rgba(255,255,255,.05);
  border-radius: 50%;
  background: rgba(255,255,255,.1);
  cursor: pointer;
}

.my-lenses-screen__back img {
  width: 22px;
  height: 22px;
}

.my-lenses-screen__content {
  position: absolute;
  top: 153px;
  left: 0;
  right: 0;
  bottom: 0;
  box-sizing: border-box;
  padding: 0 18px calc(32px + env(safe-area-inset-bottom, 0px));
  scroll-padding-bottom: calc(32px + env(safe-area-inset-bottom, 0px));
  overflow-y: auto;
  overflow-x: hidden;
  overflow-anchor: none;
  scrollbar-width: none;
}

.my-lenses-screen__content::-webkit-scrollbar { display: none; }
.my-lenses-list { display:flex; flex-direction:column; gap:18px; }
.my-lenses-card-shell { position:relative; height:150px; border-radius:45px; overflow:visible; background:transparent; }
.my-lenses-card-shell .my-lenses-card { position:relative; z-index:2; transition:transform 320ms cubic-bezier(.2,.7,.2,1); touch-action:pan-y; will-change:transform; }
.my-lenses-card-shell--open .my-lenses-card { transform:translateX(-143px); }
.my-lenses-card__delete { position:absolute; z-index:1; top:0; right:0; width:131px; height:150px; padding:0; border:0; border-radius:45px; background:rgba(255,255,255,.8); color:transparent; font:600 18px var(--font-family); cursor:pointer; pointer-events:none; opacity:0; transform-origin:center; will-change:opacity; }
.my-lenses-card-shell--open .my-lenses-card__delete { pointer-events:auto; opacity:1; }
.my-lenses-card__delete-label { position:absolute; inset:0; display:grid; place-items:center; color:#000; font:600 18px var(--font-family); opacity:0; pointer-events:none; transition:opacity 240ms linear; }
.my-lenses-card-shell--open .my-lenses-card__delete-label { opacity:1; }
.my-lenses-card__delete:active { transform:scale(.96); transition-duration:110ms; }
.my-lenses-card-shell--adding { overflow:hidden; animation:my-lenses-card-add-flow 400ms cubic-bezier(.22,.72,.24,1) both; }
.my-lenses-card-shell--adding .my-lenses-card { animation:my-lenses-card-add 400ms cubic-bezier(.22,.72,.24,1) both; }
.my-lenses-card-shell--adding .my-lenses-card__heading,
.my-lenses-card-shell--adding .my-lenses-stepper { animation:my-lenses-card-content-add 400ms ease both; }
.my-lenses-card-shell--adding .my-lenses-card__delete { visibility:hidden; }
.my-lenses-card-shell--deleting { pointer-events:none; animation:my-lenses-card-delete 300ms cubic-bezier(.4,0,.2,1) both; }
@keyframes my-lenses-card-add-flow {
  from { height:0; margin-bottom:-18px; }
  to { height:150px; margin-bottom:0; }
}
@keyframes my-lenses-card-add {
  from { opacity:0; transform:translate3d(0,-12px,0); }
  to { opacity:1; transform:translate3d(0,0,0); }
}
@keyframes my-lenses-card-content-add {
  from { opacity:0; }
  to { opacity:1; }
}
@keyframes my-lenses-card-delete {
  from { height:150px; margin-bottom:0; opacity:1; transform:translate3d(0,0,0); }
  to { height:0; margin-bottom:-18px; opacity:0; transform:translate3d(0,-10px,0); }
}
.my-lenses-card {
  position: relative;
  width: 100%;
  height: 150px;
  box-sizing: border-box;
  padding: 26px 19px 19px;
  border-radius: 45px;
  background: rgba(255,255,255,.8);
  color: #000;
  -webkit-backdrop-filter: blur(38.9px);
  backdrop-filter: blur(38.9px);
}

.my-lenses-card__heading {
  display: flex;
  align-items: center;
  justify-content: space-between;
  height: 26px;
  padding: 0 10px 0 7px;
}

.my-lenses-card__heading input {
  min-width: 0;
  width: calc(100% - 30px);
  height: 26px;
  margin: 0;
  padding: 0;
  border: 0;
  outline: 0;
  background: transparent;
  color: #000;
  font-family: var(--font-family);
  font-size: 22px;
  font-weight: 600;
  line-height: 26px;
  caret-color: #000;
}

.my-lenses-card__heading input[readonly] {
  cursor: default;
}

.my-lenses-card__heading input:not([readonly]) {
  cursor: text;
}

.my-lenses-card__heading button {
  display: grid;
  place-items: center;
  width: 22px;
  height: 22px;
  padding: 0;
  border: 0;
  background: transparent;
  cursor: pointer;
}

.my-lenses-card__heading button img {
  display: block;
  width: 22px;
  height: 22px;
  filter: brightness(0);
}

.my-lenses-stepper {
  display: grid;
  grid-template-columns: 52px 1fr 52px;
  align-items: center;
  height: 53px;
  margin-top: 26px;
  border-radius: 26.5px;
  background: rgba(255,255,255,.8);
}

.my-lenses-stepper button {
  display: grid;
  place-items: center;
  width: 52px;
  height: 53px;
  padding: 0;
  border: 0;
  background: transparent;
  cursor: pointer;
}

.my-lenses-stepper button:first-child img {
  transform: rotate(180deg);
}

.my-lenses-stepper img {
  width: 16px;
  height: 16px;
  opacity: .5;
}

.my-lenses-stepper strong {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  height: 53px;
  font-size: 22px;
  font-weight: 600;
  line-height: 26px;
  letter-spacing: .22px;
  text-align: center;
  white-space: nowrap;
}

.my-lenses-screen__add {
  position: relative;
  z-index: 1;
  width: 100%;
  height: 62px;
  margin-top: 18px;
  padding: 0;
  border: 1px solid rgba(255,255,255,.05);
  border-radius: 31px;
  background: rgba(255,255,255,.15);
  color: #fff;
  font: 600 18px var(--font-family);
  cursor: pointer;
}

@keyframes my-lenses-screen-in {
  from { transform: translateX(100%); }
  to { transform: translateX(0); }
}

@keyframes profile-subscreen-out {
  from { transform: translateX(0); }
  to { transform: translateX(100%); }
}

.add-lenses {
  position: relative;
  width: 100%;
  min-height: 100dvh;
  overflow: visible;
  background: transparent;
}

.add-lenses__title {
  position: absolute;
  z-index: 2;
  top: calc(84 / 956 * 100dvh);
  left: 30px;
  font-size: 32px;
  font-weight: 700;
  line-height: normal;
  color: #fff;
  white-space: nowrap;
  margin: 0;
  display: flex;
  align-items: center;
  gap: 8px;
}
.add-lenses__title-chevron { position: relative; top: 2px; width: 22px; height: 22px; flex: 0 0 22px; }
.add-lenses__subtitle { position: absolute; z-index: 2; top: calc(122 / 956 * 100dvh); left: 30px; margin: 0; font-size: 32px; font-weight: 700; line-height: normal; color: rgba(255,255,255,.5); white-space: nowrap; }
.add-lenses__status-trigger { position: absolute; z-index: 12; top: 70px; left: 22px; width: min(350px, calc(100% - 44px)); height: 104px; padding: 0; border: 0; border-radius: 18px; background: transparent; cursor: pointer; }
.add-lenses__status-trigger[hidden] { display: none; }
.add-lenses__status-trigger:focus, .add-lenses__status-trigger:focus-visible { outline:none; }
.lens-details { position: fixed; inset: 0; z-index: 80; width: 100%; max-width: 440px; margin: 0 auto; background: transparent; }
.lens-details::before { content:''; position:absolute; z-index:0; inset:0; background:transparent; opacity:0; transition:opacity 460ms cubic-bezier(.25,.65,.25,1); }
.lens-details[hidden], .lens-cancel-confirm[hidden] { display: none; }
.lens-details__sheet { position:absolute; z-index:1; inset:61px 0 -100dvh; box-sizing:border-box; border-radius:63px 63px 0 0; background:rgba(255,255,255,.15); -webkit-backdrop-filter:blur(100px); backdrop-filter:blur(100px); opacity:0; transform:translate3d(0,52px,0); transition:transform 520ms cubic-bezier(.25,.65,.25,1),opacity 460ms cubic-bezier(.25,.65,.25,1); will-change:transform,opacity; touch-action:none; overscroll-behavior:none; }
.lens-details--open::before { opacity:var(--details-backdrop-opacity,1); }
.lens-details--open .lens-details__sheet { opacity:1; transform:translate3d(0,0,0); }
.lens-details__grabber { position:absolute; z-index:5; top:0; left:0; width:100%; height:36px; padding:0; border:0; background:transparent; cursor:grab; touch-action:none; }
.lens-details__grabber::before { content:''; position:absolute; top:13px; left:50%; width:var(--grabber-width,68px); height:5px; border-radius:2.5px; background:#fff; transform:translateX(-50%); transition:width 320ms cubic-bezier(.22,.72,.24,1); }
.lens-details__scroll { position:absolute; z-index:1; inset:0 0 100dvh; overflow:hidden; touch-action:none; -webkit-clip-path:inset(36px 0 0); clip-path:inset(36px 0 0); }
.lens-details__scroll::-webkit-scrollbar { display:none; }
html:not(.is-standalone) .lens-details__scroll {
  -webkit-clip-path: none;
  clip-path: none;
  -webkit-mask-image: linear-gradient(to bottom, rgba(0, 0, 0, var(--details-fade-alpha)) 12px, #000 300px);
  mask-image: linear-gradient(to bottom, rgba(0, 0, 0, var(--details-fade-alpha)) 12px, #000 300px);
}
.lens-details__body { position:relative; height:calc(100% + 160px); }
.lens-details__current-date { position:absolute; top:58px; left:18px; display:flex; align-items:center; gap:7px; height:22px; color:#fff; }
.lens-details__current-date img { width:22px; height:22px; filter:brightness(0) invert(1); }
.lens-details__current-date strong { font-size:18px; font-weight:700; line-height:22px; }
.lens-details__current-date #details-current-year { color:rgba(255,255,255,.75); }
.lens-details__usage { position:absolute; top:122px; left:18px; right:18px; color:#fff; }
.lens-details__usage p {
  display:block;
  white-space:nowrap;
  margin:0;
  font-size:var(--usage-font-size, 28px);
  font-weight:600;
  line-height:1.15;
}
.lens-details__usage span { color:rgba(255,255,255,.5); }
.lens-details__usage strong { color:#fff; font-weight:600; white-space:nowrap; }
.lens-details__dates { position:absolute; top:214px; left:18px; right:18px; height:146px; box-sizing:border-box; border:1px solid rgba(255,255,255,.25); border-radius:45px; }
.lens-details__date-row {
  height:72px;
  padding:0 26px;
  display:grid;
  grid-template-columns:auto minmax(72px, 126px);
  align-items:center;
  column-gap:12px;
}
.lens-details__date-row span { color:rgba(255,255,255,.75); font-size:18px; font-weight:500; white-space:nowrap; }
.lens-details__date-row strong {
  min-width:0;
  max-width:126px;
  color:#fff;
  font-size:18px;
  font-weight:600;
  line-height:21px;
  text-align:right;
  white-space:normal;
  text-wrap:balance;
  overflow-wrap:normal;
  word-break:normal;
}

/* Keep both summary lines aligned with the date card at every screen size. */
.lens-details__body {
  display:flex;
  flex-direction:column;
  gap:28px;
  box-sizing:border-box;
  padding-top:58px;
}
.lens-details__current-date,
.lens-details__usage,
.lens-details__dates {
  position:static;
  flex-shrink:0;
  margin-inline:18px;
}
.lens-details__current-date { margin-bottom:14px; }

@media (max-width: 360px) {
  .lens-details__dates {
    height:210px;
  }

  .lens-details__date-row {
    grid-template-columns:minmax(72px, 90px) minmax(74px, 100px);
    justify-content:space-between;
    height:104px;
    padding-inline:26px;
    column-gap:12px;
  }

  .lens-details__date-row span {
    max-width:90px;
    line-height:21px;
    white-space:normal;
  }

  .lens-details__date-row strong {
    width:100px;
    max-width:100px;
  }

  .lens-details__date-divider {
    margin-inline:26px;
  }
}
.lens-details__date-divider { height:1px; margin:0 18px; background:rgba(255,255,255,.25); }
.lens-details__action { position:absolute; left:18px; right:18px; height:53px; display:flex; align-items:center; justify-content:center; gap:0; border:1px solid rgba(255,255,255,.05); border-radius:27px; background:rgba(255,255,255,.15); color:#fff; font:600 18px var(--font-family); cursor:pointer; }
#lens-details-cancel { bottom:266px; }
#lens-details-edit {
  bottom:203px;
  border-color: transparent;
  background: transparent;
  color: rgba(255,255,255,.75);
}
html:not(.is-standalone) #lens-details-cancel { bottom:242px; }
html:not(.is-standalone) #lens-details-edit { bottom:179px; }
.lens-details__action-icon { width:22px; height:22px; flex:0 0 22px; display:flex; align-items:center; justify-content:center; margin-right:8px; overflow:visible; }
.lens-details__action-icon img { display:block; width:22px; height:22px; object-fit:contain; }
#lens-details-edit .lens-details__action-icon img {
  opacity: .75;
  filter:brightness(0) invert(1);
}
.lens-cancel-confirm { position:fixed; inset:0; z-index:2; box-sizing:border-box; background:transparent; backdrop-filter:blur(12px); -webkit-backdrop-filter:blur(12px); animation:lens-cancel-blur-in 480ms cubic-bezier(.22,.72,.24,1) both; }
.lens-cancel-confirm__card { position:absolute; top:27.1dvh; left:18px; right:18px; height:262px; box-sizing:border-box; border:0; border-radius:45px; background:rgba(255,255,255,.8); color:#000; backdrop-filter:blur(38.9px); -webkit-backdrop-filter:blur(38.9px); animation:lens-confirm-in 480ms cubic-bezier(.22,.72,.24,1) both; }
.lens-cancel-confirm__card h2 { position:absolute; top:26px; left:26px; margin:0; font-size:18px; font-weight:600; line-height:21px; }
.lens-cancel-confirm__card p { position:absolute; top:70px; left:26px; width:317px; margin:0; font-size:18px; font-weight:500; line-height:21px; color:rgba(0,0,0,.5); }
.lens-cancel-confirm__button { position:absolute; left:18px; right:18px; top:199px; width:calc(100% - 36px); height:53px; margin:0; border:0; border-radius:26.5px; background:transparent; color:#000; font:600 18px var(--font-family); letter-spacing:.01em; cursor:pointer; }
.lens-cancel-confirm__button--danger { top:136px; background:rgba(255,255,255,.8); color:#000; }
.lens-expired-notice { z-index:90; display:flex; align-items:center; width:100%; max-width:440px; margin:0 auto; padding:18px; }
.lens-expired-notice .lens-cancel-confirm__card { position:relative; top:auto; left:auto; right:auto; width:100%; height:auto; max-height:calc(100dvh - 36px); padding:26px 18px 12px; overflow-y:auto; }
.lens-expired-notice .lens-cancel-confirm__card h2 { position:static; margin:0 8px; line-height:24px; }
.lens-expired-notice .lens-cancel-confirm__card p { position:static; width:auto; margin:16px 8px 20px; line-height:1.35; }
.lens-expired-notice .lens-cancel-confirm__button { position:static; width:100%; }
.lens-expired-notice__replace { background:rgba(255,255,255,.8); }
.lens-expired-notice__later { display:flex; align-items:center; justify-content:center; height:40px; margin-top:4px; line-height:21px; }
.lens-cancel-confirm--closing { animation:lens-cancel-blur-out 280ms cubic-bezier(.4,0,.6,1) both; pointer-events:none; }
.lens-cancel-confirm--closing .lens-cancel-confirm__card { animation:lens-confirm-out 280ms cubic-bezier(.4,0,.6,1) both; }
@keyframes lens-confirm-in { from { transform:translateY(24px) scale(.965); opacity:0; } to { transform:translateY(0) scale(1); opacity:1; } }
@keyframes lens-confirm-out { from { transform:translateY(0) scale(1); opacity:1; } to { transform:translateY(16px) scale(.98); opacity:0; } }
@keyframes lens-cancel-blur-in { from { backdrop-filter:blur(0); -webkit-backdrop-filter:blur(0); } to { backdrop-filter:blur(12px); -webkit-backdrop-filter:blur(12px); } }
@keyframes lens-cancel-blur-out { from { backdrop-filter:blur(12px); -webkit-backdrop-filter:blur(12px); } to { backdrop-filter:blur(0); -webkit-backdrop-filter:blur(0); } }

.add-lenses__action {
  position: absolute;
  z-index: 1;
  left: 50%;
  top: calc(310 / 956 * 100dvh);
  width: min(335px, 76.136364%);
  height: auto;
  aspect-ratio: 1;
  transform: translateX(-50%);
}

.add-lenses__glow {
  position: absolute;
  z-index: 0;
  top: 50%;
  left: 50%;
  display: block;
  width: 104.477612%;
  aspect-ratio: 1;
  transform: translate(-50%, -50%);
  pointer-events: none;
}

.add-lenses__glow img {
  position: absolute;
  inset: -71.59309%;
  display: block;
  width: 243.18618%;
  height: 243.18618%;
  max-width: none;
}

@media (min-width: 441px) {
  body::after {
    content: '';
    position: fixed;
    z-index: 0;
    top: calc((310 / 956 * 100dvh) + 167.5px);
    left: 50%;
    width: 851px;
    height: 851px;
    transform: translate(-50%, -50%);
    background: url('icons/home-background-glow.svg?v=1') center / contain no-repeat;
    opacity: 1;
    pointer-events: none;
    transition: opacity 450ms ease;
  }

  .main-app {
    z-index: 1;
    background: transparent;
  }

  .add-lenses__glow {
    display: none;
  }

  body:has(.main-app__track--profile)::after,
  body:has(.main-app--subscreen-open)::after {
    opacity: 0;
  }
}

.add-lenses__progress {
  position: absolute;
  z-index: 1;
  inset: 0;
  pointer-events: none;
}

.add-lenses__progress-svg {
  width: 100%;
  height: 100%;
  transform: rotate(-90deg);
}

.add-lenses__progress-track,
.add-lenses__progress-fill {
  fill: none;
  stroke-width: 6;
}

.add-lenses__progress-track {
  stroke: rgba(255, 255, 255, 0.25);
}

.add-lenses__progress-fill {
  stroke: #fff;
  stroke-linecap: round;
  stroke-dasharray: 0 1052;
  stroke-dashoffset: 0;
}

.add-lenses__progress--empty .add-lenses__progress-fill {
  stroke: transparent;
}

.add-lenses__button {
  position: absolute;
  left: 93px;
  top: 93px;
  width: 150px;
  height: 150px;
  padding: 0;
  border: 10px solid #fff;
  border-radius: 50%;
  background: transparent;
  cursor: pointer;
  z-index: 3;
  display: flex;
  align-items: center;
  justify-content: center;
}
.add-lenses__button[hidden] { display: none; }

.add-lenses__plus {
  position: relative;
  width: 46px;
  height: 46px;
}

.add-lenses__plus::before,
.add-lenses__plus::after {
  content: '';
  position: absolute;
  left: 50%;
  top: 50%;
  background: #fff;
  border-radius: 999px;
  transform: translate(-50%, -50%);
}

.add-lenses__plus::before {
  width: 46px;
  height: 10px;
}

.add-lenses__plus::after {
  width: 10px;
  height: 46px;
}

.add-lenses__button:active {
  transform: scale(0.97);
}
.lens-face {
  --face-color: #00fff7;
  --face-x: 0px;
  --face-y: 0px;
  --face-stroke: clamp(6px, 2.272727vw, 10px);
  --face-eye-offset: clamp(8.5px, 3.522727vw, 15.5px);
  position: absolute;
  left: 50%;
  top: 50%;
  z-index: 2;
  display: block;
  width: 47.761194%;
  height: 47.761194%;
  box-sizing: border-box;
  border: var(--face-stroke) solid var(--face-color);
  border-radius: 50%;
  transform: translate3d(-50%,-50%,0);
  backface-visibility: hidden;
  will-change: top, width, height;
  cursor: pointer;
  touch-action: manipulation;
  -webkit-tap-highlight-color: transparent;
  transition: border-color 300ms ease;
}

.lens-face[hidden] {
  display: none;
}

.lens-face__ring,
.lens-face__features-art {
  display: none;
}

.lens-face__eye {
  position: absolute;
  top: clamp(26px, 10.909091vw, 48px);
  display: block;
  width: var(--face-stroke);
  height: clamp(12px, 5vw, 22px);
  border-radius: 999px;
  background: transparent;
  transform: translate3d(
    var(--face-x),
    var(--face-y),
    0
  ) scaleY(1);
  transform-origin: center;
  transition:
    transform 520ms cubic-bezier(.22,.72,.24,1);
}

.lens-face__eye::before {
  content: '';
  position: absolute;
  inset: 0;
  border-radius: inherit;
  background: var(--face-color);
  transform: scaleY(1);
  transform-origin: center;
  transition:
    background-color 300ms ease,
    transform 70ms cubic-bezier(.3,0,.7,1);
  will-change: transform;
  backface-visibility: hidden;
}

.lens-face__eye--left {
  left: calc(50% - var(--face-eye-offset) - (var(--face-stroke) / 2));
}

.lens-face__eye--right {
  left: calc(50% + var(--face-eye-offset) - (var(--face-stroke) / 2));
}

.lens-face__mouth {
  position: absolute;
  left: 50%;
  top: clamp(43px, 17.272727vw, 76px);
  display: block;
  width: clamp(34px, 14.090909vw, 62px);
  height: clamp(21px, 8.636364vw, 38px);
  color: var(--face-color);
  translate: -50% 0;
  transform: translate3d(
    var(--face-x),
    var(--face-y),
    0
  );
  transition:
    color 300ms ease,
    transform 520ms cubic-bezier(.22,.72,.24,1);
}

.lens-face__mouth svg {
  display: block;
  width: 100%;
  height: 100%;
  overflow: visible;
}

.lens-face__mouth path {
  fill: none;
  stroke: currentColor;
  stroke-width: var(--face-stroke);
  vector-effect: non-scaling-stroke;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.lens-face--blinking .lens-face__eye::before {
  transform: scaleY(.1364);
}

.lens-face--jumping {
  pointer-events: none;
  animation: lens-face-jump 4400ms linear both;
}

.lens-face--jumping .lens-face__eye {
  animation:
    lens-face-jump-eye-look 5650ms linear both,
    lens-face-bounce-squint 5650ms linear both;
}

.lens-face--jumping .lens-face__mouth {
  animation: lens-face-jump-look 5650ms linear both;
}

@keyframes lens-face-jump {
  0% {
    top: 50%;
    width: 47.761194%;
    height: 47.761194%;
    animation-timing-function: cubic-bezier(.38,.02,.68,.35);
  }
  4.91% {
    top: 74.179104%;
    width: 47.761194%;
    height: 47.761194%;
    animation-timing-function: cubic-bezier(.2,.75,.3,1);
  }
  7.36% {
    top: 77.761194%;
    width: 54.328358%;
    height: 40.597015%;
    animation-timing-function: cubic-bezier(.32,0,.35,1);
  }
  15.55% {
    top: 58.358209%;
    width: 47.164179%;
    height: 48.358209%;
    animation-timing-function: cubic-bezier(.46,.03,.76,.47);
  }
  23.73% {
    top: 74.179104%;
    width: 47.761194%;
    height: 47.761194%;
    animation-timing-function: cubic-bezier(.22,.72,.3,1);
  }
  26.18% {
    top: 77.164179%;
    width: 53.134328%;
    height: 41.791045%;
    animation-timing-function: cubic-bezier(.32,0,.35,1);
  }
  34.36% {
    top: 64.626866%;
    width: 47.164179%;
    height: 48.358209%;
    animation-timing-function: cubic-bezier(.46,.03,.76,.47);
  }
  42.55% {
    top: 74.179104%;
    width: 47.761194%;
    height: 47.761194%;
    animation-timing-function: cubic-bezier(.22,.72,.3,1);
  }
  45% {
    top: 76.567164%;
    width: 51.940299%;
    height: 42.985075%;
    animation-timing-function: cubic-bezier(.32,0,.35,1);
  }
  53.18% {
    top: 70%;
    width: 47.462687%;
    height: 48.059701%;
    animation-timing-function: cubic-bezier(.46,.03,.76,.47);
  }
  61.36% {
    top: 74.179104%;
    width: 47.761194%;
    height: 47.761194%;
    animation-timing-function: cubic-bezier(.2,.7,.3,1);
  }
  63.82% {
    top: 75.671642%;
    width: 50.149254%;
    height: 44.776119%;
    animation-timing-function: cubic-bezier(.25,.65,.3,1);
  }
  67.09% {
    top: 74.179104%;
    width: 47.761194%;
    height: 47.761194%;
    animation-timing-function: cubic-bezier(.22,.72,.24,1);
  }
  70.36% {
    top: 74.179104%;
    width: 47.761194%;
    height: 47.761194%;
    animation-timing-function: cubic-bezier(.22,.72,.24,1);
  }
  71.18% {
    top: 78.358209%;
    width: 54.925373%;
    height: 39.402985%;
    animation-timing-function: cubic-bezier(.2,.7,.25,1);
  }
  72.82% {
    top: 79.253731%;
    width: 56.119403%;
    height: 37.611940%;
    animation-timing-function: cubic-bezier(.22,.68,.26,1);
  }
  76.36% {
    top: 79.850746%;
    width: 56.716418%;
    height: 36.417910%;
    animation-timing-function: cubic-bezier(.22,.68,.28,1);
  }
  86.36% {
    top: 79.850746%;
    width: 56.716418%;
    height: 36.417910%;
    animation-timing-function: cubic-bezier(.2,.55,.3,1);
  }
  89% {
    width: 45.970149%;
    height: 50.149254%;
  }
  96.59% {
    top: 47.014925%;
    width: 45.970149%;
    height: 50.149254%;
    animation-timing-function: cubic-bezier(.24,.62,.3,1);
  }
  100% {
    top: 50%;
    width: 47.761194%;
    height: 47.761194%;
  }
}

@keyframes lens-face-jump-look {
  0% {
    transform: translate3d(var(--face-x),var(--face-y),0);
    animation-timing-function: cubic-bezier(.22,.68,.28,1);
  }
  7.97% {
    transform: translate3d(0,5px,0);
    animation-timing-function: cubic-bezier(.22,.68,.28,1);
  }
  9.73%, 42.48% {
    transform: translate3d(0,7px,0);
    animation-timing-function: cubic-bezier(.22,.68,.28,1);
  }
  46.02% {
    transform: translate3d(0,9px,0);
    animation-timing-function: cubic-bezier(.22,.68,.26,1);
  }
  55%, 67.3% {
    transform: translate3d(0,-18px,0);
    animation-timing-function: cubic-bezier(.25,.6,.3,1);
  }
  78%, 81% {
    transform: translate3d(0,0,0);
    animation-timing-function: cubic-bezier(.22,.65,.28,1);
  }
  88%, 100% {
    transform: translate3d(var(--face-x),var(--face-y),0);
  }
}

@keyframes lens-face-jump-eye-look {
  0% {
    transform: translate3d(var(--face-x),var(--face-y),0) scaleY(1);
    animation-timing-function: cubic-bezier(.22,.68,.28,1);
  }
  7.97% {
    transform: translate3d(0,5px,0) scaleY(1);
    animation-timing-function: cubic-bezier(.22,.68,.28,1);
  }
  9.73%, 42.48% {
    transform: translate3d(0,7px,0) scaleY(1);
    animation-timing-function: cubic-bezier(.22,.68,.28,1);
  }
  46.02% {
    transform: translate3d(0,9px,0) scaleY(1);
    animation-timing-function: cubic-bezier(.22,.68,.26,1);
  }
  55% {
    transform: translate3d(0,-18px,0) scaleY(1);
    animation-timing-function: cubic-bezier(.25,.6,.3,1);
  }
  58%, 67.3% {
    transform: translate3d(0,-18px,0) scaleY(1);
    animation-timing-function: cubic-bezier(.22,.68,.26,1);
  }
  78%, 81% {
    transform: translate3d(0,0,0) scaleY(1);
    animation-timing-function: cubic-bezier(.22,.65,.28,1);
  }
  88%, 100% {
    transform: translate3d(var(--face-x),var(--face-y),0) scaleY(1);
  }
}

@keyframes lens-face-bounce-squint {
  0%, 4.87%, 8.14%, 19.65%, 22.92%, 34.34%, 37.61%, 49.12%, 52.39%, 78%, 100% {
    clip-path: inset(0 0 0 0 round 5px);
  }
  5.75%, 20.44%, 35.13%, 49.91% {
    clip-path: inset(2px 0 2px 0 round 5px);
  }
  58%, 67.3% {
    clip-path: inset(3px 0 3px 0 round 5px);
  }
}

@media (max-width: 440px) {
  .profile-page__title {
    left: calc(30 / 440 * 100%);
  }

  .add-lenses__title {
    left: calc(30 / 440 * 100%);
    font-size: clamp(24px, 7.27vw, 32px);
  }
  .add-lenses__subtitle { left: calc(30 / 440 * 100%); font-size: clamp(24px,7.27vw,32px); }

  .add-lenses__action {
    width: 76.136364%;
  }

  .add-lenses__button {
    left: 27.76%;
    top: 27.76%;
    width: 44.78%;
    height: 44.78%;
    border-width: clamp(6px, 2.27vw, 10px);
  }
  .lens-face {
    left: 50%;
    top: 50%;
    width: 47.761194%;
    height: 47.761194%;
  }

  .add-lenses__plus {
    width: 30.67%;
    height: 30.67%;
  }

  .add-lenses__plus::before {
    width: 100%;
    height: 22%;
  }

  .add-lenses__plus::after {
    width: 22%;
    height: 100%;
  }
}

/* Add lenses form screen */

.lens-form {
  position: fixed;
  top: 0;
  bottom: 0;
  left: 50%;
  transform: translateX(-50%);
  z-index: 100;
  width: 100%;
  max-width: 440px;
  min-height: 100dvh;
  overflow: hidden;
  background: var(--app-background);
}

.lens-form__overlay {
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.15) 0%, rgba(255, 255, 255, 0) 100%);
  backdrop-filter: blur(50px);
  pointer-events: none;
}

.lens-form__header {
  position: relative;
  z-index: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  height: 139px;
  border-bottom: 0;
  background: transparent;
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
}

.lens-form__back {
  position: absolute;
  left: 18px;
  top: 72px;
  width: 50px;
  height: 50px;
  display: flex;
  align-items: center;
  justify-content: center;
  border: 1px solid rgba(255, 255, 255, 0.05);
  border-radius: 25px;
  background: rgba(255, 255, 255, 0.1);
  cursor: pointer;
}

.lens-form__back img {
  width: 7px;
  height: 14px;
}

.lens-form__title {
  position: absolute;
  left: 50%;
  top: 97px;
  transform: translate(-50%, -50%);
  margin: 0;
  font-size: 18px;
  font-weight: 700;
  line-height: normal;
  color: #fff;
  text-align: center;
  white-space: nowrap;
}

.lens-form__content {
  position: relative;
  z-index: 1;
  padding: 36px 18px 0;
  display: flex;
  flex-direction: column;
  gap: 18px;
}

.lens-form-window {
  border-radius: 45px;
  background: rgba(255, 255, 255, 0.8);
  backdrop-filter: blur(38.9px);
  overflow: visible;
}

.lens-stock-source {
  flex: 0 0 auto;
  padding: 26px 19px 19px;
  border-radius: 45px;
  background: rgba(255,255,255,.8);
  color: #000;
  -webkit-backdrop-filter: blur(38.9px);
  backdrop-filter: blur(38.9px);
}

.lens-stock-source[hidden],
.lens-form--edit-modal .lens-stock-source {
  display: none;
}

.lens-stock-source__header {
  display: flex;
  align-items: center;
  gap: 8px;
  height: 22px;
  margin: 0 7px;
}

.lens-stock-source__header img {
  width: 22px;
  height: 22px;
  flex: 0 0 22px;
}

.lens-stock-source__header h2 {
  margin: 0;
  font-size: 18px;
  font-weight: 500;
  line-height: 22px;
}

.lens-stock-source__options {
  display: flex;
  flex-direction: column;
  gap: 4px;
  margin-top: 26px;
}

.lens-stock-source__option {
  display: grid;
  grid-template-columns: 30px minmax(0,1fr);
  column-gap: 15px;
  align-items: center;
  box-sizing: border-box;
  width: 100%;
  height: 76px;
  padding: 14px;
  border: 0;
  border-radius: 26.5px;
  background: transparent;
  color: #000;
  text-align: left;
  cursor: pointer;
  transition: background-color 480ms cubic-bezier(.16,1,.3,1);
}

.lens-stock-source__option--selected {
  background: rgba(255,255,255,.8);
}

.lens-stock-source__choice {
  display: grid;
  place-items: center;
  width: 30px;
  height: 30px;
  border-radius: 50%;
  background: rgba(100,161,191,.2);
  transform: scale(1);
  transition: background-color 280ms cubic-bezier(.22,.61,.36,1);
}

.lens-stock-source__option--selected .lens-stock-source__choice {
  background: #64a1bf;
  animation: lens-stock-choice-select 420ms cubic-bezier(.22,.61,.36,1);
}

.lens-stock-source__choice img {
  display: block;
  width: 16px;
  height: 16px;
  filter: brightness(0) invert(1);
  opacity: 0;
  transform: scale(.62);
  transition:
    opacity 220ms ease,
    transform 320ms cubic-bezier(.22,.61,.36,1);
}

.lens-stock-source__option--selected .lens-stock-source__choice img {
  opacity: 1;
  transform: scale(1);
  transition-delay: 90ms;
}

@keyframes lens-stock-choice-select {
  0% {
    transform: scale(1);
  }
  42% {
    transform: scale(.76);
  }
  100% {
    transform: scale(1);
  }
}

.lens-stock-source__copy {
  display: flex;
  min-width: 0;
  flex-direction: column;
}

.lens-stock-source__name {
  overflow: hidden;
  font-size: 22px;
  font-weight: 600;
  line-height: 24px;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.lens-stock-source__balance {
  display: flex;
  align-items: baseline;
  margin-top: 2px;
  color: rgba(0,0,0,.75);
  font-size: 18px;
  font-weight: 500;
  line-height: 22px;
  white-space: nowrap;
}

.lens-stock-source__remaining {
  opacity: 0;
  white-space: nowrap;
  -webkit-mask-image: linear-gradient(to right, transparent 0, #000 9px, #000 100%);
  mask-image: linear-gradient(to right, transparent 0, #000 9px, #000 100%);
  transform: translateX(-10px);
  transition:
    opacity 260ms ease,
    transform 540ms cubic-bezier(.2,.72,.2,1);
}

.lens-stock-source__option--selected .lens-stock-source__remaining {
  opacity: 1;
  transform: translateX(0);
  transition-delay: 25ms;
}

.lens-form--has-stock:not(.lens-form--edit-modal) {
  overflow-y: auto;
  scrollbar-width: none;
}

.lens-form--has-stock:not(.lens-form--edit-modal) .lens-form__header {
  position: sticky;
  top: 0;
  z-index: 2;
  background: var(--app-background);
}

.lens-form--has-stock:not(.lens-form--edit-modal)::-webkit-scrollbar {
  display: none;
}

.lens-form--has-stock:not(.lens-form--edit-modal) .lens-form__content {
  max-height: none;
  padding-bottom: 0;
  overflow: visible;
}

.lens-form--has-stock:not(.lens-form--edit-modal) .lens-form__submit {
  position: relative;
  left: auto;
  bottom: auto;
  transform: none;
  margin: 18px auto max(30px,env(safe-area-inset-bottom));
}

.lens-form-window__row {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 26px 26px 0;
}

.lens-form-window__icon {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 22px;
  height: 22px;
  flex-shrink: 0;
}

.lens-form-window__icon img {
  display: block;
  width: 22px;
  height: 22px;
}

.lens-form-window__text {
  font-family: var(--font-family);
  font-size: 18px;
  font-weight: 500;
  line-height: 21px;
  color: #000;
}

.lens-form-window__field-wrap {
  position: relative;
  margin: 11px 19px 0;
  min-height: 53px;
}

.lens-form-window__field {
  width: 100%;
  height: 53px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 17px 0 13px;
  border: none;
  border-radius: 26.5px;
  background: rgba(255, 255, 255, 0.8);
  cursor: pointer;
  font-family: inherit;
  color: inherit;
}

.lens-form-window__field span {
  font-size: 20px;
  font-weight: 600;
  line-height: normal;
  letter-spacing: 0.01em;
  color: #000;
}

.lens-form-window__field .icon {
  flex-shrink: 0;
}

.lens-form-window__menu {
  position: absolute;
  top: -4px;
  left: -4px;
  right: -4px;
  z-index: 20;
  display: flex;
  flex-direction: column;
  box-sizing: border-box;
  padding: 4px;
  border-radius: 30.5px;
  background: #44809d;
  box-shadow: 0 0 85.5px rgba(0, 0, 0, 0.5);
}

.lens-form-window__menu[hidden] {
  display: none;
}

.lens-form-window__menu-item {
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: 100%;
  height: 53px;
  padding: 0 17px 0 13px;
  border: none;
  border-radius: 26.5px;
  background: transparent;
  font-family: inherit;
  font-size: 20px;
  font-weight: 600;
  line-height: normal;
  letter-spacing: 0.01em;
  color: rgba(255, 255, 255, 0.75);
  text-align: left;
  cursor: pointer;
}

.lens-form-window__menu-item--selected {
  background: rgba(255, 255, 255, 0.9);
  color: #000;
}

.lens-form-window__menu-item .icon {
  flex-shrink: 0;
}

.lens-date-summary {
  width: calc(100% - 45px);
  height: 25px;
  display: flex;
  align-items: center;
  gap: 8px;
  margin: 26px 19px 0 26px;
  padding: 0;
  border: 0;
  background: transparent;
  font-family: inherit;
  font-size: 22px;
  font-weight: 600;
  line-height: 25px;
  letter-spacing: .01em;
  color: #000;
}
.lens-date-summary .icon { flex-shrink: 0; }
.lens-date-summary__value,
#start-date-summary-value { cursor: pointer; }
.lens-date-animated__group,
.lens-date-animated__part { display: inline-block; white-space: nowrap; will-change: transform; transform: translateZ(0); }
.lens-date-animated__space { display: inline-block; flex: 0 0 .28em; width: .28em; }
.lens-date-animated__character,
.lens-date-animated__word {
  position: relative;
  display: inline-block;
  overflow: hidden;
  vertical-align: bottom;
  padding-block: .28em;
  margin-block: -.28em;
  contain: paint;
  transform: translateZ(0);
  -webkit-mask-image: linear-gradient(
    to bottom,
    transparent 0%,
    rgba(0,0,0,.45) 18%,
    #000 38%,
    #000 62%,
    rgba(0,0,0,.45) 82%,
    transparent 100%
  );
  mask-image: linear-gradient(
    to bottom,
    transparent 0%,
    rgba(0,0,0,.45) 18%,
    #000 38%,
    #000 62%,
    rgba(0,0,0,.45) 82%,
    transparent 100%
  );
  -webkit-mask-repeat: no-repeat;
  mask-repeat: no-repeat;
  -webkit-mask-size: 100% 100%;
  mask-size: 100% 100%;
}
.lens-date-animated__word-inner { display: inline-block; }
.lens-date-animated__word-inner--changed { animation: lens-date-character-up 400ms cubic-bezier(.33,0,.2,1) both; will-change: transform; backface-visibility: hidden; }
.lens-date-animated__character-inner { display: inline-block; }
.lens-date-animated__character-inner--changed { animation: lens-date-character-up 400ms cubic-bezier(.33,0,.2,1) both; will-change: transform; backface-visibility: hidden; }
.lens-date-animated__old-value { position: absolute; z-index: 2; left: 0; top: .28em; pointer-events: none; animation: lens-date-character-out 400ms cubic-bezier(.33,0,.2,1) both; will-change: transform; backface-visibility: hidden; }
@keyframes lens-date-character-up {
  from { transform: translate3d(0,calc(100% + 2px),0); }
  to { transform: translate3d(0,0,0); }
}
@keyframes lens-date-character-out {
  from { transform: translate3d(0,0,0); }
  to { transform: translate3d(0,calc(-100% - 2px),0); }
}
.lens-date-summary__open {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 32px;
  height: 32px;
  margin-left: -8px;
  padding: 0;
  border: 0;
  background: transparent;
  cursor: pointer;
}
.lens-week-strip {
  position: relative;
  box-sizing: border-box;
  height: 91px;
  margin: 11px 19px 19px;
  padding: 0;
  border-radius: 26.5px;
  background: rgba(255,255,255,.8);
  overflow: hidden;
}
.lens-week-strip::before,
.lens-week-strip::after {
  content: '';
  position: absolute;
  top: 0;
  bottom: 0;
  z-index: 3;
  width: 48px;
  pointer-events: none;
}
.lens-week-strip::before {
  left: 0;
  background: linear-gradient(90deg, rgba(255,255,255,.96) 0%, rgba(255,255,255,.72) 38%, rgba(255,255,255,0) 100%);
}
.lens-week-strip::after {
  right: 0;
  background: linear-gradient(270deg, rgba(255,255,255,.96) 0%, rgba(255,255,255,.72) 38%, rgba(255,255,255,0) 100%);
}
.lens-week-strip__dates {
  display: flex;
  align-items: flex-start;
  gap: 32px;
  width: 100%;
  box-sizing: border-box;
  height: 91px;
  padding: 15px 15.5px 16px;
  overflow-x: auto;
  overflow-y: hidden;
  overflow-anchor: none;
  scrollbar-width: none;
  overscroll-behavior-x: contain;
  touch-action: pan-x;
  -webkit-overflow-scrolling: touch;
}
.lens-form-window__divider { height: 1px; margin: 26px 19px 0; background: rgba(0,0,0,.15); }
.lens-form-window__row--period { padding-top: 26px; }
.lens-form-window__icon--time img { width: 22px; height: 22px; }
.lens-form-window__field-wrap--period { margin-top: 11px; margin-bottom: 19px; }
.lens-period-stepper { position: relative; display: flex; align-items: center; justify-content: space-between; width: 100%; height: 53px; border-radius: 26.5px; background: rgba(255,255,255,.8); overflow: hidden; }
.lens-period-stepper__button { position: relative; z-index: 2; display: flex; align-items: center; justify-content: center; width: 53px; height: 53px; padding: 0; border: 0; background: transparent; cursor: pointer; }
.lens-period-stepper__button img { width: 16px; height: 16px; opacity: .75; }
.lens-period-stepper__button--decrease img { transform: rotate(180deg); }
.lens-period-stepper__value { position: absolute; left: 50%; top: 50%; display: flex; align-items: center; transform: translate(-50%,-50%); white-space: nowrap; font-size: 22px; font-weight: 600; line-height: 26px; letter-spacing: .01em; }
.lens-week-strip__dates::-webkit-scrollbar { display: none; }
.lens-week-strip__date {
  position: relative;
  z-index: 0;
  display: inline-flex;
  flex: 0 0 21px;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  width: 21px;
  height: 60px;
  padding: 0;
  border: 0;
  background: transparent;
  color: inherit;
  font: inherit;
  cursor: pointer;
}
.lens-week-strip__weekday { height:19px; font-size:16px; font-weight:500; line-height:19px; color:rgba(0,0,0,.5); }
.lens-week-strip__number { position:relative; z-index:0; display:flex; align-items:center; justify-content:center; width:21px; height:21px; margin-top:20px; font-size:18px; font-weight:500; line-height:21px; }
.lens-week-strip__date:disabled {
  cursor: default;
}
.lens-week-strip__date:disabled .lens-week-strip__weekday,
.lens-week-strip__date:disabled .lens-week-strip__number {
  color: rgba(0,0,0,.25);
}
.lens-week-strip__date--selected {
  color: #fff;
  font-weight: 600;
}
.lens-week-strip__date--selected .lens-week-strip__number::before {
  content: '';
  position: absolute;
  z-index: -1;
  width: 40px;
  height: 40px;
  border-radius: 50%;
  background: #64a1bf;
  animation: lens-date-selection-in 180ms cubic-bezier(.22,.8,.3,1);
}

@keyframes lens-date-selection-in {
  from { transform: scale(.82); opacity: .55; }
  to { transform: scale(1); opacity: 1; }
}


.lens-calendar {
  position: fixed;
  inset: 0;
  z-index: 30;
  display: flex;
  flex-direction: column;
  padding: max(18px, env(safe-area-inset-top, 0px)) 18px max(18px, env(safe-area-inset-bottom, 0px));
  overflow-y: auto;
  overscroll-behavior-y: contain;
  background: transparent;
  pointer-events: auto;
}
.lens-calendar[hidden] { display: none; }
.lens-calendar__frame {
  flex: 0 0 auto;
  width: 100%;
  margin: auto 0;
  filter: drop-shadow(0 18px 44px rgba(0,0,0,.28));
}
.lens-calendar__card { position:relative; width:100%; padding:26px 19px 19px; border-radius:45px; background:#fff; color:#000; animation:lens-calendar-card-in 340ms cubic-bezier(.22,.72,.24,1); }
@keyframes lens-calendar-card-in { from { opacity:0; transform:scale(.97) translateY(8px); } to { opacity:1; transform:scale(1) translateY(0); } }
.lens-form--calendar-open .lens-form__content { z-index: 3; }
.lens-form-window,
.lens-stock-source,
.lens-form__submit { transition: transform 240ms cubic-bezier(.22,.72,.24,1); transform-origin: center; will-change: transform; backface-visibility: hidden; }
.lens-form--calendar-open .lens-form-window { transform: scale(.88); transition-duration: 340ms; }
.lens-form--calendar-open:not(.lens-form--edit-modal) .lens-form-window { transform:translateY(60px) scale(.88); }
.lens-form--calendar-open .lens-stock-source { transform: scale(.88); transition-duration: 340ms; }
.lens-form--calendar-open .lens-form__submit { z-index:0; transform:translateX(-50%) scale(.88); transition-duration:340ms; visibility:hidden; pointer-events:none; }
.lens-form--has-stock.lens-form--calendar-open:not(.lens-form--edit-modal) .lens-form__submit { transform: scale(.88); }
.lens-calendar__selected-title { height: 26px; display: flex; align-items: center; margin: 0 0 26px 7px; font-size: 22px; line-height: 26px; font-weight: 600; letter-spacing: .01em; }
.lens-calendar__header { height: 22px; display: grid; grid-template-columns: 40px 1fr 40px; grid-template-rows: 22px; align-items: center; margin-top: 26px; margin-bottom: 26px; touch-action:pan-y; }
.lens-calendar__nav { width: 40px; height: 40px; display: flex; align-items: center; justify-content: center; padding: 0; border: 0; background: transparent; opacity: .75; cursor: pointer; transform:scale(1); transition:transform 160ms cubic-bezier(.22,.72,.24,1), opacity 160ms ease; }
.lens-calendar__nav--pressed { transform:scale(.82); opacity:.5; }
.lens-calendar__nav-icon--prev { transform: rotate(180deg); }
.lens-calendar__title { position:relative; height:22px; margin:0; overflow:hidden; font-size:18px; font-weight:600; line-height:22px; letter-spacing:.01em; text-align:center; -webkit-mask-image:linear-gradient(to right,transparent 0,#000 12%,#000 88%,transparent 100%); mask-image:linear-gradient(to right,transparent 0,#000 12%,#000 88%,transparent 100%); }
.lens-calendar__month-value { position:absolute; inset:0; display:flex; align-items:center; justify-content:center; white-space:nowrap; will-change:transform,opacity; }
.lens-calendar__month-value--old-next { animation:lens-calendar-month-old-next 320ms cubic-bezier(.22,.72,.24,1) both; }
.lens-calendar__month-value--new-next { animation:lens-calendar-month-new-next 320ms cubic-bezier(.22,.72,.24,1) both; }
.lens-calendar__month-value--old-prev { animation:lens-calendar-month-old-prev 320ms cubic-bezier(.22,.72,.24,1) both; }
.lens-calendar__month-value--new-prev { animation:lens-calendar-month-new-prev 320ms cubic-bezier(.22,.72,.24,1) both; }
@keyframes lens-calendar-month-old-next { from { transform:translateX(0); opacity:1; } to { transform:translateX(-65%); opacity:0; } }
@keyframes lens-calendar-month-new-next { from { transform:translateX(65%); opacity:0; } to { transform:translateX(0); opacity:1; } }
@keyframes lens-calendar-month-old-prev { from { transform:translateX(0); opacity:1; } to { transform:translateX(65%); opacity:0; } }
@keyframes lens-calendar-month-new-prev { from { transform:translateX(-65%); opacity:0; } to { transform:translateX(0); opacity:1; } }
.lens-calendar__divider { height: 1px; background: rgba(0,0,0,.15); }
.lens-calendar__weekdays, .lens-calendar__days { display:grid; grid-template-columns:repeat(7,minmax(0,1fr)); width:100%; text-align:center; }
.lens-calendar__weekdays { height: 19px; align-items: center; margin-bottom: 20px; font-size: 16px; font-weight: 500; color: rgba(0,0,0,.5); }
.lens-calendar__days { grid-auto-rows: 21px; row-gap: 32px; align-items: center; margin-bottom: 26px; }
.lens-calendar__days { touch-action: pan-y; }
.lens-calendar__day { justify-self: center; width: 40px; height: 40px; padding: 0; border: 0; border-radius: 50%; background: transparent; font-family: inherit; font-size: 18px; font-weight: 500; color: #000; cursor: pointer; }
.lens-calendar__day--row-enter { animation:lens-calendar-row-enter 340ms cubic-bezier(.22,.72,.24,1) both; }
@keyframes lens-calendar-row-enter {
  from { opacity:0; transform:translateY(9px); }
  to { opacity:1; transform:translateY(0); }
}
.lens-calendar__day--selected { background: #64a1bf; color: #fff; font-weight: 600; }
.lens-calendar__day:disabled {
  color: rgba(0,0,0,.25);
  cursor: default;
}
.lens-calendar__done { width: 100%; height: 53px; border: 0; border-radius: 26.5px; background: #64a1bf; font-family: inherit; font-size: 18px; font-weight: 600; color: #fff; cursor: pointer; }


.lens-form__submit {
  position: absolute;
  left: 50%;
  bottom: max(30px, env(safe-area-inset-bottom));
  transform: translateX(-50%);
  z-index: 1;
  display: flex;
  align-items: center;
  gap: 8px;
  height: 50px;
  padding: 0 24px 0 20px;
  border: none;
  border-radius: 25px;
  background: rgba(255, 255, 255, 0.9);
  box-shadow: 0 8px 25px rgba(111, 172, 202, 0.5);
  cursor: pointer;
}

.lens-form__submit img {
  flex-shrink: 0;
}

.lens-form__submit span {
  font-size: 16px;
  font-weight: 550;
  line-height: normal;
  color: #000;
}

.lens-form--edit-modal { background:transparent; }
.lens-form--edit-modal .lens-form__overlay { pointer-events:auto; background:rgba(0,0,0,.18); backdrop-filter:blur(12px); -webkit-backdrop-filter:blur(12px); animation:lens-edit-overlay-in 480ms cubic-bezier(.22,.72,.24,1) both; }
.lens-form--edit-modal .lens-form__header { display:none; }
.lens-form--edit-modal .lens-form__content { position:absolute; inset:0; padding:0 18px; justify-content:center; pointer-events:none; }
.lens-form--edit-modal .lens-form-window { position:relative; top:-22px; width:100%; pointer-events:auto; box-shadow:none; animation:lens-edit-window-in 480ms cubic-bezier(.22,.72,.24,1) both; }
.lens-form--edit-modal.lens-form--edit-ready .lens-form-window { animation:none; }
.lens-form--edit-modal.lens-form--calendar-open .lens-form-window { animation:none; transform:scale(.88); transition-duration:340ms; }
.lens-form--edit-modal .lens-form__submit { z-index:2; }
.lens-form--edit-modal .lens-form__submit { animation:lens-edit-submit-in 480ms cubic-bezier(.22,.72,.24,1) both; }
.lens-form--edit-closing .lens-form__overlay { animation:lens-edit-overlay-out 280ms cubic-bezier(.4,0,.6,1) both; pointer-events:none; }
.lens-form--edit-closing .lens-form-window { animation:lens-edit-window-out 280ms cubic-bezier(.4,0,.6,1) both; pointer-events:none; }
.lens-form--edit-closing .lens-form__submit { animation:lens-edit-submit-out 280ms cubic-bezier(.4,0,.6,1) both; pointer-events:none; }
@keyframes lens-edit-overlay-in { from { background:rgba(0,0,0,0); backdrop-filter:blur(0); -webkit-backdrop-filter:blur(0); } to { background:rgba(0,0,0,.18); backdrop-filter:blur(12px); -webkit-backdrop-filter:blur(12px); } }
@keyframes lens-edit-overlay-out { from { background:rgba(0,0,0,.18); backdrop-filter:blur(12px); -webkit-backdrop-filter:blur(12px); } to { background:rgba(0,0,0,0); backdrop-filter:blur(0); -webkit-backdrop-filter:blur(0); } }
@keyframes lens-edit-window-in { from { opacity:0; transform:translateY(30px) scale(.965); } to { opacity:1; transform:translateY(0) scale(1); } }
@keyframes lens-edit-window-out { from { opacity:1; transform:translateY(0) scale(1); } to { opacity:0; transform:translateY(22px) scale(.975); } }
@keyframes lens-edit-submit-in { from { opacity:0; transform:translateX(-50%) scale(.82); } to { opacity:1; transform:translateX(-50%) scale(1); } }
@keyframes lens-edit-submit-out { from { opacity:1; transform:translateX(-50%) scale(1); } to { opacity:0; transform:translateX(-50%) scale(.88); } }

.wear-history-screen {
  position: fixed;
  inset: 0;
  z-index: 70;
  width: 100%;
  max-width: 440px;
  min-height: 100dvh;
  margin: 0 auto;
  overflow: hidden;
  color: #fff;
  background: var(--app-background);
  box-shadow: -12px 0 36px rgba(17,64,87,.2);
  animation: my-lenses-screen-in 350ms cubic-bezier(.2,.52,.24,1) both;
  touch-action: pan-y;
  will-change: transform;
}

.my-lenses-screen--closing,
.wear-history-screen--closing {
  pointer-events: none;
  animation: profile-subscreen-out 380ms cubic-bezier(.4,0,.2,1) both;
}

.wear-history-screen[hidden] {
  display: none;
}

.wear-history-screen__header {
  position: absolute;
  inset: 0 0 auto;
  height: 135px;
}

.wear-history-screen__header h1 {
  position: absolute;
  top: 87px;
  left: 50%;
  margin: 0;
  transform: translateX(-50%);
  font-size: 18px;
  font-weight: 600;
  line-height: normal;
  white-space: nowrap;
}

.wear-history-screen__back {
  position: absolute;
  top: 72px;
  left: 18px;
  display: grid;
  place-items: center;
  width: 50px;
  height: 50px;
  padding: 0;
  border: 1px solid rgba(255,255,255,.05);
  border-radius: 50%;
  background: rgba(255,255,255,.1);
  cursor: pointer;
}

.wear-history-screen__back img {
  width: 22px;
  height: 22px;
}

.wear-history-screen__content {
  position: absolute;
  top: 153px;
  left: 0;
  right: 0;
  bottom: 0;
  box-sizing: border-box;
  padding: 0 26px calc(26px + env(safe-area-inset-bottom, 0px));
  overflow-y: auto;
}

.wear-history-card {
  padding: 26px;
  border-radius: 45px;
  background: rgba(255,255,255,.8);
  color: #000;
  -webkit-backdrop-filter: blur(38.9px);
  backdrop-filter: blur(38.9px);
}

.wear-history-card h2 {
  margin: 0;
  font-size: 22px;
  font-weight: 500;
  line-height: 26px;
}

.wear-history-card p {
  margin: 2px 0 0;
  color: rgba(0,0,0,.5);
  font-size: 18px;
  font-weight: 500;
  line-height: 22px;
}

/* iOS Safari: keep motion on compositor-friendly properties. */
@supports (-webkit-touch-callout: none) {
  .lens-cancel-confirm,
  .lens-form--edit-modal .lens-form__overlay {
    animation: lens-ios-overlay-in 480ms cubic-bezier(.22,.72,.24,1) both;
  }

  .lens-cancel-confirm--closing,
  .lens-form--edit-closing .lens-form__overlay {
    animation: lens-ios-overlay-out 280ms cubic-bezier(.4,0,.6,1) both;
  }
}

@keyframes lens-ios-overlay-in {
  from { opacity: 0; }
  to { opacity: 1; }
}

@keyframes lens-ios-overlay-out {
  from { opacity: 1; }
  to { opacity: 0; }
}

/* Figma-style 60% corner smoothing, rendered with a Safari-compatible superellipse. */
.window,
.profile-window,
.my-lenses-card,
.my-lenses-card__delete,
.lens-details__dates,
.lens-cancel-confirm__card,
.lens-form-window,
.lens-stock-source,
.lens-calendar__card,
.wear-history-card {
  --smooth-radius: 45px;
}

.my-lenses-stepper {
  --smooth-radius: 26.5px;
}

.window,
.profile-window,
.my-lenses-card,
.my-lenses-card__delete,
.my-lenses-stepper,
.lens-details__dates,
.lens-cancel-confirm__card,
.lens-form-window,
.lens-stock-source,
.lens-calendar__card,
.wear-history-card {
  -webkit-clip-path: polygon(
    calc(100% - var(--smooth-radius)) 0px,
    calc(100% - calc(var(--smooth-radius) * 0.7199)) calc(var(--smooth-radius) * 0.0054),
    calc(100% - calc(var(--smooth-radius) * 0.5703)) calc(var(--smooth-radius) * 0.0214),
    calc(100% - calc(var(--smooth-radius) * 0.4514)) calc(var(--smooth-radius) * 0.0483),
    calc(100% - calc(var(--smooth-radius) * 0.3516)) calc(var(--smooth-radius) * 0.086),
    calc(100% - calc(var(--smooth-radius) * 0.2667)) calc(var(--smooth-radius) * 0.1347),
    calc(100% - calc(var(--smooth-radius) * 0.1948)) calc(var(--smooth-radius) * 0.1948),
    calc(100% - calc(var(--smooth-radius) * 0.1347)) calc(var(--smooth-radius) * 0.2667),
    calc(100% - calc(var(--smooth-radius) * 0.086)) calc(var(--smooth-radius) * 0.3516),
    calc(100% - calc(var(--smooth-radius) * 0.0483)) calc(var(--smooth-radius) * 0.4514),
    calc(100% - calc(var(--smooth-radius) * 0.0214)) calc(var(--smooth-radius) * 0.5703),
    calc(100% - calc(var(--smooth-radius) * 0.0054)) calc(var(--smooth-radius) * 0.7199),
    calc(100% - 0px) var(--smooth-radius),
    calc(100% - 0px) calc(100% - var(--smooth-radius)),
    calc(100% - calc(var(--smooth-radius) * 0.0054)) calc(100% - calc(var(--smooth-radius) * 0.7199)),
    calc(100% - calc(var(--smooth-radius) * 0.0214)) calc(100% - calc(var(--smooth-radius) * 0.5703)),
    calc(100% - calc(var(--smooth-radius) * 0.0483)) calc(100% - calc(var(--smooth-radius) * 0.4514)),
    calc(100% - calc(var(--smooth-radius) * 0.086)) calc(100% - calc(var(--smooth-radius) * 0.3516)),
    calc(100% - calc(var(--smooth-radius) * 0.1347)) calc(100% - calc(var(--smooth-radius) * 0.2667)),
    calc(100% - calc(var(--smooth-radius) * 0.1948)) calc(100% - calc(var(--smooth-radius) * 0.1948)),
    calc(100% - calc(var(--smooth-radius) * 0.2667)) calc(100% - calc(var(--smooth-radius) * 0.1347)),
    calc(100% - calc(var(--smooth-radius) * 0.3516)) calc(100% - calc(var(--smooth-radius) * 0.086)),
    calc(100% - calc(var(--smooth-radius) * 0.4514)) calc(100% - calc(var(--smooth-radius) * 0.0483)),
    calc(100% - calc(var(--smooth-radius) * 0.5703)) calc(100% - calc(var(--smooth-radius) * 0.0214)),
    calc(100% - calc(var(--smooth-radius) * 0.7199)) calc(100% - calc(var(--smooth-radius) * 0.0054)),
    calc(100% - var(--smooth-radius)) calc(100% - 0px),
    var(--smooth-radius) calc(100% - 0px),
    calc(var(--smooth-radius) * 0.7199) calc(100% - calc(var(--smooth-radius) * 0.0054)),
    calc(var(--smooth-radius) * 0.5703) calc(100% - calc(var(--smooth-radius) * 0.0214)),
    calc(var(--smooth-radius) * 0.4514) calc(100% - calc(var(--smooth-radius) * 0.0483)),
    calc(var(--smooth-radius) * 0.3516) calc(100% - calc(var(--smooth-radius) * 0.086)),
    calc(var(--smooth-radius) * 0.2667) calc(100% - calc(var(--smooth-radius) * 0.1347)),
    calc(var(--smooth-radius) * 0.1948) calc(100% - calc(var(--smooth-radius) * 0.1948)),
    calc(var(--smooth-radius) * 0.1347) calc(100% - calc(var(--smooth-radius) * 0.2667)),
    calc(var(--smooth-radius) * 0.086) calc(100% - calc(var(--smooth-radius) * 0.3516)),
    calc(var(--smooth-radius) * 0.0483) calc(100% - calc(var(--smooth-radius) * 0.4514)),
    calc(var(--smooth-radius) * 0.0214) calc(100% - calc(var(--smooth-radius) * 0.5703)),
    calc(var(--smooth-radius) * 0.0054) calc(100% - calc(var(--smooth-radius) * 0.7199)),
    0px calc(100% - var(--smooth-radius)),
    0px var(--smooth-radius),
    calc(var(--smooth-radius) * 0.0054) calc(var(--smooth-radius) * 0.7199),
    calc(var(--smooth-radius) * 0.0214) calc(var(--smooth-radius) * 0.5703),
    calc(var(--smooth-radius) * 0.0483) calc(var(--smooth-radius) * 0.4514),
    calc(var(--smooth-radius) * 0.086) calc(var(--smooth-radius) * 0.3516),
    calc(var(--smooth-radius) * 0.1347) calc(var(--smooth-radius) * 0.2667),
    calc(var(--smooth-radius) * 0.1948) calc(var(--smooth-radius) * 0.1948),
    calc(var(--smooth-radius) * 0.2667) calc(var(--smooth-radius) * 0.1347),
    calc(var(--smooth-radius) * 0.3516) calc(var(--smooth-radius) * 0.086),
    calc(var(--smooth-radius) * 0.4514) calc(var(--smooth-radius) * 0.0483),
    calc(var(--smooth-radius) * 0.5703) calc(var(--smooth-radius) * 0.0214),
    calc(var(--smooth-radius) * 0.7199) calc(var(--smooth-radius) * 0.0054),
    var(--smooth-radius) 0px
  );
  clip-path: polygon(
    calc(100% - var(--smooth-radius)) 0px,
    calc(100% - calc(var(--smooth-radius) * 0.7199)) calc(var(--smooth-radius) * 0.0054),
    calc(100% - calc(var(--smooth-radius) * 0.5703)) calc(var(--smooth-radius) * 0.0214),
    calc(100% - calc(var(--smooth-radius) * 0.4514)) calc(var(--smooth-radius) * 0.0483),
    calc(100% - calc(var(--smooth-radius) * 0.3516)) calc(var(--smooth-radius) * 0.086),
    calc(100% - calc(var(--smooth-radius) * 0.2667)) calc(var(--smooth-radius) * 0.1347),
    calc(100% - calc(var(--smooth-radius) * 0.1948)) calc(var(--smooth-radius) * 0.1948),
    calc(100% - calc(var(--smooth-radius) * 0.1347)) calc(var(--smooth-radius) * 0.2667),
    calc(100% - calc(var(--smooth-radius) * 0.086)) calc(var(--smooth-radius) * 0.3516),
    calc(100% - calc(var(--smooth-radius) * 0.0483)) calc(var(--smooth-radius) * 0.4514),
    calc(100% - calc(var(--smooth-radius) * 0.0214)) calc(var(--smooth-radius) * 0.5703),
    calc(100% - calc(var(--smooth-radius) * 0.0054)) calc(var(--smooth-radius) * 0.7199),
    calc(100% - 0px) var(--smooth-radius),
    calc(100% - 0px) calc(100% - var(--smooth-radius)),
    calc(100% - calc(var(--smooth-radius) * 0.0054)) calc(100% - calc(var(--smooth-radius) * 0.7199)),
    calc(100% - calc(var(--smooth-radius) * 0.0214)) calc(100% - calc(var(--smooth-radius) * 0.5703)),
    calc(100% - calc(var(--smooth-radius) * 0.0483)) calc(100% - calc(var(--smooth-radius) * 0.4514)),
    calc(100% - calc(var(--smooth-radius) * 0.086)) calc(100% - calc(var(--smooth-radius) * 0.3516)),
    calc(100% - calc(var(--smooth-radius) * 0.1347)) calc(100% - calc(var(--smooth-radius) * 0.2667)),
    calc(100% - calc(var(--smooth-radius) * 0.1948)) calc(100% - calc(var(--smooth-radius) * 0.1948)),
    calc(100% - calc(var(--smooth-radius) * 0.2667)) calc(100% - calc(var(--smooth-radius) * 0.1347)),
    calc(100% - calc(var(--smooth-radius) * 0.3516)) calc(100% - calc(var(--smooth-radius) * 0.086)),
    calc(100% - calc(var(--smooth-radius) * 0.4514)) calc(100% - calc(var(--smooth-radius) * 0.0483)),
    calc(100% - calc(var(--smooth-radius) * 0.5703)) calc(100% - calc(var(--smooth-radius) * 0.0214)),
    calc(100% - calc(var(--smooth-radius) * 0.7199)) calc(100% - calc(var(--smooth-radius) * 0.0054)),
    calc(100% - var(--smooth-radius)) calc(100% - 0px),
    var(--smooth-radius) calc(100% - 0px),
    calc(var(--smooth-radius) * 0.7199) calc(100% - calc(var(--smooth-radius) * 0.0054)),
    calc(var(--smooth-radius) * 0.5703) calc(100% - calc(var(--smooth-radius) * 0.0214)),
    calc(var(--smooth-radius) * 0.4514) calc(100% - calc(var(--smooth-radius) * 0.0483)),
    calc(var(--smooth-radius) * 0.3516) calc(100% - calc(var(--smooth-radius) * 0.086)),
    calc(var(--smooth-radius) * 0.2667) calc(100% - calc(var(--smooth-radius) * 0.1347)),
    calc(var(--smooth-radius) * 0.1948) calc(100% - calc(var(--smooth-radius) * 0.1948)),
    calc(var(--smooth-radius) * 0.1347) calc(100% - calc(var(--smooth-radius) * 0.2667)),
    calc(var(--smooth-radius) * 0.086) calc(100% - calc(var(--smooth-radius) * 0.3516)),
    calc(var(--smooth-radius) * 0.0483) calc(100% - calc(var(--smooth-radius) * 0.4514)),
    calc(var(--smooth-radius) * 0.0214) calc(100% - calc(var(--smooth-radius) * 0.5703)),
    calc(var(--smooth-radius) * 0.0054) calc(100% - calc(var(--smooth-radius) * 0.7199)),
    0px calc(100% - var(--smooth-radius)),
    0px var(--smooth-radius),
    calc(var(--smooth-radius) * 0.0054) calc(var(--smooth-radius) * 0.7199),
    calc(var(--smooth-radius) * 0.0214) calc(var(--smooth-radius) * 0.5703),
    calc(var(--smooth-radius) * 0.0483) calc(var(--smooth-radius) * 0.4514),
    calc(var(--smooth-radius) * 0.086) calc(var(--smooth-radius) * 0.3516),
    calc(var(--smooth-radius) * 0.1347) calc(var(--smooth-radius) * 0.2667),
    calc(var(--smooth-radius) * 0.1948) calc(var(--smooth-radius) * 0.1948),
    calc(var(--smooth-radius) * 0.2667) calc(var(--smooth-radius) * 0.1347),
    calc(var(--smooth-radius) * 0.3516) calc(var(--smooth-radius) * 0.086),
    calc(var(--smooth-radius) * 0.4514) calc(var(--smooth-radius) * 0.0483),
    calc(var(--smooth-radius) * 0.5703) calc(var(--smooth-radius) * 0.0214),
    calc(var(--smooth-radius) * 0.7199) calc(var(--smooth-radius) * 0.0054),
    var(--smooth-radius) 0px
  );
}

.lens-details__sheet::before {
  content: '';
  position: absolute;
  z-index: 0;
  inset: 0;
  --smooth-radius: 63px;
  border-radius: 63px 63px 0 0;
  background: rgba(255,255,255,.15);
  -webkit-backdrop-filter: blur(100px);
  backdrop-filter: blur(100px);
  pointer-events: none;
  -webkit-clip-path: polygon(
    calc(100% - var(--smooth-radius)) 0px,
    calc(100% - calc(var(--smooth-radius) * 0.7199)) calc(var(--smooth-radius) * 0.0054),
    calc(100% - calc(var(--smooth-radius) * 0.5703)) calc(var(--smooth-radius) * 0.0214),
    calc(100% - calc(var(--smooth-radius) * 0.4514)) calc(var(--smooth-radius) * 0.0483),
    calc(100% - calc(var(--smooth-radius) * 0.3516)) calc(var(--smooth-radius) * 0.086),
    calc(100% - calc(var(--smooth-radius) * 0.2667)) calc(var(--smooth-radius) * 0.1347),
    calc(100% - calc(var(--smooth-radius) * 0.1948)) calc(var(--smooth-radius) * 0.1948),
    calc(100% - calc(var(--smooth-radius) * 0.1347)) calc(var(--smooth-radius) * 0.2667),
    calc(100% - calc(var(--smooth-radius) * 0.086)) calc(var(--smooth-radius) * 0.3516),
    calc(100% - calc(var(--smooth-radius) * 0.0483)) calc(var(--smooth-radius) * 0.4514),
    calc(100% - calc(var(--smooth-radius) * 0.0214)) calc(var(--smooth-radius) * 0.5703),
    calc(100% - calc(var(--smooth-radius) * 0.0054)) calc(var(--smooth-radius) * 0.7199),
    calc(100% - 0px) var(--smooth-radius),
    100% 100%,
    0 100%,
    0px var(--smooth-radius),
    calc(var(--smooth-radius) * 0.0054) calc(var(--smooth-radius) * 0.7199),
    calc(var(--smooth-radius) * 0.0214) calc(var(--smooth-radius) * 0.5703),
    calc(var(--smooth-radius) * 0.0483) calc(var(--smooth-radius) * 0.4514),
    calc(var(--smooth-radius) * 0.086) calc(var(--smooth-radius) * 0.3516),
    calc(var(--smooth-radius) * 0.1347) calc(var(--smooth-radius) * 0.2667),
    calc(var(--smooth-radius) * 0.1948) calc(var(--smooth-radius) * 0.1948),
    calc(var(--smooth-radius) * 0.2667) calc(var(--smooth-radius) * 0.1347),
    calc(var(--smooth-radius) * 0.3516) calc(var(--smooth-radius) * 0.086),
    calc(var(--smooth-radius) * 0.4514) calc(var(--smooth-radius) * 0.0483),
    calc(var(--smooth-radius) * 0.5703) calc(var(--smooth-radius) * 0.0214),
    calc(var(--smooth-radius) * 0.7199) calc(var(--smooth-radius) * 0.0054),
    var(--smooth-radius) 0px
  );
  clip-path: polygon(
    calc(100% - var(--smooth-radius)) 0px,
    calc(100% - calc(var(--smooth-radius) * 0.7199)) calc(var(--smooth-radius) * 0.0054),
    calc(100% - calc(var(--smooth-radius) * 0.5703)) calc(var(--smooth-radius) * 0.0214),
    calc(100% - calc(var(--smooth-radius) * 0.4514)) calc(var(--smooth-radius) * 0.0483),
    calc(100% - calc(var(--smooth-radius) * 0.3516)) calc(var(--smooth-radius) * 0.086),
    calc(100% - calc(var(--smooth-radius) * 0.2667)) calc(var(--smooth-radius) * 0.1347),
    calc(100% - calc(var(--smooth-radius) * 0.1948)) calc(var(--smooth-radius) * 0.1948),
    calc(100% - calc(var(--smooth-radius) * 0.1347)) calc(var(--smooth-radius) * 0.2667),
    calc(100% - calc(var(--smooth-radius) * 0.086)) calc(var(--smooth-radius) * 0.3516),
    calc(100% - calc(var(--smooth-radius) * 0.0483)) calc(var(--smooth-radius) * 0.4514),
    calc(100% - calc(var(--smooth-radius) * 0.0214)) calc(var(--smooth-radius) * 0.5703),
    calc(100% - calc(var(--smooth-radius) * 0.0054)) calc(var(--smooth-radius) * 0.7199),
    calc(100% - 0px) var(--smooth-radius),
    100% 100%,
    0 100%,
    0px var(--smooth-radius),
    calc(var(--smooth-radius) * 0.0054) calc(var(--smooth-radius) * 0.7199),
    calc(var(--smooth-radius) * 0.0214) calc(var(--smooth-radius) * 0.5703),
    calc(var(--smooth-radius) * 0.0483) calc(var(--smooth-radius) * 0.4514),
    calc(var(--smooth-radius) * 0.086) calc(var(--smooth-radius) * 0.3516),
    calc(var(--smooth-radius) * 0.1347) calc(var(--smooth-radius) * 0.2667),
    calc(var(--smooth-radius) * 0.1948) calc(var(--smooth-radius) * 0.1948),
    calc(var(--smooth-radius) * 0.2667) calc(var(--smooth-radius) * 0.1347),
    calc(var(--smooth-radius) * 0.3516) calc(var(--smooth-radius) * 0.086),
    calc(var(--smooth-radius) * 0.4514) calc(var(--smooth-radius) * 0.0483),
    calc(var(--smooth-radius) * 0.5703) calc(var(--smooth-radius) * 0.0214),
    calc(var(--smooth-radius) * 0.7199) calc(var(--smooth-radius) * 0.0054),
    var(--smooth-radius) 0px
  );
}

.lens-details__sheet {
  background: transparent;
  -webkit-backdrop-filter: blur(100px);
  backdrop-filter: blur(100px);
  -webkit-clip-path: none;
  clip-path: none;
}

html:not(.is-standalone) .lens-details__sheet {
  --details-visible-height: calc(100dvh - 61px);
}

.lens-details__sheet::before {
  background-color: transparent;
  background-image: linear-gradient(
    to bottom,
    rgba(255, 255, 255, .15) 0%,
    rgba(255, 255, 255, .15) 18%,
    rgba(255, 255, 255, .135) 38%,
    rgba(255, 255, 255, .095) 62%,
    rgba(255, 255, 255, .045) 83%,
    transparent 100%
  );
  background-size: 100% var(--details-visible-height);
  background-repeat: no-repeat;
}

html:not(.is-standalone) .lens-form:not(.lens-form--edit-modal) .lens-form__overlay {
  background: none;
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
}

/* Compact layout for the site opened in a mobile browser.
   The installed standalone app keeps its existing positions. */
@media (display-mode: browser) and (max-width: 440px) {
  .lens-form:not(.lens-form--edit-modal) .lens-form__header { height: 93px; }
  .lens-form:not(.lens-form--edit-modal) .lens-form__back { top: 12px; }
  .lens-form:not(.lens-form--edit-modal) .lens-form__title { top: 37px; }
  .lens-form:not(.lens-form--edit-modal) .lens-form__content { padding-top: 16px; }

  .my-lenses-screen__back,
  .wear-history-screen__back {
    top: 12px;
  }

  .my-lenses-screen__header h1,
  .wear-history-screen__header h1 {
    top: 27px;
  }

  .my-lenses-screen__content,
  .wear-history-screen__content {
    top: 93px;
  }

  .lens-details__sheet {
    --details-visible-height: 100dvh;
  }

  .add-lenses__title {
    top: calc(12 / 956 * 100dvh);
  }

  .add-lenses__subtitle {
    top: calc(54 / 956 * 100dvh);
  }

  .profile-page__header {
    padding-top: calc(12 / 956 * 100dvh);
  }

  .profile-page__title {
    line-height: 1;
  }

  .profile-page__content {
    top: calc((12 / 956 * 100dvh) + clamp(24px, 7.27vw, 32px) + 32px);
    padding-top: 2px;
  }

  html:not(.is-standalone) .profile-page__content {
    padding-bottom: calc(var(--page-dots-bottom) + var(--page-dots-bottom) + 18px);
  }

  .add-lenses__action {
    top: calc(270 / 956 * 100dvh);
  }

  :root {
    --page-dots-bottom: max(10px, env(safe-area-inset-bottom, 0px));
  }

  .page-dots {
    position: fixed;
  }

  .lens-details__sheet {
    inset: 0 0 -100dvh;
    border-radius: 63px 63px 0 0;
  }
}

.notifications-screen {
  position: fixed;
  inset: 0;
  z-index: 70;
  width: 100%;
  max-width: 440px;
  min-height: 100dvh;
  margin: 0 auto;
  overflow: hidden;
  color: #fff;
  background: var(--app-background);
  box-shadow: -12px 0 36px rgba(17,64,87,.2);
  animation: my-lenses-screen-in 350ms cubic-bezier(.2,.52,.24,1) both;
}
.notifications-screen[hidden] { display: none; }
.notifications-screen--closing { pointer-events:none; animation: profile-subscreen-out 380ms cubic-bezier(.4,0,.2,1) both; }
.notifications-screen__header { position:absolute; inset:0 0 auto; height:135px; }
.notifications-screen__header h1 { position:absolute; top:87px; left:50%; margin:0; transform:translateX(-50%); font-size:18px; font-weight:600; white-space:nowrap; }
.notifications-screen__back { position:absolute; top:72px; left:18px; display:grid; place-items:center; width:50px; height:50px; padding:0; border:1px solid rgba(255,255,255,.05); border-radius:50%; background:rgba(255,255,255,.1); cursor:pointer; }
.notifications-screen__back img { width:22px; height:22px; }
.notifications-screen__content { position:absolute; top:153px; left:0; right:0; bottom:0; padding:0 18px calc(32px + env(safe-area-inset-bottom, 0px)); overflow-y:auto; }
.notifications-screen__intro { margin:0 8px 24px; font-size:20px; font-weight:550; line-height:1.35; }
.notifications-screen__card { padding:24px; border-radius:28px; background:rgba(225,244,255,.95); color:#10191e; }
.notifications-screen__label { font-size:18px; font-weight:600; }
.notifications-screen__choices { display:flex; gap:10px; margin:20px 0; }
.notifications-screen__choices button { flex:1; min-height:48px; border:0; border-radius:999px; background:transparent; color:rgba(25,93,129,.72); font:inherit; font-weight:600; cursor:pointer; }
.notifications-screen__choices button[aria-pressed="true"] { background:#2984b0; color:white; }
.notifications-screen__card p { margin:0; color:#557c91; font-size:14px; line-height:1.4; }
.notifications-screen__toggle,
.notifications-screen__test { display:block; width:100%; min-height:58px; padding:0 16px; border:0; border-radius:29px; font:650 17px var(--font-family); cursor:pointer; }
.notifications-screen__toggle { margin-top:20px; background:rgba(225,244,255,.95); color:#123c54; }
.notifications-screen__test { margin-top:10px; background:rgba(255,255,255,.13); color:#fff; }
.notifications-screen__toggle:disabled,
.notifications-screen__test:disabled { opacity:.55; cursor:default; }
.notifications-screen__toggle[hidden],
.notifications-screen__test[hidden],
.notifications-screen__install[hidden] { display:none; }
.notifications-screen__install { margin:20px 8px 0; color:rgba(255,255,255,.9); font-size:16px; line-height:1.45; }
.notifications-screen__install p { margin:0; }
.notifications-screen__install ol { margin:14px 0 0; padding-left:22px; }
.notifications-screen__install li + li { margin-top:8px; }
.notifications-screen__status { margin:12px 8px 0; font-size:15px; line-height:1.4; }
.notifications-screen__status:empty { display:none; }
.contact-screen__intro { margin:0 8px 14px; font-size:26px; font-weight:600; line-height:1.2; }
.contact-screen__description { margin:0 8px 26px; color:rgba(255,255,255,.84); font-size:17px; line-height:1.45; }
.contact-screen__link { display:grid; place-items:center; width:100%; min-height:58px; box-sizing:border-box; padding:0 16px; margin-top:20px; border:0; border-radius:29px; background:rgba(225,244,255,.95); color:#123c54; font:650 17px var(--font-family); text-decoration:none; }
.support-screen__content h2 { margin:0 8px 18px; font-size:26px; font-weight:600; line-height:1.2; }
.support-screen__content p { margin:0 8px 18px; color:rgba(255,255,255,.84); font-size:17px; line-height:1.45; }
.support-screen__link { display:grid; place-items:center; width:100%; min-height:58px; box-sizing:border-box; padding:0 16px; margin:28px 0 0; border:0; border-radius:29px; background:rgba(225,244,255,.95); color:#123c54; font:650 17px var(--font-family); text-decoration:none; }
.support-screen__link[hidden] { display:none; }
@media (display-mode: browser) and (max-width:440px) {
  .notifications-screen__back { top:12px; }
  .notifications-screen__header h1 { top:27px; }
  .notifications-screen__content { top:93px; }
}

/* iOS can initially report a shortened dynamic viewport in Home Screen mode.
   Use the stable full-screen height only for the installed app. */
html.is-standalone,
html.is-standalone body {
  height: 100lvh;
  min-height: 100lvh;
}

html.is-standalone .main-app,
html.is-standalone .main-app__viewport,
html.is-standalone .main-app__track,
html.is-standalone .main-app__page,
html.is-standalone .add-lenses {
  min-height: 100lvh;
}

html.is-standalone .add-lenses__title {
  top: calc((84 / 956 * 100lvh) + 14px);
}

html.is-standalone .add-lenses__subtitle {
  top: calc((122 / 956 * 100lvh) + 14px);
}

html.is-standalone .profile-page__header {
  padding-top: calc((84 / 956 * 100lvh) + 14px);
}

html.is-standalone .profile-page__title {
  line-height: 1;
}

html.is-standalone .profile-page__content {
  top: calc((84 / 956 * 100lvh) + clamp(24px, 7.27vw, 32px) + 54px);
  padding-top: 2px;
}

html.is-standalone .add-lenses__action {
  top: calc(310 / 956 * 100lvh);
}

html.is-standalone {
  --page-dots-bottom: 35px;
}

html.is-standalone .page-dots {
  position: fixed;
}

html.is-standalone .lens-details {
  height: 100lvh;
}

html.is-standalone .lens-details__sheet {
  inset: 77px 0 -100lvh;
  --details-visible-height: calc(100lvh - 77px);
}

html.is-standalone .lens-details__scroll {
  bottom: 100lvh;
}

html.is-standalone #lens-details-cancel {
  bottom: 250px;
}

html.is-standalone #lens-details-edit {
  bottom: 187px;
}

@media (min-width: 960px) {
  .main-app {
    --desktop-pane-shift: 0px;
  }

  .main-app--subscreen-open {
    --desktop-pane-shift: -226px;
  }

  .main-app__viewport {
    transform: translate3d(var(--desktop-pane-shift), 0, 0);
    transition: transform 500ms cubic-bezier(.25,.78,.22,1);
  }

  .main-app .page-dots {
    left: calc(50% + var(--desktop-pane-shift));
    transition: left 500ms cubic-bezier(.25,.78,.22,1);
  }

  .main-app--subscreen-open .main-app__viewport {
    pointer-events: none;
  }

  .main-app--subscreen-open #profile-screen {
    transform: scale(1);
    opacity: 1;
  }

  .my-lenses-screen,
  .wear-history-screen,
  .notifications-screen {
    left: calc(50% + 6px);
    right: auto;
    width: 440px;
    max-width: none;
    margin: 0;
    background: transparent;
    box-shadow: none;
    animation: none;
    opacity: 0;
    transform: translate3d(226px, 0, 0);
    transition: transform 500ms cubic-bezier(.25,.78,.22,1), opacity 320ms cubic-bezier(.4,0,.4,1);
  }

  .main-app--subscreen-open .my-lenses-screen,
  .main-app--subscreen-open .wear-history-screen,
  .main-app--subscreen-open .notifications-screen {
    opacity: 1;
    transform: translate3d(0, 0, 0);
    transition: transform 500ms cubic-bezier(.25,.78,.22,1), opacity 300ms ease-out;
  }

  .my-lenses-screen--closing,
  .wear-history-screen--closing,
  .notifications-screen--closing {
    animation: none;
  }
}

@media (min-width: 960px) {
  .lens-details__sheet {
    inset: 61px 0 26px;
    overflow: hidden;
    border-radius: 63px;
    background: #63a5c5;
    -webkit-backdrop-filter: none;
    backdrop-filter: none;
    box-shadow: 0 22px 60px rgba(8, 65, 94, .14);
  }

  .lens-details__sheet::before {
    content: none;
  }

  .lens-details__scroll {
    bottom: 0;
  }

  .lens-details__body {
    height: 100%;
  }

  html:not(.is-standalone) #lens-details-cancel {
    bottom: 89px;
  }

  html:not(.is-standalone) #lens-details-edit {
    bottom: 26px;
  }
}

@media (min-width: 960px) and (max-height: 600px) {
  .lens-details__sheet {
    top: 24px;
  }
}

@media (min-width: 960px) {
  /* Keep confirmation cards at the same size as their mobile counterparts. */
  .lens-cancel-confirm {
    background: rgba(0, 0, 0, .08);
    -webkit-backdrop-filter: blur(7px);
    backdrop-filter: blur(7px);
    animation: lens-ios-overlay-in 480ms cubic-bezier(.22,.72,.24,1) both;
  }

  .lens-cancel-confirm--closing {
    animation: lens-ios-overlay-out 280ms cubic-bezier(.4,0,.6,1) both;
  }

  #cancel-confirm .lens-cancel-confirm__card {
    left: calc(50% - 202px);
    right: auto;
    width: 404px;
  }

  .lens-expired-notice {
    max-width: none;
    margin: 0;
  }

  .lens-expired-notice .lens-cancel-confirm__card {
    max-width: 404px;
    margin: auto;
  }

  /* The edit form is narrow, but its backdrop spans the whole desktop. */
  body:has(.lens-form--edit-modal:not([hidden])) .main-app::after {
    content: '';
    position: fixed;
    z-index: 90;
    inset: 0;
    background: rgba(0, 0, 0, .08);
    -webkit-backdrop-filter: blur(7px);
    backdrop-filter: blur(7px);
    pointer-events: none;
    animation: lens-ios-overlay-in 480ms cubic-bezier(.22,.72,.24,1) both;
  }

  body:has(.lens-form--edit-closing:not([hidden])) .main-app::after {
    animation: lens-ios-overlay-out 280ms cubic-bezier(.4,0,.6,1) both;
  }

  .lens-form--edit-modal .lens-form__overlay {
    background: transparent;
    -webkit-backdrop-filter: none;
    backdrop-filter: none;
    animation: none;
  }
}