/* 💻 страница загрузки приложения (/download) — как discord.com/download: чёрный фон, слева заголовок и кнопка, справа плашка со скриншотом */
body.dl { color-scheme:dark; background:#000; overflow-x:clip;
  --bg:#000; --card:#0B0B0C; --text:#F2F2F3; --text2:#A3A3AA; --line:#232326; --hover:#18181B; --chip:#161618;
  --blue:#3EA6FF; --blue-soft:rgba(62,166,255,.16); --ok:#34C77B; --violet:#B65BD6;
  --grad:linear-gradient(135deg, #FF5A7A, #C04BE8 55%, #7B61FF); }
.dl .bar { background:rgba(0,0,0,.82); border-bottom-color:#161618; -webkit-backdrop-filter:blur(12px); backdrop-filter:blur(12px); }
.dl .bar-in, .dl-main { max-width:1380px; }
.dl .tn.on { background:#2A2A2E; box-shadow:0 1px 3px rgba(0,0,0,.4); }

.dl-main { margin:0 auto; padding:0 40px 72px; }
.dl-hero { display:grid; grid-template-columns:minmax(0, 520px) minmax(0, 1fr); align-items:center; gap:80px; min-height:min(760px, calc(100vh - 61px)); padding:56px 0 64px; }

/* текст и кнопка */
.dl-h span { display:block; white-space:nowrap; }   /* ровно две строки: «Загрузить для» / «компьютера» */
.dl-h { font-size:64px; line-height:1.04; font-weight:900; text-transform:uppercase; letter-spacing:-.005em; margin:0 0 24px; color:#fff; }
.dl-lead { font-size:18px; line-height:1.6; color:#C9C9CF; margin:0 0 40px; max-width:500px; }
.dl-get { display:flex; flex-direction:column; align-items:flex-start; }
.dl-win { display:inline-flex; align-items:center; gap:14px; height:64px; min-width:236px; padding:0 30px 0 26px; border-radius:16px;
  background:#2B2B30; border:1px solid #3A3A40; color:#fff; font-size:21px; font-weight:500; text-decoration:none; letter-spacing:.01em;
  box-shadow:0 10px 30px -12px rgba(0,0,0,.8); transition:background-color .15s, border-color .15s, transform .15s, box-shadow .15s; }
a.dl-win:hover { background:#36363C; border-color:#4A4A52; transform:translateY(-2px); box-shadow:0 16px 36px -14px rgba(192,75,232,.45); }
a.dl-win:active { transform:none; }
.dl-wi { width:24px; height:24px; flex:none; fill:currentColor; }
.dl-win.off { color:#8E8E96; background:#1C1C20; border-color:#2A2A2F; box-shadow:none; cursor:default; }
.dl-soon { margin-left:6px; padding:3px 10px; border-radius:999px; font-size:13px; font-weight:500; color:#fff; background:var(--grad); }
.dl-meta { margin:14px 0 0; min-height:20px; font-size:13.5px; color:#8E8E96; }
.dl-pc { display:none; }
/* подсказка после нажатия — место занято заранее, страница не прыгает */
.dl-hint { margin:10px 0 0; min-height:20px; font-size:13.5px; line-height:1.5; color:#C9C9CF; visibility:hidden; opacity:0; transition:opacity .25s; }
.dl-hint.on { visibility:visible; opacity:1; }
.dl-hint a { color:#fff; text-underline-offset:3px; }

/* плашка с градиентом и «окно» приложения, выходящее за её край */
.dl-art { position:relative; aspect-ratio:8 / 7; border-radius:36px; background:radial-gradient(90% 80% at 85% 10%, rgba(255,255,255,.18), transparent 60%), var(--grad); }
.dl-art::after { content:""; position:absolute; inset:0; border-radius:inherit; box-shadow:inset 0 0 0 1px rgba(255,255,255,.12); pointer-events:none; }
/* окно — над обводкой плашки (z-index:1): иначе её край рисуется тонкой линией поверх скриншота; снизу выходит за плашку заметно, а не «впритык» */
.dl-frame { position:absolute; z-index:1; left:-9%; top:30%; width:104%; border-radius:12px; overflow:hidden; background:#111114;
  border:1px solid rgba(255,255,255,.1); box-shadow:0 40px 80px -24px rgba(0,0,0,.75), 0 12px 30px -10px rgba(40,0,60,.5); }
/* кнопки «свернуть / развернуть / закрыть» поверх шапки скриншота (размеры — в долях ширины окна: 46×53 px из 1600) */
.dl-frame { container-type:inline-size; }
.dl-wc { position:absolute; top:0; right:0; display:flex; background:#1F1F1F; }
.dl-wc i { position:relative; width:2.9cqw; height:3.3cqw; }
.dl-wc i::before, .dl-wc i::after { content:""; position:absolute; left:50%; top:50%; }
.dl-min::before { width:.65cqw; height:1px; background:#C8C8C8; transform:translate(-50%, -50%); }
.dl-max::before { width:.6cqw; height:.6cqw; border:1px solid #C8C8C8; transform:translate(-50%, -50%); }
.dl-x::before, .dl-x::after { width:.8cqw; height:1px; background:#C8C8C8; transform:translate(-50%, -50%) rotate(45deg); }
.dl-x::after { transform:translate(-50%, -50%) rotate(-45deg); }
.dl-shot { display:block; width:100%; height:auto; aspect-ratio:8 / 5; background:#0F0F0F; }

/* преимущества */
.dl-feats { display:grid; grid-template-columns:repeat(3, minmax(0, 1fr)); gap:20px; padding-top:24px; }
.dl-f { padding:26px 26px 24px; border-radius:20px; background:#0D0D0F; border:1px solid #1D1D21; }
.dl-f b { display:block; margin:16px 0 6px; font-size:18px; font-weight:700; color:#fff; }
.dl-f p { margin:0; font-size:14.5px; line-height:1.55; color:#A3A3AA; }
.dl-fi { width:44px; height:44px; padding:10px; border-radius:13px; fill:none; stroke:#fff; stroke-width:1.9; stroke-linecap:round; stroke-linejoin:round; background:var(--grad); }

/* ноутбук */
@media (max-width: 1180px) {
  .dl-hero { grid-template-columns:minmax(0, 440px) minmax(0, 1fr); gap:56px; }
  .dl-h { font-size:52px; }
  .dl-lead { font-size:16.5px; }
}
/* планшет и телефон: в столбик, плашка — под текстом */
@media (max-width: 900px) {
  .dl-main { padding:0 24px 48px; }
  .dl-hero { grid-template-columns:minmax(0, 1fr); gap:48px; min-height:0; padding:40px 0 40px; }
  .dl-art { aspect-ratio:auto; height:auto; padding:6%; overflow:hidden; border-radius:28px; }
  /* планшет: окно целиком внутри плашки (не режем панель статистики посередине текста) */
  .dl-frame { position:relative; left:0; top:0; width:100%; border-radius:12px; }
  .dl-feats { grid-template-columns:minmax(0, 1fr); gap:12px; padding-top:8px; }
}
@media (max-width: 640px) {
  .dl-main { padding:0 16px 40px; }
  .dl-hero { padding:28px 0 32px; gap:20px; }
  .dl-h { font-size:clamp(30px, 9.6vw, 44px); margin-bottom:16px; }
  .dl-lead { font-size:16px; margin-bottom:28px; }
  .dl-get { align-items:stretch; }
  .dl-win { justify-content:center; height:58px; font-size:19px; }
  .dl-pc { display:block; margin-top:2px; color:#C9C9CF; }
  .dl-art { border-radius:22px; padding:14% 0 0 6%; }
  /* телефон: окно крупнее и уходит за правый и нижний край плашки — так интерфейс читается */
  .dl-frame { width:150%; border-radius:12px 0 0 0; }
  .dl-f { padding:20px; display:grid; grid-template-columns:44px minmax(0, 1fr); column-gap:14px; align-items:start; }
  .dl-f .dl-fi { grid-row:span 2; }
  .dl-f b { margin:2px 0 4px; font-size:16px; }
  .dl-f p { font-size:14px; }
}

/* 🛡 почему Windows предупреждает — спокойная карточка под кнопкой (видна всегда, кнопка не двигается) */
.dl-trust { display:flex; align-items:flex-start; gap:12px; max-width:500px; margin:12px 0 0; padding:13px 16px 13px 14px; border-radius:14px;
  background:linear-gradient(135deg, rgba(52,199,123,.09), rgba(255,255,255,.02) 60%); box-shadow:inset 0 0 0 1px rgba(52,199,123,.2); }
.dl-tr-i { width:22px; height:22px; flex:none; margin-top:1px; fill:rgba(52,199,123,.14); stroke:#34C77B; stroke-width:1.7; stroke-linecap:round; stroke-linejoin:round; }
.dl-trust p { margin:0; font-size:13.5px; line-height:1.55; color:#A3A3AA; }
.dl-trust b { color:#E8E8EC; font-weight:500; }
.dl-trust a { color:#fff; white-space:nowrap; text-underline-offset:3px; text-decoration-color:rgba(255,255,255,.35); }
.dl-trust a:hover { text-decoration-color:#fff; }