/* The Locked lockup: app icon · dot · "Locked.", as on the poster. One component
   for both pages; set --u (the icon's side) on .lockup to scale all of it.
   Poster proportions, per 96 of icon: gap 28, dot 18, wordmark 88.

   <span class="lockup" style="--u: 48px">
     <span class="lk-icon">
       <span class="lk-tile"><img class="lk-art" src="/img/icon/locked-icon-64.webp"
         srcset="/img/icon/locked-icon-64.webp 1x, /img/icon/locked-icon-128.webp 2x, /img/icon/locked-icon-192.webp 3x"
         width="64" height="64" alt=""></span>
     </span>
     <span class="lk-dot"></span>
     <span class="lk-word"><span>Locked.</span></span>
   </span> */
.lockup {
  --u: 48px; --lk-ink: #0A0A0A;
  display: inline-flex; align-items: center; gap: calc(var(--u) * 28 / 96);
  color: var(--lk-ink);
}
.lk-icon { position: relative; flex: none; width: var(--u); height: var(--u); }

/* The app icon: the real artwork (Assets.xcassets/AppIcon, locked-icon-3b-1024.png,
   full bleed) in the iOS icon shape, a superellipse (n = 5, the continuous-corner
   mask's closest match), lifted by the poster's soft shadow plus a tight contact shadow that edges its white corner on the paper. The shadow sits
   on the wrapper so the mask doesn't clip it. */
