/* =========================================================
   Clipio — the download popup
   ---------------------------------------------------------
   Opened by a "Download for Mac / Windows" button. The button does not
   download by itself: the popup says the beta is not code-signed, walks
   through the install, and its own button starts the download.
   Used on the home page and on /mikudabossclipio, which load different
   sheets (site.css, launch.css), so the colours here are literal rather
   than either sheet's tokens. Behaviour: js/download.js.
   ========================================================= */
.dl-pop{
  width:min(500px, 100vw - 32px); max-height:calc(100vh - 32px);
  padding:8px; border:0; border-radius:30px;
  background:rgba(255,255,255,.16);
  color:rgba(243,240,229,.78); overflow:visible;
  font-family:Inter, "SF Pro Display", "Helvetica Neue", Helvetica, Arial, sans-serif;
  box-shadow:0 40px 120px -30px rgba(32,119,239,.35), 0 30px 80px -20px rgba(0,0,0,.9);
}
.dl-pop:focus{ outline:none; }
.dl-pop::backdrop{ background:rgba(10,9,8,.74); backdrop-filter:blur(6px); }
.dl-pop[open]{ animation:dl-in .2s ease-out; }
@keyframes dl-in{ from{ opacity:0; transform:translateY(10px) scale(.98); } }

.dl-pop__body{
  position:relative; max-height:calc(100vh - 48px); overflow:auto;
  padding:30px 30px 26px; border-radius:22px;
  background:#0A0908; text-align:left;
}
.dl-pop__x{
  position:absolute; top:18px; right:18px;
  display:grid; place-items:center; width:34px; height:34px;
  border:1px solid rgba(255,255,255,.10); border-radius:999px;
  background:rgba(255,255,255,.06); color:rgba(243,240,229,.85);
  cursor:pointer; transition:background .15s ease;
}
.dl-pop__x:hover{ background:rgba(255,255,255,.12); }
.dl-pop__x:focus-visible{ outline:2px solid #fff; outline-offset:2px; }

.dl-pop__tag{
  display:inline-flex; align-items:center; gap:8px;
  height:32px; padding:0 14px; margin:0;
  border:1px solid rgba(255,255,255,.10); border-radius:999px;
  background:#030303; color:#FFC266;
  font-size:13px; font-weight:500; line-height:1;
}
.dl-pop__tag i{ width:7px; height:7px; border-radius:999px; background:#FFC266;
                box-shadow:0 0 0 4px rgba(255,194,102,.16); }

.dl-pop h2{
  margin:16px 40px 0 0;
  font-size:30px; line-height:1.2; font-weight:400; letter-spacing:-.015em;
  color:rgba(255,255,255,.90);
}
.dl-pop h2 em{ font-style:italic; color:#217EFF; letter-spacing:.0066em; }
.dl-pop__lede{ margin:8px 0 0; font-size:14px; line-height:1.5; color:rgba(243,240,229,.60); }

/* The unsigned-build alert: amber, so it reads as a caution, not an error. */
.dl-warn{
  display:flex; gap:12px; align-items:flex-start;
  margin:20px 0 0; padding:14px 16px;
  border:1px solid rgba(255,194,102,.30); border-radius:18px;
  background:rgba(255,194,102,.08);
  font-size:14px; line-height:1.55; color:rgba(243,240,229,.82);
}
.dl-warn svg{ flex:none; margin-top:2px; color:#FFC266; }
.dl-warn p{ margin:0; }
.dl-warn b{ font-weight:600; color:#fff; }

.dl-steps{ margin:22px 0 0; padding:0; list-style:none; counter-reset:s; }
.dl-steps li{
  position:relative; padding:2px 0 16px 42px; counter-increment:s;
  font-size:15px; line-height:1.55; color:rgba(243,240,229,.78);
}
.dl-steps li:last-child{ padding-bottom:0; }
.dl-steps li::before{
  content:counter(s); position:absolute; left:0; top:0;
  display:grid; place-items:center; width:28px; height:28px;
  border:1px solid rgba(255,255,255,.20); border-radius:999px;
  background:rgba(255,255,255,.06);
  font-size:13px; font-weight:500; color:#fff;
}
/* The thread between the numbers. */
.dl-steps li:not(:last-child)::after{
  content:""; position:absolute; left:14px; top:32px; bottom:4px;
  width:1px; background:rgba(255,255,255,.10);
}
.dl-steps strong, .dl-steps em{ font-style:normal; font-weight:500; color:#fff; }

.dl-pop__foot{
  display:flex; align-items:center; justify-content:space-between; gap:12px;
  margin-top:24px; padding-top:20px; border-top:1px solid rgba(255,255,255,.08);
}
.dl-pop__status{ margin:0; font-size:13px; line-height:1.5; color:rgba(243,240,229,.55); }
.dl-pop__status b{ font-weight:500; color:#7DB2FF; }
.dl-pop__go{
  flex:none; display:inline-flex; align-items:center; justify-content:center; gap:9px;
  height:44px; padding:0 22px; border-radius:999px;
  background:#2077EF; color:#fff; text-decoration:none; white-space:nowrap;
  font-size:15px; font-weight:500; line-height:1; letter-spacing:.013em;
  box-shadow:0 10px 30px -10px rgba(32,119,239,.75);
  transition:background .15s ease;
}
.dl-pop__go:hover{ background:#1A6BD9; }
.dl-pop__go:active{ background:#155CBD; }
.dl-pop__go:focus-visible{ outline:2px solid #fff; outline-offset:2px; }
.dl-pop__go svg{ flex:none; fill:none; stroke:currentColor; }

.dl-pop details{ margin-top:14px; font-size:12px; line-height:1.7; color:rgba(243,240,229,.45); }
.dl-pop summary{ cursor:pointer; width:fit-content; list-style:none; }
.dl-pop summary::-webkit-details-marker{ display:none; }
.dl-pop summary::after{ content:" \203A"; }
.dl-pop details[open] summary::after{ content:" \2039"; }
.dl-pop summary:hover{ color:rgba(243,240,229,.75); }
.dl-pop code{
  font-family:ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  color:rgba(243,240,229,.70); word-break:break-all;
}

@media (max-width:640px){
  .dl-pop__body{ padding:24px 20px 20px; }
  .dl-pop h2{ font-size:25px; }
  .dl-pop__foot{ flex-direction:column-reverse; align-items:stretch; text-align:center; }
  .dl-pop__go{ width:100%; }
}
@media (prefers-reduced-motion:reduce){
  .dl-pop[open]{ animation:none; }
  .dl-pop__x, .dl-pop__go{ transition:none; }
}