.bottom-nav button,
.bottom-nav button[aria-current="page"] {
  background: transparent !important;
  border-radius: 18px;
}
.bottom-nav {
  display: flex;
  align-items: center;
  padding-top: 0 !important;
  padding-bottom: env(safe-area-inset-bottom, 0px) !important;
}
.bottom-nav > div {
  width: 100%;
  align-items: center;
}
.nav-capsule {
  display: none !important;
}
.bottom-nav button {
  color: #8e8e93 !important;
  background: transparent !important;
  transition: color 200ms ease;
}
.bottom-nav button[aria-current="page"],
.bottom-nav button[aria-current="page"] .symbol {
  color: #07c160 !important;
}
.bottom-nav button.nav-pop .symbol {
  animation: navIcon 400ms cubic-bezier(.2, 1.45, .32, 1);
}
@keyframes navIcon {
  0% { transform: scale(1); }
  32% { transform: scale(.78); }
  68% { transform: scale(1.16); }
  100% { transform: scale(1); }
}
#main.motion-forward { animation: pageForward 400ms cubic-bezier(.22, .8, .24, 1); }
#main.motion-back { animation: pageBack 400ms cubic-bezier(.22, .8, .24, 1); }
@keyframes pageForward {
  from { opacity: 0; transform: translate3d(36px, 0, 0); }
  to { opacity: 1; transform: none; }
}
@keyframes pageBack {
  from { opacity: 0; transform: translate3d(-36px, 0, 0); }
  to { opacity: 1; transform: none; }
}
.choice-pill {
  border-radius: 12px;
  background: color-mix(in srgb, var(--green) 20%, var(--paper));
  box-shadow: inset 0 0 0 1.5px var(--green);
}
.choices:has(.choice-pill) button,
.choices:has(.choice-pill) button[aria-pressed="true"] {
  background: transparent !important;
  border-color: transparent !important;
  box-shadow: none !important;
}
button.motion-tap,
a.primary.motion-tap {
  animation: tapSpring 320ms cubic-bezier(.2, 1.35, .32, 1);
}
@keyframes tapSpring {
  0% { transform: scale(1); }
  38% { transform: scale(.96); }
  72% { transform: scale(1.04); }
  100% { transform: scale(1); }
}
.tool-card.motion-tap .card-photo {
  animation: photoPress 320ms cubic-bezier(.2, 1.25, .32, 1);
}
@keyframes photoPress {
  0% { transform: scale(1); }
  40% { transform: scale(.96); }
  100% { transform: scale(1); }
}
.primary { overflow: hidden; }
.output-options:has(details[open]) { z-index: 40; }
.choice-menu[open] { z-index: 2; }
#authSubmit { justify-content: center; text-align: center; }
.top-end { margin-inline-start: auto; display: flex; align-items: center; gap: 8px; }
.lang-icon { position: relative; flex: 0 0 auto; }
.lang-icon > summary {
  width: 44px;
  height: 44px;
  min-width: 44px;
  min-height: 44px;
  padding: 0;
  margin: 0;
  display: grid;
  place-items: center;
  list-style: none;
  border: 0;
  border-radius: 50%;
  background: transparent;
  color: #8e8e93;
  cursor: pointer;
}
.lang-icon > summary::-webkit-details-marker { display: none; }
.lang-glyph { width: 26px; height: 26px; display: block; }
.lang-icon .choice-menu-list { position: absolute; top: calc(100% + 6px); right: 0; left: auto; width: 168px; z-index: 60; }
button.primary[data-auth="account"] { justify-content: center; text-align: center; }
.account-auth-links { margin: 4px 0 0; }
.account-auth-links .auth-link { font-size: 12px; min-height: 28px; }
.auth-links { display: flex; justify-content: center; align-items: center; gap: 8px; margin: 8px 0 0; }
.auth-link { background: none; border: 0; color: var(--green); font-size: 13px; line-height: 1.4; min-height: 32px; padding: 4px 2px; }
.field.float-field { position: relative; }
.field.float-field > label {
  position: absolute;
  z-index: 2;
  left: 14px;
  top: 20px;
  margin: 0;
  color: var(--muted);
  font-weight: 500;
  pointer-events: none;
  transform-origin: left center;
  transition: transform 200ms ease-out, color 200ms ease-out;
}
.field.float-field > input,
.field.float-field > textarea {
  padding-top: 26px !important;
  min-height: 58px;
}
.field.float-field.is-raised > label,
.field.float-field:focus-within > label {
  transform: translateY(-14px) scale(.8);
  color: var(--green);
}
.strength { min-height: 28px; }
.swipe-row { position: relative; overflow: hidden; border-radius: 13px; }
.swipe-delete {
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  width: 80px;
  border: 0;
  background: #d4534a;
  color: #fff;
  font-weight: 650;
}
.swipe-row > .creation { position: relative; z-index: 1; background: var(--paper); }
.plans { position: relative; }
.plan-pill {
  position: absolute;
  z-index: 0;
  border-radius: 14px;
  pointer-events: none;
  box-shadow: inset 0 0 0 2px var(--green);
  background: color-mix(in srgb, var(--green) 12%, transparent);
}
.plans:has(.plan-pill) .plan { position: relative; z-index: 1; background: transparent; }