@font-face {
  font-family: Comfortaa;
  src: url("Comfortaa-variable.woff") format("woff");
  font-weight: 300 700;
  font-display: swap;
}

:root {
  color-scheme: dark;
  --background: #111214;
  --panel: #181a1d;
  --line: #33353a;
  --ink: #17181c;
  --white: #f5f5f6;
  --muted: #b9bbc1;
  --display: Comfortaa, system-ui, sans-serif;
  --lift: 180ms cubic-bezier(.2, .65, .3, 1);
  font-family: system-ui, sans-serif;
  line-height: 1.55;
  background: var(--background);
  color: var(--white);
  scroll-behavior: smooth;
}

*, *::before, *::after { box-sizing: border-box; }
[hidden] { display: none !important; }
body { margin: 0; }
img { display: block; max-width: 100%; }
button, a { -webkit-tap-highlight-color: transparent; }
a { color: inherit; text-decoration: none; }
button { font: inherit; }
h1, h2, h3, p { margin: 0; }
h1, h2 { font-family: var(--display); line-height: 1.04; letter-spacing: -.065em; }
h2 { font-size: clamp(2.3rem, 4.55vw, 4.05rem); font-weight: 600; }
h3 { font-size: 1rem; }
:focus-visible { outline: 2px solid #94adff; outline-offset: 4px; }
section[id] { scroll-margin-block-start: 28px; }

.shell { width: min(100% - 64px, 1216px); margin-inline: auto; }
.skip-link {
  position: fixed;
  inset: 12px auto auto 12px;
  z-index: 5;
  padding: 10px 18px;
  border-radius: 8px;
  background: var(--white);
  color: var(--ink);
  transform: translateY(-160%);
}
.skip-link:focus { transform: none; }

.site-header {
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  gap: 22px;
  margin-block: 24px 20px;
  min-height: 66px;
  padding: 8px 12px 8px 16px;
  border: 1px solid #36383c;
  border-radius: 20px;
  background: linear-gradient(120deg, #212326, #191a1c 60%, #1c1d21);
  box-shadow: inset 0 1px #ffffff0b;
}
.brand { display: inline-flex; align-items: center; gap: 11px; width: fit-content; font: 700 1.18rem var(--display); }
.brand-mark {
  display: grid;
  place-items: center;
  width: 36px;
  height: 36px;
  overflow: hidden;
  border-radius: 10px;
  background: #ececee;
}
.brand-mark img { width: 100%; height: auto; transform: scale(1.48); }
.site-nav, .footer-links { display: flex; align-items: center; gap: clamp(15px, 2.2vw, 30px); }
.site-nav a, .footer-links a { font-size: .88rem; font-weight: 550; color: var(--muted); transition: color var(--lift); }
.site-nav a:hover, .footer-links a:hover { color: white; }
.arrow-external {
  position: relative;
  display: inline-block;
  width: 9px;
  height: 9px;
  flex: 0 0 9px;
  margin-inline: 2px;
  border-top: 1.4px solid currentColor;
  border-right: 1.4px solid currentColor;
}
.arrow-external::before {
  content: "";
  position: absolute;
  top: 0;
  right: 0;
  width: 11px;
  height: 1.4px;
  background: currentColor;
  transform: rotate(-45deg);
  transform-origin: right center;
}
.button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: .75em;
  min-height: 48px;
  padding: 10px 17px;
  border: 1px solid transparent;
  border-radius: 13px;
  font-size: .88rem;
  font-weight: 700;
  line-height: 1.25;
  transition: transform var(--lift), background var(--lift), box-shadow var(--lift);
}
.button span { font-size: 1.12em; }
.button-nav { justify-self: end; background: #efeff2; color: var(--ink); box-shadow: inset 0 1px 0 white; }
.button-small { min-height: 41px; padding-inline: 14px; }
.button-ink { border-color: #33353b; background: linear-gradient(#2b2c31, #18191d); color: #fff; box-shadow: 0 4px 12px #11121626, inset 0 1px #fff2; }
.button-clear { border-color: #5b5e6747; color: var(--ink); background: #f6f6f9a6; }
@media (hover: hover) {
  .button:hover { transform: translateY(-2px); }
  .button-ink:hover { box-shadow: 0 8px 18px #11121644, inset 0 1px #fff3; }
  .button-clear:hover, .button-nav:hover { background: white; }
}

.hero {
  position: relative;
  isolation: isolate;
  display: grid;
  grid-template-columns: minmax(0, 1.1fr) minmax(0, .9fr);
  align-items: center;
  gap: 30px;
  min-height: 536px;
  padding: clamp(36px, 5.45vw, 76px);
  overflow: hidden;
  border: 1px solid #dbdbdf;
  border-radius: 30px;
  background: #e5e5e8;
  color: var(--ink);
}
.hero-landscape {
  position: absolute;
  z-index: -2;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: 56% center;
}
.hero::after {
  content: "";
  position: absolute;
  z-index: -1;
  inset: 0;
  background: linear-gradient(90deg, #f5f5f8e3 1%, #f0f0f3b3 37%, transparent 79%);
}
.project-link {
  display: inline-flex;
  gap: 9px;
  align-items: center;
  padding: 5px 11px;
  border: 1px solid #74778150;
  border-radius: 50px;
  background: #fefefe96;
  color: #393b43;
  font-size: .76rem;
  font-weight: 700;
  transition: background var(--lift);
}
.project-link:hover { background: white; }
.hero h1 { margin-block: 24px 17px; font-size: clamp(3.2rem, 6.18vw, 6rem); font-weight: 700; }
.hero-copy > p { max-width: 35ch; font-size: clamp(1rem, 1.5vw, 1.2rem); color: #343740; line-height: 1.62; }
.hero-actions { display: flex; flex-wrap: wrap; gap: 9px; margin-top: 27px; }
.hero-platforms { margin-top: 15px; color: #44464e; font-size: .79rem; font-weight: 600; }
.hero-emblem {
  justify-self: center;
  position: relative;
  width: min(100%, 343px);
  aspect-ratio: 1;
  padding: 8px;
  border: 1px solid #fff;
  border-radius: 33px;
  background: #ffffff40;
  box-shadow: 0 23px 45px -13px #2b2c3a69, inset 0 0 0 1px #dfdfe569;
  backdrop-filter: blur(13px);
  transform: rotate(-4deg);
  transition: transform 310ms cubic-bezier(.2, .65, .3, 1);
}
.hero-emblem img { height: 100%; width: 100%; border: 1px solid #ffffffdf; border-radius: 25px; object-fit: cover; }
@media (hover: hover) { .hero-emblem:hover { transform: translateY(-4px) rotate(-1deg); } }

.features { padding-block: 83px 84px; }
.section-heading {
  display: grid;
  grid-template-columns: minmax(0, 1.26fr) minmax(0, .74fr);
  align-items: end;
  gap: 32px;
}
.section-heading > p { max-width: 38ch; color: var(--muted); font-size: 1.02rem; }
.showcase { display: grid; grid-template-columns: minmax(0, .92fr) minmax(0, 1.86fr); gap: 18px; margin-top: 33px; }
.showcase:has(.feature-choices[hidden]) { grid-template-columns: 1fr; }
.feature-choices { display: grid; align-content: start; gap: 9px; }
.feature-choices button {
  display: grid;
  grid-template-columns: 39px minmax(0, 1fr) auto;
  align-items: center;
  gap: 12px;
  width: 100%;
  min-height: 95px;
  padding: 13px;
  border: 1px solid #2c2e33;
  border-radius: 16px;
  background: #181a1d;
  color: var(--white);
  text-align: left;
  cursor: pointer;
  transition: background var(--lift), border-color var(--lift);
}
.feature-choices button:hover { background: #25272c; }
.feature-choices button[aria-selected="true"] {
  border-color: #63666f;
  background: linear-gradient(115deg, #2b2d33, #202227);
  box-shadow: inset 0 1px #fff1;
}
.feature-choices button strong { display: block; font-size: .96rem; }
.feature-choices button span span { display: block; margin-top: 3px; color: var(--muted); font-size: .81rem; }
.feature-icon {
  position: relative;
  display: grid;
  place-content: center;
  width: 39px;
  height: 39px;
  border: 1px solid #484b52;
  border-radius: 11px;
  background: #141619;
  font-size: 1.28rem;
}
.feature-arrow { color: #c7c8cd; font-size: .87rem; }
.icon-message::before { content: ""; width: 16px; height: 13px; border: 1.5px solid; border-radius: 4px; }
.icon-message::after {
  content: "";
  position: absolute;
  z-index: 1;
  top: 22px;
  left: 13px;
  width: 5px;
  height: 5px;
  transform: rotate(-10deg) skewY(-30deg);
  border: solid currentColor;
  border-width: 0 0 1.5px 1.5px;
  background: #141619;
}
.icon-wave { display: flex; align-items: center; justify-content: center; gap: 2px; }
.icon-wave i { width: 2px; height: 7px; border-radius: 6px; background: currentColor; }
.icon-wave i:nth-child(2), .icon-wave i:nth-child(4) { height: 12px; }
.icon-wave i:nth-child(3) { height: 18px; }

.demo-frame {
  overflow: hidden;
  min-width: 0;
  border: 1px solid #42444b;
  border-radius: 19px;
  background: #1f2127;
  box-shadow: 0 18px 41px -25px #000, inset 0 1px #fff1;
}
.demo-top {
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  min-height: 44px;
  gap: 10px;
  padding: 0 15px;
  border-bottom: 1px solid #35373e;
  background: #26282e;
  color: #e4e5e8;
  font-weight: 650;
  font-size: .78rem;
}
.demo-dots { display: flex; gap: 5px; }
.demo-dots i { width: 7px; height: 7px; border-radius: 50%; background: #80828b; }
.demo-dots i:nth-child(2) { opacity: .8; }
.demo-dots i:nth-child(3) { opacity: .6; }
.demo-caption { justify-self: end; color: #cacbd0; font-size: .71rem; font-weight: 500; text-align: right; }
.demo-pane { display: grid; grid-template-columns: minmax(138px, .74fr) minmax(0, 2fr); min-height: 254px; font-size: .82rem; }
.demo-pane:focus-visible { outline-offset: -3px; }
.demo-sidebar {
  display: flex;
  flex-direction: column;
  gap: 3px;
  padding: 13px 10px 12px;
  border-right: 1px solid #34363c;
  background: #191b20;
}
.community-name { display: flex; align-items: center; gap: 7px; font-size: .79rem; font-weight: 700; min-height: 30px; padding: 0 5px; }
.server-icon {
  display: grid;
  flex: 0 0 22px;
  height: 22px;
  place-items: center;
  border-radius: 7px;
  background: #dddfe5;
  color: #262a33;
  font-size: .85rem;
}
.channel-group { padding: 8px 6px 2px; color: #bbbcc4; font-size: .7rem; font-weight: 650; }
.channel { display: flex; align-items: center; gap: 6px; min-height: 28px; padding: 3px 6px; border-radius: 6px; color: #c7c8cf; }
.channel-active { background: #353840; color: #fafafa; }
.channel b, .demo-heading b { color: #b5b7c0; }
.demo-main { display: flex; flex-direction: column; min-width: 0; }
.demo-heading { display: flex; align-items: center; gap: 6px; min-height: 46px; padding: 9px 14px; border-bottom: 1px solid #35373d; font-weight: 700; }
.demo-participants { margin-left: auto; color: #c7c8cf; font-size: .71rem; font-weight: 500; }
.demo-messages { flex: 1; display: grid; align-content: start; gap: 13px; padding: 14px; }
.demo-message { display: grid; grid-template-columns: 30px minmax(0, 1fr); gap: 9px; }
.demo-message strong { color: #f0f1f4; }
.demo-message small { margin-left: 6px; color: #adb0b9; font-size: .69rem; }
.demo-message p { margin-top: 2px; color: #e0e1e7; overflow-wrap: anywhere; }
.demo-avatar, .mini-avatar {
  display: grid;
  place-items: center;
  border-radius: 50%;
  background: #606574;
  color: white;
  font-weight: 650;
}
.demo-avatar { width: 30px; height: 30px; }
.demo-avatar-pale, .mini-avatar { background: #d2d4dc; color: #20222a; }
.mini-avatar { flex: 0 0 19px; height: 19px; font-size: .68rem; }
.demo-reaction { width: fit-content; margin-left: 39px; padding: 1px 8px; border: 1px solid #484b55; border-radius: 7px; background: #2a2d35; }
.demo-reaction span { font-size: .72rem; }
.demo-composer { display: flex; justify-content: space-between; align-items: center; gap: 6px; min-height: 31px; margin: 0 14px 13px; padding: 3px 8px; border: 1px solid #434650; border-radius: 7px; background: #2b2d35; color: #d0d2d9; font-size: .72rem; }
.sample-file { width: fit-content; margin-top: 6px; padding: 5px 7px; border: 1px solid #464954; border-radius: 7px; background: #2b2d35; font-size: .74rem; }
.voice-status { display: flex; align-items: center; gap: 6px; margin: auto 3px 2px; padding: 8px 5px 0; border-top: 1px solid #393c44; color: #d6d8de; font-size: .7rem; }
.voice-status i { flex: 0 0 6px; height: 6px; border-radius: 50%; background: #dfe5ef; box-shadow: 0 0 0 3px #dfe5ef18; }
.voice-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); flex: 1; gap: 9px; padding: 13px 14px; }
.voice-person {
  display: grid;
  place-items: center;
  align-content: center;
  gap: 8px;
  min-height: 136px;
  border: 1px solid #4d505a;
  border-radius: 12px;
  background: radial-gradient(ellipse at 50% 25%, #3d414c, #292c34 75%);
  font-size: .76rem;
}
.voice-person .demo-avatar { width: 45px; height: 45px; font-size: 1rem; }

.feature-details {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  margin-top: 27px;
  padding-top: 24px;
  border-top: 1px solid var(--line);
}
.feature-details > div { padding: 0 22px; }
.feature-details > div:first-child { padding-left: 0; }
.feature-details > div:last-child { padding-right: 0; }
.feature-details > div + div { border-left: 1px solid var(--line); }
.feature-details p { margin-top: 5px; color: var(--muted); font-size: .88rem; }

.download {
  isolation: isolate;
  position: relative;
  overflow: hidden;
  padding: clamp(25px, 5vw, 63px);
  border: 1px solid #f2f2f6;
  border-radius: 28px;
  background: #e9e9ee;
  color: var(--ink);
}
.download::after {
  content: "";
  position: absolute;
  z-index: -1;
  inset: 0;
  opacity: .42;
  background: radial-gradient(ellipse at 93% 17%, #fff 0 16%, transparent 52%), url("moonrise.webp") 57% center / cover;
}
.download .section-heading > p { color: #343740; }
.download-options { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 13px; margin-block: 28px 17px; }
.download-card {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  align-items: center;
  gap: 13px;
  min-height: 97px;
  padding: 15px;
  border: 1px solid #b9bbc4;
  border-radius: 17px;
  background: #ffffffca;
  box-shadow: 0 7px 19px -16px #1115, inset 0 1px white;
}
.download-info p { margin-top: 2px; color: #454851; font-size: .78rem; }
.platform-icon {
  position: relative;
  display: grid;
  place-items: center;
  width: 43px;
  height: 43px;
  border: 1px solid #dedfe5;
  border-radius: 12px;
  background: #e8e9ed;
}
.icon-windows { width: 8px; height: 8px; margin: 0 10px 10px 0; background: currentColor; box-shadow: 10px 0, 0 10px, 10px 10px; }
.icon-android { width: 21px; height: 12px; margin-top: 1px; border-radius: 10px 10px 2px 2px; background: currentColor; }
.icon-android::before {
  content: "";
  position: absolute;
  top: 19px;
  left: 15px;
  width: 2px;
  height: 2px;
  border-radius: 50%;
  color: #f2f2f2;
  background: currentColor;
  box-shadow: 8px 0;
}
.icon-android::after {
  content: "";
  position: absolute;
  top: 12px;
  left: 14px;
  width: 13px;
  height: 5px;
  border-inline: 1.5px solid;
  transform: perspective(15px) rotateX(35deg);
}
.releases-link { display: inline-flex; align-items: center; gap: 7px; padding-block: 6px; font-size: .87rem; font-weight: 700; }
.releases-link:hover { text-decoration: underline; }

.faq { display: grid; grid-template-columns: minmax(0, .7fr) minmax(0, 1.3fr); gap: 37px; padding-block: 77px 81px; }
.faq-heading p { margin-top: 11px; color: var(--muted); }
.faq-list { align-self: start; border-top: 1px solid var(--line); }
details { border-bottom: 1px solid var(--line); }
summary {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 15px;
  padding: 17px 4px;
  cursor: pointer;
  font-weight: 640;
  list-style: none;
}
summary::-webkit-details-marker { display: none; }
summary::after {
  content: "";
  flex: 0 0 8px;
  width: 8px;
  height: 8px;
  margin-right: 5px;
  border: solid #c8cad1;
  border-width: 0 1.5px 1.5px 0;
  transform: translateY(-2px) rotate(45deg);
  transition: transform var(--lift);
}
details[open] summary::after { transform: translateY(2px) rotate(225deg); }
summary:hover { color: #d4d9e5; }
details p { margin: -1px 4px 16px; color: var(--muted); font-size: .9rem; }
details a { color: var(--white); text-decoration: underline; text-underline-offset: 3px; }
.site-footer { display: flex; align-items: center; justify-content: space-between; gap: 20px; padding-block: 22px 37px; border-top: 1px solid var(--line); }
.site-footer .brand-mark { width: 31px; height: 31px; border-radius: 8px; }
.site-footer .brand { font-size: 1.03rem; }
.not-found { display: grid; place-items: center; min-height: 100svh; padding: 28px; text-align: center; }
.not-found p { color: var(--muted); }
.not-found h1 { margin-block: 13px 23px; font-size: clamp(2.5rem, 7vw, 5rem); }

@media (max-width: 1024px) {
  .download-card { grid-template-columns: auto minmax(0, 1fr); }
  .download-card .button { grid-column: 1 / -1; }
  .hero { min-height: 490px; }
  .demo-pane { grid-template-columns: minmax(120px, .68fr) minmax(0, 1.8fr); }
}
@media (max-width: 800px) {
  .shell { width: calc(100% - 36px); }
  .site-header { gap: 15px; margin-top: 16px; }
  .site-nav { gap: 13px; }
  .site-nav a { font-size: .8rem; }
  .hero { gap: 20px; min-height: 442px; padding: 33px; }
  .hero h1 { font-size: clamp(2.7rem, 7.2vw, 4.7rem); }
  .hero-emblem { width: min(100%, 270px); }
  .features { padding-block: 66px; }
  .section-heading { gap: 16px; }
  .showcase { grid-template-columns: 1fr; gap: 11px; margin-top: 25px; }
  .feature-choices { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 7px; }
  .feature-choices button { grid-template-columns: 32px minmax(0, 1fr); gap: 7px; min-height: 58px; padding: 7px; border-radius: 12px; }
  .feature-choices button strong { font-size: .84rem; }
  .feature-choices button span span, .feature-arrow { display: none; }
  .feature-icon { width: 32px; height: 32px; border-radius: 9px; }
  .icon-message::after { top: 18px; left: 10px; }
}
@media (max-width: 550px) {
  .shell { width: calc(100% - 28px); }
  .site-header { grid-template-columns: 1fr auto; min-height: 58px; margin-block: 13px; padding: 7px 8px 7px 11px; border-radius: 15px; }
  .site-nav { display: none; }
  .brand-mark { width: 32px; height: 32px; border-radius: 9px; }
  .hero { grid-template-columns: 1fr; gap: 20px; min-height: unset; padding: 28px 20px 26px; border-radius: 22px; }
  .hero-landscape { object-position: 64% center; }
  .hero::after { background: linear-gradient(175deg, #f7f7faec, #eeeef2b8 54%, #eff0f62b 91%); }
  .hero h1 { margin-block: 17px 12px; font-size: clamp(2.42rem, 11.4vw, 3.65rem); }
  .hero-actions { margin-top: 19px; }
  .hero-actions .button { min-height: 43px; padding-inline: 10px; font-size: .8rem; }
  .hero-platforms { margin-top: 12px; }
  .hero-emblem { justify-self: end; width: clamp(126px, 42vw, 178px); margin-right: 8px; padding: 5px; border-radius: 22px; transform: rotate(-3deg); }
  .hero-emblem img { border-radius: 16px; }
  .features { padding-block: 52px; }
  .section-heading { grid-template-columns: 1fr; gap: 12px; }
  h2 { font-size: clamp(2.1rem, 9.4vw, 3.2rem); }
  .desktop-break { display: none; }
  .section-heading > p { font-size: .94rem; }
  .demo-frame { border-radius: 14px; }
  .demo-top { min-height: 38px; padding-inline: 9px; gap: 5px; }
  .demo-pane { grid-template-columns: minmax(98px, .75fr) minmax(0, 1.65fr); min-height: 239px; }
  .demo-sidebar { padding-inline: 4px; }
  .demo-heading, .demo-messages { padding-inline: 8px; }
  .demo-composer { margin-inline: 8px; }
  .community-name { font-size: .69rem; }
  .demo-message { grid-template-columns: 23px minmax(0, 1fr); gap: 5px; }
  .demo-message .demo-avatar { width: 23px; height: 23px; font-size: .69rem; }
  .demo-reaction { margin-left: 28px; }
  .voice-grid { padding-inline: 8px; }
  .feature-choices button { grid-template-columns: 1fr; place-items: center; text-align: center; gap: 4px; min-height: 66px; }
  .feature-choices button strong { font-size: .72rem; }
  .feature-icon { width: 27px; height: 27px; border-radius: 7px; }
  .icon-message::after { top: 16px; left: 8px; }
  .feature-details { grid-template-columns: 1fr; gap: 14px; margin-top: 20px; padding-top: 17px; }
  .feature-details > div { padding: 0; }
  .feature-details > div + div { padding-top: 13px; border-left: 0; border-top: 1px solid var(--line); }
  .download { padding: 25px 17px; border-radius: 21px; }
  .download-options { grid-template-columns: 1fr; margin-block: 19px 11px; }
  .download-card { padding: 11px; }
  .download-card .button { min-height: 43px; }
  .faq { grid-template-columns: 1fr; gap: 19px; padding-block: 54px; }
  .site-footer { align-items: start; flex-direction: column; gap: 13px; }
  .footer-links { flex-wrap: wrap; }
}
@media (max-width: 365px) {
  .demo-pane { grid-template-columns: 1fr; }
  .demo-sidebar { display: none; }
}
@media (prefers-reduced-motion: reduce) {
  :root { scroll-behavior: auto; --lift: 0ms; }
  .hero-emblem { transition: none; }
  .button:hover, .hero-emblem:hover { transform: none; }
}