/* Nav search (js/search.js): a white sheet that drops from under the nav over the dimmed, blurred page. Self-contained:
   the front page and the store pages load different stylesheets. */
html.sx-lock, html.sx-lock body { overflow: hidden; }
html.sx-lock body { padding-right: var(--sbw, 0px); }
.sx { position: fixed; inset: var(--sx-top, 70px) 0 0; z-index: 390; font: 400 16px/1.4 "Matter", system-ui, sans-serif; color: #0b1538; -webkit-font-smoothing: antialiased; }
.sx[hidden] { display: none; }
.sx-bg { position: absolute; inset: 0; background: rgba(6, 12, 48, .5); -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px); opacity: 0; transition: opacity .25s ease; }
.sx.in .sx-bg { opacity: 1; }
.sx-sheet { position: relative; background: #fff; border-radius: 0 0 24px 24px; box-shadow: 0 40px 80px -40px rgba(6, 12, 40, .55);
  opacity: 0; transform: translateY(-14px); transition: opacity .22s ease, transform .4s cubic-bezier(.16, 1, .3, 1); }
.sx.in .sx-sheet { opacity: 1; transform: none; }
.sx .hx { --hx-o: .5; --hx-g: .1; }
.sx-in { max-width: 760px; margin: 0 auto; padding: 26px 24px 22px; }
.sx-bar { display: flex; align-items: center; gap: 14px; height: 64px; padding: 0 10px 0 20px; border-radius: 18px; background: #f4f6f8; border: 1px solid #dbe3ea; transition: border-color .25s, box-shadow .25s; }
.sx-bar:focus-within { border-color: #1d3cff; box-shadow: 0 0 0 4px rgba(29, 60, 255, .12); background: #fff; }
.sx-bar > svg { flex: none; width: 22px; height: 22px; color: #646d8a; }
.sx-bar input { flex: 1 1 auto; min-width: 0; height: 100%; border: 0; outline: 0; background: transparent; font: 500 22px/1 "Matter", sans-serif; letter-spacing: -.015em; color: #0b1538; -webkit-appearance: none; appearance: none; }
.sx-bar input:focus, .sx-bar input:focus-visible { outline: none; }
.sx-bar input::placeholder { color: #9aabbb; font-weight: 400; }
.sx-bar input::-webkit-search-cancel-button { display: none; }
.sx-bar kbd { flex: none; padding: 5px 8px 4px; border-radius: 7px; border: 1px solid #dbe3ea; background: #fff; font: 400 11px/1 "Fragment Mono", ui-monospace, monospace; letter-spacing: .06em; text-transform: uppercase; color: #646d8a; }
.sx-x { flex: none; width: 40px; height: 40px; border-radius: 50%; border: 0; background: transparent; color: #3a4566; display: grid; place-items: center; cursor: pointer; transition: background .2s; }
.sx-x svg { width: 15px; height: 15px; }
.sx-x:hover { background: #eaf0f5; }
.sx-h { margin: 22px 4px 8px; font: 400 11px/1 "Fragment Mono", ui-monospace, monospace; letter-spacing: .12em; text-transform: uppercase; color: #646d8a; }
.sx-h:empty { display: none; }
.sx-list { list-style: none; margin: 0; padding: 0; max-height: min(460px, calc(100svh - var(--sx-top, 70px) - 220px)); overflow-y: auto; overscroll-behavior: contain; }
.sx-list a { display: grid; grid-template-columns: 52px minmax(0, 1fr) auto 16px; align-items: center; gap: 16px; padding: 8px 14px 8px 8px; border-radius: 16px; text-decoration: none; color: inherit; transition: background .18s; }
.sx-list li.on a { background: #f1f5f9; }
.sx-th { width: 52px; height: 52px; border-radius: 12px; background: radial-gradient(120% 90% at 50% 18%, #fff 0%, #f1f5f9 60%, #e8eef4 100%); display: grid; place-items: center; overflow: hidden; }
.sx-th img { display: block; height: 44px; width: auto; max-width: none; filter: drop-shadow(0 4px 4px rgba(11, 21, 56, .14)); }
.sx-n { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 10px; min-width: 0; }
.sx-n b { font: 500 17px/1.2 "Matter", sans-serif; letter-spacing: -.015em; }
.sx-n i { font: 500 12px/1 "Matter", sans-serif; font-style: normal; padding: 5px 8px; border-radius: 7px; background: var(--cta, #1d3cff); color: #fff; }
.sx-n small { flex-basis: 100%; font-size: 13px; color: #646d8a; }
.sx-p { display: grid; justify-items: end; gap: 3px; font: 500 16px/1 "Matter", sans-serif; }
.sx-p small { font: 400 10.5px/1 "Fragment Mono", ui-monospace, monospace; letter-spacing: .04em; color: #646d8a; }
.sx-list a > svg { width: 16px; height: 16px; color: #9aabbb; transition: transform .35s cubic-bezier(.16, 1, .3, 1), color .2s; }
.sx-list li.on a > svg { color: #0b1538; transform: translateX(3px); }
.sx-none { padding: 18px 8px; font-size: 15px; color: #3a4566; }
.sx-wait { height: 68px; margin: 0 0 2px; border-radius: 16px; background: linear-gradient(90deg, #f4f6f8 0%, #eaf0f5 50%, #f4f6f8 100%) 0 0 / 200% 100%; animation: sxw 1.2s linear infinite; }
@keyframes sxw { to { background-position: -200% 0; } }
.sx-all { display: inline-flex; align-items: center; gap: 8px; margin: 12px 8px 0; font: 500 15px/1 "Matter", sans-serif; color: #0b1538; text-decoration: none; border-bottom: 1px solid rgba(11, 21, 56, .25); padding-bottom: 3px; }
.sx-all[hidden] { display: none; }
.sx-all svg { width: 14px; height: 14px; }
.sx-all:hover { border-color: #0b1538; }
@media (max-width: 760px) {
  .sx-th img { height: 38px; }
  .sx-in { padding: 16px 16px 18px; }
  .sx-bar { height: 56px; padding-left: 16px; }
  .sx-bar input { font-size: 18px; }
  .sx-bar kbd { display: none; }
  .sx-list a { grid-template-columns: 46px minmax(0, 1fr) auto; gap: 12px; }
  .sx-list a > svg { display: none; }
  .sx-th { width: 46px; height: 46px; }
}
@media (prefers-reduced-motion: reduce) { .sx-bg, .sx-sheet { transition: none; } .sx-wait { animation: none; } }