/* Downloads page */
body.dl-page { background: radial-gradient(ellipse 120% 60% at 50% 0%, #0d1233 0%, var(--bg) 55%) fixed, var(--bg); }
.dl { position: relative; z-index: 1; max-width: 980px; margin: 0 auto; padding: 120px 16px 64px; }
.dl-head h1 { margin: 8px 0 8px; font: 900 clamp(2.2rem, 7vw, 3.6rem)/1.05 var(--display); letter-spacing: 0.04em; }
.dl-sub { margin: 0 0 40px; color: var(--muted); font-size: 1.1rem; }

.app {
  --hue: 210;
  scroll-margin-top: 84px;
  position: relative; margin: 0 0 28px; padding: 28px;
  border: 1px solid var(--line); border-radius: 22px;
  background: linear-gradient(160deg, hsla(var(--hue), 80%, 55%, 0.12), rgba(255, 255, 255, 0.03) 50%);
  backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px);
}
.app-top { display: flex; gap: 22px; align-items: flex-start; }
.app-icon { flex: none; width: 96px; height: 96px; border-radius: 22px; filter: drop-shadow(0 10px 24px hsla(var(--hue), 90%, 50%, 0.35)); }
.app h2 { margin: 0 0 6px; font: 700 1.5rem var(--display); letter-spacing: 0.04em; color: hsl(var(--hue), 90%, 80%); }
.app-blurb { margin: 0 0 8px; color: #c9cfe8; }
.app-ver { margin: 0; color: var(--muted); font-size: 0.9rem; min-height: 1.3em; }

.app-get { display: grid; grid-template-columns: repeat(auto-fit, minmax(230px, 1fr)); gap: 14px; margin: 24px 0 14px; }
.get {
  position: relative; display: grid; grid-template-columns: 38px 1fr; grid-template-rows: auto auto; column-gap: 12px; align-items: center;
  padding: 14px 18px; border-radius: 16px; text-decoration: none; color: var(--ink);
  border: 1px solid var(--line); background: rgba(255, 255, 255, 0.05);
  transition: transform 0.2s, border-color 0.2s, box-shadow 0.2s, background 0.2s;
}
.get .os { grid-row: span 2; width: 38px; height: 38px; background: currentColor; opacity: 0.9;
  -webkit-mask: var(--os-icon) center / contain no-repeat; mask: var(--os-icon) center / contain no-repeat; }
.get[data-os="mac"] { --os-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M16.4 12.6c0-2.3 1.9-3.4 2-3.5-1.1-1.6-2.8-1.8-3.4-1.8-1.4-.1-2.8.9-3.5.9-.7 0-1.8-.9-3-.8-1.5 0-3 .9-3.8 2.3-1.6 2.8-.4 7 1.2 9.3.8 1.1 1.7 2.4 2.9 2.3 1.2 0 1.6-.7 3-.7s1.8.7 3 .7c1.3 0 2.1-1.1 2.8-2.3.9-1.3 1.3-2.6 1.3-2.6s-2.5-1-2.5-3.8zM14.1 5.8c.6-.8 1.1-1.9 1-3-.9 0-2.1.6-2.7 1.4-.6.7-1.1 1.8-1 2.9 1 .1 2.1-.5 2.7-1.3z'/%3E%3C/svg%3E"); }
.get[data-os="windows"] { --os-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M3 5.5l7.5-1v7H3zm8.5-1.2L21 3v8.5h-9.5zM3 12.5h7.5v7L3 18.5zm8.5 0H21V21l-9.5-1.3z'/%3E%3C/svg%3E"); }
.get b { font: 600 1.05rem var(--body); }
.get small { color: var(--muted); font-size: 0.85rem; }
.get:hover { transform: translateY(-3px); border-color: hsla(var(--hue), 90%, 70%, 0.6); box-shadow: 0 14px 34px -16px hsla(var(--hue), 90%, 60%, 0.7); }
.get:focus-visible { outline: 2px solid var(--blue); outline-offset: 3px; }
.get.mine { background: linear-gradient(135deg, hsla(var(--hue), 90%, 55%, 0.9), hsla(calc(var(--hue) + 30), 90%, 50%, 0.85)); border-color: transparent; color: #fff; box-shadow: 0 12px 30px -12px hsla(var(--hue), 90%, 55%, 0.8); }
.get.mine small { color: rgba(255, 255, 255, 0.85); }
.get.mine::after { content: "Your computer"; position: absolute; top: -10px; right: 14px; padding: 2px 10px; border-radius: 999px; background: #fff; color: #111; font: 700 0.68rem var(--body); letter-spacing: 0.04em; text-transform: uppercase; }

.app-more { display: flex; flex-wrap: wrap; gap: 6px 18px; margin: 0 0 10px; }
.app-more a { color: #9cc2ff; text-decoration: none; font-size: 0.95rem; }
.app-more a:hover { text-decoration: underline; }
.app-more a.missing, .get.missing { opacity: 0.4; pointer-events: none; }
.app-req { margin: 0; color: var(--muted); font-size: 0.88rem; }
.app-req b { color: #c9cfe8; font-weight: 600; }

.fw { margin-top: 26px; padding-top: 22px; border-top: 1px solid var(--line); }
.fw h3 { margin: 0 0 6px; font: 700 1.05rem var(--display); letter-spacing: 0.05em; color: hsl(var(--hue), 80%, 78%); }
.fw > p { margin: 0 0 16px; color: #c9cfe8; font-size: 0.95rem; }
.fw a { color: #9cc2ff; }
.fw-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 14px; }
.fw-card { padding: 16px 18px; border: 1px solid var(--line); border-radius: 14px; background: rgba(0, 0, 0, 0.2); }
.fw-card h4 { margin: 0 0 4px; font: 600 1rem var(--body); }
.fw-card p { margin: 0 0 6px; color: var(--muted); font-size: 0.9rem; }
.fw-card .app-more { margin: 8px 0 0; }

.soon h2 { margin: 48px 0 14px; font: 700 0.95rem var(--display); letter-spacing: 0.3em; text-transform: uppercase; color: var(--muted); }
.soon-row { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 14px; }
.soon-card { display: flex; flex-direction: column; gap: 2px; padding: 16px 20px; border: 1px dashed var(--line); border-radius: 14px; color: var(--ink); text-decoration: none; }
.soon-card span { color: var(--muted); font-size: 0.92rem; }
a.soon-card:hover { border-style: solid; background: var(--glass); }
.dl-note { margin: 40px 0 0; color: var(--muted); font-size: 0.88rem; }

@media (max-width: 560px) {
  .app { padding: 20px 16px; }
  .app-top { flex-direction: column; gap: 14px; }
  .app-icon { width: 72px; height: 72px; border-radius: 16px; }
}