/* Make anything: real Axis editors (axis-ui kit) behind a segmented switcher, presented as a product shot. */
#v2-make { margin: 0; }
#v2-make .mk { position: relative; width: 100%; max-width: 680px; margin-inline: auto; font-family: 'DM Sans', ui-sans-serif, system-ui, sans-serif; }

/* segmented switcher */
#v2-make .mk-tabs {
  position: relative; z-index: 2; display: flex; width: max-content; max-width: 100%; margin: 0 auto 26px; padding: 4px; gap: 2px;
  border-radius: 999px; background: rgba(255, 255, 255, .035); box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .08), inset 0 1px 0 rgba(255, 255, 255, .05);
  -webkit-backdrop-filter: blur(12px); backdrop-filter: blur(12px);
}
#v2-make .mk-tab {
  position: relative; display: inline-flex; align-items: center; gap: 8px; height: 38px; padding: 0 16px 0 14px; border: 0; border-radius: 999px;
  background: transparent; color: #8d9896; font: 550 14px/1 'DM Sans', ui-sans-serif, sans-serif; letter-spacing: -.005em; cursor: pointer;
  transition: color .35s ease, background-color .35s ease; -webkit-tap-highlight-color: transparent; overflow: hidden;
}
/* each tab wears its product Doc-type tile (axis-ui .axui-tile; sized in px here, outside the .axui container) */
#v2-make .mk-tab .axui-tile { width: 20px; height: 20px; opacity: .72; filter: saturate(.8); transition: opacity .35s ease, filter .35s ease, transform .35s ease; }
#v2-make .mk-tab .axui-tile > .axui-i { width: 20px; height: 20px; color: #fff; }
#v2-make .mk-tab:hover { color: #d5dddb; }
#v2-make .mk-tab:hover .axui-tile { opacity: .9; filter: none; }
#v2-make .mk-tab[aria-selected="true"] { color: #f3f7f6; background: rgba(255, 255, 255, .085); box-shadow: inset 0 1px 0 rgba(255, 255, 255, .07), 0 1px 2px rgba(0, 0, 0, .4); }
#v2-make .mk-tab[aria-selected="true"] .axui-tile { opacity: 1; filter: none; }
#v2-make .mk-tab:focus-visible { outline: 2px solid #37cdbc; outline-offset: 2px; }

/* the product shot */
#v2-make .mk-shot { position: relative; }
#v2-make .mk-shot::before { /* teal light spilling onto the floor, like the hero devices */
  content: ''; position: absolute; z-index: -1; left: 2%; right: 2%; bottom: -64px; height: 150px; border-radius: 50%;
  background: radial-gradient(closest-side, rgba(55, 205, 188, .42), rgba(55, 205, 188, .12) 55%, transparent);
  filter: blur(30px); pointer-events: none;
}
#v2-make .mk-shot::after { /* faint mirror of the window's bottom edge */
  content: ''; position: absolute; left: 12%; right: 12%; bottom: -1px; height: 1px;
  background: linear-gradient(90deg, transparent, rgba(132, 228, 216, .55), transparent); pointer-events: none; z-index: 31;
}
#v2-make .axui-win {
  box-shadow:
    0 0 0 1px rgba(0, 0, 0, .6),
    0 2px 4px rgba(0, 0, 0, .35),
    0 18px 36px -8px rgba(0, 0, 0, .65),
    0 48px 90px -24px rgba(0, 0, 0, .85),
    0 0 110px -26px rgba(55, 205, 188, .3);
}
@media (max-width: 1100px) and (min-width: 860px) { #v2-make .mk-tab { padding: 0 13px 0 12px; font-size: 13.5px; } }
@media (max-width: 560px) {
  #v2-make .mk-tabs { margin-bottom: 20px; }
  #v2-make .mk-tab { gap: 6px; height: 36px; padding: 0 12px 0 11px; font-size: 13.5px; }
  #v2-make .mk-tab .axui-tile, #v2-make .mk-tab .axui-tile > .axui-i { width: 18px; height: 18px; }
  #v2-make .mk-shot::before { bottom: -30px; height: 80px; }
}
@media (max-width: 370px) { #v2-make .mk-tab .axui-tile { display: none; } }