.lk-tile {
  position: absolute; inset: 0;
  filter: drop-shadow(0 calc(var(--u) * 8 / 96) calc(var(--u) * 20 / 96) rgba(10, 10, 10, 0.12)) drop-shadow(0 calc(var(--u) * 1 / 96) calc(var(--u) * 2 / 96) rgba(10, 10, 10, 0.08));
}
.lk-art {
  display: block; width: 100%; height: 100%;
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100'%3E%3Cpath d='M100,50 99.99,63.06 99.95,67.23 99.89,70.26 99.80,72.72 99.69,74.82 99.56,76.68 99.40,78.34 99.22,79.86 99.01,81.26 98.77,82.55 98.51,83.76 98.22,84.89 97.91,85.95 97.57,86.95 97.20,87.89 96.81,88.78 96.39,89.63 95.94,90.43 95.46,91.18 94.94,91.90 94.40,92.58 93.83,93.22 93.22,93.83 92.58,94.40 91.90,94.94 91.18,95.46 90.43,95.94 89.63,96.39 88.78,96.81 87.89,97.20 86.95,97.57 85.95,97.91 84.89,98.22 83.76,98.51 82.55,98.77 81.26,99.01 79.86,99.22 78.34,99.40 76.68,99.56 74.82,99.69 72.72,99.80 70.26,99.89 67.23,99.95 63.06,99.99 50,100 36.94,99.99 32.77,99.95 29.74,99.89 27.28,99.80 25.18,99.69 23.32,99.56 21.66,99.40 20.14,99.22 18.74,99.01 17.45,98.77 16.24,98.51 15.11,98.22 14.05,97.91 13.05,97.57 12.11,97.20 11.22,96.81 10.37,96.39 9.57,95.94 8.82,95.46 8.10,94.94 7.42,94.40 6.78,93.83 6.17,93.22 5.60,92.58 5.06,91.90 4.54,91.18 4.06,90.43 3.61,89.63 3.19,88.78 2.80,87.89 2.43,86.95 2.09,85.95 1.78,84.89 1.49,83.76 1.23,82.55 0.99,81.26 0.78,79.86 0.60,78.34 0.44,76.68 0.31,74.82 0.20,72.72 0.11,70.26 0.05,67.23 0.01,63.06 0,50 0.01,36.94 0.05,32.77 0.11,29.74 0.20,27.28 0.31,25.18 0.44,23.32 0.60,21.66 0.78,20.14 0.99,18.74 1.23,17.45 1.49,16.24 1.78,15.11 2.09,14.05 2.43,13.05 2.80,12.11 3.19,11.22 3.61,10.37 4.06,9.57 4.54,8.82 5.06,8.10 5.60,7.42 6.17,6.78 6.78,6.17 7.42,5.60 8.10,5.06 8.82,4.54 9.57,4.06 10.37,3.61 11.22,3.19 12.11,2.80 13.05,2.43 14.05,2.09 15.11,1.78 16.24,1.49 17.45,1.23 18.74,0.99 20.14,0.78 21.66,0.60 23.32,0.44 25.18,0.31 27.28,0.20 29.74,0.11 32.77,0.05 36.94,0.01 50,0 63.06,0.01 67.23,0.05 70.26,0.11 72.72,0.20 74.82,0.31 76.68,0.44 78.34,0.60 79.86,0.78 81.26,0.99 82.55,1.23 83.76,1.49 84.89,1.78 85.95,2.09 86.95,2.43 87.89,2.80 88.78,3.19 89.63,3.61 90.43,4.06 91.18,4.54 91.90,5.06 92.58,5.60 93.22,6.17 93.83,6.78 94.40,7.42 94.94,8.10 95.46,8.82 95.94,9.57 96.39,10.37 96.81,11.22 97.20,12.11 97.57,13.05 97.91,14.05 98.22,15.11 98.51,16.24 98.77,17.45 99.01,18.74 99.22,20.14 99.40,21.66 99.56,23.32 99.69,25.18 99.80,27.28 99.89,29.74 99.95,32.77 99.99,36.94Z'/%3E%3C/svg%3E") center / 100% 100% no-repeat;
  mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100'%3E%3Cpath d='M100,50 99.99,63.06 99.95,67.23 99.89,70.26 99.80,72.72 99.69,74.82 99.56,76.68 99.40,78.34 99.22,79.86 99.01,81.26 98.77,82.55 98.51,83.76 98.22,84.89 97.91,85.95 97.57,86.95 97.20,87.89 96.81,88.78 96.39,89.63 95.94,90.43 95.46,91.18 94.94,91.90 94.40,92.58 93.83,93.22 93.22,93.83 92.58,94.40 91.90,94.94 91.18,95.46 90.43,95.94 89.63,96.39 88.78,96.81 87.89,97.20 86.95,97.57 85.95,97.91 84.89,98.22 83.76,98.51 82.55,98.77 81.26,99.01 79.86,99.22 78.34,99.40 76.68,99.56 74.82,99.69 72.72,99.80 70.26,99.89 67.23,99.95 63.06,99.99 50,100 36.94,99.99 32.77,99.95 29.74,99.89 27.28,99.80 25.18,99.69 23.32,99.56 21.66,99.40 20.14,99.22 18.74,99.01 17.45,98.77 16.24,98.51 15.11,98.22 14.05,97.91 13.05,97.57 12.11,97.20 11.22,96.81 10.37,96.39 9.57,95.94 8.82,95.46 8.10,94.94 7.42,94.40 6.78,93.83 6.17,93.22 5.60,92.58 5.06,91.90 4.54,91.18 4.06,90.43 3.61,89.63 3.19,88.78 2.80,87.89 2.43,86.95 2.09,85.95 1.78,84.89 1.49,83.76 1.23,82.55 0.99,81.26 0.78,79.86 0.60,78.34 0.44,76.68 0.31,74.82 0.20,72.72 0.11,70.26 0.05,67.23 0.01,63.06 0,50 0.01,36.94 0.05,32.77 0.11,29.74 0.20,27.28 0.31,25.18 0.44,23.32 0.60,21.66 0.78,20.14 0.99,18.74 1.23,17.45 1.49,16.24 1.78,15.11 2.09,14.05 2.43,13.05 2.80,12.11 3.19,11.22 3.61,10.37 4.06,9.57 4.54,8.82 5.06,8.10 5.60,7.42 6.17,6.78 6.78,6.17 7.42,5.60 8.10,5.06 8.82,4.54 9.57,4.06 10.37,3.61 11.22,3.19 12.11,2.80 13.05,2.43 14.05,2.09 15.11,1.78 16.24,1.49 17.45,1.23 18.74,0.99 20.14,0.78 21.66,0.60 23.32,0.44 25.18,0.31 27.28,0.20 29.74,0.11 32.77,0.05 36.94,0.01 50,0 63.06,0.01 67.23,0.05 70.26,0.11 72.72,0.20 74.82,0.31 76.68,0.44 78.34,0.60 79.86,0.78 81.26,0.99 82.55,1.23 83.76,1.49 84.89,1.78 85.95,2.09 86.95,2.43 87.89,2.80 88.78,3.19 89.63,3.61 90.43,4.06 91.18,4.54 91.90,5.06 92.58,5.60 93.22,6.17 93.83,6.78 94.40,7.42 94.94,8.10 95.46,8.82 95.94,9.57 96.39,10.37 96.81,11.22 97.20,12.11 97.57,13.05 97.91,14.05 98.22,15.11 98.51,16.24 98.77,17.45 99.01,18.74 99.22,20.14 99.40,21.66 99.56,23.32 99.69,25.18 99.80,27.28 99.89,29.74 99.95,32.77 99.99,36.94Z'/%3E%3C/svg%3E") center / 100% 100% no-repeat;
}
/* The icon's lock alone (locked-icon-3b-lock-layer.svg with the icon's own soft
   shadow), drawn exactly over the artwork's lock; the hero shows it when the tile
   gives way to the ring. */
.lk-lock { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; }

.lk-dot { flex: none; width: calc(var(--u) * 18 / 96); height: calc(var(--u) * 18 / 96); border-radius: 50%; background: var(--lk-ink); }

/* The wordmark is the app's LockedWordmark: SF Pro heavy, tracking -0.5 at 28 pt,
   ink fading to 78% top to bottom, and theme.shadowSubtle (black 6%, radius 1,
   y 1). The shadow is on the wrapper so the gradient-clipped text still casts it. */
.lk-word {
  font-family: -apple-system, BlinkMacSystemFont, "SF Pro Display", system-ui, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  font-size: calc(var(--u) * 88 / 96); font-weight: 800; letter-spacing: -0.0179em; line-height: 1;
  /* The cap height sits above the box's centre; this centres the letters on the icon. */
  translate: 0 calc(var(--u) * -2 / 96);
  white-space: nowrap;
  filter: drop-shadow(0 1px 2px rgba(0, 0, 0, 0.06));
}
.lk-word > span {
  display: block; color: var(--lk-ink);
  background: linear-gradient(to bottom, var(--lk-ink), rgb(10 10 10 / 0.78));
  -webkit-background-clip: text; background-clip: text;
  -webkit-text-fill-color: transparent;
}
@media (forced-colors: active) { .lk-word > span { -webkit-text-fill-color: CanvasText; } }