/*
  The marketplace: `/marketplace`, its three collections and the catalog.

  Ported from the design files (Mkt-Home, Mkt-Apps, Mkt-Kits, Mkt-Clipart, Mkt-Catalog) with every
  rule scoped under `.mk`, because the design's class names (`.tile`, `.btn`, `.tab`, `.chip`) are
  short enough to collide with anything. The tile glyphs (`g-*`), the clipart pieces (`ca-*`) and
  the two hero illustrations (`h-*`) are inline SVG, so the pages draw offline.

  It follows the app's light or dark theme through the `--ds-*` tokens, and sits under the app header
  (`hub-layout`) like Spaces and Starters. The root carries `ds`, so the new design's type applies.
*/

atomics-marketplace {
  display: block;
  width: 100%;
}

.mk {
  position: relative; overflow: hidden; box-sizing: border-box; color: var(--ink); -webkit-font-smoothing: antialiased;
  /* The design's palette, by its own short names, read off the app's tokens so both schemes follow. */
  --ink: var(--ds-ink); --ink2: var(--ds-ink2); --mut: var(--ds-mute); --line: var(--ds-line); --line2: var(--ds-line-strong);
  --surf: var(--ds-panel); --page: var(--ds-bg); --blue: var(--ds-accent); --fill: var(--ds-fill); --chip: var(--ds-chip);
  --hov: var(--ds-fill); --soft: var(--ds-fill); --soft2: color-mix(in srgb, var(--ds-fill), var(--ds-ink) 8%);
  --solid: var(--ds-ink); --solid-h: color-mix(in srgb, var(--ds-ink), var(--ds-panel) 14%); --on-solid: var(--ds-panel);
  /* Clipart is drawn for light paper, so its previews keep it in both schemes. */
  --paper: #f3f3f0;
}
.mk button { font: inherit; color: inherit; }
.mk button:focus-visible, .mk input:focus-visible { outline: 2px solid var(--blue); outline-offset: 2px; }
.mk .mono { font-family: ui-monospace, "SF Mono", Menlo, monospace; font-variant-numeric: tabular-nums; }
.mk .tile { position: relative; display: inline-flex; align-items: center; justify-content: center; flex: 0 0 auto; border-radius: 26%; color: #ffffff; box-shadow: inset 0 0 0 1px rgba(255,255,255,.14), inset 0 1px 0 rgba(255,255,255,.22), 0 1px 2px rgba(0,0,0,.12); }
.mk .tile .gl { width: 58%; height: 58%; background: currentColor; -webkit-mask-size: contain; mask-size: contain; -webkit-mask-repeat: no-repeat; mask-repeat: no-repeat; -webkit-mask-position: center; mask-position: center; }
.mk .first { display: inline-flex; align-items: center; gap: 4px; font-size: 11px; font-weight: 700; color: var(--ds-info); background: var(--ds-info-soft); border-radius: 99px; padding: 2px 7px; }
.mk .gbtn { position: relative; height: 32px; min-width: 64px; padding: 0 14px; border-radius: 99px; border: 0; background: var(--soft); color: var(--ink); font-size: 13px !important; font-weight: 700; cursor: pointer; display: inline-flex; align-items: center; justify-content: center; gap: 6px; white-space: nowrap; transition: background-color .15s ease; }
.mk .gbtn:hover { background: var(--soft2); }
.mk .gbtn.is-soon { background: transparent; color: var(--mut); box-shadow: inset 0 0 0 1px var(--line); }
.mk .gbtn.is-owned { background: transparent; color: var(--ds-ok); box-shadow: inset 0 0 0 1px var(--line2); }
.mk .gbtn.is-owned:hover { background: var(--ds-ok-soft); }
.mk .is-busy { position: relative; color: transparent !important; pointer-events: none; }
.mk .is-busy::after { content: ""; position: absolute; left: 50%; top: 50%; width: 16px; height: 16px; margin: -8px 0 0 -8px; border-radius: 50%; border: 2px solid var(--line2); border-top-color: var(--ink); animation: mk-spin .7s linear infinite; }
@keyframes mk-spin { to { transform: rotate(360deg); } }
.mk .btn.pri.is-busy::after { border-color: rgba(255,255,255,.25); border-top-color: #ffffff; }
.mk .btn { height: 40px; padding: 0 16px; border-radius: 11px; border: 0; background: var(--soft); font-size: 14px !important; font-weight: 650; cursor: pointer; display: inline-flex; align-items: center; justify-content: center; gap: 8px; white-space: nowrap; }
.mk .btn:hover { background: var(--soft2); }
.mk .btn.pri { background: var(--solid); color: var(--on-solid); }
.mk .btn.pri:hover { background: var(--solid-h); }
.mk .btn.ghost { background: transparent; box-shadow: inset 0 0 0 1px var(--line2); }
.mk .btn.ghost:hover { background: var(--hov); }
.mk .btn.lg { height: 46px; padding: 0 20px; border-radius: 13px; font-size: 15px !important; }
@media (prefers-reduced-motion: reduce) {
  .mk *, .mk *::before, .mk *::after { animation-duration: .01ms !important; transition-duration: .01ms !important; }
}
.mk { width: 100%; background: var(--page); }
.mk .wrap { max-width: 1312px; margin: 0 auto; padding: 0 32px; box-sizing: border-box; }
.mk .sp { flex: 1 1 auto; }
.mk .mh { position: relative; z-index: 5; }
.mk .mh-top { display: flex; align-items: center; gap: 14px; height: 68px; }
.mk .mh-logo { display: inline-flex; align-items: center; gap: 10px; font-size: 17px; font-weight: 750; letter-spacing: -.01em; margin-right: 10px; text-decoration: none; color: var(--ink); }
.mk .mh-mark { width: 32px; height: 32px; border-radius: 10px; background: var(--solid); color: var(--on-solid); display: inline-flex; align-items: center; justify-content: center; }
.mk .mh-sw { position: relative; flex: 0 1 520px; }
.mk .srd { position: absolute; left: 0; right: 0; top: 50px; z-index: 20; background: var(--surf); border-radius: 16px; padding: 8px; box-shadow: 0 0 0 1px var(--line), 0 24px 50px rgba(0,0,0,.16); animation: mk-fade .15s ease; }
.mk .srd-i { display: flex; align-items: center; gap: 12px; width: 100%; padding: 8px; border: 0; border-radius: 10px; background: transparent; cursor: pointer; text-align: left; }
.mk .srd-i:hover { background: var(--hov); }
.mk .srd-i .tile, .mk .srd-i .tpk { width: 36px; height: 36px; }
.mk .srd-i .tth { width: 50px; height: 36px; flex: 0 0 50px; }
.mk .srd-x { flex: 1 1 auto; min-width: 0; }
.mk .srd-x b { display: block; font-size: 14px; }
.mk .srd-x small { display: block; font-size: 12.5px; color: var(--mut); }
.mk .srd-own { font-size: 12px; font-weight: 700; color: var(--ds-ok); }
.mk .srd-none { padding: 14px 10px; font-size: 14px; color: var(--mut); }
.mk .srd-all { display: flex; align-items: center; gap: 6px; margin-top: 4px; padding: 10px; border-top: 1px solid var(--line); font-size: 13.5px; font-weight: 650; color: var(--blue); text-decoration: none; }
.mk .mh-search { width: 100%; display: flex; align-items: center; gap: 10px; height: 42px; padding: 0 14px; border-radius: 12px; background: var(--soft); color: var(--mut); box-sizing: border-box; }
.mk .mh-search:focus-within { background: var(--surf); box-shadow: 0 0 0 2px var(--blue); }
.mk .mh-search input { flex: 1 1 auto; min-width: 0; border: 0; background: transparent; font: inherit; font-size: 14.5px; color: var(--ink); outline: none; }
.mk .mh-lib { display: inline-flex; align-items: center; gap: 8px; height: 40px; padding: 0 8px 0 14px; border-radius: 12px; border: 0; background: transparent; font-size: 14px !important; font-weight: 650; cursor: pointer; box-shadow: inset 0 0 0 1px var(--line2); }
.mk .mh-lib:hover { background: var(--hov); }
/* While the account is asked, and when it could not be: the count is this browser's copy. */
.mk .mh-lib:is([aria-busy='true'], [stale]) .mh-count { opacity: .5; }
.mk .mh-count { min-width: 24px; height: 24px; padding: 0 7px; box-sizing: border-box; border-radius: 99px; background: var(--solid); color: var(--on-solid); font-size: 12px; font-weight: 700; display: inline-flex; align-items: center; justify-content: center; }
.mk .av { width: 36px; height: 36px; border-radius: 50%; background: var(--blue); color: #ffffff; font-size: 13px; font-weight: 700; display: inline-flex; align-items: center; justify-content: center; flex: 0 0 36px; }
.mk .mh-tabs { display: flex; align-items: center; gap: 4px; height: 52px; }
.mk .tab { height: 36px; padding: 0 14px; border-radius: 10px; display: inline-flex; align-items: center; gap: 8px; font-size: 14px; font-weight: 600; color: var(--ink2); text-decoration: none; }
.mk .tab:hover { background: var(--hov); color: var(--ink); }
.mk .tab.is-on { background: var(--solid); color: var(--on-solid); }
.mk .route { font-size: 12px; color: var(--mut); }
.mk .hero { position: relative; margin-top: 28px; height: 392px; border-radius: 26px; overflow: hidden; display: grid; grid-template-columns: minmax(0, 1fr) 560px; gap: 40px; align-items: center; padding: 0 44px 0 52px; box-sizing: border-box; color: #ffffff; transition: background .5s ease; }
.mk .eyebrow { display: inline-flex; align-items: center; gap: 8px; font-size: 12px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: rgba(255,255,255,.72); }
.mk .hero h1 { margin: 14px 0 0; font-size: 46px; line-height: 1.05; letter-spacing: -.03em; }
.mk .hero p { margin: 14px 0 0; font-size: 17px; line-height: 1.5; color: rgba(255,255,255,.78); max-width: 480px; }
.mk .hero-meta { margin-top: 16px; display: flex; gap: 16px; font-size: 13px; color: rgba(255,255,255,.65); }
.mk .hero-b { margin-top: 26px; display: flex; gap: 10px; align-items: center; }
.mk .hero .gbtn { height: 46px; padding: 0 22px; font-size: 15px !important; background: #ffffff; color: #161616; }
.mk .hero .gbtn.is-owned { background: rgba(255,255,255,.14); color: #ffffff; box-shadow: none; }
.mk .hero .gbtn.is-busy::after { border-color: rgba(0,0,0,.15); border-top-color: #161616; }
.mk .hero-ghost { height: 46px; padding: 0 18px; border-radius: 99px; border: 0; background: rgba(255,255,255,.1); color: #ffffff !important; font-size: 15px !important; font-weight: 650; cursor: pointer; }
.mk .hero-ghost:hover { background: rgba(255,255,255,.18); }
.mk .hero-art { height: 318px; border-radius: 18px; background-size: cover; background-position: center; box-shadow: 0 30px 60px rgba(0,0,0,.35), 0 0 0 1px rgba(255,255,255,.08); }
.mk .hero-nav { position: absolute; left: 52px; bottom: 26px; display: flex; gap: 8px; align-items: center; }
.mk .dot { width: 8px; height: 8px; border-radius: 99px; border: 0; padding: 0; background: rgba(255,255,255,.35); cursor: pointer; transition: width .25s ease, background-color .25s ease; }
.mk .dot.is-on { width: 26px; background: #ffffff; }
.mk .hero-arr { position: absolute; right: 22px; bottom: 22px; display: flex; gap: 6px; }
.mk .hero-arr button { width: 36px; height: 36px; border-radius: 50%; border: 0; background: rgba(255,255,255,.12); color: #ffffff !important; display: inline-flex; align-items: center; justify-content: center; cursor: pointer; }
.mk .hero-arr button:hover { background: rgba(255,255,255,.22); }
.mk .sec { margin-top: 44px; }
.mk .sec-h { display: flex; align-items: baseline; gap: 14px; margin-bottom: 16px; }
.mk .sec-h h2 { margin: 0; font-size: 22px; letter-spacing: -.02em; }
.mk .sec-h p { margin: 0; font-size: 14px; color: var(--mut); }
.mk .lnk { margin-left: auto; font-size: 14px; font-weight: 650; color: var(--blue); text-decoration: none; display: inline-flex; align-items: center; gap: 4px; white-space: nowrap; }
.mk .lnk:hover { text-decoration: underline; }
.mk .grid4 { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 16px; }
.mk .grid3 { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 18px; }
.mk .ac { background: var(--surf); border-radius: 18px; padding: 18px; box-shadow: 0 0 0 1px var(--line); cursor: pointer; transition: box-shadow .18s ease, transform .18s ease; display: flex; flex-direction: column; min-width: 0; }
.mk .ac:hover { box-shadow: 0 0 0 1px rgba(0,0,0,.1), 0 14px 30px rgba(0,0,0,.08); transform: translateY(-2px); }
.mk .ac-top { display: flex; align-items: center; gap: 12px; }
.mk .ac-top .tile { width: 56px; height: 56px; }
.mk .ac-x { flex: 1 1 auto; min-width: 0; }
.mk .ac-x b { display: block; font-size: 15.5px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.mk .ac-x span { display: block; font-size: 12.5px; color: var(--mut); margin-top: 2px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.mk .ac p { margin: 12px 0 14px; font-size: 13.5px; line-height: 1.45; color: var(--ink2); height: 39px; overflow: hidden; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; }
.mk .ac-m { display: flex; align-items: center; gap: 12px; font-size: 12px; color: var(--mut); margin-top: auto; }
.mk .ac-m b { color: var(--ink); font-weight: 650; display: inline-flex; align-items: center; gap: 3px; }
.mk .ac-m b svg { color: #f2a61d; }
.mk .ac-m > * { white-space: nowrap; }
.mk .ac-m .smp { margin-left: auto; }
.mk .ac-m .live { font-weight: 600; color: var(--ink); }
.mk .it { position: relative; display: block; height: 150px; padding: 22px 24px; box-sizing: border-box; border-radius: 20px; text-decoration: none; color: var(--ink); overflow: hidden; transition: transform .18s ease; }
.mk .it:hover { transform: translateY(-2px); }
.mk .it b { display: block; font-size: 19px; letter-spacing: -.01em; }
.mk .it > span:not(.it-st) { display: block; font-size: 13.5px; color: rgba(0,0,0,.6); margin-top: 6px; max-width: 220px; line-height: 1.4; }
.mk .it-st { position: absolute; right: 22px; bottom: 22px; display: flex; }
.mk .it-st .tile { width: 54px; height: 54px; margin-left: -14px; box-shadow: 0 0 0 3px rgba(255,255,255,.75), 0 6px 16px rgba(0,0,0,.14); }
.mk .it-st .tile:nth-child(2) { transform: translateY(-10px); }
.mk .kc { background: var(--surf); border-radius: 20px; overflow: hidden; box-shadow: 0 0 0 1px var(--line); cursor: pointer; transition: box-shadow .18s ease, transform .18s ease; display: flex; flex-direction: column; }
.mk .kc:hover { box-shadow: 0 0 0 1px rgba(0,0,0,.1), 0 14px 30px rgba(0,0,0,.08); transform: translateY(-2px); }
.mk .kth { aspect-ratio: 600 / 340; background-size: cover; background-position: center; border-bottom: 1px solid var(--line); }
.mk .kc-b { padding: 16px 18px 18px; display: flex; flex-direction: column; flex: 1 1 auto; }
.mk .kc-h { display: flex; align-items: center; gap: 8px; }
.mk .kc-h b { font-size: 16.5px; }
.mk .tag { font-size: 11.5px; font-weight: 700; color: var(--ink2); background: var(--soft); border-radius: 99px; padding: 3px 8px; }
.mk .kc p { margin: 8px 0 14px; font-size: 13.5px; line-height: 1.45; color: var(--ink2); }
.mk .kc-f { display: flex; align-items: center; gap: 10px; margin-top: auto; }
.mk .stack { display: inline-flex; padding-left: 8px; }
.mk .stack .tile { width: 28px; height: 28px; margin-left: -8px; box-shadow: 0 0 0 2px var(--surf); }
.mk .kc-inc { font-size: 12.5px; color: var(--mut); }
.mk .pc { background: var(--surf); border-radius: 18px; padding: 12px 12px 16px; box-shadow: 0 0 0 1px var(--line); cursor: pointer; transition: box-shadow .18s ease, transform .18s ease; }
.mk .pc:hover { box-shadow: 0 0 0 1px rgba(0,0,0,.1), 0 14px 30px rgba(0,0,0,.08); transform: translateY(-2px); }
.mk .pc-pv { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 4px; padding: 10px; border-radius: 12px; background: var(--paper); }
.mk .pc-pv i, .mk .pz i { display: block; aspect-ratio: 1; background-size: 84%; background-position: center; background-repeat: no-repeat; }
.mk .pc-h { display: flex; align-items: center; gap: 10px; padding: 12px 4px 0; }
.mk .pc-h div { flex: 1 1 auto; min-width: 0; }
.mk .pc-h b { display: block; font-size: 15px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.mk .pc-h span { display: block; font-size: 12.5px; color: var(--mut); margin-top: 2px; }
.mk .ch { display: flex; align-items: flex-end; gap: 30px; padding: 40px 0 22px; }
.mk .ch h1 { margin: 0; font-size: 38px; letter-spacing: -.03em; }
.mk .ch p { margin: 8px 0 0; font-size: 16px; line-height: 1.5; color: var(--mut); max-width: 640px; }
.mk .ch-k { margin-left: auto; display: flex; gap: 28px; }
.mk .ch-k div { text-align: right; }
.mk .ch-k b { display: block; font-size: 22px; letter-spacing: -.02em; }
.mk .ch-k span { font-size: 12.5px; color: var(--mut); }
.mk .bar { display: flex; align-items: center; gap: 10px; margin-bottom: 20px; }
.mk .chips { display: flex; gap: 8px; flex-wrap: wrap; flex: 1 1 auto; }
.mk .chip { height: 36px; padding: 0 14px; border-radius: 99px; border: 0; background: var(--surf); box-shadow: inset 0 0 0 1px var(--line2); font-size: 13.5px !important; font-weight: 600; cursor: pointer; display: inline-flex; align-items: center; gap: 6px; }
.mk .chip:hover { background: var(--hov); }
.mk .chip small { font-size: 12px; color: var(--mut); font-weight: 600; }
.mk .chip.is-on { background: var(--solid); color: var(--on-solid) !important; box-shadow: none; }
.mk .chip.is-on small { color: rgba(255,255,255,.6); }
.mk .sortb { height: 36px; padding: 0 12px; border-radius: 10px; border: 0; background: transparent; font-size: 13.5px !important; font-weight: 600; cursor: pointer; display: inline-flex; align-items: center; gap: 6px; color: var(--ink2) !important; white-space: nowrap; }
.mk .sortb:hover { background: var(--hov); }
.mk .sw2 { display: inline-flex; align-items: center; gap: 8px; font-size: 13.5px; font-weight: 600; cursor: pointer; border: 0; background: transparent; padding: 0 6px; white-space: nowrap; }
.mk .sw2 i { width: 34px; height: 20px; border-radius: 99px; background: var(--line2); position: relative; transition: background-color .15s ease; }
.mk .sw2 i::after { content: ""; position: absolute; left: 2px; top: 2px; width: 16px; height: 16px; border-radius: 50%; background: #ffffff; box-shadow: 0 1px 2px rgba(0,0,0,.2); transition: transform .15s ease; }
.mk .sw2.is-on i { background: var(--blue); }
.mk .sw2.is-on i::after { transform: translateX(14px); }
.mk .empty { grid-column: 1 / -1; padding: 60px 0; text-align: center; color: var(--mut); font-size: 15px; }
.mk .pz { display: grid; grid-template-columns: repeat(8, minmax(0, 1fr)); gap: 12px; }
.mk .pz-i { position: relative; background: var(--surf); border-radius: 14px; box-shadow: 0 0 0 1px var(--line); padding: 10px; }
.mk .pz-i small { display: block; font-size: 11.5px; color: var(--mut); text-align: center; margin-top: 4px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.mk .pz-add { position: absolute; right: 8px; top: 8px; width: 28px; height: 28px; border-radius: 50%; border: 0; background: var(--solid); color: var(--on-solid) !important; display: inline-flex; align-items: center; justify-content: center; cursor: pointer; opacity: 0; transition: opacity .15s ease; }
.mk .pz-i:hover .pz-add, .mk .pz-add:focus-visible, .mk .pz-add.is-on { opacity: 1; }
.mk .pz-add.is-on { background: #2a7a45; }
@media (hover: none) { .mk .pz-add { opacity: 1; } }
.mk .foot { padding: 40px 0 48px; font-size: 12.5px; color: var(--mut); display: flex; gap: 22px; }
.mk .cat-l { display: flex; gap: 32px; align-items: flex-start; padding-top: 32px; }
.mk .aside { flex: 0 0 236px; }
.mk .fg { padding: 16px 0; border-bottom: 1px solid var(--line); }
.mk .fg:first-child { padding-top: 0; }
.mk .fg-h { font-size: 12px; font-weight: 700; letter-spacing: .07em; text-transform: uppercase; color: var(--mut); margin-bottom: 8px; }
.mk .fc { display: flex; align-items: center; gap: 10px; width: 100%; height: 34px; padding: 0 8px; margin: 0 -8px; box-sizing: content-box; border: 0; background: transparent; border-radius: 8px; font-size: 14px !important; cursor: pointer; text-align: left; }
.mk .fc:hover { background: var(--hov); }
.mk .fc small { margin-left: auto; color: var(--mut); font-size: 12.5px; }
.mk .fc .cb { width: 18px; height: 18px; border-radius: 5px; box-shadow: inset 0 0 0 1.5px var(--line2); background: var(--surf); display: inline-flex; align-items: center; justify-content: center; flex: 0 0 18px; color: transparent; }
.mk .fc.is-radio .cb { border-radius: 50%; }
.mk .fc.is-on .cb { background: var(--solid); box-shadow: none; color: var(--on-solid); }
.mk .fc.is-on.is-radio .cb { background: var(--surf); box-shadow: inset 0 0 0 5px var(--solid); color: transparent; }
.mk .cmain { flex: 1 1 auto; min-width: 0; }
.mk .ctop { display: flex; align-items: center; gap: 10px; margin-bottom: 14px; }
.mk .ctop h1 { margin: 0; font-size: 28px; letter-spacing: -.02em; }
.mk .ctop .n { font-size: 14px; color: var(--mut); }
.mk .qchip { display: inline-flex; align-items: center; gap: 6px; height: 30px; padding: 0 6px 0 12px; border-radius: 99px; background: var(--ds-info-soft); color: var(--ds-info); font-size: 13px; font-weight: 600; }
.mk .qchip button { width: 22px; height: 22px; border: 0; border-radius: 50%; background: transparent; color: var(--ds-info) !important; cursor: pointer; display: inline-flex; align-items: center; justify-content: center; }
.mk .tbl { background: var(--surf); border-radius: 18px; box-shadow: 0 0 0 1px var(--line); overflow: hidden; }
.mk .tr { display: grid; grid-template-columns: minmax(0, 2.6fr) 110px minmax(0, 1fr) 110px 124px; gap: 14px; align-items: center; padding: 0 18px; min-height: 64px; border-top: 1px solid var(--line); cursor: pointer; }
.mk .tr:hover { background: var(--ds-panel2); }
.mk .tr.th { min-height: 42px; border-top: 0; font-size: 12px; font-weight: 700; color: var(--mut); letter-spacing: .04em; text-transform: uppercase; cursor: default; background: var(--ds-panel2); }
.mk .tr.th:hover { background: var(--ds-panel2); }
.mk .tn { display: flex; align-items: center; gap: 12px; min-width: 0; }
.mk .tn .tile { width: 40px; height: 40px; flex: 0 0 40px; }
.mk .tth { width: 56px; height: 40px; border-radius: 8px; background-size: cover; background-position: center; box-shadow: 0 0 0 1px var(--line); flex: 0 0 56px; }
.mk .tpk { width: 40px; height: 40px; border-radius: 10px; background-color: var(--paper); background-size: 80%; background-position: center; background-repeat: no-repeat; flex: 0 0 40px; }
.mk .tn div { min-width: 0; }
.mk .tn b { display: block; font-size: 14.5px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.mk .tn div span { display: block; font-size: 12.5px; color: var(--mut); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.mk .ty { justify-self: start; font-size: 12px; font-weight: 700; border-radius: 99px; padding: 3px 9px; }
.mk .ty-app { background: var(--ds-info-soft); color: var(--ds-info); }
.mk .ty-kit { background: var(--ds-warn-soft); color: var(--ds-warn); }
.mk .ty-pack { background: var(--ds-ok-soft); color: var(--ds-ok); }
.mk .tc { font-size: 13.5px; color: var(--ink2); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.mk .tr .gbtn { justify-self: end; }
.mk .pager { display: flex; align-items: center; justify-content: space-between; padding: 16px 4px; font-size: 13.5px; color: var(--mut); }
.mk .pager div { display: flex; gap: 6px; }
.mk .pg-b { min-width: 36px; height: 36px; border-radius: 10px; border: 0; background: transparent; font-size: 13.5px !important; font-weight: 650; cursor: pointer; }
.mk .pg-b:hover { background: var(--hov); }
.mk .pg-b.is-on { background: var(--solid); color: var(--on-solid) !important; }
@keyframes mk-fade { from { opacity: 0; } }
/* The sheet: a native `<dialog class="ds-dialog dm">`, so it takes design.css's bar, scrim and phone sheet. */
[ds] dialog.ds-dialog.dm { width: min(900px, calc(100vw - 48px)); }
.mk .dm-body { padding: 0 0 8px; }
@keyframes mk-pop { from { opacity: 0; transform: translateY(14px) scale(.98); } }
.mk .dm-head { display: flex; gap: 22px; align-items: center; padding: 30px 32px 0; }
.mk .dm-head .tile { width: 96px; height: 96px; }
.mk .dm-head h2 { margin: 0; font-size: 30px; letter-spacing: -.02em; }
.mk .dm-dev { display: flex; align-items: center; gap: 8px; margin-top: 4px; font-size: 14.5px; color: var(--mut); }
.mk .dm-stats { display: flex; gap: 0; margin-top: 14px; }
.mk .dm-stats span { padding: 0 18px; border-left: 1px solid var(--line); }
.mk .dm-stats span:first-child { padding-left: 0; border-left: 0; }
.mk .dm-stats b { display: flex; align-items: center; gap: 4px; font-size: 15px; }
.mk .dm-stats b svg { color: #f2a61d; }
.mk .dm-stats small { display: block; font-size: 12px; color: var(--mut); margin-top: 1px; }
.mk .dm-act { position: relative; display: flex; align-items: center; gap: 12px; padding: 22px 32px 0; }
.mk .dm-note { font-size: 13.5px; color: var(--mut); }
.mk .dm-note.ok { color: var(--ds-ok); font-weight: 600; display: inline-flex; align-items: center; gap: 6px; }
.mk .split { display: inline-flex; }
.mk .split .btn:first-child { border-radius: 13px 0 0 13px; }
.mk .split .split-c { border-radius: 0 13px 13px 0; padding: 0 12px; margin-left: 1px; }
.mk .split-m { display: inline-flex; }
/* "Add to which space?" is an atomics-menu, which places it in the top layer and draws the panel. These only make its rows two lines tall with a swatch. */
.mk .pick { width: 320px; }
.mk atomics-menu .pick [role='menuitem'].pick-i { gap: 10px; min-height: 44px; padding: 6px 8px; white-space: normal; font-size: 14px !important; font-weight: 600; }
.mk .pick-n { display: flex; flex-direction: column; min-width: 0; overflow-wrap: anywhere; }
.mk .pick-i small { display: block; font-size: 12px; font-weight: 500; color: var(--ds-mute, var(--mut)); }
.mk atomics-menu .pick .pick-i:is(:hover, :focus-visible) :is(small, .chk) { color: inherit; opacity: .85; }
.mk .pick-sw { width: 26px; height: 26px; border-radius: 8px; flex: 0 0 26px; }
.mk .pick-i .chk { display: inline-flex; margin-left: auto; color: var(--ds-ok); }
.mk .shots { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 14px; padding: 24px 32px 0; }
.mk .shot { position: relative; height: 170px; border-radius: 14px; overflow: hidden; background-color: var(--soft); background-image: radial-gradient(rgba(30,30,28,.2) 1px, rgba(0,0,0,0) 1.4px); background-size: 16px 16px; box-shadow: inset 0 0 0 1px var(--line); }
.mk .shot-c { font-size: 12.5px; color: var(--mut); margin-top: 8px; }
.mk .shot-c b { color: var(--ink); }
.mk .sw-win { position: absolute; left: 50%; top: 18px; width: 200px; height: 136px; margin-left: -100px; border-radius: 10px; background: var(--surf); box-shadow: 0 0 0 1px rgba(0,0,0,.08), 0 10px 24px rgba(0,0,0,.12); overflow: hidden; }
.mk .sw-bar { display: flex; align-items: center; gap: 6px; height: 26px; padding: 0 8px; border-bottom: 1px solid var(--line); font-size: 11px; font-weight: 700; }
.mk .sw-bar .tile { width: 16px; height: 16px; border-radius: 5px; }
.mk .sw-body { padding: 10px; display: grid; gap: 7px; }
.mk .sw-body i { display: block; height: 10px; border-radius: 5px; background: var(--c); opacity: .2; }
.mk .sw-body i:nth-child(1) { width: 60%; opacity: .55; height: 14px; }
.mk .sw-body i:nth-child(3) { width: 80%; }
.mk .sw-body i:nth-child(4) { width: 45%; opacity: .35; }
.mk .sh-ic { position: absolute; display: flex; flex-direction: column; align-items: center; gap: 5px; font-size: 10.5px; font-weight: 600; color: var(--ink2); }
.mk .sh-ic .tile { width: 40px; height: 40px; }
.mk .sh-ic.is-me .tile { box-shadow: 0 0 0 3px var(--surf), 0 0 0 5px var(--blue); }
.mk .sh-fold { width: 40px; height: 32px; border-radius: 4px 8px 8px 8px; background: #1d1d1f; position: relative; margin-top: 8px; }
.mk .sh-fold::before { content: ""; position: absolute; left: 0; top: -6px; width: 18px; height: 8px; border-radius: 4px 4px 0 0; background: #1d1d1f; }
.mk .sh-note { width: 40px; height: 40px; background: #fbe7a1; border-radius: 3px; }
.mk .sh-cur { position: absolute; }
.mk .phone { position: absolute; left: 50%; top: 14px; width: 92px; height: 176px; margin-left: -46px; border-radius: 18px; background: #1d1d1f; padding: 5px; box-sizing: border-box; }
.mk .phone-s { width: 100%; height: 100%; border-radius: 14px; background: var(--page); overflow: hidden; }
.mk .phone-s .sw-bar { height: 22px; font-size: 9px; padding: 0 6px; }
.mk .phone-s .sw-body { padding: 8px; gap: 6px; }
.mk .phone-s .sw-body i { height: 8px; }
.mk .dm-cols { display: grid; grid-template-columns: minmax(0, 1.25fr) minmax(0, 1fr); gap: 34px; padding: 26px 32px 32px; }
.mk .dm-cols h3 { margin: 0 0 8px; font-size: 15px; }
.mk .dm-cols p { margin: 0 0 18px; font-size: 14px; line-height: 1.55; color: var(--ink2); }
.mk .perm { display: flex; gap: 10px; align-items: flex-start; font-size: 13.5px; line-height: 1.4; color: var(--ink2); padding: 6px 0; }
.mk .perm svg { flex: 0 0 18px; margin-top: 1px; }
.mk .perm.yes svg { color: var(--ds-ok); }
.mk .perm.no { color: var(--mut); }
.mk .perm.no svg { color: var(--mut); }
.mk .facts { display: grid; grid-template-columns: 110px 1fr; gap: 6px 10px; font-size: 13.5px; margin-top: 14px; }
.mk .facts span { color: var(--mut); }
.mk .rb { display: flex; align-items: center; gap: 8px; font-size: 12px; color: var(--mut); margin: 3px 0; }
.mk .rb i { flex: 1 1 auto; height: 6px; border-radius: 3px; background: var(--hov); overflow: hidden; position: relative; }
.mk .rb i b { position: absolute; left: 0; top: 0; bottom: 0; background: var(--solid); border-radius: 3px; }
.mk .kit-th { margin: 22px 32px 0; aspect-ratio: 600 / 250; border-radius: 16px; background-size: cover; background-position: center; box-shadow: inset 0 0 0 1px var(--line); }
.mk .frames { display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 18px; }
.mk .frames span { font-size: 12.5px; font-weight: 600; background: var(--soft); border-radius: 8px; padding: 5px 10px; }
.mk .inc { display: flex; align-items: center; gap: 12px; padding: 8px 0; border-top: 1px solid var(--line); }
.mk .inc:first-of-type { border-top: 0; }
.mk .inc .tile, .mk .inc .tpk { width: 36px; height: 36px; }
.mk .inc div { flex: 1 1 auto; min-width: 0; }
.mk .inc b { display: block; font-size: 14px; }
.mk .inc small { display: block; font-size: 12.5px; color: var(--mut); }
.mk .inc-st { font-size: 12px; font-weight: 700; border-radius: 99px; padding: 3px 9px; white-space: nowrap; }
.mk .inc-st.have { background: var(--ds-ok-soft); color: var(--ds-ok); }
.mk .inc-st.gets { background: var(--soft); color: var(--ink2); }
.mk .inc-st.pay { background: var(--ds-warn-soft); color: var(--ds-warn); }
.mk .pk-grid { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 10px; padding: 22px 32px 0; }
.mk .pk-grid i { display: block; aspect-ratio: 1; border-radius: 14px; background-color: var(--paper); background-size: 76%; background-position: center; background-repeat: no-repeat; }
.mk .ca-arrows-0 { background-image: url("data:image/svg+xml,%3Csvg xmlns=%22http://www.w3.org/2000/svg%22 viewBox=%220 0 120 120%22%3E%3Cpath d=%22M18 86C38 50 70 34 100 30%22 fill=%22none%22 stroke=%22%231d1d1f%22 stroke-width=%225%22 stroke-linecap=%22round%22 stroke-linejoin=%22round%22/%3E%3Cpath d=%22M84 22l17 8-10 15%22 fill=%22none%22 stroke=%22%231d1d1f%22 stroke-width=%225%22 stroke-linecap=%22round%22 stroke-linejoin=%22round%22/%3E%3C/svg%3E"); }
.mk .ca-arrows-1 { background-image: url("data:image/svg+xml,%3Csvg xmlns=%22http://www.w3.org/2000/svg%22 viewBox=%220 0 120 120%22%3E%3Cpath d=%22M20 30c50 0 74 22 74 62%22 fill=%22none%22 stroke=%22%231d1d1f%22 stroke-width=%225%22 stroke-linecap=%22round%22 stroke-linejoin=%22round%22/%3E%3Cpath d=%22M80 82l14 12 12-15%22 fill=%22none%22 stroke=%22%231d1d1f%22 stroke-width=%225%22 stroke-linecap=%22round%22 stroke-linejoin=%22round%22/%3E%3C/svg%3E"); }
.mk .ca-arrows-2 { background-image: url("data:image/svg+xml,%3Csvg xmlns=%22http://www.w3.org/2000/svg%22 viewBox=%220 0 120 120%22%3E%3Cpath d=%22M14 64c18-26 40-26 46-6s-6 30 10 30 30-30 40-44%22 fill=%22none%22 stroke=%22%231d1d1f%22 stroke-width=%225%22 stroke-linecap=%22round%22 stroke-linejoin=%22round%22/%3E%3Cpath d=%22M96 30l14 14-18 6%22 fill=%22none%22 stroke=%22%231d1d1f%22 stroke-width=%225%22 stroke-linecap=%22round%22 stroke-linejoin=%22round%22/%3E%3C/svg%3E"); }
.mk .ca-arrows-3 { background-image: url("data:image/svg+xml,%3Csvg xmlns=%22http://www.w3.org/2000/svg%22 viewBox=%220 0 120 120%22%3E%3Cpath d=%22M60 16v72%22 fill=%22none%22 stroke=%22%231d1d1f%22 stroke-width=%225%22 stroke-linecap=%22round%22 stroke-linejoin=%22round%22/%3E%3Cpath d=%22M44 74l16 18 16-18%22 fill=%22none%22 stroke=%22%231d1d1f%22 stroke-width=%225%22 stroke-linecap=%22round%22 stroke-linejoin=%22round%22/%3E%3C/svg%3E"); }
.mk .ca-arrows-4 { background-image: url("data:image/svg+xml,%3Csvg xmlns=%22http://www.w3.org/2000/svg%22 viewBox=%220 0 120 120%22%3E%3Cpath d=%22M18 60h70%22 fill=%22none%22 stroke=%22%231d1d1f%22 stroke-width=%225%22 stroke-linecap=%22round%22 stroke-linejoin=%22round%22/%3E%3Cpath d=%22M74 44l18 16-18 16%22 fill=%22none%22 stroke=%22%231d1d1f%22 stroke-width=%225%22 stroke-linecap=%22round%22 stroke-linejoin=%22round%22/%3E%3Cpath d=%22M18 74h50%22 fill=%22none%22 stroke=%22%231d1d1f%22 stroke-width=%223%22 stroke-linecap=%22round%22 stroke-linejoin=%22round%22/%3E%3C/svg%3E"); }
.mk .ca-arrows-5 { background-image: url("data:image/svg+xml,%3Csvg xmlns=%22http://www.w3.org/2000/svg%22 viewBox=%220 0 120 120%22%3E%3Cpath d=%22M24 92c-6-30 10-60 40-62s40 30 20 44-38-6-20-24%22 fill=%22none%22 stroke=%22%231d1d1f%22 stroke-width=%225%22 stroke-linecap=%22round%22 stroke-linejoin=%22round%22/%3E%3C/svg%3E"); }
.mk .ca-doodles-0 { background-image: url("data:image/svg+xml,%3Csvg xmlns=%22http://www.w3.org/2000/svg%22 viewBox=%220 0 120 120%22%3E%3Cpath d=%22M60 18l11 24 26 3-19 18 5 26-23-13-23 13 5-26-19-18 26-3z%22 fill=%22none%22 stroke=%22%231d1d1f%22 stroke-width=%224.5%22 stroke-linecap=%22round%22 stroke-linejoin=%22round%22/%3E%3C/svg%3E"); }
.mk .ca-doodles-1 { background-image: url("data:image/svg+xml,%3Csvg xmlns=%22http://www.w3.org/2000/svg%22 viewBox=%220 0 120 120%22%3E%3Cpath d=%22M60 96S22 74 22 48a18 18 0 0 1 38-6 18 18 0 0 1 38 6c0 26-38 48-38 48z%22 fill=%22none%22 stroke=%22%23e0493f%22 stroke-width=%224.5%22 stroke-linecap=%22round%22 stroke-linejoin=%22round%22/%3E%3C/svg%3E"); }
.mk .ca-doodles-2 { background-image: url("data:image/svg+xml,%3Csvg xmlns=%22http://www.w3.org/2000/svg%22 viewBox=%220 0 120 120%22%3E%3Cpath d=%22M44 70c-10-8-14-18-14-28a30 30 0 0 1 60 0c0 10-4 20-14 28v10H44z%22 fill=%22none%22 stroke=%22%231d1d1f%22 stroke-width=%224.5%22 stroke-linecap=%22round%22 stroke-linejoin=%22round%22/%3E%3Cpath d=%22M48 92h24%22 fill=%22none%22 stroke=%22%231d1d1f%22 stroke-width=%224.5%22 stroke-linecap=%22round%22 stroke-linejoin=%22round%22/%3E%3C/svg%3E"); }
.mk .ca-doodles-3 { background-image: url("data:image/svg+xml,%3Csvg xmlns=%22http://www.w3.org/2000/svg%22 viewBox=%220 0 120 120%22%3E%3Cpath d=%22M34 84a18 18 0 0 1 2-36 26 26 0 0 1 50 4 16 16 0 0 1 0 32z%22 fill=%22none%22 stroke=%22%232f7cf6%22 stroke-width=%224.5%22 stroke-linecap=%22round%22 stroke-linejoin=%22round%22/%3E%3C/svg%3E"); }
.mk .ca-doodles-4 { background-image: url("data:image/svg+xml,%3Csvg xmlns=%22http://www.w3.org/2000/svg%22 viewBox=%220 0 120 120%22%3E%3Cpath d=%22M24 62l22 22 50-50%22 fill=%22none%22 stroke=%22%233f9d5b%22 stroke-width=%227%22 stroke-linecap=%22round%22 stroke-linejoin=%22round%22/%3E%3C/svg%3E"); }
.mk .ca-doodles-5 { background-image: url("data:image/svg+xml,%3Csvg xmlns=%22http://www.w3.org/2000/svg%22 viewBox=%220 0 120 120%22%3E%3Cpath d=%22M60 98a38 38 0 1 0 0-76 38 38 0 0 0 0 76z%22 fill=%22none%22 stroke=%22%231d1d1f%22 stroke-width=%224.5%22 stroke-linecap=%22round%22 stroke-linejoin=%22round%22/%3E%3Cpath d=%22M44 52v4M76 52v4%22 fill=%22none%22 stroke=%22%231d1d1f%22 stroke-width=%226%22 stroke-linecap=%22round%22 stroke-linejoin=%22round%22/%3E%3Cpath d=%22M42 72c10 10 26 10 36 0%22 fill=%22none%22 stroke=%22%231d1d1f%22 stroke-width=%224.5%22 stroke-linecap=%22round%22 stroke-linejoin=%22round%22/%3E%3C/svg%3E"); }
.mk .ca-tape-0 { background-image: url("data:image/svg+xml,%3Csvg xmlns=%22http://www.w3.org/2000/svg%22 viewBox=%220 0 120 120%22%3E%3Cpath d=%22M14 44l92-12 4 30-92 12z%22 fill=%22%23f2b632%22 opacity=%22.75%22/%3E%3Cpath d=%22M14 44l3 4-2 4 3 4-2 4 2 6M106 32l3 4-2 4 3 4-2 4 2 6%22 stroke=%22%23fbfbfa%22 stroke-width=%222%22 fill=%22none%22/%3E%3C/svg%3E"); }
.mk .ca-tape-1 { background-image: url("data:image/svg+xml,%3Csvg xmlns=%22http://www.w3.org/2000/svg%22 viewBox=%220 0 120 120%22%3E%3Cpath d=%22M20 70l84-28 8 24-84 28z%22 fill=%22%238bc5f0%22 opacity=%22.8%22/%3E%3C/svg%3E"); }
.mk .ca-tape-2 { background-image: url("data:image/svg+xml,%3Csvg xmlns=%22http://www.w3.org/2000/svg%22 viewBox=%220 0 120 120%22%3E%3Cpath d=%22M16 50h88v28H16z%22 fill=%22%23f4a3bd%22 opacity=%22.8%22 transform=%22rotate(-6 60 64)%22/%3E%3C/svg%3E"); }
.mk .ca-tape-3 { background-image: url("data:image/svg+xml,%3Csvg xmlns=%22http://www.w3.org/2000/svg%22 viewBox=%220 0 120 120%22%3E%3Cpath d=%22M30 36h52l18 24-18 24H30a6 6 0 0 1-6-6V42a6 6 0 0 1 6-6z%22 fill=%22%23fbfbfa%22 stroke=%22%231d1d1f%22 stroke-width=%223.5%22/%3E%3Ccircle cx=%2284%22 cy=%2260%22 r=%225%22 fill=%22none%22 stroke=%22%231d1d1f%22 stroke-width=%223.5%22/%3E%3Cpath d=%22M38 52h30M38 66h22%22 stroke=%22%231d1d1f%22 stroke-width=%223.5%22 stroke-linecap=%22round%22/%3E%3C/svg%3E"); }
.mk .ca-tape-4 { background-image: url("data:image/svg+xml,%3Csvg xmlns=%22http://www.w3.org/2000/svg%22 viewBox=%220 0 120 120%22%3E%3Cpath d=%22M22 44l80 6-2 26-80-6z%22 fill=%22%23b6e0b9%22 opacity=%22.85%22/%3E%3C/svg%3E"); }
.mk .ca-tape-5 { background-image: url("data:image/svg+xml,%3Csvg xmlns=%22http://www.w3.org/2000/svg%22 viewBox=%220 0 120 120%22%3E%3Crect x=%2226%22 y=%2230%22 width=%2268%22 height=%2260%22 rx=%224%22 fill=%22%23fbe7a1%22 transform=%22rotate(5 60 60)%22/%3E%3Cpath d=%22M46 26l28 4-2 14-28-4z%22 fill=%22%23d7d7d3%22 opacity=%22.9%22/%3E%3C/svg%3E"); }
.mk .ca-bauhaus-0 { background-image: url("data:image/svg+xml,%3Csvg xmlns=%22http://www.w3.org/2000/svg%22 viewBox=%220 0 120 120%22%3E%3Ccircle cx=%2260%22 cy=%2260%22 r=%2238%22 fill=%22%23e0493f%22/%3E%3C/svg%3E"); }
.mk .ca-bauhaus-1 { background-image: url("data:image/svg+xml,%3Csvg xmlns=%22http://www.w3.org/2000/svg%22 viewBox=%220 0 120 120%22%3E%3Cpath d=%22M22 84a38 38 0 0 1 76 0z%22 fill=%22%232f5fd0%22/%3E%3C/svg%3E"); }
.mk .ca-bauhaus-2 { background-image: url("data:image/svg+xml,%3Csvg xmlns=%22http://www.w3.org/2000/svg%22 viewBox=%220 0 120 120%22%3E%3Cpath d=%22M60 20l42 76H18z%22 fill=%22%23f2b632%22/%3E%3C/svg%3E"); }
.mk .ca-bauhaus-3 { background-image: url("data:image/svg+xml,%3Csvg xmlns=%22http://www.w3.org/2000/svg%22 viewBox=%220 0 120 120%22%3E%3Crect x=%2226%22 y=%2226%22 width=%2268%22 height=%2268%22 fill=%22%231d1d1f%22/%3E%3C/svg%3E"); }
.mk .ca-bauhaus-4 { background-image: url("data:image/svg+xml,%3Csvg xmlns=%22http://www.w3.org/2000/svg%22 viewBox=%220 0 120 120%22%3E%3Cpath d=%22M24 96V24a72 72 0 0 1 72 72z%22 fill=%22%23e0493f%22/%3E%3C/svg%3E"); }
.mk .ca-bauhaus-5 { background-image: url("data:image/svg+xml,%3Csvg xmlns=%22http://www.w3.org/2000/svg%22 viewBox=%220 0 120 120%22%3E%3Ccircle cx=%2260%22 cy=%2260%22 r=%2236%22 fill=%22none%22 stroke=%22%232f5fd0%22 stroke-width=%2214%22/%3E%3C/svg%3E"); }
.mk .ca-botanic-0 { background-image: url("data:image/svg+xml,%3Csvg xmlns=%22http://www.w3.org/2000/svg%22 viewBox=%220 0 120 120%22%3E%3Cpath d=%22M60 104C58 70 60 40 72 16%22 stroke=%22%232f6e3e%22 stroke-width=%224%22 fill=%22none%22 stroke-linecap=%22round%22/%3E%3Cpath d=%22M62 70c-18-2-30-14-32-30 16 0 30 10 32 30zM64 50c14-4 24-14 26-30-14 2-24 14-26 30z%22 fill=%22%235aa86a%22/%3E%3C/svg%3E"); }
.mk .ca-botanic-1 { background-image: url("data:image/svg+xml,%3Csvg xmlns=%22http://www.w3.org/2000/svg%22 viewBox=%220 0 120 120%22%3E%3Cpath d=%22M30 96C40 50 70 28 100 22 94 60 70 90 30 96z%22 fill=%22%237cc08a%22/%3E%3Cpath d=%22M30 96C52 72 74 48 100 22%22 stroke=%22%232f6e3e%22 stroke-width=%223%22 fill=%22none%22/%3E%3C/svg%3E"); }
.mk .ca-botanic-2 { background-image: url("data:image/svg+xml,%3Csvg xmlns=%22http://www.w3.org/2000/svg%22 viewBox=%220 0 120 120%22%3E%3Cpath d=%22M60 106V40%22 stroke=%22%232f6e3e%22 stroke-width=%224%22 stroke-linecap=%22round%22/%3E%3Cellipse cx=%2260%22 cy=%2230%22 rx=%2212%22 ry=%2218%22 fill=%22%23e9a6b4%22/%3E%3Cpath d=%22M60 80c-14 0-24-8-26-20 14 0 24 8 26 20z%22 fill=%22%235aa86a%22/%3E%3C/svg%3E"); }
.mk .ca-botanic-3 { background-image: url("data:image/svg+xml,%3Csvg xmlns=%22http://www.w3.org/2000/svg%22 viewBox=%220 0 120 120%22%3E%3Cpath d=%22M22 60c20-24 56-24 76 0-20 24-56 24-76 0z%22 fill=%22%239ccf8f%22/%3E%3Cpath d=%22M22 60h76%22 stroke=%22%232f6e3e%22 stroke-width=%223%22/%3E%3C/svg%3E"); }
.mk .ca-botanic-4 { background-image: url("data:image/svg+xml,%3Csvg xmlns=%22http://www.w3.org/2000/svg%22 viewBox=%220 0 120 120%22%3E%3Cpath d=%22M60 104V24M60 44l-18-12M60 60l20-12M60 76l-20-12M60 90l18-10%22 stroke=%22%233f8a4c%22 stroke-width=%224%22 stroke-linecap=%22round%22 fill=%22none%22/%3E%3C/svg%3E"); }
.mk .ca-botanic-5 { background-image: url("data:image/svg+xml,%3Csvg xmlns=%22http://www.w3.org/2000/svg%22 viewBox=%220 0 120 120%22%3E%3Ccircle cx=%2246%22 cy=%2250%22 r=%2218%22 fill=%22%23f7c548%22/%3E%3Ccircle cx=%2272%22 cy=%2266%22 r=%2214%22 fill=%22%23f2b632%22/%3E%3Cpath d=%22M60 104V80%22 stroke=%22%232f6e3e%22 stroke-width=%224%22/%3E%3C/svg%3E"); }
.mk .ca-bubbles-0 { background-image: url("data:image/svg+xml,%3Csvg xmlns=%22http://www.w3.org/2000/svg%22 viewBox=%220 0 120 120%22%3E%3Cpath d=%22M20 30h80a8 8 0 0 1 8 8v36a8 8 0 0 1-8 8H50l-18 16v-16H20a8 8 0 0 1-8-8V38a8 8 0 0 1 8-8z%22 fill=%22%23fbfbfa%22 stroke=%22%231d1d1f%22 stroke-width=%224%22 stroke-linejoin=%22round%22/%3E%3C/svg%3E"); }
.mk .ca-bubbles-1 { background-image: url("data:image/svg+xml,%3Csvg xmlns=%22http://www.w3.org/2000/svg%22 viewBox=%220 0 120 120%22%3E%3Cellipse cx=%2262%22 cy=%2254%22 rx=%2244%22 ry=%2230%22 fill=%22%23cfe3fb%22/%3E%3Cpath d=%22M36 76l-14 22 30-14z%22 fill=%22%23cfe3fb%22/%3E%3C/svg%3E"); }
.mk .ca-bubbles-2 { background-image: url("data:image/svg+xml,%3Csvg xmlns=%22http://www.w3.org/2000/svg%22 viewBox=%220 0 120 120%22%3E%3Cpath d=%22M14 58l14-8-6-16 18 4 6-18 12 14 14-12 4 18 18-4-6 16 14 8-14 8 6 16-18-4-4 18-14-12-12 14-6-18-18 4 6-16z%22 fill=%22%23f2b632%22/%3E%3C/svg%3E"); }
.mk .ca-bubbles-3 { background-image: url("data:image/svg+xml,%3Csvg xmlns=%22http://www.w3.org/2000/svg%22 viewBox=%220 0 120 120%22%3E%3Ccircle cx=%2266%22 cy=%2250%22 r=%2230%22 fill=%22%23fbfbfa%22 stroke=%22%231d1d1f%22 stroke-width=%224%22/%3E%3Ccircle cx=%2232%22 cy=%2288%22 r=%227%22 fill=%22%23fbfbfa%22 stroke=%22%231d1d1f%22 stroke-width=%224%22/%3E%3Ccircle cx=%2220%22 cy=%22104%22 r=%224%22 fill=%22%231d1d1f%22/%3E%3C/svg%3E"); }
.mk .ca-bubbles-4 { background-image: url("data:image/svg+xml,%3Csvg xmlns=%22http://www.w3.org/2000/svg%22 viewBox=%220 0 120 120%22%3E%3Cpath d=%22M20 30h80v50H64l-4 18-4-18H20z%22 fill=%22%231d1d1f%22/%3E%3Cpath d=%22M34 48h52M34 62h34%22 stroke=%22%23fbfbfa%22 stroke-width=%224%22 stroke-linecap=%22round%22/%3E%3C/svg%3E"); }
.mk .ca-bubbles-5 { background-image: url("data:image/svg+xml,%3Csvg xmlns=%22http://www.w3.org/2000/svg%22 viewBox=%220 0 120 120%22%3E%3Crect x=%2216%22 y=%2232%22 width=%2288%22 height=%2248%22 rx=%2224%22 fill=%22%23f8d3dc%22/%3E%3Cpath d=%22M84 76l10 20-26-16z%22 fill=%22%23f8d3dc%22/%3E%3C/svg%3E"); }
.mk .ca-stickers-0 { background-image: url("data:image/svg+xml,%3Csvg xmlns=%22http://www.w3.org/2000/svg%22 viewBox=%220 0 120 120%22%3E%3Cpath d=%22M60 10l9 22 23-8-8 23 22 9-22 9 8 23-23-8-9 22-9-22-23 8 8-23-22-9 22-9-8-23 23 8z%22 fill=%22%23e0493f%22/%3E%3Ccircle cx=%2260%22 cy=%2260%22 r=%2220%22 fill=%22%23fbe7a1%22/%3E%3C/svg%3E"); }
.mk .ca-stickers-1 { background-image: url("data:image/svg+xml,%3Csvg xmlns=%22http://www.w3.org/2000/svg%22 viewBox=%220 0 120 120%22%3E%3Cpath d=%22M14 86a46 46 0 0 1 92 0%22 stroke=%22%23e0493f%22 stroke-width=%2210%22 fill=%22none%22/%3E%3Cpath d=%22M26 86a34 34 0 0 1 68 0%22 stroke=%22%23f2b632%22 stroke-width=%2210%22 fill=%22none%22/%3E%3Cpath d=%22M38 86a22 22 0 0 1 44 0%22 stroke=%22%232f7cf6%22 stroke-width=%2210%22 fill=%22none%22/%3E%3C/svg%3E"); }
.mk .ca-stickers-2 { background-image: url("data:image/svg+xml,%3Csvg xmlns=%22http://www.w3.org/2000/svg%22 viewBox=%220 0 120 120%22%3E%3Cpath d=%22M68 10L28 66h26l-8 44 44-60H62z%22 fill=%22%23f2b632%22 stroke=%22%231d1d1f%22 stroke-width=%224%22 stroke-linejoin=%22round%22/%3E%3C/svg%3E"); }
.mk .ca-stickers-3 { background-image: url("data:image/svg+xml,%3Csvg xmlns=%22http://www.w3.org/2000/svg%22 viewBox=%220 0 120 120%22%3E%3Ccircle cx=%2260%22 cy=%2260%22 r=%2222%22 fill=%22%23f7c548%22/%3E%3Cpath d=%22M60 60L104 60%22 stroke=%22%23f2b632%22 stroke-width=%226%22 stroke-linecap=%22round%22/%3E%3Cpath d=%22M60 60L16 60%22 stroke=%22%23f2b632%22 stroke-width=%226%22 stroke-linecap=%22round%22/%3E%3Cpath d=%22M60 60L60 104%22 stroke=%22%23f2b632%22 stroke-width=%226%22 stroke-linecap=%22round%22/%3E%3Cpath d=%22M60 60L60 16%22 stroke=%22%23f2b632%22 stroke-width=%226%22 stroke-linecap=%22round%22/%3E%3Cpath d=%22M60 60L90 90%22 stroke=%22%23f2b632%22 stroke-width=%226%22 stroke-linecap=%22round%22/%3E%3Cpath d=%22M60 60L29 90%22 stroke=%22%23f2b632%22 stroke-width=%226%22 stroke-linecap=%22round%22/%3E%3Cpath d=%22M60 60L90 29%22 stroke=%22%23f2b632%22 stroke-width=%226%22 stroke-linecap=%22round%22/%3E%3Cpath d=%22M60 60L29 29%22 stroke=%22%23f2b632%22 stroke-width=%226%22 stroke-linecap=%22round%22/%3E%3Ccircle cx=%2260%22 cy=%2260%22 r=%2222%22 fill=%22%23f7c548%22/%3E%3C/svg%3E"); }
.mk .ca-stickers-4 { background-image: url("data:image/svg+xml,%3Csvg xmlns=%22http://www.w3.org/2000/svg%22 viewBox=%220 0 120 120%22%3E%3Cpath d=%22M60 98S22 74 22 48a18 18 0 0 1 38-6 18 18 0 0 1 38 6c0 26-38 50-38 50z%22 fill=%22%23e0578f%22/%3E%3Cpath d=%22M40 46a8 8 0 0 1 10-8%22 stroke=%22%23fbfbfa%22 stroke-width=%224%22 stroke-linecap=%22round%22 fill=%22none%22/%3E%3C/svg%3E"); }
.mk .ca-stickers-5 { background-image: url("data:image/svg+xml,%3Csvg xmlns=%22http://www.w3.org/2000/svg%22 viewBox=%220 0 120 120%22%3E%3Crect x=%2218%22 y=%2238%22 width=%2284%22 height=%2244%22 rx=%2222%22 fill=%22%238a55d6%22/%3E%3Cpath d=%22M36 60h48%22 stroke=%22%23fbfbfa%22 stroke-width=%226%22 stroke-linecap=%22round%22 stroke-dasharray=%221 10%22/%3E%3C/svg%3E"); }
.mk .ca-paper-0 { background-image: url("data:image/svg+xml,%3Csvg xmlns=%22http://www.w3.org/2000/svg%22 viewBox=%220 0 120 120%22%3E%3Crect x=%2212%22 y=%2212%22 width=%2296%22 height=%2296%22 rx=%224%22 fill=%22%23fbfbfa%22 stroke=%22%23d6d6d2%22/%3E%3Cpath d=%22M12 24 h96M24 12v96%22 stroke=%22%23bcd4f0%22 stroke-width=%221%22/%3E%3Cpath d=%22M12 36 h96M36 12v96%22 stroke=%22%23bcd4f0%22 stroke-width=%221%22/%3E%3Cpath d=%22M12 48 h96M48 12v96%22 stroke=%22%23bcd4f0%22 stroke-width=%221%22/%3E%3Cpath d=%22M12 60 h96M60 12v96%22 stroke=%22%23bcd4f0%22 stroke-width=%221%22/%3E%3Cpath d=%22M12 72 h96M72 12v96%22 stroke=%22%23bcd4f0%22 stroke-width=%221%22/%3E%3Cpath d=%22M12 84 h96M84 12v96%22 stroke=%22%23bcd4f0%22 stroke-width=%221%22/%3E%3Cpath d=%22M12 96 h96M96 12v96%22 stroke=%22%23bcd4f0%22 stroke-width=%221%22/%3E%3C/svg%3E"); }
.mk .ca-paper-1 { background-image: url("data:image/svg+xml,%3Csvg xmlns=%22http://www.w3.org/2000/svg%22 viewBox=%220 0 120 120%22%3E%3Crect x=%2212%22 y=%2212%22 width=%2296%22 height=%2296%22 rx=%224%22 fill=%22%23fbfbfa%22 stroke=%22%23d6d6d2%22/%3E%3Cpath d=%22M12 24 h96%22 stroke=%22%23bcd4f0%22 stroke-width=%221.4%22/%3E%3Cpath d=%22M12 36 h96%22 stroke=%22%23bcd4f0%22 stroke-width=%221.4%22/%3E%3Cpath d=%22M12 48 h96%22 stroke=%22%23bcd4f0%22 stroke-width=%221.4%22/%3E%3Cpath d=%22M12 60 h96%22 stroke=%22%23bcd4f0%22 stroke-width=%221.4%22/%3E%3Cpath d=%22M12 72 h96%22 stroke=%22%23bcd4f0%22 stroke-width=%221.4%22/%3E%3Cpath d=%22M12 84 h96%22 stroke=%22%23bcd4f0%22 stroke-width=%221.4%22/%3E%3Cpath d=%22M12 96 h96%22 stroke=%22%23bcd4f0%22 stroke-width=%221.4%22/%3E%3Cpath d=%22M30 12v96%22 stroke=%22%23f0a3a3%22 stroke-width=%221.4%22/%3E%3C/svg%3E"); }
.mk .ca-paper-2 { background-image: url("data:image/svg+xml,%3Csvg xmlns=%22http://www.w3.org/2000/svg%22 viewBox=%220 0 120 120%22%3E%3Crect x=%2212%22 y=%2212%22 width=%2296%22 height=%2296%22 rx=%224%22 fill=%22%23fbfbfa%22 stroke=%22%23d6d6d2%22/%3E%3Ccircle cx=%2222%22 cy=%2222%22 r=%221.6%22 fill=%22%23a9a9a4%22/%3E%3Ccircle cx=%2222%22 cy=%2234%22 r=%221.6%22 fill=%22%23a9a9a4%22/%3E%3Ccircle cx=%2222%22 cy=%2246%22 r=%221.6%22 fill=%22%23a9a9a4%22/%3E%3Ccircle cx=%2222%22 cy=%2258%22 r=%221.6%22 fill=%22%23a9a9a4%22/%3E%3Ccircle cx=%2222%22 cy=%2270%22 r=%221.6%22 fill=%22%23a9a9a4%22/%3E%3Ccircle cx=%2222%22 cy=%2282%22 r=%221.6%22 fill=%22%23a9a9a4%22/%3E%3Ccircle cx=%2222%22 cy=%2294%22 r=%221.6%22 fill=%22%23a9a9a4%22/%3E%3Ccircle cx=%2222%22 cy=%22106%22 r=%221.6%22 fill=%22%23a9a9a4%22/%3E%3Ccircle cx=%2234%22 cy=%2222%22 r=%221.6%22 fill=%22%23a9a9a4%22/%3E%3Ccircle cx=%2234%22 cy=%2234%22 r=%221.6%22 fill=%22%23a9a9a4%22/%3E%3Ccircle cx=%2234%22 cy=%2246%22 r=%221.6%22 fill=%22%23a9a9a4%22/%3E%3Ccircle cx=%2234%22 cy=%2258%22 r=%221.6%22 fill=%22%23a9a9a4%22/%3E%3Ccircle cx=%2234%22 cy=%2270%22 r=%221.6%22 fill=%22%23a9a9a4%22/%3E%3Ccircle cx=%2234%22 cy=%2282%22 r=%221.6%22 fill=%22%23a9a9a4%22/%3E%3Ccircle cx=%2234%22 cy=%2294%22 r=%221.6%22 fill=%22%23a9a9a4%22/%3E%3Ccircle cx=%2234%22 cy=%22106%22 r=%221.6%22 fill=%22%23a9a9a4%22/%3E%3Ccircle cx=%2246%22 cy=%2222%22 r=%221.6%22 fill=%22%23a9a9a4%22/%3E%3Ccircle cx=%2246%22 cy=%2234%22 r=%221.6%22 fill=%22%23a9a9a4%22/%3E%3Ccircle cx=%2246%22 cy=%2246%22 r=%221.6%22 fill=%22%23a9a9a4%22/%3E%3Ccircle cx=%2246%22 cy=%2258%22 r=%221.6%22 fill=%22%23a9a9a4%22/%3E%3Ccircle cx=%2246%22 cy=%2270%22 r=%221.6%22 fill=%22%23a9a9a4%22/%3E%3Ccircle cx=%2246%22 cy=%2282%22 r=%221.6%22 fill=%22%23a9a9a4%22/%3E%3Ccircle cx=%2246%22 cy=%2294%22 r=%221.6%22 fill=%22%23a9a9a4%22/%3E%3Ccircle cx=%2246%22 cy=%22106%22 r=%221.6%22 fill=%22%23a9a9a4%22/%3E%3Ccircle cx=%2258%22 cy=%2222%22 r=%221.6%22 fill=%22%23a9a9a4%22/%3E%3Ccircle cx=%2258%22 cy=%2234%22 r=%221.6%22 fill=%22%23a9a9a4%22/%3E%3Ccircle cx=%2258%22 cy=%2246%22 r=%221.6%22 fill=%22%23a9a9a4%22/%3E%3Ccircle cx=%2258%22 cy=%2258%22 r=%221.6%22 fill=%22%23a9a9a4%22/%3E%3Ccircle cx=%2258%22 cy=%2270%22 r=%221.6%22 fill=%22%23a9a9a4%22/%3E%3Ccircle cx=%2258%22 cy=%2282%22 r=%221.6%22 fill=%22%23a9a9a4%22/%3E%3Ccircle cx=%2258%22 cy=%2294%22 r=%221.6%22 fill=%22%23a9a9a4%22/%3E%3Ccircle cx=%2258%22 cy=%22106%22 r=%221.6%22 fill=%22%23a9a9a4%22/%3E%3Ccircle cx=%2270%22 cy=%2222%22 r=%221.6%22 fill=%22%23a9a9a4%22/%3E%3Ccircle cx=%2270%22 cy=%2234%22 r=%221.6%22 fill=%22%23a9a9a4%22/%3E%3Ccircle cx=%2270%22 cy=%2246%22 r=%221.6%22 fill=%22%23a9a9a4%22/%3E%3Ccircle cx=%2270%22 cy=%2258%22 r=%221.6%22 fill=%22%23a9a9a4%22/%3E%3Ccircle cx=%2270%22 cy=%2270%22 r=%221.6%22 fill=%22%23a9a9a4%22/%3E%3Ccircle cx=%2270%22 cy=%2282%22 r=%221.6%22 fill=%22%23a9a9a4%22/%3E%3Ccircle cx=%2270%22 cy=%2294%22 r=%221.6%22 fill=%22%23a9a9a4%22/%3E%3Ccircle cx=%2270%22 cy=%22106%22 r=%221.6%22 fill=%22%23a9a9a4%22/%3E%3Ccircle cx=%2282%22 cy=%2222%22 r=%221.6%22 fill=%22%23a9a9a4%22/%3E%3Ccircle cx=%2282%22 cy=%2234%22 r=%221.6%22 fill=%22%23a9a9a4%22/%3E%3Ccircle cx=%2282%22 cy=%2246%22 r=%221.6%22 fill=%22%23a9a9a4%22/%3E%3Ccircle cx=%2282%22 cy=%2258%22 r=%221.6%22 fill=%22%23a9a9a4%22/%3E%3Ccircle cx=%2282%22 cy=%2270%22 r=%221.6%22 fill=%22%23a9a9a4%22/%3E%3Ccircle cx=%2282%22 cy=%2282%22 r=%221.6%22 fill=%22%23a9a9a4%22/%3E%3Ccircle cx=%2282%22 cy=%2294%22 r=%221.6%22 fill=%22%23a9a9a4%22/%3E%3Ccircle cx=%2282%22 cy=%22106%22 r=%221.6%22 fill=%22%23a9a9a4%22/%3E%3Ccircle cx=%2294%22 cy=%2222%22 r=%221.6%22 fill=%22%23a9a9a4%22/%3E%3Ccircle cx=%2294%22 cy=%2234%22 r=%221.6%22 fill=%22%23a9a9a4%22/%3E%3Ccircle cx=%2294%22 cy=%2246%22 r=%221.6%22 fill=%22%23a9a9a4%22/%3E%3Ccircle cx=%2294%22 cy=%2258%22 r=%221.6%22 fill=%22%23a9a9a4%22/%3E%3Ccircle cx=%2294%22 cy=%2270%22 r=%221.6%22 fill=%22%23a9a9a4%22/%3E%3Ccircle cx=%2294%22 cy=%2282%22 r=%221.6%22 fill=%22%23a9a9a4%22/%3E%3Ccircle cx=%2294%22 cy=%2294%22 r=%221.6%22 fill=%22%23a9a9a4%22/%3E%3Ccircle cx=%2294%22 cy=%22106%22 r=%221.6%22 fill=%22%23a9a9a4%22/%3E%3Ccircle cx=%22106%22 cy=%2222%22 r=%221.6%22 fill=%22%23a9a9a4%22/%3E%3Ccircle cx=%22106%22 cy=%2234%22 r=%221.6%22 fill=%22%23a9a9a4%22/%3E%3Ccircle cx=%22106%22 cy=%2246%22 r=%221.6%22 fill=%22%23a9a9a4%22/%3E%3Ccircle cx=%22106%22 cy=%2258%22 r=%221.6%22 fill=%22%23a9a9a4%22/%3E%3Ccircle cx=%22106%22 cy=%2270%22 r=%221.6%22 fill=%22%23a9a9a4%22/%3E%3Ccircle cx=%22106%22 cy=%2282%22 r=%221.6%22 fill=%22%23a9a9a4%22/%3E%3Ccircle cx=%22106%22 cy=%2294%22 r=%221.6%22 fill=%22%23a9a9a4%22/%3E%3Ccircle cx=%22106%22 cy=%22106%22 r=%221.6%22 fill=%22%23a9a9a4%22/%3E%3C/svg%3E"); }
.mk .ca-paper-3 { background-image: url("data:image/svg+xml,%3Csvg xmlns=%22http://www.w3.org/2000/svg%22 viewBox=%220 0 120 120%22%3E%3Crect x=%2212%22 y=%2212%22 width=%2296%22 height=%2296%22 rx=%224%22 fill=%22%23d6b48a%22/%3E%3Cpath d=%22M20 30c20 4 40-4 80 2M18 70c30-4 50 6 84 0M24 94c20-2 50 4 70-2%22 stroke=%22%23c49e72%22 stroke-width=%222%22 fill=%22none%22/%3E%3C/svg%3E"); }
.mk .ca-paper-4 { background-image: url("data:image/svg+xml,%3Csvg xmlns=%22http://www.w3.org/2000/svg%22 viewBox=%220 0 120 120%22%3E%3Crect x=%2212%22 y=%2212%22 width=%2296%22 height=%2296%22 rx=%224%22 fill=%22%231f3a2f%22/%3E%3Cpath d=%22M24 40h40M24 56h60M24 72h30%22 stroke=%22%23e8efe9%22 stroke-width=%223%22 stroke-linecap=%22round%22 opacity=%22.7%22/%3E%3C/svg%3E"); }
.mk .ca-paper-5 { background-image: url("data:image/svg+xml,%3Csvg xmlns=%22http://www.w3.org/2000/svg%22 viewBox=%220 0 120 120%22%3E%3Crect x=%2212%22 y=%2212%22 width=%2296%22 height=%2296%22 rx=%224%22 fill=%22%23f4efe4%22 stroke=%22%23ddd5c5%22/%3E%3Cpath d=%22M12 12l96 96M108 12L12 108%22 stroke=%22%23e6dccb%22 stroke-width=%221%22/%3E%3C/svg%3E"); }
.mk .h-crate { background-image: url("data:image/svg+xml,%3Csvg xmlns=%22http://www.w3.org/2000/svg%22 viewBox=%220 0 600 340%22%3E%3Cdefs%3E%3Cpattern id=%22d%22 width=%2216%22 height=%2216%22 patternUnits=%22userSpaceOnUse%22%3E%3Ccircle cx=%228%22 cy=%228%22 r=%221.1%22 fill=%22%23c9c9c4%22/%3E%3C/pattern%3E%3C/defs%3E%3Crect width=%22600%22 height=%22340%22 fill=%22%23f1f1ef%22/%3E%3Crect width=%22600%22 height=%22340%22 fill=%22url(%23d)%22/%3E%3Cg%3E%3Crect x=%22150%22 y=%2234%22 width=%22300%22 height=%22272%22 rx=%2214%22 fill=%22%23ffffff%22 stroke=%22%23d9d9d5%22/%3E%3Cg transform=%22translate(164 46)%22%3E%3Cdefs%3E%3ClinearGradient id=%22tcrate164%22 x1=%220%22 y1=%220%22 x2=%221%22 y2=%221%22%3E%3Cstop offset=%220%22 stop-color=%22%233a3a42%22/%3E%3Cstop offset=%221%22 stop-color=%22%230e0e12%22/%3E%3C/linearGradient%3E%3C/defs%3E%3Crect width=%2226%22 height=%2226%22 rx=%226.76%22 fill=%22url(%23tcrate164)%22/%3E%3Cg transform=%22translate(4.94 4.94) scale(0.6716666666666666)%22 fill=%22none%22 stroke=%22%23ffffff%22 stroke-width=%222%22 stroke-linecap=%22round%22 stroke-linejoin=%22round%22%3E%3Ccircle cx=%2212%22 cy=%2212%22 r=%228.6%22/%3E%3Ccircle cx=%2212%22 cy=%2212%22 r=%222.4%22/%3E%3Cpath d=%22M12 6.2a5.8 5.8 0 0 1 5.8 5.8%22/%3E%3C/g%3E%3C/g%3E%3Ctext x=%22200%22 y=%2264%22 font-family=%22Helvetica,Arial%22 font-size=%2214%22 font-weight=%22700%22 fill=%22%231d1d1f%22%3ECrate%3C/text%3E%3Cpath d=%22M150 84h300%22 stroke=%22%23ececea%22/%3E%3Ccircle cx=%22196%22 cy=%22108%22 r=%2224%22 fill=%22%231b1b1f%22/%3E%3Ccircle cx=%22196%22 cy=%22108%22 r=%2217.28%22 fill=%22none%22 stroke=%22%232c2c31%22 stroke-width=%224.800000000000001%22/%3E%3Ccircle cx=%22196%22 cy=%22108%22 r=%228.16%22 fill=%22%23e0578f%22/%3E%3Crect x=%22234%22 y=%2296%22 width=%22120%22 height=%229%22 rx=%224.5%22 fill=%22%23c4c4bf%22/%3E%3Crect x=%22234%22 y=%22112%22 width=%2280%22 height=%227%22 rx=%223.5%22 fill=%22%23e1e1dc%22/%3E%3Ccircle cx=%22420%22 cy=%22108%22 r=%2213%22 fill=%22%231d1d1f%22/%3E%3Ccircle cx=%22196%22 cy=%22172%22 r=%2224%22 fill=%22%231b1b1f%22/%3E%3Ccircle cx=%22196%22 cy=%22172%22 r=%2217.28%22 fill=%22none%22 stroke=%22%232c2c31%22 stroke-width=%224.800000000000001%22/%3E%3Ccircle cx=%22196%22 cy=%22172%22 r=%228.16%22 fill=%22%23f2b632%22/%3E%3Crect x=%22234%22 y=%22160%22 width=%22160%22 height=%229%22 rx=%224.5%22 fill=%22%23c4c4bf%22/%3E%3Crect x=%22234%22 y=%22176%22 width=%2280%22 height=%227%22 rx=%223.5%22 fill=%22%23e1e1dc%22/%3E%3Ccircle cx=%22420%22 cy=%22172%22 r=%2213%22 fill=%22%23ececea%22/%3E%3Ccircle cx=%22196%22 cy=%22236%22 r=%2224%22 fill=%22%231b1b1f%22/%3E%3Ccircle cx=%22196%22 cy=%22236%22 r=%2217.28%22 fill=%22none%22 stroke=%22%232c2c31%22 stroke-width=%224.800000000000001%22/%3E%3Ccircle cx=%22196%22 cy=%22236%22 r=%228.16%22 fill=%22%232f7cf6%22/%3E%3Crect x=%22234%22 y=%22224%22 width=%22120%22 height=%229%22 rx=%224.5%22 fill=%22%23c4c4bf%22/%3E%3Crect x=%22234%22 y=%22240%22 width=%2280%22 height=%227%22 rx=%223.5%22 fill=%22%23e1e1dc%22/%3E%3Ccircle cx=%22420%22 cy=%22236%22 r=%2213%22 fill=%22%23ececea%22/%3E%3C/g%3E%3Cpath d=%22M414 102v12l9-6z%22 fill=%22%23ffffff%22/%3E%3Cg transform=%22translate(40 60)%22%3E%3Cdefs%3E%3ClinearGradient id=%22tcrate40%22 x1=%220%22 y1=%220%22 x2=%221%22 y2=%221%22%3E%3Cstop offset=%220%22 stop-color=%22%233a3a42%22/%3E%3Cstop offset=%221%22 stop-color=%22%230e0e12%22/%3E%3C/linearGradient%3E%3C/defs%3E%3Crect width=%2264%22 height=%2264%22 rx=%2216.64%22 fill=%22url(%23tcrate40)%22/%3E%3Cg transform=%22translate(12.16 12.16) scale(1.6533333333333333)%22 fill=%22none%22 stroke=%22%23ffffff%22 stroke-width=%222%22 stroke-linecap=%22round%22 stroke-linejoin=%22round%22%3E%3Ccircle cx=%2212%22 cy=%2212%22 r=%228.6%22/%3E%3Ccircle cx=%2212%22 cy=%2212%22 r=%222.4%22/%3E%3Cpath d=%22M12 6.2a5.8 5.8 0 0 1 5.8 5.8%22/%3E%3C/g%3E%3C/g%3E%3Crect x=%2232%22 y=%22134%22 width=%2280%22 height=%228%22 rx=%224%22 fill=%22%23c4c4bf%22/%3E%3Cg transform=%22translate(500 210)%22%3E%3Cdefs%3E%3ClinearGradient id=%22tfocus500%22 x1=%220%22 y1=%220%22 x2=%221%22 y2=%221%22%3E%3Cstop offset=%220%22 stop-color=%22%23ff8a5c%22/%3E%3Cstop offset=%221%22 stop-color=%22%23e2453a%22/%3E%3C/linearGradient%3E%3C/defs%3E%3Crect width=%2256%22 height=%2256%22 rx=%2214.56%22 fill=%22url(%23tfocus500)%22/%3E%3Cg transform=%22translate(10.64 10.64) scale(1.4466666666666668)%22 fill=%22none%22 stroke=%22%23ffffff%22 stroke-width=%222%22 stroke-linecap=%22round%22 stroke-linejoin=%22round%22%3E%3Ccircle cx=%2212%22 cy=%2213.2%22 r=%227.3%22/%3E%3Cpath d=%22M12 9.6v3.6l2.6 2%22/%3E%3Cpath d=%22M9.6 3.2h4.8%22/%3E%3Cpath d=%22M18.4 6.4l1.3-1.3%22/%3E%3C/g%3E%3C/g%3E%3Cg transform=%22translate(500 120)%22%3E%3Cdefs%3E%3ClinearGradient id=%22tlanes500%22 x1=%220%22 y1=%220%22 x2=%221%22 y2=%221%22%3E%3Cstop offset=%220%22 stop-color=%22%234a86ff%22/%3E%3Cstop offset=%221%22 stop-color=%22%232348c9%22/%3E%3C/linearGradient%3E%3C/defs%3E%3Crect width=%2256%22 height=%2256%22 rx=%2214.56%22 fill=%22url(%23tlanes500)%22/%3E%3Cg transform=%22translate(10.64 10.64) scale(1.4466666666666668)%22 fill=%22none%22 stroke=%22%23ffffff%22 stroke-width=%222%22 stroke-linecap=%22round%22 stroke-linejoin=%22round%22%3E%3Crect x=%223.5%22 y=%224%22 width=%2217%22 height=%2216%22 rx=%222.4%22/%3E%3Cpath d=%22M9.2 4v16M14.8 4v16%22/%3E%3Cpath d=%22M5.6 7.6h1.6M11.2 7.6h1.6M16.8 7.6h1.6%22/%3E%3C/g%3E%3C/g%3E%3C/svg%3E"); }
.mk .h-focus { background-image: url("data:image/svg+xml,%3Csvg xmlns=%22http://www.w3.org/2000/svg%22 viewBox=%220 0 600 340%22%3E%3Cdefs%3E%3Cpattern id=%22d%22 width=%2216%22 height=%2216%22 patternUnits=%22userSpaceOnUse%22%3E%3Ccircle cx=%228%22 cy=%228%22 r=%221.1%22 fill=%22%23c9c9c4%22/%3E%3C/pattern%3E%3C/defs%3E%3Crect width=%22600%22 height=%22340%22 fill=%22%23f1f1ef%22/%3E%3Crect width=%22600%22 height=%22340%22 fill=%22url(%23d)%22/%3E%3Cg%3E%3Crect x=%22170%22 y=%2230%22 width=%22280%22 height=%22280%22 rx=%2214%22 fill=%22%23ffffff%22 stroke=%22%23d9d9d5%22/%3E%3Cg transform=%22translate(184 42)%22%3E%3Cdefs%3E%3ClinearGradient id=%22tfocus184%22 x1=%220%22 y1=%220%22 x2=%221%22 y2=%221%22%3E%3Cstop offset=%220%22 stop-color=%22%23ff8a5c%22/%3E%3Cstop offset=%221%22 stop-color=%22%23e2453a%22/%3E%3C/linearGradient%3E%3C/defs%3E%3Crect width=%2226%22 height=%2226%22 rx=%226.76%22 fill=%22url(%23tfocus184)%22/%3E%3Cg transform=%22translate(4.94 4.94) scale(0.6716666666666666)%22 fill=%22none%22 stroke=%22%23ffffff%22 stroke-width=%222%22 stroke-linecap=%22round%22 stroke-linejoin=%22round%22%3E%3Ccircle cx=%2212%22 cy=%2213.2%22 r=%227.3%22/%3E%3Cpath d=%22M12 9.6v3.6l2.6 2%22/%3E%3Cpath d=%22M9.6 3.2h4.8%22/%3E%3Cpath d=%22M18.4 6.4l1.3-1.3%22/%3E%3C/g%3E%3C/g%3E%3Ctext x=%22220%22 y=%2260%22 font-family=%22Helvetica,Arial%22 font-size=%2214%22 font-weight=%22700%22 fill=%22%231d1d1f%22%3EFocus Timer%3C/text%3E%3Cpath d=%22M170 80h280%22 stroke=%22%23ececea%22/%3E%3Ccircle cx=%22310%22 cy=%22176%22 r=%2274%22 fill=%22none%22 stroke=%22%23f1e4df%22 stroke-width=%2212%22/%3E%3Cpath d=%22M310 102a74 74 0 1 1-70 98%22 fill=%22none%22 stroke=%22%23e2453a%22 stroke-width=%2212%22 stroke-linecap=%22round%22/%3E%3Ctext x=%22310%22 y=%22188%22 font-family=%22Helvetica,Arial%22 font-size=%2234%22 font-weight=%22700%22 fill=%22%231d1d1f%22 text-anchor=%22middle%22%3E18:42%3C/text%3E%3Crect x=%22262%22 y=%22270%22 width=%2296%22 height=%2226%22 rx=%2213%22 fill=%22%231d1d1f%22/%3E%3C/g%3E%3Crect x=%2240%22 y=%2250%22 width=%2290%22 height=%2290%22 rx=%223%22 fill=%22%23fbe7a1%22 transform=%22rotate(-5 85.0 95.0)%22/%3E%3Crect x=%2240%22 y=%22170%22 width=%2290%22 height=%2290%22 rx=%223%22 fill=%22%23cdebd6%22 transform=%22rotate(4 85.0 215.0)%22/%3E%3Cg transform=%22translate(490 70)%22%3E%3Cdefs%3E%3ClinearGradient id=%22tfocus490%22 x1=%220%22 y1=%220%22 x2=%221%22 y2=%221%22%3E%3Cstop offset=%220%22 stop-color=%22%23ff8a5c%22/%3E%3Cstop offset=%221%22 stop-color=%22%23e2453a%22/%3E%3C/linearGradient%3E%3C/defs%3E%3Crect width=%2260%22 height=%2260%22 rx=%2215.600000000000001%22 fill=%22url(%23tfocus490)%22/%3E%3Cg transform=%22translate(11.4 11.4) scale(1.55)%22 fill=%22none%22 stroke=%22%23ffffff%22 stroke-width=%222%22 stroke-linecap=%22round%22 stroke-linejoin=%22round%22%3E%3Ccircle cx=%2212%22 cy=%2213.2%22 r=%227.3%22/%3E%3Cpath d=%22M12 9.6v3.6l2.6 2%22/%3E%3Cpath d=%22M9.6 3.2h4.8%22/%3E%3Cpath d=%22M18.4 6.4l1.3-1.3%22/%3E%3C/g%3E%3C/g%3E%3Crect x=%22484%22 y=%22142%22 width=%2272%22 height=%228%22 rx=%224%22 fill=%22%23c4c4bf%22/%3E%3Ccircle cx=%22520%22 cy=%22230%22 r=%2216%22 fill=%22%23e0578f%22/%3E%3Ccircle cx=%22544%22 cy=%22244%22 r=%2216%22 fill=%22%232f7cf6%22/%3E%3Ccircle cx=%22500%22 cy=%22250%22 r=%2216%22 fill=%22%233f9d5b%22/%3E%3C/svg%3E"); }

/* ------------------------------------------------------------ outside the design file */

/* The design is one fixed-size artboard; a page scrolls, so overlays pin to the viewport. */
.mk { overflow: visible; min-height: 100vh; }
.mk a { text-decoration: none; }
/* The site's own button padding would squeeze an icon-only button's glyph to nothing. */
.mk svg { flex-shrink: 0; }
.mk .qchip button, .mk .hero-arr button { padding: 0 !important; }
.mk .ch-k b, .mk .mh-count { font-variant-numeric: tabular-nums; }

/* Says what is real. Under the tabs, quiet, on every page. */
.mk .mk-note { display: flex; align-items: center; gap: 8px; padding: 10px 0; font-size: 12.5px; color: var(--mut); }
.mk .mk-note b { color: var(--ds-warn); background: var(--ds-warn-soft); border-radius: 99px; padding: 2px 8px; font-size: 11px; letter-spacing: .02em; }

/* Kit blurbs are a starter's own copy, which runs longer than a card wants. */
.mk .kc p, .mk .hero p { display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.mk .tag i { display: inline-block; width: 7px; height: 7px; border-radius: 50%; margin-right: 5px; vertical-align: 0; }

/*
  A kit's thumbnail is its board: every entity the starter will place, where the generator will
  place it, drawn by `starterBoardHTML` as an SVG fitted inside the dotted ground. Frames are
  outlined, notes take their card colour, and everything else is a white panel with a couple of
  ruled lines. It is the board you will get, not a picture of one. The lines keep their width
  however far a board is scaled down, which is what `non-scaling-stroke` is for.
*/
.mk .kp { position: relative; aspect-ratio: 600 / 340; overflow: hidden; border-bottom: 1px solid var(--line);
  --kp-ground: var(--ds-board); --kp-dot: var(--ds-board-dot); --kp-card: var(--ds-board-card); --kp-edge: var(--ds-board-edge);
  --kp-lead: var(--ds-board-lead); --kp-rule: var(--ds-board-rule); --kp-head: var(--ds-board-head); --kp-frame: var(--ds-board-frame); --kp-frame-edge: var(--ds-board-frame-edge);
  background: var(--kp-ground) radial-gradient(var(--kp-dot) 1px, transparent 1.2px) 0 0 / 14px 14px; }
.mk .kp-b { position: absolute; inset: 8%; width: 84%; height: 84%; overflow: visible; }
.mk .kp-b rect { fill: var(--kp-card); stroke: var(--kp-edge); stroke-width: 1px; vector-effect: non-scaling-stroke; }
.mk .kp-b line { stroke: var(--kp-rule); stroke-width: 3px; stroke-linecap: round; vector-effect: non-scaling-stroke; }
.mk .kp-b line.is-lead { stroke: var(--kp-lead); }
.mk .kp-b line.is-head { stroke: var(--kp-head); stroke-width: 5px; }
.mk .kp-b .is-frame rect { fill: var(--kp-frame); stroke: var(--kp-frame-edge); stroke-width: 1.5px; }
.mk .kp-b .is-text rect { fill: none; stroke: none; }
.mk .kp-b .is-note rect { fill: var(--note, #fde68a); stroke: none; }
.mk .kp-b .is-note line { stroke: rgba(0,0,0,.14); }
.mk .kp-b .is-table line { stroke: var(--kp-rule); stroke-width: 1px; }
.mk .kp-b .is-map rect { fill: #e3eedc; stroke: none; }
.mk .kp-b .is-map line { stroke: #ffffff; }
.mk .kp-b .is-dark rect { fill: #1f2229; stroke: none; }
.mk .kp-b .is-dark line { stroke: #3a3e48; }
.mk .kp-b .is-dark line.is-lead { stroke: #5a5f6b; }
.mk .kp-b .is-axis rect { fill: none; stroke: none; }
.mk .kp-b .is-axis line { stroke: var(--kp-lead); stroke-width: 2px; }
/* A starter that is not built yet: the ground, and a word saying so. */
.mk .kp-soon { position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); padding: 3px 9px; border-radius: 99px;
  font-size: 11px; font-weight: 700; letter-spacing: .02em; color: var(--ds-warn); background: var(--ds-warn-soft); }
.mk .tth.kp, .mk .kit-th.kp { aspect-ratio: auto; border-bottom: 0; }
.mk .tth.kp { height: 40px; }
/* A catalog row's board is 40px tall; full-weight lines would fill its cards in. */
.mk .tth .kp-b line { stroke-width: 1.5px; }
.mk .tth .kp-b line.is-head { stroke-width: 2px; }
.mk .kit-th.kp { aspect-ratio: 600 / 250; }
.mk .hero-art.kp { aspect-ratio: auto; border-bottom: 0; }

/* Kits carry no seller and no install count yet, so the footer says what is on the board instead. */
.mk .kc-inc { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

/*
  Synced with Spaces and Starters (the design's own block, marketplace.template0.html:401-460): a
  40px title row under the app header, a bordered search, the library as a pill, segmented tabs, blue
  primary buttons, inset card lines and a 1240px column. The dark values the design leaves out come
  from the tokens: greens, type pills, notes and board labels all follow `--ds-*`.
*/
.mk .wrap { max-width: 1240px; }
.mk .mh-top { height: auto; padding-top: 40px; gap: 16px 20px; flex-wrap: wrap; }
.mk .mh-logo { font-size: 40px; font-weight: 700; letter-spacing: -.03em; gap: 14px; margin-right: 12px; }
.mk .mh-mark { width: 44px; height: 44px; border-radius: 12px; background: var(--solid); color: var(--on-solid); }
.mk .mh-search { height: 44px; border-radius: 12px; background: var(--surf); box-shadow: inset 0 0 0 1px var(--line); color: var(--mut); }
.mk .mh-search:focus-within { background: var(--surf); box-shadow: 0 0 0 3px rgba(47,107,255,.45); }
.mk .mh-lib { height: 36px; padding: 0 6px 0 14px; border-radius: 99px; background: var(--surf); box-shadow: inset 0 0 0 1px var(--line); font-size: 14px !important; font-weight: 500; }
.mk .mh-lib:hover { background: var(--hov); }
.mk .mh-count { height: 24px; background: var(--solid); color: var(--on-solid); }
.mk .mh-tabs { display: inline-flex; height: auto; max-width: 100%; margin: 24px 0 4px; padding: 3px; gap: 2px; border-radius: 10px; background: var(--fill); box-sizing: border-box; }
.mk .tab { height: 30px; padding: 0 14px; border-radius: 8px; font-size: 13.5px; font-weight: 600; color: var(--ink); }
.mk .tab:hover { background: transparent; color: var(--ink); opacity: .72; }
.mk .tab.is-on { background: var(--chip); color: var(--ink); box-shadow: 0 1px 3px rgba(0,0,0,.12); }
.mk .tab.is-on:hover { opacity: 1; }
.mk .hero { border-radius: 24px; }
.mk .ch { padding-top: 32px; }
.mk .ch h1 { font-size: 40px; font-weight: 700; letter-spacing: -.03em; }
.mk .ctop h1 { font-size: 28px; font-weight: 700; }
.mk .chip { height: 32px; padding: 0 13px; background: var(--surf); box-shadow: inset 0 0 0 1px var(--line); }
.mk .chip.is-on { background: var(--ink); color: var(--surf) !important; }
.mk .chip.is-on small { color: inherit; opacity: .6; }
.mk .btn { border-radius: 9px; }
.mk .btn.lg { border-radius: 10px; }
.mk .btn.pri { background: var(--ds-accent); color: var(--ds-on-accent) !important; }
.mk .btn.pri:hover { background: var(--ds-accent-hover); }
/* A listing that is coming soon: the button says so and does nothing. */
.mk .btn[disabled], .mk .btn[disabled]:hover { background: var(--soft); color: var(--mut) !important; cursor: default; }
.mk .btn.ghost { box-shadow: inset 0 0 0 1px var(--line2); }
.mk .split .btn:first-child { border-radius: 10px 0 0 10px; }
.mk .split .split-c { border-radius: 0 10px 10px 0; }
.mk :is(.ac, .kc, .pc, .tbl, .pz-i) { box-shadow: inset 0 0 0 1px var(--line); }
.mk :is(.ac, .kc, .pc):hover { box-shadow: inset 0 0 0 1px var(--line), 0 14px 30px rgba(0,0,0,.1); }
.mk .gbtn.is-owned { box-shadow: inset 0 0 0 1px var(--line2); }
.mk .gbtn.is-owned:hover { background: var(--hov); }
.mk .shot { background-color: var(--ds-board); background-image: radial-gradient(var(--ds-board-dot) 1px, rgba(0,0,0,0) 1.4px); }
.mk .sw-win { background: var(--surf); }
.mk .sh-ic { color: var(--ink2); }

@media (max-width: 1100px) {
  .mk .grid4 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .mk .hero { grid-template-columns: minmax(0, 1fr) 420px; }
  .mk .pz { grid-template-columns: repeat(6, minmax(0, 1fr)); }
  .mk .tr { grid-template-columns: minmax(0, 2.4fr) 96px minmax(0, 1fr) 100px 110px; }
}

@media (max-width: 860px) {
  .mk .wrap { padding: 0 16px; }
  .mk .mh-top { flex-wrap: wrap; height: auto; padding: 12px 0; }
  .mk .mh-sw { order: 5; flex: 1 1 100%; }
  .mk .mh-tabs { overflow-x: auto; }
  .mk .tab { white-space: nowrap; }
  .mk .sec-h { flex-wrap: wrap; row-gap: 4px; }
  .mk .sec-h p { flex: 1 1 100%; order: 3; margin: 0; }
  .mk .grid4, .mk .grid3 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .mk .hero { grid-template-columns: minmax(0, 1fr); height: auto; padding: 36px 24px 64px; }
  .mk .hero-art { display: none; }
  .mk .ch { flex-direction: column; align-items: flex-start; gap: 16px; }
  .mk .bar { flex-wrap: wrap; }
  .mk .pz { grid-template-columns: repeat(4, minmax(0, 1fr)); }
  .mk .cat-l { flex-direction: column; }
  .mk .aside { flex: none; width: 100%; }
  .mk .tr { grid-template-columns: minmax(0, 1fr) 110px; }
  .mk .tr > :nth-child(n+2):not(:last-child) { display: none; }
  .mk .shots, .mk .dm-cols { grid-template-columns: minmax(0, 1fr); }
}

@media (max-width: 720px) {
  /* On a phone the sheet is the screen, as every `.ds-dialog` is. */
  [ds] dialog.ds-dialog.dm { width: 100vw; }
  .mk .dm-head { flex-direction: column; align-items: flex-start; gap: 14px; padding: 22px 20px 0; }
  .mk .dm-head .tile { width: 72px; height: 72px; }
  .mk .dm-head h2 { font-size: 26px; }
  .mk .dm-stats { flex-wrap: wrap; row-gap: 10px; }
  .mk .dm-act { flex-wrap: wrap; padding: 18px 20px 0; }
  .mk :is(.shots, .pk-grid) { padding: 20px 20px 0; }
  .mk .dm-cols { padding: 22px 20px 24px; gap: 8px; }
  .mk .kit-th { margin: 18px 20px 0; }
  .mk .pk-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); }
  .mk .pick { width: min(320px, calc(100vw - 16px)); }
}

@media (max-width: 560px) {
  .mk .mh-top { padding-top: 24px; }
  .mk .mh-logo { font-size: 30px; gap: 10px; }
  .mk .mh-mark { width: 36px; height: 36px; border-radius: 10px; }
  .mk .mh-tabs { display: flex; overflow-x: auto; scrollbar-width: none; }
  .mk .mh-tabs::-webkit-scrollbar { display: none; }
  .mk .grid4, .mk .grid3 { grid-template-columns: minmax(0, 1fr); }
  .mk .ch h1 { font-size: 30px; }
  .mk .hero h1 { font-size: 34px; }
}

/*
 * A card's or a row's name is the button that opens its sheet, drawn as the name it replaced: the
 * card around it still opens the sheet on a click, and this is the part a keyboard reaches.
 */
.mk .nm { display: block; max-width: 100%; height: auto; min-height: 0; margin: 0; padding: 0; border: 0; background: none; font: inherit; color: inherit; letter-spacing: inherit; text-align: left; justify-content: flex-start; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; cursor: pointer; border-radius: 4px; }
.mk .nm:focus-visible { outline: 2px solid var(--ds-accent); outline-offset: 2px; }
.mk .tr:focus-within { background: var(--ds-panel2); }

/* Apps and clipart are sample listings; their figures carry this. */
.mk .smp { display: inline-flex; align-items: center; height: 18px; padding: 0 6px; border-radius: 999px; box-shadow: inset 0 0 0 1px var(--line); font-size: 10px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: var(--mut); white-space: nowrap; }
.mk h3 .smp { margin-left: 6px; vertical-align: 2px; }

/* The catalog's filters fold behind this button once they stack above the table. */
.mk .cat-ft { display: none; }
.mk .cat-ft small { min-width: 18px; height: 18px; padding: 0 5px; border-radius: 999px; background: var(--ds-accent); color: var(--ds-on-accent); font-size: 11px; font-weight: 700; display: inline-flex; align-items: center; justify-content: center; }
@media (max-width: 860px) {
  .mk .cat-l { gap: 16px; padding-top: 20px; }
  .mk .cat-ft { display: inline-flex; gap: 8px; align-self: flex-start; }
  .mk .aside:not([open]) { display: none; }
}
.mk [data-part="main"] > .sec:last-child { margin-bottom: 64px; }