:root {
  --purple: #7d26cd;
  --light: #fbf6ff;
  --muted: #eadbfa;
  --ink: #39116d;
  --lilac: #ead9fa;
  --mint: #c0f4dc;
  --peach: #ffccb8;
  --red: #b6243b;
  color-scheme: dark;
  font-family: system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  line-height: 1.5;
  color: var(--light);
  background: var(--purple);
}
*, *::before, *::after { box-sizing: border-box; }
body { margin: 0; }
img { display: block; max-width: 100%; }
ul, figure, p, h1, h2 { margin: 0; }
a { color: inherit; text-decoration: none; }
:is(a, button, summary, textarea):focus-visible { outline: 3px solid var(--mint); outline-offset: 4px; }
[id] { scroll-margin-top: 1.5rem; }
.wrap { width: min(100% - 3rem, 68rem); margin-inline: auto; }
.skip {
  position: absolute;
  z-index: 1;
  inset: .5rem auto auto .5rem;
  transform: translateY(-160%);
  background: var(--lilac);
  color: var(--ink);
  border-radius: .5rem;
  padding: .65rem 1rem;
}
.skip:focus { transform: none; }

.site-header {
  display: flex;
  align-items: center;
  gap: clamp(1rem, 4vw, 2.75rem);
  padding-block: clamp(1.5rem, 5vw, 3.5rem);
}
.brand {
  display: inline-flex;
  width: fit-content;
  align-items: center;
  gap: .65rem;
  font-size: 1.58rem;
  font-weight: 550;
  letter-spacing: -.045em;
  line-height: 1;
}
.site-header .brand { flex: none; margin-inline-end: auto; }
.site-header nav { display: flex; gap: clamp(1rem, 3vw, 2.25rem); }
.site-header nav a { color: var(--muted); font-size: .94rem; font-weight: 550; }
.site-header nav a:hover, .site-footer nav a:hover { text-decoration: underline; text-underline-offset: .22em; }
.mobile-menu { display: none; position: relative; z-index: 2; }
.mobile-menu summary::-webkit-details-marker { display: none; }
.mobile-menu .line-icon { width: 1.5rem; height: 1.5rem; }
.mobile-menu summary, .icon-button {
  display: grid;
  place-items: center;
  width: 2.75rem;
  height: 2.75rem;
  padding: 0;
  border: 0;
  border-radius: .68rem;
  background: var(--ink);
  color: var(--light);
  cursor: pointer;
  list-style: none;
}
.site-header .mobile-menu nav {
  position: absolute;
  inset: calc(100% + .5rem) 0 auto auto;
  display: grid;
  gap: .25rem;
  min-width: 10rem;
  padding: .4rem;
  border-radius: .75rem;
  background: var(--ink);
}
.site-header .mobile-menu a { padding: .65rem .75rem; }

