:root {
  --ink: #070b14;
  --bg: #070b14;
  --panel: #0c1224;
  --panel-2: #121a30;
  --paper: #f4f1ea;
  --stone: #b9b4c6;
  --lime: #d6f25c;
  --gold: #f0c14d;
  --lime-ink: #161a09;
  --hair: rgba(255, 255, 255, 0.1);
  --danger: #ff8d7d;
  --sans: "Manrope", ui-sans-serif, system-ui, sans-serif;
  --display: "Syne", ui-sans-serif, system-ui, sans-serif;
  --line: 0 0 0 1px rgba(255, 255, 255, 0.1), 0 18px 40px rgba(0, 0, 0, 0.35);
  --lift: 0 0 0 1px rgba(214, 242, 92, 0.5), 0 18px 40px rgba(0, 0, 0, 0.35);
}
* { box-sizing: border-box; }
html { background: #070b14; color: var(--paper); }
body {
  margin: 0;
  min-height: 100dvh;
  font-family: var(--sans);
  background: transparent;
  color: var(--paper);
  -webkit-font-smoothing: antialiased;
}
body.page { display: flex; flex-direction: column; }
main, footer.foot { position: relative; z-index: 1; }
h1, h2, h3 { font-family: Inter, Manrope, ui-sans-serif, system-ui, sans-serif; text-wrap: balance; font-weight: 700; margin: 0; line-height: 1.3; }
p { text-wrap: pretty; }
a { color: inherit; text-decoration: none; }
button, [role="button"], label.btn { cursor: pointer; }
button, input, textarea, select { font: inherit; color: inherit; }
button {
  appearance: none;
  background: transparent;
  border: 0;
  padding: 0;
  line-height: 1;
}
button:disabled { cursor: not-allowed; opacity: 0.4; }
:focus-visible { outline: 2px solid var(--lime); outline-offset: 2px; }
::selection { background: var(--lime); color: var(--lime-ink); }
.wrap { width: min(72rem, calc(100% - 2rem)); margin: 0 auto; }
.navline {
  position: fixed; top: 0; left: 0; z-index: 80; height: 2px; width: 0;
  background: #d6f25c; box-shadow: 0 0 10px rgba(214, 242, 92, 0.75);
  pointer-events: none; opacity: 0;
}
.navline.go { opacity: 1; transition: width 0.4s ease, opacity 0.25s ease; }
header.top {
  position: sticky; top: 0; z-index: 20;
  border-bottom: 1px solid var(--hair);
  background: #070b14;
}
.bar { height: 4rem; display: flex; align-items: center; gap: 0.75rem; }
.logo {
  display: inline-flex; align-items: center; gap: 0.7rem; flex-shrink: 0;
  font-family: var(--display); font-size: 1.15rem; line-height: 1; white-space: nowrap;
}
.mark {
  width: 2.35rem; height: 2.35rem; flex: 0 0 2.35rem;
  display: grid; place-items: center;
  border-radius: 0.72rem;
  background: linear-gradient(160deg, #f3ffb0, #c6e24a);
  color: #1a2208;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.7), 0 8px 18px rgba(214, 242, 92, 0.22);
}
.logo-img { width: 2.4rem; height: 2.4rem; border-radius: 0; object-fit: contain; display: block; flex: 0 0 2.4rem; background: transparent; }
.find { flex: 0 1 14rem; width: 14rem; max-width: 14rem; min-width: 9rem; margin: 0 0.35rem; }
.find input {
  width: 100%; height: 2.45rem; border: 0; border-radius: 99px;
  background: rgba(255, 255, 255, 0.06) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23b9b4c6' stroke-width='2'%3E%3Ccircle cx='11' cy='11' r='6.5'/%3E%3Cpath d='M16 16l4 4'/%3E%3C/svg%3E") no-repeat 0.8rem 50% / 1rem;
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.12);
  color: var(--paper); padding: 0 0.95rem 0 2.35rem;
}
.find input::placeholder { color: var(--stone); }
.seller img { width: 2.7rem; height: 2.7rem; border-radius: 0; object-fit: contain; background: transparent; }
.seller { display: flex; align-items: center; gap: 0.75rem; }
.seller p, .seller b { display: block; margin: 0; line-height: 1.25; }
nav.desk { display: none; margin-left: 0.5rem; gap: 0.15rem; align-items: center; }
nav.desk a, .nav-btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 0.4rem;
  height: 2.5rem; padding: 0 0.75rem; border-radius: 0.7rem;
  color: var(--stone); font-size: 0.95rem; line-height: 1; white-space: nowrap;
}
nav.desk .account > .nav-pop {
  display: inline-flex; align-items: center; height: 2.5rem; padding: 0 0.75rem;
  border: 0; border-radius: 0.7rem; background: none; color: var(--stone);
  font: inherit; font-size: 0.95rem; line-height: 1; cursor: pointer; white-space: nowrap;
}
nav.desk .account.open > .nav-pop, nav.desk .account > .nav-pop:hover { color: var(--paper); background: rgba(255, 255, 255, 0.06); }
nav.desk svg, nav.mobile svg { width: 1.05rem; height: 1.05rem; flex: none; }
a.tg {
  position: fixed; right: 1.1rem; bottom: 1.1rem; z-index: 30;
  display: inline-flex; align-items: center; gap: 0.45rem;
  height: 3rem; padding: 0 1rem; border-radius: 0.45rem;
  background: #229ed9; color: #fff; font-weight: 700; font-size: 0.95rem;
  box-shadow: 0 10px 24px rgba(0, 0, 0, 0.35);
}
a.tg:hover { color: #fff; background: #1b8ec4; }
a.tg svg { width: 1.15rem; height: 1.15rem; flex: none; }
.langs { display: inline-flex; align-items: center; gap: 0.15rem; }
.langs a {
  min-width: 2.1rem; height: 2rem; padding: 0 0.35rem;
  display: inline-flex; align-items: center; justify-content: center;
  border-radius: 0.55rem; color: var(--stone); font-size: 0.78rem; font-weight: 700;
}
.langs a.on { background: var(--lime); color: var(--lime-ink); }
.grow { margin-left: auto; display: flex; align-items: center; gap: 0.55rem; }
.grow form { display: flex; align-items: center; margin: 0; }
.who { display: flex; align-items: center; gap: 0.55rem; max-width: 14rem; height: 2.5rem; background: none; border: 0; color: inherit; font: inherit; cursor: pointer; padding: 0; }
.account { position: relative; }
.account-menu {
  display: grid;
  gap: 0.15rem;
  position: absolute;
  top: calc(100% + 0.85rem);
  left: 0;
  min-width: 100%;
  padding: 0.3rem;
  border-radius: 0.85rem;
  background: #10162a;
  box-shadow: 0 0 0 1px rgba(255, 255, 255, 0.1), 0 14px 32px rgba(0, 0, 0, 0.45);
  z-index: 30;
  transform-origin: top;
  clip-path: inset(0 0 100% 0 round 0.85rem);
  opacity: 0;
  transform: translateY(-0.35rem);
  pointer-events: none;
  transition: clip-path 0.28s ease, opacity 0.22s ease, transform 0.28s ease;
}
.account.open .account-menu {
  clip-path: inset(0 0 0 0 round 0.85rem);
  opacity: 1;
  transform: none;
  pointer-events: auto;
}
.account-menu a {
  display: flex;
  align-items: center;
  height: 2.25rem;
  margin: 0;
  padding: 0 0.85rem;
  border-radius: 0.6rem;
  color: var(--paper);
  line-height: 1;
  white-space: nowrap;
}
.account-menu a:hover, .account-menu a.on { background: rgba(180, 156, 255, 0.16); color: #d7ccff; }
.account-menu .langs { padding: 0.15rem 0.4rem 0.2rem; }
.account-menu .langs a.on { background: var(--lime); color: var(--lime-ink); }
.sell-link {
  display: inline-flex; align-items: center; gap: 0.4rem;
  height: 2.5rem; padding: 0 0.75rem; border-radius: 0.7rem;
  color: var(--stone); font-size: 0.95rem; line-height: 1; white-space: nowrap;
}
.sell-link svg { width: 1.05rem; height: 1.05rem; flex: none; }
.sell-link:hover, .sell-link.on { color: var(--paper); background: rgba(255, 255, 255, 0.06); }
.account-menu form { margin: 0; }
.account-menu button {
  display: flex; align-items: center; width: 100%; height: 2.25rem; margin: 0; padding: 0 0.85rem;
  border: 0; border-radius: 0.6rem; background: none; color: var(--paper);
  font: inherit; line-height: 1; text-align: left; cursor: pointer; white-space: nowrap;
}
.account-menu button:hover { background: rgba(180, 156, 255, 0.16); color: #d7ccff; }
.user-menu { right: 0; left: auto; min-width: 16.5rem; padding: 0.4rem; border-radius: 1rem; background: #1b1e29; gap: 0.1rem; }
.user-menu .menu-head { height: auto; align-items: center; gap: 0.75rem; padding: 0.45rem 0.5rem 0.7rem; margin-bottom: 0.25rem; border-bottom: 1px solid rgba(255, 255, 255, 0.08); border-radius: 0.75rem; }
.user-menu .menu-head:hover { background: rgba(255, 255, 255, 0.05); color: var(--paper); }
.user-menu .menu-head .avatar { width: 2.45rem; height: 2.45rem; font-size: 0.78rem; }
.user-menu .menu-id { display: grid; gap: 0.12rem; min-width: 0; }
.user-menu .menu-id b { font-size: 0.98rem; font-weight: 700; line-height: 1.15; }
.user-menu .menu-id small { color: var(--stone); font-size: 0.8rem; line-height: 1.2; }
.user-menu > a, .user-menu .menu-lang { height: 2.55rem; gap: 0.7rem; padding: 0 0.6rem; border-radius: 0.65rem; }
.user-menu > a svg, .user-menu .menu-lang svg, .user-menu .out svg { width: 1.15rem; height: 1.15rem; flex: none; }
.user-menu > a:hover, .user-menu > a.on { background: rgba(255, 255, 255, 0.06); color: var(--paper); }
.user-menu .menu-lang { display: flex; align-items: center; color: var(--paper); }
.user-menu .menu-lang .langs { margin-left: auto; }
.user-menu .menu-lang .langs a { height: 1.55rem; min-width: 1.85rem; padding: 0 0.3rem; border-radius: 0.45rem; font-size: 0.72rem; }
.user-menu .menu-lang .langs a.on { background: rgba(255, 255, 255, 0.12); color: var(--paper); }
.user-menu form { margin-top: 0.25rem; padding-top: 0.25rem; border-top: 1px solid rgba(255, 255, 255, 0.08); }
.user-menu .out { height: 2.55rem; gap: 0.7rem; padding: 0 0.6rem; color: #ff5d5d; }
.user-menu .out:hover { background: rgba(255, 80, 80, 0.1); color: #ff5d5d; }
a.nick { color: inherit; }
a.nick:hover { color: #d7ccff; }
.unum { color: var(--stone); font-style: normal; font-weight: 700; font-size: 0.78em; margin-left: 0.3rem; letter-spacing: 0; }
.who span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 0.95rem; line-height: 1; }
.menu {
  width: 2.75rem; height: 2.75rem; border: 0; background: transparent; color: var(--paper); font-size: 1.3rem;
}
nav.mobile { display: none; border-top: 1px solid var(--hair); padding: 0.4rem 1rem 0.8rem; }
nav.mobile.open { display: grid; }
nav.mobile a, nav.mobile button {
  height: 2.75rem; display: flex; align-items: center; justify-content: flex-start; gap: 0.65rem;
  background: none; border: 0; color: var(--paper); font: inherit; text-align: left; padding: 0;
}
main { flex: 1; padding: 2rem 0 3rem; }
footer.foot {
  position: relative; z-index: 2;
  border-top: 1px solid var(--hair); color: var(--stone); font-size: 0.9rem;
  background: transparent;
}
footer.foot .wrap { padding: 1.2rem 0; display: flex; flex-wrap: wrap; gap: 0.4rem 1.5rem; justify-content: space-between; }
.dot { width: 0.5rem; height: 0.5rem; border-radius: 99px; background: var(--lime); display: inline-block; }
.badge {
  min-width: 1.2rem; height: 1.2rem; margin-left: 0.45rem; padding: 0 0.35rem; border-radius: 99px;
  background: var(--lime); color: var(--lime-ink); font-size: 0.75rem; font-weight: 700;
  display: inline-grid; place-items: center;
}
.btn, button.btn, label.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 0.4rem;
  min-height: 2.75rem; padding: 0 1rem; border-radius: 0.8rem; border: 0;
  font: inherit; font-weight: 650; font-size: 0.95rem;
}
.btn.primary { background: var(--lime); color: var(--lime-ink); }
.btn.secondary { background: var(--panel); color: var(--paper); box-shadow: var(--line); }
.btn.ghost { background: transparent; color: var(--stone); }
.btn.full { width: 100%; }
.hero { display: grid; gap: 2.5rem; align-items: center; }
.kicker { color: var(--stone); letter-spacing: 0.14em; text-transform: uppercase; font-size: 0.75rem; }
.login-title {
  font-family: var(--sans);
  font-weight: 700;
  letter-spacing: -0.03em;
  line-height: 1.25;
  margin-bottom: 0.35rem;
}
h1 { font-size: clamp(2.2rem, 5vw, 3.6rem); line-height: 1.2; }
.lead { color: var(--stone); max-width: 40rem; line-height: 1.55; font-size: 1.05rem; }
.rules { margin: 0.2rem 0 0; padding-left: 1.15rem; display: grid; gap: 0.55rem; color: var(--stone); }
.rules li { line-height: 1.5; }
.actions { display: flex; flex-wrap: wrap; gap: 0.7rem; margin-top: 1.4rem; }
.stats { display: grid; grid-template-columns: repeat(3, 1fr); gap: 0.7rem; margin-top: 1.6rem; }
.stats > div {
  min-width: 0;
  background: var(--panel);
  border-radius: 0.9rem;
  box-shadow: var(--line);
  padding: 0.85rem 0.95rem;
}
.stats dt {
  color: var(--stone);
  font-size: 0.72rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}
.stats dd {
  margin: 0.35rem 0 0;
  font-family: var(--sans);
  font-weight: 700;
  font-size: 1.05rem;
  letter-spacing: -0.02em;
}
.ticket { display: block; background: var(--panel); border-radius: 1.4rem; box-shadow: var(--line); position: relative; }
.ticket:hover { box-shadow: var(--lift); }
.ticket .pad { padding: 1.4rem 1.4rem 1.1rem; }
.ticket .row { display: flex; justify-content: space-between; align-items: center; gap: 0.6rem; }
.pill { background: var(--ink); color: var(--stone); border-radius: 99px; padding: 0.25rem 0.65rem; font-size: 0.75rem; }
.pill.code { background: var(--lime); color: var(--lime-ink); font-weight: 700; }
.pill.account { background: #8ec5ff; color: #071018; font-weight: 700; }
.shelf { margin-top: 2.1rem; }
.shelf-head { display: grid; gap: 0.35rem; max-width: 40rem; }
.shelf-head h3 { display: flex; align-items: center; gap: 0.65rem; font-size: 1.7rem; color: var(--paper); }
.shelf-head h3::before { content: ""; width: 0.55rem; height: 0.55rem; border-radius: 99px; background: var(--lime); flex: none; }
.shelf.account .shelf-head h3::before { background: #8ec5ff; }
.offer {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  gap: 1rem 1.05rem;
  align-items: center;
  height: 100%;
  min-height: 8.5rem;
  padding: 1.05rem;
  border-radius: 1.25rem;
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.04), transparent 42%),
    #0c1224;
  box-shadow: 0 0 0 1px rgba(255, 255, 255, 0.08), 0 16px 36px rgba(0, 0, 0, 0.28);
}
.offer:hover { transform: translateY(-2px); box-shadow: 0 0 0 1px rgba(214, 242, 92, 0.4), 0 18px 40px rgba(0, 0, 0, 0.38); }
.offer-mark.brand { width: 4.15rem; height: 4.15rem; flex-basis: 4.15rem; border-radius: 1.15rem; }
.offer-mark svg { width: 2.15rem; height: 2.15rem; }
.offer { position: relative; }
.offer-hit { position: absolute; inset: 0; z-index: 1; }
.seller-link { position: relative; z-index: 2; width: fit-content; display: inline-flex; align-items: center; gap: 0.4rem; color: var(--stone); font-size: 0.92rem; }
.variants { display: grid; gap: 0.4rem; margin: 0.45rem 0 0.7rem; }
.variant {
  display: flex; align-items: center; justify-content: space-between; gap: 1rem;
  width: 100%; min-height: 2.75rem; padding: 0.45rem 0.8rem;
  border: 0; border-radius: 0.8rem; background: rgba(255, 255, 255, 0.04);
  color: inherit; font: inherit; text-align: left; cursor: pointer;
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.08);
}
.variant b { font-weight: 700; }
.variant span { font-variant-numeric: tabular-nums; color: var(--stone); }
.variant.on { box-shadow: inset 0 0 0 1px #b49cff; }
.variant.on span { color: var(--paper); }
.seller-rate { color: #f0c14a; font-weight: 700; letter-spacing: 0.01em; }
.offer-body { display: grid; gap: 0.35rem; min-width: 0; }
.offer-top { display: flex; align-items: center; justify-content: space-between; gap: 0.6rem; }
.offer .pill {
  background: transparent;
  color: var(--stone);
  font-weight: 600;
  font-size: 0.72rem;
  letter-spacing: 0.01em;
  padding: 0;
}
.offer-body strong { font-family: Inter, "Helvetica Neue", Helvetica, Arial, sans-serif; font-weight: 700; font-size: 1.22rem; letter-spacing: -0.01em; line-height: 1.15; }
.offer-blurb { color: var(--stone); font-size: 0.92rem; line-height: 1.45; margin-top: 0.28rem; }
.offer-buy {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  justify-content: center;
  gap: 0.85rem;
  align-self: center;
  height: auto;
}
.offer-buy b {
  font-family: Inter, "Helvetica Neue", Helvetica, Arial, sans-serif;
  font-weight: 800;
  font-size: 1.2rem;
  line-height: 1;
  letter-spacing: -0.02em;
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}
.offer-buy > span {
  display: inline-flex; align-items: center; justify-content: center;
  height: 2.15rem; padding: 0 0.9rem; border-radius: 99px;
  background: var(--lime); color: var(--lime-ink); font-weight: 700; font-size: 0.88rem;
}
.price { font-family: var(--display); font-weight: 700; font-size: 2.2rem; line-height: 1; color: var(--lime); font-variant-numeric: tabular-nums; margin: 1.2rem 0 0; letter-spacing: -0.03em; }
.tear { position: relative; border-top: 1px dashed var(--hair); }
.tear i { position: absolute; top: -0.5rem; width: 1rem; height: 1rem; border-radius: 99px; background: #070b14; }
.tear i.l { left: -0.5rem; } .tear i.r { right: -0.5rem; }
.ticket .bot { display: flex; justify-content: space-between; padding: 0.9rem 1.4rem 1.1rem; color: var(--stone); font-size: 0.95rem; }
.ticket .bot b { color: var(--lime); font-weight: 600; }
.section { margin-top: 3.2rem; }
.head { display: flex; flex-wrap: wrap; gap: 0.8rem; justify-content: space-between; align-items: end; }
.cats {
  display: flex;
  flex-wrap: wrap;
  gap: 1.15rem 1.35rem;
  padding: 0.35rem 0 0.2rem;
  margin-top: 1.1rem;
}
.cat {
  display: grid;
  justify-items: center;
  gap: 0.5rem;
  min-width: 4.8rem;
  color: var(--paper);
  font-size: 0.84rem;
  font-weight: 600;
  line-height: 1.2;
}
.cat .brand {
  width: 4.5rem;
  height: 4.5rem;
  flex-basis: 4.5rem;
  border-radius: 1.25rem;
  box-shadow: 0 10px 22px rgba(0, 0, 0, 0.28);
}
.cat .brand svg { width: 2.35rem; height: 2.35rem; }
.cat.on .brand { box-shadow: 0 0 0 2px var(--lime), 0 10px 22px rgba(0, 0, 0, 0.28); }
.grid { display: grid; gap: 0.9rem; margin-top: 1rem; }
.card {
  background: var(--panel); border-radius: 1rem; box-shadow: var(--line); padding: 1.15rem;
  display: flex; flex-direction: column; min-height: 100%;
}
.card:hover { box-shadow: var(--lift); }
.card .row { display: flex; align-items: center; justify-content: space-between; gap: 0.85rem; }
.card .row .muted { flex: none; margin-left: 0.4rem; }
.card h2 { font-family: Inter, Manrope, ui-sans-serif, system-ui, sans-serif; font-size: 1.2rem; line-height: 1.35; letter-spacing: 0; }
.card h3 { font-size: 1.55rem; margin-top: 0; }
.stack { gap: 0.85rem; }
.stack > * { margin-top: 0; }
.stack form { display: grid; gap: 0.75rem; }
.stack label.field { margin-top: 0; }
.stack .btn, .stack form .btn { width: 100%; }
.stack form .check { margin: 0; min-height: 2.2rem; }
.stack form .btn.fit { width: auto; justify-self: start; min-height: 2.2rem; margin: 0; padding: 0 1.15rem; font-size: 0.9rem; border-radius: 0.7rem; }
.name { display: flex; align-items: center; gap: 0.8rem; margin-top: 1rem; min-width: 0; }
.name h2, .name h3, .name h1 { margin: 0; min-width: 0; }
.name.lg { margin-top: 0.8rem; }
.profile-head { align-items: center; }
.profile-head > div { min-width: 0; display: flex; flex-direction: column; align-items: flex-start; gap: 0.35rem; }
.profile-id {
  margin: 0; display: flex; align-items: center; flex-wrap: wrap; gap: 0.55rem;
  font-family: var(--sans); font-weight: 800; font-size: 1.65rem; line-height: 1;
  letter-spacing: -0.03em;
}
.profile-id .presence { margin: 0; font-size: 0.82rem; font-weight: 650; letter-spacing: 0; }
.profile-head .unum { font-size: 0.95rem; margin-left: 0; line-height: 1; }
.presence { display: flex; align-items: center; gap: 0.4rem; margin: 0.15rem 0 0; color: var(--stone); font-size: 0.82rem; line-height: 1.2; }
.presence i { width: 0.48rem; height: 0.48rem; border-radius: 99px; background: #8b93a7; flex: none; }
.presence.on { color: #c6f25c; }
.presence.on i { background: #c6f25c; box-shadow: 0 0 8px rgba(198, 242, 92, 0.75); }
.profile-head p { margin: 0; }
.name.lg h1 { font-size: clamp(2.2rem, 5vw, 3.6rem); }
.brand {
  width: 2.55rem; height: 2.55rem; flex: 0 0 2.55rem;
  display: grid; place-items: center; border-radius: 0.75rem;
}
.brand svg { width: 1.45rem; height: 1.45rem; display: block; }
.brand.claude { background: #d97757; color: #fff8f4; }
.brand.gpt { background: #10a37f; color: #fff; }
.brand.spotify { background: #1db954; color: #fff; }
.brand.suno { background: none; overflow: hidden; color: #fff; }
.brand.grok { background: #f4f4f5; color: #111; }
.brand.roblox { background: #e2231a; color: #fff; }
.brand.steam { background: #171a21; color: #c7d5e0; box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.16); }
.brand.apple { background: #f4f4f5; color: #111; }
.card.wide { width: min(44rem, 100%); }
.noms { display: grid; gap: 0.55rem; }
.noms-label { color: var(--stone); font-size: 1rem; }
.noms-btn {
  width: 100%;
  min-height: 3.7rem;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  padding: 0.85rem 1.1rem;
  border: 0;
  border-radius: 0.95rem;
  background: var(--ink);
  color: var(--paper);
  box-shadow: var(--line);
  font-size: 1.35rem;
  font-weight: 700;
  letter-spacing: -0.03em;
  text-align: left;
  cursor: pointer;
}
.noms-btn::after {
  content: "";
  width: 0.55rem;
  height: 0.55rem;
  border-right: 2px solid var(--paper);
  border-bottom: 2px solid var(--paper);
  transform: rotate(45deg) translateY(-0.15rem);
  flex: none;
}
.noms-pop {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 0.5rem;
  max-height: 26rem;
  overflow: auto;
  padding: 0.55rem;
  border-radius: 1rem;
  background: #101628;
  box-shadow: 0 0 0 1px rgba(255, 255, 255, 0.1), 0 18px 40px rgba(0, 0, 0, 0.4);
}
.noms-pop[hidden] { display: none; }
.noms-opt {
  min-height: 3.15rem;
  border: 0;
  border-radius: 0.8rem;
  background: rgba(255, 255, 255, 0.04);
  color: var(--paper);
  font-size: 1.12rem;
  font-weight: 700;
  letter-spacing: -0.02em;
  text-align: left;
  padding: 0.75rem 0.95rem;
  cursor: pointer;
}
.noms-opt.on,
.noms-opt:hover { background: rgba(214, 242, 92, 0.16); box-shadow: inset 0 0 0 1px var(--lime); }
@media (max-width: 640px) {
  .noms-pop { grid-template-columns: 1fr; }
}
.brand.gemini { background: #fff; overflow: hidden; }
.brand.gemini svg,
.cat .brand.gemini svg,
.offer-mark.brand.gemini svg,
.name.lg .brand.gemini svg { width: 100%; height: 100%; }
.brand.suno svg,
.cat .brand.suno svg,
.offer-mark.brand.suno svg,
.name.lg .brand.suno svg { width: 100%; height: 100%; }
.name.lg .brand { width: 3.1rem; height: 3.1rem; flex-basis: 3.1rem; border-radius: 0.9rem; }
.name.lg .brand svg { width: 1.75rem; height: 1.75rem; }
.muted { color: var(--stone); }
.small { font-size: 0.85rem; }
.space { margin-top: 0.7rem; }
.spread { margin-top: auto; padding-top: 1.2rem; display: flex; justify-content: space-between; align-items: end; }
.spread .sum { font-family: var(--display); font-weight: 700; font-size: 1.45rem; line-height: 1; letter-spacing: -0.03em; font-variant-numeric: tabular-nums; }
.lime { color: var(--lime); }
.rate { color: var(--gold); letter-spacing: 0.08em; font-size: 1.05rem; }
.steps {
  display: grid;
  gap: 0.9rem;
  margin: 1rem 0 0;
  padding: 0;
  list-style: none;
}
.steps li {
  list-style: none;
  min-width: 0;
  background: var(--panel);
  border-radius: 1rem;
  box-shadow: var(--line);
  padding: 1.15rem 1.2rem 1.25rem;
}
.steps li p { margin: 0; }
.steps h3 { font-size: 1.2rem; }
.card.review { padding: 0.7rem 0.8rem; gap: 0.15rem; min-height: 0; }
.card.review h3 { font-size: 0.95rem; }
.card.review .space { margin-top: 0.22rem; }
.card.review p { margin: 0; line-height: 1.35; font-size: 0.9rem; }
.card.review .row b { font-size: 0.92rem; }
#reviews .grid { margin-top: 0.65rem; gap: 0.55rem; }
.review .row { display: flex; align-items: center; justify-content: space-between; gap: 1.25rem; }
.review .rate { margin-left: auto; }
.stars { display: flex; flex-direction: row-reverse; justify-content: flex-end; gap: 0.15rem; width: fit-content; }
.stars input { position: absolute; opacity: 0; width: 1px; height: 1px; }
.stars label { cursor: pointer; color: #8d8478; font-size: 1.45rem; line-height: 1; }
.stars label:hover,
.stars label:hover ~ label,
.stars input:checked ~ label { color: var(--gold); }
.steps ol { margin: 0; padding: 0; }
.narrow { width: min(28rem, 100%); }
label.field { display: grid; gap: 0.4rem; font-size: 0.92rem; color: var(--stone); margin-top: 0.9rem; }
label.field.fit input { width: min(28rem, 100%); }
label.field.price input { width: min(9rem, 100%); }
label.field.term input { width: min(14rem, 100%); }
label.field.catpick select { width: min(16rem, 100%); }
.field.catpick { display: grid; gap: 0.4rem; font-size: 0.92rem; color: var(--stone); }
.picker { position: relative; width: min(16rem, 100%); }
.picker input { display: none; }
.picker-btn {
  width: 100%; min-height: 2.75rem; padding: 0 0.85rem; border: 0; border-radius: 0.8rem;
  background: var(--ink); color: var(--stone); box-shadow: var(--line);
  display: flex; align-items: center; justify-content: space-between; gap: 0.6rem;
  font: inherit; cursor: pointer;
}
.picker.set .picker-btn { color: var(--paper); }
.picker-btn::after {
  content: ""; width: 0.42rem; height: 0.42rem; flex: none;
  border-right: 1.6px solid currentColor; border-bottom: 1.6px solid currentColor;
  transform: rotate(45deg) translateY(-1px);
}
.picker-list {
  display: none; position: absolute; z-index: 30; left: 0; right: 0; top: calc(100% + 0.35rem);
  padding: 0.3rem; border-radius: 0.8rem; background: #1b1e29;
  box-shadow: 0 0 0 1px rgba(255, 255, 255, 0.1), 0 16px 30px rgba(0, 0, 0, 0.45);
}
.picker.open .picker-list { display: grid; }
.picker-list button {
  width: 100%; height: 2.15rem; min-height: 0; padding: 0 0.7rem; border: 0; border-radius: 0.5rem;
  background: transparent; color: var(--paper); box-shadow: none;
  font: inherit; text-align: left; cursor: pointer;
}
.picker-list button:hover, .picker-list button.on { background: rgba(255, 255, 255, 0.08); }
#api-box[hidden], #api-product[hidden], #codes-box[hidden] { display: none !important; }
.choice-line { display: flex; align-items: center; gap: 0.65rem; margin-top: 0.55rem; color: var(--paper); cursor: pointer; }
.choice-line input, .check input {
  appearance: none; -webkit-appearance: none;
  width: 1.15rem; height: 1.15rem; min-height: 0; margin: 0; padding: 0; flex: none;
  border-radius: 0.28rem; background: transparent; cursor: pointer;
  box-shadow: inset 0 0 0 1.5px rgba(255, 255, 255, 0.45);
}
.choice-line input { border-radius: 99px; }
.choice-line input:checked {
  background: var(--lime);
  box-shadow: inset 0 0 0 3.5px #10162a, inset 0 0 0 1.5px var(--lime);
}
.check input:checked {
  background: var(--lime) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath fill='none' stroke='%2312141c' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round' d='M3.2 8.2 6.4 11.4 12.8 4.6'/%3E%3C/svg%3E") center / 0.85rem no-repeat;
  box-shadow: none;
}
.check { display: flex; align-items: center; gap: 0.65rem; margin-top: 0.9rem; color: var(--paper); cursor: pointer; }
.seg { display: flex; flex-wrap: wrap; gap: 0.35rem; margin-top: 0.7rem; }
.seg label {
  position: relative;
  display: inline-flex; align-items: center; justify-content: center;
  min-height: 2.35rem; padding: 0 1rem; border-radius: 0.7rem;
  background: transparent; color: var(--stone); cursor: pointer;
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.16);
}
.seg input { position: absolute; opacity: 0; width: 1px; height: 1px; min-height: 0; pointer-events: none; }
.seg label:has(input:checked) { background: var(--paper); color: #12141c; box-shadow: none; }
input, textarea, select {
  width: 100%; min-height: 2.75rem; border: 0; border-radius: 0.8rem;
  background: var(--ink); color: var(--paper); box-shadow: var(--line);
  padding: 0.6rem 0.75rem; font: inherit;
}
textarea { min-height: 6rem; resize: vertical; }
.note, .warn {
  border-radius: 0.9rem; padding: 0.75rem 0.9rem; margin: 0 0 1rem; font-size: 0.92rem;
}
.note { background: var(--panel); color: var(--lime); box-shadow: var(--line); }
.warn { background: #2a1714; color: var(--danger); }
.codebox { background: var(--panel); border-radius: 1rem; box-shadow: var(--line); padding: 1.1rem; margin-top: 1rem; }
.codebox b { display: block; margin-top: 0.4rem; font-family: var(--display); font-size: 2rem; letter-spacing: 0.18em; }
.product { display: grid; gap: 1.4rem; }
.buy { background: var(--panel); border-radius: 1rem; box-shadow: var(--line); padding: 1.15rem; height: fit-content; }
.paybox {
  margin-top: 0.9rem;
  background: var(--ink);
  border-radius: 0.8rem;
  box-shadow: var(--line);
  padding: 0.8rem 0.9rem;
}
.paybox .uid {
  margin: 0.25rem 0 0.45rem;
  font-family: var(--sans);
  font-weight: 700;
  font-size: 1.35rem;
  letter-spacing: 0.04em;
  font-variant-numeric: tabular-nums;
  line-height: 1.2;
}
.pay-page { width: min(32rem, 100%); }
.pay-page .price { margin-top: 0.8rem; }
.choice {
  position: relative;
  display: flex;
  align-items: center;
  gap: 0.75rem;
  margin-top: 0.75rem;
  padding: 0.8rem 0.9rem;
  border-radius: 0.9rem;
  background: #10151f;
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.12);
  cursor: pointer;
}
.choice input {
  position: absolute;
  opacity: 0;
  width: 1px;
  height: 1px;
  min-height: 0;
  pointer-events: none;
}
.choice-mark {
  width: 2.4rem;
  height: 2.4rem;
  flex: none;
  display: grid;
}
.choice-mark svg { width: 100%; height: 100%; display: block; }
.choice-copy { display: grid; gap: 0.12rem; min-width: 0; }
.choice-copy b { font-size: 1rem; line-height: 1.2; }
.choice-copy small { color: var(--stone); font-size: 0.8rem; font-weight: 500; line-height: 1.3; }
.choice-tick {
  margin-left: auto;
  width: 1.15rem;
  height: 1.15rem;
  border-radius: 99px;
  flex: none;
  box-shadow: inset 0 0 0 2px rgba(255, 255, 255, 0.28);
}
.choice.on {
  box-shadow: inset 0 0 0 1px #f7a600, 0 0 0 3px rgba(247, 166, 0, 0.16);
}
.choice.on .choice-tick {
  background: #f7a600;
  box-shadow: inset 0 0 0 3px #10151f;
}
ul.clean { margin: 1rem 0 0; padding: 0; display: grid; gap: 0.55rem; }
ul.clean li { list-style: none; }
.layout { display: grid; gap: 1rem; }
.layout.profile-page { display: grid; gap: 1rem; align-items: start; }
.chat-person { display: flex; align-items: center; gap: 0.7rem; }
.chat-person .avatar { width: 2.35rem; height: 2.35rem; font-size: 0.72rem; }
.chat-person .profile-id { font-size: 1.05rem; letter-spacing: -0.02em; }
.layout.cab > div { display: grid; gap: 0.9rem; align-content: start; }
.orders { display: grid; gap: 0.75rem; }
.order {
  display: flex;
  flex-direction: column;
  align-items: stretch;
  gap: 0.85rem;
  background: var(--panel);
  border-radius: 1rem;
  box-shadow: var(--line);
  padding: 1rem 1.05rem;
}
.order-top { display: flex; justify-content: space-between; align-items: flex-start; gap: 1rem; }
.order h3 { margin: 0; font-size: 1.05rem; line-height: 1.3; }
.order-sum { display: grid; justify-items: end; gap: 0.15rem; flex: none; }
.order-sum b { font-variant-numeric: tabular-nums; }
.cabinet-main h2 { font-family: Inter, Manrope, ui-sans-serif, system-ui, sans-serif; font-size: 1.15rem; letter-spacing: 0; line-height: 1.35; }
.cabinet-main .orders { gap: 0.45rem; }
.cabinet-main .order { gap: 0.35rem; padding: 0.7rem 0.8rem; border-radius: 0.85rem; }
.cabinet-main .order h3 { font-size: 0.95rem; }
.cabinet-main .order p { margin: 0; line-height: 1.35; }
.cabinet-main .order > .btn { align-self: flex-start; width: auto; min-height: 2.05rem; padding: 0 0.85rem; font-size: 0.85rem; }
.cabinet-main .reviews { grid-template-columns: 1fr; }
@media (min-width: 880px) {
  .cabinet-main .reviews { grid-template-columns: 1fr 1fr; }
}
.delivery {
  margin-top: 0.9rem;
  background: var(--ink);
  color: var(--paper);
  border-radius: 0.8rem;
  padding: 0.85rem 0.95rem;
  white-space: pre-wrap;
  word-break: break-word;
  font-family: var(--sans);
  font-size: 0.92rem;
  line-height: 1.5;
}
.avatar {
  width: 2.5rem; height: 2.5rem; border-radius: 99px; display: grid; place-items: center;
  font-weight: 700; font-size: 0.8rem; flex: 0 0 auto; object-fit: cover;
}
.avatar.lg { width: 4rem; height: 4rem; font-size: 1.1rem; }
.person { display: flex; gap: 0.8rem; align-items: center; }
.chat {
  background: var(--panel); border-radius: 1rem; box-shadow: var(--line);
  height: calc(100dvh - 13.5rem); max-height: calc(100dvh - 13.5rem);
  min-height: 0; display: flex; flex-direction: column; overflow: hidden;
}
.chat .hd, .threads .hd { border-bottom: 1px solid var(--hair); padding: 0.95rem 1rem; }
.chat .hd p, .threads .hd p, .subnav { margin: 0; }
.threads .hd p { margin-top: 0.25rem; }
.subnav { display: flex; flex-wrap: wrap; gap: 0.35rem; margin-bottom: 1rem; }
.subnav a {
  display: inline-flex; align-items: center; height: 2.25rem; padding: 0 0.85rem;
  border-radius: 999px; color: var(--stone); line-height: 1;
}
.subnav a.on, .subnav a:hover { background: var(--panel); color: var(--paper); box-shadow: var(--line); }
.subnav a.on { color: var(--lime); }
.stream { flex: 1 1 auto; overflow: auto; padding: 1rem; display: flex; flex-direction: column; gap: 0.7rem; min-height: 0; }
.bubble { width: 100%; max-width: none; display: flex; flex-direction: column; gap: 0.28rem; align-self: stretch; align-items: flex-start; }
.bubble.mine { align-self: stretch; align-items: flex-end; }
.bubble-meta { display: flex; align-items: baseline; justify-content: space-between; gap: 1rem; width: 100%; }
.bubble .who2 { color: var(--paper); font-size: 1.05rem; font-weight: 800; letter-spacing: -0.02em; line-height: 1.2; }
.bubble time { color: var(--stone); font-size: 0.78rem; flex: none; }
.bubble .txt {
  display: flex; align-items: flex-end; gap: 0.55rem; width: fit-content; max-width: min(34rem, 92%);
  border-radius: 0.35rem; padding: 0.5rem 0.65rem 0.45rem 0.8rem;
  white-space: pre-wrap; word-break: break-word; line-height: 1.4;
}
.bubble .txt > span { min-width: 0; }
.bubble.mine .txt { background: var(--lime); color: var(--lime-ink); }
.bubble.them .txt { background: #3a3d42; color: #f4f4f5; }
.bubble .txt time, .bubble time.alone { color: rgba(255, 255, 255, 0.55); font-size: 0.75rem; line-height: 1; flex: none; }
.bubble.mine .txt time { color: rgba(22, 26, 9, 0.55); }
.bubble.mine .shot { align-self: flex-end; }
.composer { position: relative; flex: none; display: flex; gap: 0.45rem; align-items: end; border-top: 1px solid var(--hair); padding: 0.7rem; }
.emoji-open {
  width: 2.75rem; height: 2.75rem; flex: none; border: 0; border-radius: 0.8rem;
  background: rgba(255, 255, 255, 0.06); color: inherit; font-size: 1.25rem; cursor: pointer;
}
.emoji-pop {
  position: absolute; left: 0.7rem; bottom: calc(100% - 0.2rem); z-index: 6;
  width: 17.2rem; padding: 0.4rem; display: grid; grid-template-columns: repeat(8, 1fr); gap: 0.1rem;
  background: #10162a; border-radius: 0.9rem;
  box-shadow: 0 0 0 1px rgba(255, 255, 255, 0.1), 0 14px 32px rgba(0, 0, 0, 0.45);
}
.emoji-pop[hidden] { display: none; }
.emoji-pop button {
  height: 2rem; border: 0; border-radius: 0.45rem; background: none;
  font-size: 1.15rem; line-height: 1; cursor: pointer;
}
.emoji-pop button:hover { background: rgba(255, 255, 255, 0.08); }
.pic { position: relative; width: 2.75rem; height: 2.75rem; flex: none; }
.pic input { position: absolute; inset: 0; opacity: 0; cursor: pointer; }
.pic svg {
  width: 2.75rem; height: 2.75rem; padding: 0.7rem; border-radius: 0.8rem;
  background: rgba(255, 255, 255, 0.06); color: var(--paper);
}
.pic.on svg { box-shadow: inset 0 0 0 1px #b49cff; }
.bubble .shot { display: block; max-width: 16rem; }
.bubble .shot img {
  display: block; width: 100%; max-height: 16rem; object-fit: contain;
  border-radius: 0.85rem; background: #0c1224;
}
.composer textarea { min-height: 2.75rem; height: 2.75rem; }
.threads { background: var(--panel); border-radius: 1rem; box-shadow: var(--line); overflow: auto; height: calc(100dvh - 13.5rem); max-height: calc(100dvh - 13.5rem); min-height: 0; }
.threads a.item {
  display: flex; gap: 0.7rem; align-items: center; padding: 0.75rem 0.9rem;
  border-top: 1px solid var(--hair); min-height: 4rem;
}
.threads a.item.on, .threads a.item:hover { background: var(--panel-2); }
.threads .meta { min-width: 0; flex: 1; }
.threads .meta p { margin: 0.15rem 0 0; color: var(--stone); font-size: 0.8rem; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.threads .row { display: flex; align-items: baseline; justify-content: space-between; gap: 0.85rem; }
.threads .row b { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.threads .row time { flex: none; }
.desk-only { display: none; }
.back { display: inline-grid; place-items: center; width: 2.75rem; height: 2.75rem; }
table { width: 100%; border-collapse: collapse; font-size: 0.92rem; }
th, td { text-align: left; padding: 0.7rem 0.4rem; border-bottom: 1px solid var(--hair); vertical-align: top; }
th { color: var(--stone); font-weight: 600; }
.status { color: var(--stone); }
.status.ok { color: var(--lime); }
.sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }
@media (max-width: 720px) {
  .offer { grid-template-columns: auto minmax(0, 1fr); }
  .offer-buy { grid-column: 1 / -1; display: flex; justify-content: space-between; align-items: center; height: auto; }
}
@media (min-width: 880px) {
  nav.desk { display: flex; }
  .menu, nav.mobile { display: none !important; }
  .hero { grid-template-columns: 1fr; }
  .grid.two { grid-template-columns: 1fr 1fr; }
  .steps { grid-template-columns: 1fr 1fr 1fr; gap: 1rem; }
  .product { grid-template-columns: 1.1fr 0.9fr; }
  .layout.cab { grid-template-columns: 18rem 1fr; align-items: start; }
  .layout.admin { grid-template-columns: 20rem 1fr; align-items: stretch; }
  .layout.profile-page { grid-template-columns: minmax(0, 1fr) minmax(22rem, 30rem); }
  .profile-chat { position: sticky; top: 1rem; }
  .desk-only { display: flex; }
  .hide-desk { display: none; }
}
@media (max-width: 879px) {
  .hide-phone { display: none !important; }
}

.cosmos { position: fixed; inset: 0; z-index: 0; overflow: hidden; pointer-events: none; background: #070b14; }
.cosmos .dust, .cosmos b {
  position: absolute; left: 0; top: 0; width: 2px; height: 2px; border-radius: 99px; background: transparent;
}
.cosmos .dust { box-shadow: 33.1vw 194.1vh 0 1px rgba(255,255,255,0.75),15.4vw 80.8vh 0 1px rgba(255,255,255,0.75),66.6vw 9.8vh 0 1px rgba(255,255,255,0.75),7.4vw 168.1vh 0 1px rgba(255,255,255,0.75),54.8vw 19.2vh 0 1px rgba(255,255,255,0.75),37.4vw 119.3vh 0 1px rgba(255,255,255,0.75),5.9vw 186.3vh 0 1px rgba(255,255,255,0.75),51.9vw 43.9vh 0 1px rgba(255,255,255,0.75),3.8vw 17.6vh 0 1px rgba(255,255,255,0.75),44.4vw 85.6vh 0 1px rgba(255,255,255,0.75),7.1vw 49.2vh 0 1px rgba(255,255,255,0.75),9.2vw 112.8vh 0 1px rgba(255,255,255,0.75),43.4vw 12.1vh 0 1px rgba(255,255,255,0.75),84.6vw 115.8vh 0 1px rgba(255,255,255,0.75),12.6vw 194.0vh 0 1px rgba(255,255,255,0.75),22.8vw 129.1vh 0 1px rgba(255,255,255,0.75),64.2vw 119.3vh 0 1px rgba(255,255,255,0.75),97.0vw 12.6vh 0 1px rgba(255,255,255,0.75),59.0vw 119.9vh 0 1px rgba(255,255,255,0.75),40.6vw 10.1vh 0 1px rgba(255,255,255,0.75),99.9vw 45.2vh 0 1px rgba(255,255,255,0.75),4.7vw 114.0vh 0 1px rgba(255,255,255,0.75),87.9vw 27.2vh 0 1px rgba(255,255,255,0.75),29.6vw 85.8vh 0 1px rgba(255,255,255,0.75),14.7vw 110.7vh 0 1px rgba(255,255,255,0.75),12.0vw 116.9vh 0 1px rgba(255,255,255,0.75),31.5vw 114.7vh 0 1px rgba(255,255,255,0.75),83.5vw 139.6vh 0 1px rgba(255,255,255,0.75),18.5vw 21.1vh 0 1px rgba(255,255,255,0.75),59.5vw 116.9vh 0 1px rgba(255,255,255,0.75),65.4vw 38.4vh 0 1px rgba(255,255,255,0.75),38.1vw 19.9vh 0 1px rgba(255,255,255,0.75),56.0vw 145.8vh 0 1px rgba(255,255,255,0.75),6.4vw 115.5vh 0 1px rgba(255,255,255,0.75),6.1vw 126.7vh 0 1px rgba(255,255,255,0.75),21.0vw 101.6vh 0 1px rgba(255,255,255,0.75),69.6vw 108.8vh 0 1px rgba(255,255,255,0.75),43.7vw 159.1vh 0 1px rgba(255,255,255,0.75),32.1vw 72vh 0 1px rgba(255,255,255,0.75),59.9vw 189.1vh 0 1px rgba(255,255,255,0.75),46.4vw 74.0vh 0 1px rgba(255,255,255,0.75),30.6vw 50.8vh 0 1px rgba(255,255,255,0.75),81.3vw 36.8vh 0 1px rgba(255,255,255,0.75),71.5vw 159.7vh 0 1px rgba(255,255,255,0.75),24.9vw 16.7vh 0 1px rgba(255,255,255,0.75),58.8vw 61.4vh 0 1px rgba(255,255,255,0.75),53.7vw 101.3vh 0 1px rgba(255,255,255,0.75),89.6vw 70.3vh 0 1px rgba(255,255,255,0.75),74.6vw 91.9vh 0 1px rgba(255,255,255,0.75),29.4vw 124.7vh 0 1px rgba(255,255,255,0.75),7.4vw 24.1vh 0 1px rgba(255,255,255,0.75),52.4vw 85.6vh 0 1px rgba(255,255,255,0.75),16.8vw 155.0vh 0 1px rgba(255,255,255,0.75),35.0vw 31.1vh 0 1px rgba(255,255,255,0.75),95.5vw 100.1vh 0 1px rgba(255,255,255,0.75),43.1vw 8.0vh 0 1px rgba(255,255,255,0.75),98.5vw 136.8vh 0 1px rgba(255,255,255,0.75),7.9vw 156.5vh 0 1px rgba(255,255,255,0.75),57.1vw 117.3vh 0 1px rgba(255,255,255,0.75),80.8vw 179.2vh 0 1px rgba(255,255,255,0.75),83.7vw 64.2vh 0 1px rgba(255,255,255,0.75),34.8vw 142.3vh 0 1px rgba(255,255,255,0.75),35.8vw 121.7vh 0 1px rgba(255,255,255,0.75),50.8vw 118.7vh 0 1px rgba(255,255,255,0.75),81.6vw 93.4vh 0 1px rgba(255,255,255,0.75),7.0vw 172.0vh 0 1px rgba(255,255,255,0.75),9.5vw 193.4vh 0 1px rgba(255,255,255,0.75),54vw 78vh 0 1px rgba(255,255,255,0.75),71.3vw 136.0vh 0 1px rgba(255,255,255,0.75),6.6vw 12.4vh 0 1px rgba(255,255,255,0.75); }
.cosmos .dust.far { box-shadow: 74.8vw 143.6vh 0 1px rgba(255,255,255,0.35),31.7vw 132.5vh 0 1px rgba(255,255,255,0.35),59.1vw 139.5vh 0 1px rgba(255,255,255,0.35),84.1vw 91.2vh 0 1px rgba(255,255,255,0.35),29.1vw 146.7vh 0 1px rgba(255,255,255,0.35),39.5vw 181.6vh 0 1px rgba(255,255,255,0.35),68.4vw 71.0vh 0 1px rgba(255,255,255,0.35),2.3vw 192.6vh 0 1px rgba(255,255,255,0.35),47.2vw 72.7vh 0 1px rgba(255,255,255,0.35),17.2vw 125.1vh 0 1px rgba(255,255,255,0.35),11.9vw 101.1vh 0 1px rgba(255,255,255,0.35),6.0vw 44.6vh 0 1px rgba(255,255,255,0.35),78.6vw 58.8vh 0 1px rgba(255,255,255,0.35),13.2vw 151.2vh 0 1px rgba(255,255,255,0.35),25.3vw 81.4vh 0 1px rgba(255,255,255,0.35),40.0vw 187.7vh 0 1px rgba(255,255,255,0.35),89.2vw 101.6vh 0 1px rgba(255,255,255,0.35),8.2vw 34.0vh 0 1px rgba(255,255,255,0.35),45.9vw 82.2vh 0 1px rgba(255,255,255,0.35),56.2vw 56.9vh 0 1px rgba(255,255,255,0.35),90.4vw 28.0vh 0 1px rgba(255,255,255,0.35),83.8vw 88.1vh 0 1px rgba(255,255,255,0.35),88.4vw 112.6vh 0 1px rgba(255,255,255,0.35),28.5vw 144.6vh 0 1px rgba(255,255,255,0.35),42.5vw 73.4vh 0 1px rgba(255,255,255,0.35),69.9vw 181.0vh 0 1px rgba(255,255,255,0.35),38.9vw 196.1vh 0 1px rgba(255,255,255,0.35),23.6vw 30.9vh 0 1px rgba(255,255,255,0.35),8.4vw 36.0vh 0 1px rgba(255,255,255,0.35),15.4vw 47.5vh 0 1px rgba(255,255,255,0.35),67.4vw 47.7vh 0 1px rgba(255,255,255,0.35),1.2vw 99.3vh 0 1px rgba(255,255,255,0.35),85.1vw 120.6vh 0 1px rgba(255,255,255,0.35),18.6vw 53.8vh 0 1px rgba(255,255,255,0.35),28.8vw 0.8vh 0 1px rgba(255,255,255,0.35),14.9vw 85.8vh 0 1px rgba(255,255,255,0.35),54.7vw 75.6vh 0 1px rgba(255,255,255,0.35),62.4vw 115.9vh 0 1px rgba(255,255,255,0.35),32.6vw 195.1vh 0 1px rgba(255,255,255,0.35),12.8vw 141.4vh 0 1px rgba(255,255,255,0.35); opacity: 0.7; }
.cosmos b { width: 3px; height: 3px; box-shadow: 87.9vw 105.5vh 0 1.5px rgba(255,255,255,0.95),97.3vw 126.4vh 0 1.5px rgba(255,255,255,0.95),67.0vw 138.4vh 0 1.5px rgba(255,255,255,0.95),75.7vw 11.0vh 0 1.5px rgba(255,255,255,0.95),46.7vw 184.2vh 0 1.5px rgba(255,255,255,0.95),89.1vw 159.7vh 0 1.5px rgba(255,255,255,0.95),97.4vw 179.1vh 0 1.5px rgba(255,255,255,0.95),69.6vw 163.4vh 0 1.5px rgba(255,255,255,0.95),57.2vw 80.3vh 0 1.5px rgba(255,255,255,0.95),40.7vw 81.7vh 0 1.5px rgba(255,255,255,0.95),40.3vw 21.2vh 0 1.5px rgba(255,255,255,0.95),49.3vw 129.9vh 0 1.5px rgba(255,255,255,0.95),41.0vw 12.7vh 0 1.5px rgba(255,255,255,0.95),19.5vw 13.7vh 0 1.5px rgba(255,255,255,0.95),21.3vw 90.2vh 0 1.5px rgba(255,255,255,0.95),16.6vw 22.5vh 0 1.5px rgba(255,255,255,0.95),34.8vw 123.0vh 0 1.5px rgba(255,255,255,0.95),5.3vw 20.9vh 0 1.5px rgba(255,255,255,0.95),0.0vw 116.0vh 0 1.5px rgba(255,255,255,0.95),15.4vw 109.8vh 0 1.5px rgba(255,255,255,0.95),10.3vw 194.3vh 0 1.5px rgba(255,255,255,0.95),37.2vw 125.6vh 0 1.5px rgba(255,255,255,0.95),2.6vw 14.4vh 0 1.5px rgba(255,255,255,0.95),89.5vw 42.5vh 0 1.5px rgba(255,255,255,0.95); }
.cosmos::before, .cosmos::after {
  content: ""; position: absolute; border-radius: 50%; filter: blur(40px);
}
.cosmos::before { width: 50vw; height: 50vw; left: -12vw; top: -16vh; background: rgba(92, 62, 180, 0.34); }
.cosmos::after { width: 42vw; height: 42vw; right: -10vw; top: 8vh; background: rgba(36, 92, 168, 0.28); }