:root {
  color-scheme: dark;
  --bg: #040611;
  --bg2: #080b17;
  --card: #0e1221;
  --fg: #f7f8fd;
  --muted: #b2b8ca;
  --accent: #8b7cff;
  --accent2: #beb5ff;
  --border: rgba(255, 255, 255, 0.11);
  --ok: #55d6a0;
  --grad: linear-gradient(135deg, #f0edff, #c4bcff 48%, #9e91ff);
}

html,
body {
  background: #040611;
}

body {
  min-height: 100dvh;
  color: var(--fg);
  background:
    radial-gradient(900px 560px at 92% -12%, rgba(105, 87, 232, 0.24), transparent 62%),
    radial-gradient(700px 480px at -8% 96%, rgba(99, 216, 255, 0.07), transparent 66%),
    linear-gradient(160deg, #080b17, #040611 64%);
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
}

.wrap {
  position: relative;
  z-index: 1;
}

body:has(.brand) .wrap {
  max-width: 1120px;
  padding-top: max(32px, env(safe-area-inset-top));
}

.brand {
  gap: 10px;
  color: #fff;
  font-weight: 800;
  letter-spacing: -0.04em;
}

.brand .play {
  width: 46px;
  height: 46px;
  overflow: hidden;
  background: url("/icon-192.png") center / cover no-repeat;
  border: 1px solid rgba(255, 255, 255, 0.11);
  border-radius: 13px;
  box-shadow: 0 16px 36px -16px rgba(139, 124, 255, 0.9);
}

.brand .play svg {
  opacity: 0;
}

.brand b {
  color: var(--accent2);
}

h1 {
  color: #fff;
  letter-spacing: -0.045em;
  text-wrap: balance;
}

h1 .grad {
  color: transparent;
  background: linear-gradient(120deg, #fff 5%, #d9d4ff 56%, #aa9fff);
  -webkit-background-clip: text;
  background-clip: text;
}

.sub,
.note,
.qr-cap,
ol {
  color: var(--muted);
}

.hero,
.card,
.tv-dev,
body:has(img.logo) .card,
body:has(img.logo) .warn {
  background: linear-gradient(145deg, rgba(255, 255, 255, 0.07), rgba(255, 255, 255, 0.018));
  border: 1px solid var(--border);
  box-shadow: 0 24px 64px -36px rgba(0, 0, 0, 0.92), inset 0 1px 0 rgba(255, 255, 255, 0.05);
}

.hero {
  border-radius: 28px;
  background:
    radial-gradient(600px 300px at 10% 0%, rgba(139, 124, 255, 0.14), transparent 70%),
    linear-gradient(145deg, rgba(255, 255, 255, 0.065), rgba(255, 255, 255, 0.018));
}

.num {
  color: #080a15;
  background: #c4bcff;
}

.url {
  background: rgba(4, 6, 17, 0.72);
  border-color: rgba(170, 159, 255, 0.24);
}

.url code,
.card .tag,
.kicker,
a {
  color: var(--accent2);
}

.qr {
  border: 8px solid rgba(255, 255, 255, 0.08);
  box-shadow: 0 22px 50px -24px rgba(0, 0, 0, 0.9);
}

.card {
  border-radius: 20px;
  transition: transform 180ms ease, border-color 180ms ease, box-shadow 180ms ease;
}

.card:hover {
  transform: translateY(-3px);
  border-color: rgba(170, 159, 255, 0.34);
  box-shadow: 0 30px 68px -38px rgba(105, 87, 232, 0.46);
}

.btn {
  min-height: 48px;
  color: var(--fg);
  background: rgba(255, 255, 255, 0.055);
  border: 1px solid var(--border);
  border-radius: 13px;
  box-shadow: none;
}

.btn:hover {
  border-color: rgba(170, 159, 255, 0.38);
}

.btn.primary {
  color: #080a15;
  background: var(--grad);
  box-shadow: 0 16px 38px -18px rgba(170, 159, 255, 0.9);
}

.ok,
.copied {
  color: var(--ok);
}

.foot {
  color: #7d859a;
}

body:has(img.logo) {
  padding: max(24px, env(safe-area-inset-top)) max(18px, env(safe-area-inset-right)) max(24px, env(safe-area-inset-bottom)) max(18px, env(safe-area-inset-left));
}

body:has(img.logo) .wrap {
  max-width: 460px;
}

img.logo {
  width: 96px;
  height: 96px;
  border: 1px solid rgba(255, 255, 255, 0.12);
  border-radius: 25px;
  box-shadow: 0 22px 54px -20px rgba(139, 124, 255, 0.9);
}

body:has(img.logo) h1 {
  margin-top: 22px;
  font-size: clamp(1.8rem, 6vw, 2.25rem);
}

body:has(img.logo) .card,
body:has(img.logo) .warn {
  border-radius: 19px;
}

body:has(img.logo) .warn {
  color: #ffe2b0;
  background: rgba(255, 203, 105, 0.08);
  border-color: rgba(255, 203, 105, 0.26);
}

body:has(img.logo) .warn b {
  color: #ffdc97;
}

.btn:focus-visible,
a:focus-visible,
summary:focus-visible {
  outline: 2px solid #c8c0ff;
  outline-offset: 4px;
}

@media (max-width: 760px) {
  body:has(.brand) .wrap {
    padding-inline: max(18px, env(safe-area-inset-right));
  }

  .hero {
    padding: 22px;
    border-radius: 22px;
  }

  .url {
    width: 100%;
    padding-inline: 12px;
  }

  .btns .btn {
    width: 100%;
  }
}

@media (prefers-reduced-motion: reduce) {
  .card,
  .btn {
    transition: none;
  }

  .card:hover,
  .btn:hover {
    transform: none;
  }
}