.button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: .65rem;
  width: fit-content;
  padding: .65rem 1rem;
  min-height: 2.75rem;
  border-radius: .68rem;
  background: var(--lilac);
  color: var(--ink);
  font-weight: 650;
  font-size: .95rem;
}
:is(a, button).button:hover { background: #f6ecff; }
button.button { border: 0; font-family: inherit; cursor: pointer; }
.line-icon {
  width: 1.2rem;
  height: 1.2rem;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.75;
  stroke-linecap: round;
  stroke-linejoin: round;
  flex: none;
}
.hero {
  display: grid;
  grid-template-columns: 1.05fr 1fr;
  gap: clamp(2rem, 5vw, 4.5rem);
  align-items: center;
  padding-top: clamp(3rem, 9vw, 8rem);
}
h1 {
  font-size: clamp(2rem, 4.1vw, 3.05rem);
  line-height: 1.12;
  font-weight: 540;
  letter-spacing: -.047em;
}
.hero h1 span { display: block; color: var(--mint); }
.integrations {
  list-style: none;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: clamp(.25rem, 1.5vw, .9rem);
  max-width: 25rem;
  margin-block: 2rem 1.8rem;
}
.integrations li {
  display: flex;
  align-items: center;
  flex-direction: column;
  text-align: center;
  gap: .45rem;
  color: var(--muted);
  font-size: clamp(.625rem, 1.3vw, .79rem);
  line-height: 1.2;
}
.tile { display: grid; place-items: center; width: 2.75rem; height: 2.75rem; border-radius: .75rem; }
.whatsapp { background: #d0f4dc; }
.telegram { background: #d1edfd; }
.signal { background: #d7e5ff; }
.discord { background: #e4dcfb; }
.instagram { background: #fbd9eb; }

.demo {
  display: grid;
  justify-items: center;
  align-content: center;
  position: relative;
  min-height: 15rem;
  aspect-ratio: 1.54;
  padding: 2.5rem 1rem 1.4rem;
  background: #8c3bd6;
  border-radius: 1.15rem;
}
.demo-dots { position: absolute; top: 1.1rem; left: 1.15rem; display: flex; gap: .42rem; }
.demo-dots i { width: .6rem; height: .6rem; border-radius: 50%; background: var(--peach); }
.demo-dots i:nth-child(2) { background: #fadb86; }
.demo-dots i:nth-child(3) { background: #a4e1fa; }
.demo-art { position: relative; padding: .5rem; }
.bubble { position: absolute; width: 1.8rem; height: 1.18rem; border-radius: .55rem; }
.bubble::after {
  content: "";
  position: absolute;
  bottom: -.22rem;
  width: .42rem;
  height: .42rem;
  background: inherit;
  transform: skewY(34deg);
}
.bubble-mint { bottom: 0; right: calc(100% + .2rem); background: var(--mint); }
.bubble-mint::after { right: .37rem; }
.bubble-peach { top: 0; left: calc(100% + .2rem); background: var(--peach); }
.bubble-peach::after { left: .37rem; transform: skewY(-34deg); }
.demo figcaption { font-size: .88rem; color: var(--light); margin-top: 1.45rem; }

h2 { font-size: clamp(1.4rem, 3vw, 2rem); line-height: 1.25; font-weight: 550; letter-spacing: -.031em; }
.memory { padding-top: clamp(4.5rem, 12vw, 10rem); }
.memory > h2 { text-align: center; }
.memory-scene {
  --ram-duration: 1.35s;
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  max-width: 57rem;
  margin: 1.65rem auto 0;
}
.memory-side {
  display: grid;
  grid-template-rows: auto 1fr auto;
  align-items: start;
  gap: 1rem;
  min-width: 0;
  padding: clamp(.8rem, 3vw, 1.8rem);
}
.memory-side h3 { margin: 0; text-align: center; font-size: clamp(1rem, 2.1vw, 1.25rem); }
.memory-one { position: relative; }
.memory-one::before {
  content: '';
  position: absolute;
  inset-block: 0;
  inset-inline-start: 0;
  width: 1px;
  background: linear-gradient(transparent, rgb(251 246 255 / 29%) 24% 76%, transparent);
}
@supports (grid-template-rows: subgrid) {
  .memory-scene { grid-template-rows: auto 1fr auto; }
  .memory-side { grid-row: 1 / span 3; grid-template-rows: subgrid; }
}
.memory-stack {
  display: grid;
  align-content: center;
  gap: .2rem;
  align-self: stretch;
  width: min(100%, 14rem);
  min-height: 12rem;
  margin: 0 auto;
  padding: 0;
  list-style: none;
}
.memory-stack li { display: grid; gap: .2rem; }
.memory-plus { text-align: center; color: var(--muted); line-height: 1; }
.memory-app {
  display: flex;
  align-items: center;
  gap: .55rem;
  width: 100%;
  padding: .5rem .65rem;
  border: 1px solid #dfcaef;
  border-radius: .6rem;
  background: #f4e9fc;
  box-shadow: 0 .24rem .45rem rgb(39 7 70 / 17%);
  color: var(--ink);
  font-size: .86rem;
  font-weight: 650;
}
.memory-stack img { flex: none; }
.memory-focus {
  display: grid;
  align-content: center;
  justify-items: center;
  align-self: stretch;
  min-height: 12rem;
  text-align: center;
}
.memory-focus img { width: clamp(2.65rem, 6vw, 4.5rem); height: auto; }
.memory-stat {
  margin-top: .5rem;
  color: var(--mint);
  font-size: clamp(1rem, 2.6vw, 1.3rem);
  font-weight: 650;
  line-height: 1.15;
}
.memory-stat strong {
  display: block;
  font-size: clamp(2.5rem, 6.8vw, 4.45rem);
  line-height: 1;
  letter-spacing: -.08em;
}
.ram-indicator { align-self: end; color: #ffc2c7; font-size: .84rem; font-weight: 650; }
.memory-many .ram-indicator { --ram-color: #ff6579; grid-row: 3; }
.memory-one .ram-indicator { color: var(--mint); }
.ram-label { display: flex; align-items: center; justify-content: space-between; gap: .35rem; }
.ram-warning { width: 1.05rem; height: 1.05rem; color: #ffa0ab; }
.ram-track {
  overflow: hidden;
  height: .5rem;
  margin-top: .45rem;
  border-radius: 1rem;
  background: rgb(18 0 39 / 36%);
}
.ram-track span {
  display: block;
  width: 100%;
  height: 100%;
  border-radius: inherit;
  background: var(--ram-color, #9af1ca);
  transform-origin: left;
}
.memory-one .ram-track span { width: 20%; }
.memory-privacy { max-width: 17rem; margin-top: .75rem; color: var(--light); font-size: .85rem; text-wrap: balance; }
.memory-privacy .line-icon { color: var(--mint); margin-inline-end: .2rem; vertical-align: -.23em; }
@media (prefers-reduced-motion: no-preference) {
  .ram-pending .ram-track span { transform: scaleX(0); }
  .ram-pending .ram-warning { opacity: 0; }
  .ram-animating .ram-track span { animation: ram-fill var(--ram-duration) ease-out both; }
  .ram-animating .ram-warning {
    animation:
      ram-alert .18s ease-out var(--ram-duration) both,
      ram-pulse 2.4s ease-in-out calc(var(--ram-duration) + .18s) infinite;
  }

  @keyframes ram-fill {
    from { transform: scaleX(0); background-color: #9af1ca; }
    to { transform: scaleX(1); background-color: var(--ram-color, #9af1ca); }
  }
  @keyframes ram-alert { from { opacity: 0; } to { opacity: 1; } }
  @keyframes ram-pulse {
    0%, 100% { transform: scale(1); }
    50% { transform: scale(1.16); }
  }
}
@media (max-width: 35rem) {
  .memory-side { gap: .8rem; }
  .memory-app { gap: .3rem; padding: .36rem .4rem; font-size: .72rem; }
  .memory-stack img { width: .87rem; height: .87rem; }
  .memory-privacy { font-size: .75rem; }
  .memory-privacy .line-icon { width: .95rem; height: .95rem; }
}

.downloads { padding-top: clamp(4.5rem, 12vw, 10rem); text-align: center; }
.platforms {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 1.1rem;
  max-width: 48rem;
  list-style: none;
  padding: 0;
  margin: 1.75rem auto 0;
}
.platform {
  width: 100%;
  min-height: 4rem;
  padding-inline: clamp(.75rem, 3vw, 1.35rem);
  justify-content: flex-start;
}
.platform .line-icon { margin-inline-start: auto; }
.section-note { color: var(--muted); font-size: .86rem; margin-top: .8rem; }
.donation {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 1.25rem;
  padding-top: clamp(4.5rem, 12vw, 9rem);
  max-width: 57rem;
  margin-inline: auto;
}
.donation h2 span { color: var(--peach); }
.donation p { color: var(--muted); margin-top: .4rem; }
.button-donate { background: var(--red); color: white; padding-inline: 1.2rem; }
a.button-donate:hover { background: #9d1e33; }

#donate-dialog {
  width: min(100% - 2rem, 27rem);
  max-height: calc(100% - 2rem);
  padding: clamp(1rem, 5vw, 1.75rem);
  border: 1px solid #a66bdd;
  border-radius: 1.15rem;
  background: var(--ink);
  color: var(--light);
}
#donate-dialog::backdrop { background: rgb(23 6 45 / 75%); }
.dialog-close { float: right; margin: -.4rem -.4rem 0 .75rem; }
.dialog-close button { background: #54208b; }
#pix-instructions { margin-top: .55rem; color: var(--muted); }
.pix-heart { width: 1em; height: 1em; vertical-align: -.14em; color: #ff9cb0; }
.pix-qr { width: min(100%, 13rem); height: auto; margin: 1rem auto; border-radius: .6rem; }
#donate-dialog label { display: block; margin: 1rem 0 .4rem; font-size: .9rem; }
#pix-key {
  display: block;
  width: 100%;
  padding: .7rem .5rem;
  border: 1px solid #a66bdd;
  border-radius: .5rem;
  background: #290c51;
  color: var(--light);
  font: .875rem/1.4 ui-monospace, monospace;
  resize: none;
}
#copy-pix-key { width: 100%; margin-top: .75rem; }
.copy-status { min-height: 1.4em; margin-top: .45rem; color: var(--mint); font-size: .85rem; }
.pix-key-text { overflow-wrap: anywhere; }

.site-footer {
  display: grid;
  grid-template-columns: 1.2fr 1fr 1fr 1fr;
  gap: 2rem;
  margin-top: clamp(5rem, 14vw, 11rem);
  padding-bottom: 3rem;
  color: var(--muted);
  font-size: .88rem;
}
.site-footer .brand { color: var(--light); font-size: 1.37rem; }
.site-footer h2 { font-size: .92rem; font-weight: 640; letter-spacing: 0; color: var(--light); margin-bottom: .7rem; }
.site-footer nav a { display: block; width: fit-content; margin-top: .32rem; }
.site-footer p { max-width: 16rem; margin-top: .55rem; }
.site-footer small { grid-column: 1 / -1; font-size: .8rem; }
.social-link { display: inline-flex; align-items: center; gap: .5rem; min-height: 2.75rem; }
.social-link:hover { text-decoration: underline; }
.info { max-width: 47rem; padding-block: 2.5rem 5rem; }
.info section { margin-top: 2.3rem; }
.info p { color: var(--muted); margin-top: .5rem; }

@media (prefers-reduced-motion: no-preference) {
  html { scroll-behavior: smooth; }
  a.button { transition: background-color 180ms ease, transform 180ms ease; }
  a.button:hover { transform: translateY(-2px); }
  @supports (animation-timeline: view()) and (animation-range: entry 0% entry 100%) {
    @keyframes arrive { from { translate: 0 .5rem; } to { translate: 0 0; } }
    .reveal {
      animation: arrive 1s linear both;
      animation-timeline: view();
      animation-range: entry 0% entry 70%;
    }

  }
}

@media (max-width: 50rem) {
  .site-header .desktop-nav, .header-download { display: none; }
  .mobile-menu { display: block; }
  .hero { grid-template-columns: minmax(0, 1fr); align-items: start; }
  .hero h1 { max-width: 32rem; }
  .integrations { margin-bottom: 0; }
  .demo { width: min(100%, 32rem); }
  .site-footer { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 35rem) {
  .wrap { width: calc(100% - 2.25rem); }
  .site-header { gap: .7rem; }
  .platforms { grid-template-columns: 1fr; max-width: 23rem; gap: .65rem; }
  .platform { min-height: 3.5rem; padding-inline: 1.05rem; }
  .donation { align-items: flex-start; flex-direction: column; }
  .button-donate { align-self: flex-end; }
  .site-footer { column-gap: .9rem; }
}

.download-page { padding-block: clamp(2rem, 7vw, 6rem); }
.install-guide {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  align-items: center;
  gap: clamp(1.5rem, 6vw, 5rem);
}
.download-platform {
  display: grid;
  place-items: center;
  width: 3.25rem;
  height: 3.25rem;
  margin-bottom: 1.25rem;
  border-radius: .9rem;
  background: var(--lilac);
}
.installer { margin-top: 1.35rem; color: var(--muted); }
.installer [hidden] { display: none; }
.installer .button[aria-disabled="true"] { pointer-events: none; opacity: .78; }
.installer .button + p { margin-top: .6rem; }
.install-steps { margin-top: 2.2rem; }
.install-steps ol { padding-inline-start: 1.3rem; color: var(--muted); }
.install-steps li + li { margin-top: .65rem; }

.dmg-window {
  overflow: hidden;
  border-radius: 1rem;
  background: #f7f1fe;
  color: var(--ink);
}
.dmg-bar {
  position: relative;
  padding: .7rem;
  background: #eaddf6;
  text-align: center;
  font-size: .85rem;
}
.dmg-bar span {
  position: absolute;
  top: calc(50% - .23rem);
  left: .9rem;
  width: .46rem;
  height: .46rem;
  border-radius: 50%;
  background: #ed7892;
  box-shadow: .73rem 0 #e9b351, 1.46rem 0 #6ec9a1;
}
.dmg-stage { position: relative; min-height: 12.5rem; }
.dmg-item, .dmg-drag, .dmg-arrow { position: absolute; top: 3rem; translate: -50% 0; }
.dmg-item { display: grid; justify-items: center; gap: .55rem; font-size: .85rem; font-weight: 650; }
.dmg-source, .dmg-drag { left: 25%; }
.dmg-source img, .dmg-drag img { width: 4.5rem; height: 4.5rem; }
.dmg-target { left: 75%; }
.dmg-arrow { left: 50%; top: 4.7rem; width: 2rem; height: 2rem; color: #7b49ab; }
.dmg-drag { pointer-events: none; visibility: hidden; z-index: 1; }
.dmg-drag img { opacity: 0; }
.dmg-cursor { position: absolute; left: 66%; top: 66%; }
.dmg-copy {
  position: absolute;
  z-index: 2;
  inset: 3.1rem 0 auto;
  width: min(calc(100% - 1.25rem), 17.5rem);
  margin-inline: auto;
  padding: .9rem;
  border: 1px solid #dcc9ec;
  border-radius: .7rem;
  background: #fdfaff;
  box-shadow: 0 .6rem 1.4rem rgb(57 17 109 / 22%);
  visibility: hidden;
}
.dmg-copy-label { display: grid; font-size: .81rem; font-weight: 650; }
.dmg-copy-label span { grid-area: 1 / 1; }
.dmg-copied { opacity: 0; color: #276850; }
.dmg-progress {
  overflow: hidden;
  height: .45rem;
  margin-top: .65rem;
  border-radius: 1rem;
  background: #e8ddf0;
}
.dmg-progress span {
  display: block;
  width: 100%;
  height: 100%;
  border-radius: inherit;
  background: #8c3bd6;
  transform-origin: left;
  transform: scaleX(0);
}

@media (prefers-reduced-motion: no-preference) {
  .install-visual.motion-ready .dmg-stage { --dmg-loop: 8.3s; }
  .motion-ready .dmg-drag { visibility: visible; animation: dmg-drag var(--dmg-loop) linear infinite; }
  .motion-ready .dmg-drag img { animation: dmg-ghost var(--dmg-loop) linear infinite; }
  .motion-ready .dmg-cursor { animation: dmg-pointer var(--dmg-loop) ease-out infinite; }
  .motion-ready .dmg-target svg { animation: dmg-drop var(--dmg-loop) ease-out infinite; }
  .motion-ready .dmg-copy { animation: dmg-copy-window var(--dmg-loop) linear infinite; }
  .motion-ready .dmg-copying { animation: dmg-copy-label var(--dmg-loop) step-end infinite; }
  .motion-ready .dmg-copied { animation: dmg-done-label var(--dmg-loop) step-end infinite; }
  .motion-ready .dmg-progress span { animation: dmg-progress-fill var(--dmg-loop) linear infinite; }

  @keyframes dmg-drag {
    0%, 13% { left: 25%; }
    28%, 100% { left: 75%; }
  }
  @keyframes dmg-ghost {
    0%, 12%, 31%, 100% { opacity: 0; }
    14%, 27% { opacity: .95; }
  }
  @keyframes dmg-pointer {
    0% { transform: translate(1rem, 1rem); opacity: 0; }
    11%, 29% { transform: none; opacity: 1; }
    13% { transform: scale(.86); }
    38%, 100% { transform: translate(.6rem, .6rem); opacity: 0; }
  }
  @keyframes dmg-drop {
    0%, 26%, 35%, 100% { transform: none; }
    30% { transform: scale(1.1); }
  }
  @keyframes dmg-copy-window {
    0%, 32% { visibility: hidden; opacity: 0; transform: translateY(.35rem); }
    33% { visibility: visible; opacity: 0; transform: translateY(.35rem); }
    37%, 97% { visibility: visible; opacity: 1; transform: translateY(0); }
    100% { visibility: hidden; opacity: 0; }
  }
  @keyframes dmg-copy-label {
    0% { opacity: 1; }
    62%, 100% { opacity: 0; }
  }
  @keyframes dmg-done-label {
    0% { opacity: 0; }
    62%, 100% { opacity: 1; }
  }
  @keyframes dmg-progress-fill {
    0%, 37% { transform: scaleX(.03); }
    44% { transform: scaleX(.31); }
    54% { transform: scaleX(.7); }
    62%, 100% { transform: scaleX(1); }
  }
}
[data-motion].motion-paused [data-motion-stage] * { animation-play-state: paused; }

@media (max-width: 50rem) {
  .install-guide { grid-template-columns: minmax(0, 1fr); }
  .install-visual { width: min(100%, 32rem); }
}
@media (max-width: 22rem) {
  .download-page .dmg-arrow { width: 1.4rem; }
}