.dl-head { padding-bottom: 46px }

.dl-logo { width: 360px; height: auto; margin: 0 auto; filter: drop-shadow(0 10px 24px rgba(0, 0, 0, .6)) }

.dl-beta { display: inline-flex; align-items: center; gap: 10px; margin-top: 18px; padding: 6px 14px; font: 800 13px var(--font); letter-spacing: .1em; text-transform: uppercase; color: #6fdc8c; background: rgba(111, 220, 140, .1); border: 1px solid rgba(111, 220, 140, .35); border-radius: 999px }
.dl-beta-dot { width: 8px; height: 8px; border-radius: 50%; background: currentColor; animation: dl-pulse 2s ease-out infinite }

@keyframes dl-pulse {
  0% { box-shadow: 0 0 0 0 rgba(111, 220, 140, .6) }
  70% { box-shadow: 0 0 0 8px rgba(111, 220, 140, 0) }
  100% { box-shadow: 0 0 0 0 rgba(111, 220, 140, 0) }
}

.dl-head .page-title { margin-top: 12px; font-size: 44px }

.dl-main { margin-top: 28px; padding: 18px 40px; font-size: 19px }
.dl-main .ic { width: 22px; height: 22px }

.dl-meta { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 8px 12px; margin-top: 18px; font: 700 14px var(--font); color: var(--soft) }
.dl-meta-dot { width: 4px; height: 4px; border-radius: 50%; background: var(--mute) }
.dl-meta-warn { display: inline-flex; align-items: center; gap: 6px; color: var(--gold-text) }
.dl-meta-warn .ic { width: 15px; height: 15px }

.dl-alt { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 10px 14px; max-width: 640px; margin: 22px auto 0; padding: 12px 16px; font: 700 14px var(--font); color: var(--soft); background: rgb(var(--plate-rgb) / .7); border: 1px solid var(--line); border-radius: 14px; -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px) }
.dl-alt .btn .ic { width: 16px; height: 16px }

.dl { padding-bottom: 64px }

.dl-notes { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px }
.dl-note { --note-rgb: 160 171 196; display: flex; gap: 14px; align-items: flex-start; padding: 18px; font-size: 15px; line-height: 1.6; color: var(--soft); background: var(--bubble); border: 1px solid rgb(var(--note-rgb) / .3); border-radius: 16px; box-shadow: 0 24px 40px -30px rgba(5, 8, 25, .9) }
.dl-note.is-red { --note-rgb: 255 138 122 }
.dl-note.is-blue { --note-rgb: 140 200 240 }
.dl-note b { font-weight: 800; color: var(--text) }
.dl-note code { padding: 1px 6px; font: 700 13px ui-monospace, Consolas, monospace; color: var(--text); background: rgb(var(--tint-rgb) / .1); border-radius: 5px }
.dl-note-icon { flex: none; width: 40px; height: 40px; display: grid; place-items: center; color: rgb(var(--note-rgb)); background: rgb(var(--note-rgb) / .12); border: 1px solid rgb(var(--note-rgb) / .35); border-radius: 11px }
.dl-note-icon .ic { width: 20px; height: 20px }

.dl-faq { margin-top: 56px }
.dl-faq-list { display: grid; gap: 12px; max-width: 860px; margin: 0 auto }

.dl-faq-item { background: var(--bubble); border: 1px solid rgb(var(--tint-rgb) / .12); border-radius: 16px; box-shadow: 0 24px 40px -30px rgba(5, 8, 25, .9); transition: border-color .2s }
.dl-faq-item[open] { border-color: rgba(255, 201, 60, .45) }
.dl-faq-item summary { display: flex; align-items: center; gap: 14px; padding: 14px 18px; list-style: none; cursor: pointer }
.dl-faq-item summary::-webkit-details-marker { display: none }
.dl-faq-icon { flex: none; width: 38px; height: 38px; display: grid; place-items: center; color: var(--gold); background: rgba(255, 201, 60, .1); border: 1px solid rgba(255, 201, 60, .3); border-radius: 11px }
.dl-faq-icon .ic { width: 19px; height: 19px }
.dl-faq-name { flex: 1; min-width: 0; font: 800 16px/1.35 var(--font); color: var(--text); overflow-wrap: anywhere }
.dl-faq-caret { color: var(--mute); transition: transform .2s }
.dl-faq-item[open] .dl-faq-caret { transform: rotate(180deg); color: var(--gold) }
.dl-faq-item summary:hover .dl-faq-name { color: var(--gold-text) }

.dl-faq-body { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 12px; padding: 0 18px 18px }
.dl-faq-part { padding: 14px 16px; font-size: 15px; line-height: 1.6; color: var(--soft); background: rgb(var(--tint-rgb) / .04); border: 1px solid rgb(var(--tint-rgb) / .1); border-radius: 12px }
.dl-faq-part.is-fix { background: rgba(111, 220, 140, .06); border-color: rgba(111, 220, 140, .25) }
.dl-faq-label { margin-bottom: 4px; font: 900 12px var(--font); letter-spacing: .1em; text-transform: uppercase; color: var(--mute) }
.dl-faq-part.is-fix .dl-faq-label { color: #6fdc8c }
.dl-faq-part a { font-weight: 800; color: var(--gold-text); text-decoration: underline; text-decoration-color: rgba(255, 210, 87, .45); text-underline-offset: 3px }

.dl-help { margin-top: 30px; text-align: center; font-size: 15px; color: var(--mute) }
.dl-help a { font-weight: 800; color: var(--gold-text) }

@media (max-width: 960px) {
  .dl-notes { grid-template-columns: minmax(0, 1fr) }
}

@media (max-width: 640px) {
  .dl-head { padding-bottom: 34px }
  .dl-logo { width: 240px }
  .dl-beta { font-size: 11px; letter-spacing: .06em }
  .dl-head .page-title { font-size: clamp(24px, 7.4vw, 30px) }
  .dl-main { display: flex; width: 100%; padding: 16px 18px; font-size: 17px }
  .dl-meta { font-size: 13px }
  .dl-meta-dot:has(+ .dl-meta-warn) { display: none }
  .dl-meta-warn { flex-basis: 100%; justify-content: center }
  .dl-alt { flex-direction: column; padding: 14px }
  .dl-alt .btn { width: 100%; white-space: normal }
  .dl-note { padding: 14px; font-size: 14px }
  .dl-faq { margin-top: 44px }
  .dl-faq .section-title { gap: 10px; font-size: clamp(18px, 5.8vw, 24px); letter-spacing: .05em }
  .dl-faq-item summary { padding: 12px 14px; gap: 12px }
  .dl-faq-name { font-size: 15px }
  .dl-faq-body { grid-template-columns: minmax(0, 1fr); padding: 0 12px 12px }
}