@charset "UTF-8";
:root {
  --macro-width:360;
  --macro-height:720;
  /* Avertage finger 45-52/thumb:72px */
  --micro-width:60;
  --micro-height:60;
}

/* Hide scrollbar for Chrome, Safari and Opera */
.invisible-scrollbar::-webkit-scrollbar {
  display: none;
}

/* Hide scrollbar for IE, Edge and Firefox */
.invisible-scrollbar {
  -ms-overflow-style: none; /* IE and Edge */
  scrollbar-width: none; /* Firefox */
}

.scrollsnap-horizontal {
  scroll-snap-type: x mandatory;
}

.scrollsnap-horizontal .snap-x {
  scroll-snap-align: center;
  scroll-snap-stop: always;
}

.scrollsnap-vertical {
  scroll-snap-type: y mandatory;
  overflow-y: scroll;
  height: 100vh;
  scroll-padding-top: calc(var(--micro-width) * 0.0625rem * 0.225);
}

#layoutLiveWire.rows-1 .scrollsnap-vertical {
  scroll-padding-top: calc(var(--micro-width) * 0.0625rem * 0.225 * 4);
}

#layoutLiveWire.rows-2 .scrollsnap-vertical {
  scroll-padding-top: calc(var(--micro-width) * 0.0625rem * 0.225 * 13);
}

#layoutLiveWire.rows-3 .scrollsnap-vertical {
  scroll-padding-top: calc(var(--micro-width) * 0.0625rem * 0.225 * 14);
}

.scrollsnap-vertical > .snap-y {
  scroll-snap-align: start;
  scroll-snap-stop: always;
}

.sqr-macro-pixel { /* size of lense/ topfold of page minimum/Largest Unit that we want to fit in screen  from a mobile first approach*/
  width: calc(var(--macro-width) * 1px);
  height: calc(var(--macro-height) * 1px);
}

/* smallest unit that makes sense from a mobile first approach */
.sqr-macro-rem {
  width: calc(var(--macro-width) * 0.0625rem);
  height: calc(var(--macro-height) * 0.0625rem);
}

/*https://www.smashingmagazine.com/2012/02/finger-friendly-design-ideal-mobile-touchscreen-target-sizes/#:~:text=Pixel%20Width%20of%20the%20Average,what%20most%20mobile%20guidelines%20suggest.*/
.sqr-micro-pixel { /* size of lense/ topfold of page minimum/Largest Unit that we want to fit in screen  from a mobile first approach*/
  width: calc(var(--micro-width) * 1px);
  height: calc(var(--micro-height) * 1px);
}

.sqr-micro-rem {
  width: calc(var(--micro-width) * 0.0625rem);
  height: calc(var(--micro-height) * 0.0625rem);
}

.sqr-mr-1\/2 {
  margin-right: calc(var(--micro-width) * 0.0625rem * 0.5);
}

.-sqr-ml-1\/2:first-child {
  margin-left: calc(var(--micro-width) * 0.0625rem * -0.5);
}

.sqr-t-1 {
  top: calc(var(--micro-width) * 1 * 0.0625rem);
}

.-sqr-h-screen-1 {
  height: calc(100vh - var(--micro-width) * 1 * 0.0625rem);
}

.-sqr-h-screen-2 {
  height: calc(100vh - var(--micro-width) * 2 * 0.0625rem);
}

.-sqr-h-screen-3 {
  height: calc(100vh - var(--micro-width) * 3 * 0.0625rem);
}

.-sqr-h-screen-4 {
  height: calc(100vh - var(--micro-width) * 4 * 0.0625rem);
}

.-sqr-h-screen-5 {
  height: calc(100vh - var(--micro-width) * 4 * 0.0625rem);
}

.sqr-h-1\/2 {
  height: calc(var(--micro-width) * 0.5 * 0.0625rem);
}

.sqr-pl-1-3\/4 {
  padding-left: calc(var(--micro-width) * 1.75 * 0.0625rem);
}

.sqr-w-1 {
  width: calc(var(--micro-width) * 1 * 0.0625rem);
}

.sqr-h-1 {
  height: calc(var(--micro-width) * 1 * 0.0625rem);
}

.sqr-mt-1 {
  margin-top: calc(var(--micro-width) * 1 * 0.0625rem);
}

.sqr-mx-1 {
  margin-left: calc(var(--micro-width) * 1 * 0.0625rem);
  margin-right: calc(var(--micro-width) * 1 * 0.0625rem);
}

.sqr-px-1 {
  padding-left: calc(var(--micro-width) * 1 * 0.0625rem);
  padding-right: calc(var(--micro-width) * 1 * 0.0625rem);
}

.sqr-pt-1 {
  padding-top: calc(var(--micro-width) * 1 * 0.0625rem);
}

.sqr-pl-1 {
  padding-left: calc(var(--micro-width) * 1 * 0.0625rem);
}

/*

.sqr-my-1 {
    margin-bottom: calc(var(--micro-width) * 1 *  0.0625rem);
    margin-top: calc(var(--micro-width) * 1 *  0.0625rem);
}
.sqr-py-1 {
    padding-bottom: calc(var(--micro-width) * 1 *  0.0625rem);
    padding-top: calc(var(--micro-width) * 1 *  0.0625rem);
}
.sqr-pt-1 {
    padding-top: calc(var(--micro-width) * 1 *  0.0625rem);
}
.sqr-pb-1 {
    padding-bottom: calc(var(--micro-width) * 1 *  0.0625rem);
}
.sqr-l-1 {
    left: calc(var(--micro-width) * 1 *  0.0625rem);
}
.sqr-r-1 {
    left: calc(var(--micro-width) * 1 *  0.0625rem);
}
.sqr-ml-1 {
    margin-left: calc(var(--micro-width) * 1 *  0.0625rem);
}


.-sqr-ml-1 {
    margin-left: calc(var(--micro-width) * 1 *  -0.0625rem);
}
.-sqr-mr-1 {
    margin-right: calc(var(--micro-width) * 1 *  -0.0625rem);
}
*/
.sqr-mr-1 {
  margin-right: calc(var(--micro-width) * 1 * 0.0625rem);
}

.-sqr-l-1 {
  left: calc(var(--micro-width) * 1 * -0.0625rem);
}

.-sqr-r-1 {
  right: calc(var(--micro-width) * 1 * -0.0625rem);
}

.sqr-w-2 {
  width: calc(var(--micro-width) * 2 * 0.0625rem);
}

.sqr-h-2 {
  height: calc(var(--micro-width) * 2 * 0.0625rem);
}

.sqr-mt-2 {
  margin-top: calc(var(--micro-width) * 2 * 0.0625rem);
}

.sqr-mx-2 {
  margin-left: calc(var(--micro-width) * 2 * 0.0625rem);
  margin-right: calc(var(--micro-width) * 2 * 0.0625rem);
}

.sqr-px-2 {
  padding-left: calc(var(--micro-width) * 2 * 0.0625rem);
  padding-right: calc(var(--micro-width) * 2 * 0.0625rem);
}

.sqr-pt-2 {
  padding-top: calc(var(--micro-width) * 2 * 0.0625rem);
}

.sqr-pl-2 {
  padding-left: calc(var(--micro-width) * 2 * 0.0625rem);
}

/*

.sqr-my-2 {
    margin-bottom: calc(var(--micro-width) * 2 *  0.0625rem);
    margin-top: calc(var(--micro-width) * 2 *  0.0625rem);
}
.sqr-py-2 {
    padding-bottom: calc(var(--micro-width) * 2 *  0.0625rem);
    padding-top: calc(var(--micro-width) * 2 *  0.0625rem);
}
.sqr-pt-2 {
    padding-top: calc(var(--micro-width) * 2 *  0.0625rem);
}
.sqr-pb-2 {
    padding-bottom: calc(var(--micro-width) * 2 *  0.0625rem);
}
.sqr-l-2 {
    left: calc(var(--micro-width) * 2 *  0.0625rem);
}
.sqr-r-2 {
    left: calc(var(--micro-width) * 2 *  0.0625rem);
}
.sqr-ml-2 {
    margin-left: calc(var(--micro-width) * 2 *  0.0625rem);
}


.-sqr-ml-2 {
    margin-left: calc(var(--micro-width) * 2 *  -0.0625rem);
}
.-sqr-mr-2 {
    margin-right: calc(var(--micro-width) * 2 *  -0.0625rem);
}
*/
.sqr-mr-2 {
  margin-right: calc(var(--micro-width) * 2 * 0.0625rem);
}

.-sqr-l-2 {
  left: calc(var(--micro-width) * 2 * -0.0625rem);
}

.-sqr-r-2 {
  right: calc(var(--micro-width) * 2 * -0.0625rem);
}

.sqr-w-3 {
  width: calc(var(--micro-width) * 3 * 0.0625rem);
}

.sqr-h-3 {
  height: calc(var(--micro-width) * 3 * 0.0625rem);
}

.sqr-mt-3 {
  margin-top: calc(var(--micro-width) * 3 * 0.0625rem);
}

.sqr-mx-3 {
  margin-left: calc(var(--micro-width) * 3 * 0.0625rem);
  margin-right: calc(var(--micro-width) * 3 * 0.0625rem);
}

.sqr-px-3 {
  padding-left: calc(var(--micro-width) * 3 * 0.0625rem);
  padding-right: calc(var(--micro-width) * 3 * 0.0625rem);
}

.sqr-pt-3 {
  padding-top: calc(var(--micro-width) * 3 * 0.0625rem);
}

.sqr-pl-3 {
  padding-left: calc(var(--micro-width) * 3 * 0.0625rem);
}

/*

.sqr-my-3 {
    margin-bottom: calc(var(--micro-width) * 3 *  0.0625rem);
    margin-top: calc(var(--micro-width) * 3 *  0.0625rem);
}
.sqr-py-3 {
    padding-bottom: calc(var(--micro-width) * 3 *  0.0625rem);
    padding-top: calc(var(--micro-width) * 3 *  0.0625rem);
}
.sqr-pt-3 {
    padding-top: calc(var(--micro-width) * 3 *  0.0625rem);
}
.sqr-pb-3 {
    padding-bottom: calc(var(--micro-width) * 3 *  0.0625rem);
}
.sqr-l-3 {
    left: calc(var(--micro-width) * 3 *  0.0625rem);
}
.sqr-r-3 {
    left: calc(var(--micro-width) * 3 *  0.0625rem);
}
.sqr-ml-3 {
    margin-left: calc(var(--micro-width) * 3 *  0.0625rem);
}


.-sqr-ml-3 {
    margin-left: calc(var(--micro-width) * 3 *  -0.0625rem);
}
.-sqr-mr-3 {
    margin-right: calc(var(--micro-width) * 3 *  -0.0625rem);
}
*/
.sqr-mr-3 {
  margin-right: calc(var(--micro-width) * 3 * 0.0625rem);
}

.-sqr-l-3 {
  left: calc(var(--micro-width) * 3 * -0.0625rem);
}

.-sqr-r-3 {
  right: calc(var(--micro-width) * 3 * -0.0625rem);
}

.sqr-w-4 {
  width: calc(var(--micro-width) * 4 * 0.0625rem);
}

.sqr-h-4 {
  height: calc(var(--micro-width) * 4 * 0.0625rem);
}

.sqr-mt-4 {
  margin-top: calc(var(--micro-width) * 4 * 0.0625rem);
}

.sqr-mx-4 {
  margin-left: calc(var(--micro-width) * 4 * 0.0625rem);
  margin-right: calc(var(--micro-width) * 4 * 0.0625rem);
}

.sqr-px-4 {
  padding-left: calc(var(--micro-width) * 4 * 0.0625rem);
  padding-right: calc(var(--micro-width) * 4 * 0.0625rem);
}

.sqr-pt-4 {
  padding-top: calc(var(--micro-width) * 4 * 0.0625rem);
}

.sqr-pl-4 {
  padding-left: calc(var(--micro-width) * 4 * 0.0625rem);
}

/*

.sqr-my-4 {
    margin-bottom: calc(var(--micro-width) * 4 *  0.0625rem);
    margin-top: calc(var(--micro-width) * 4 *  0.0625rem);
}
.sqr-py-4 {
    padding-bottom: calc(var(--micro-width) * 4 *  0.0625rem);
    padding-top: calc(var(--micro-width) * 4 *  0.0625rem);
}
.sqr-pt-4 {
    padding-top: calc(var(--micro-width) * 4 *  0.0625rem);
}
.sqr-pb-4 {
    padding-bottom: calc(var(--micro-width) * 4 *  0.0625rem);
}
.sqr-l-4 {
    left: calc(var(--micro-width) * 4 *  0.0625rem);
}
.sqr-r-4 {
    left: calc(var(--micro-width) * 4 *  0.0625rem);
}
.sqr-ml-4 {
    margin-left: calc(var(--micro-width) * 4 *  0.0625rem);
}


.-sqr-ml-4 {
    margin-left: calc(var(--micro-width) * 4 *  -0.0625rem);
}
.-sqr-mr-4 {
    margin-right: calc(var(--micro-width) * 4 *  -0.0625rem);
}
*/
.sqr-mr-4 {
  margin-right: calc(var(--micro-width) * 4 * 0.0625rem);
}

.-sqr-l-4 {
  left: calc(var(--micro-width) * 4 * -0.0625rem);
}

.-sqr-r-4 {
  right: calc(var(--micro-width) * 4 * -0.0625rem);
}

.sqr-w-5 {
  width: calc(var(--micro-width) * 5 * 0.0625rem);
}

.sqr-h-5 {
  height: calc(var(--micro-width) * 5 * 0.0625rem);
}

.sqr-mt-5 {
  margin-top: calc(var(--micro-width) * 5 * 0.0625rem);
}

.sqr-mx-5 {
  margin-left: calc(var(--micro-width) * 5 * 0.0625rem);
  margin-right: calc(var(--micro-width) * 5 * 0.0625rem);
}

.sqr-px-5 {
  padding-left: calc(var(--micro-width) * 5 * 0.0625rem);
  padding-right: calc(var(--micro-width) * 5 * 0.0625rem);
}

.sqr-pt-5 {
  padding-top: calc(var(--micro-width) * 5 * 0.0625rem);
}

.sqr-pl-5 {
  padding-left: calc(var(--micro-width) * 5 * 0.0625rem);
}

/*

.sqr-my-5 {
    margin-bottom: calc(var(--micro-width) * 5 *  0.0625rem);
    margin-top: calc(var(--micro-width) * 5 *  0.0625rem);
}
.sqr-py-5 {
    padding-bottom: calc(var(--micro-width) * 5 *  0.0625rem);
    padding-top: calc(var(--micro-width) * 5 *  0.0625rem);
}
.sqr-pt-5 {
    padding-top: calc(var(--micro-width) * 5 *  0.0625rem);
}
.sqr-pb-5 {
    padding-bottom: calc(var(--micro-width) * 5 *  0.0625rem);
}
.sqr-l-5 {
    left: calc(var(--micro-width) * 5 *  0.0625rem);
}
.sqr-r-5 {
    left: calc(var(--micro-width) * 5 *  0.0625rem);
}
.sqr-ml-5 {
    margin-left: calc(var(--micro-width) * 5 *  0.0625rem);
}


.-sqr-ml-5 {
    margin-left: calc(var(--micro-width) * 5 *  -0.0625rem);
}
.-sqr-mr-5 {
    margin-right: calc(var(--micro-width) * 5 *  -0.0625rem);
}
*/
.sqr-mr-5 {
  margin-right: calc(var(--micro-width) * 5 * 0.0625rem);
}

.-sqr-l-5 {
  left: calc(var(--micro-width) * 5 * -0.0625rem);
}

.-sqr-r-5 {
  right: calc(var(--micro-width) * 5 * -0.0625rem);
}

.sqr-w-6 {
  width: calc(var(--micro-width) * 6 * 0.0625rem);
}

.sqr-h-6 {
  height: calc(var(--micro-width) * 6 * 0.0625rem);
}

.sqr-mt-6 {
  margin-top: calc(var(--micro-width) * 6 * 0.0625rem);
}

.sqr-mx-6 {
  margin-left: calc(var(--micro-width) * 6 * 0.0625rem);
  margin-right: calc(var(--micro-width) * 6 * 0.0625rem);
}

.sqr-px-6 {
  padding-left: calc(var(--micro-width) * 6 * 0.0625rem);
  padding-right: calc(var(--micro-width) * 6 * 0.0625rem);
}

.sqr-pt-6 {
  padding-top: calc(var(--micro-width) * 6 * 0.0625rem);
}

.sqr-pl-6 {
  padding-left: calc(var(--micro-width) * 6 * 0.0625rem);
}

/*

.sqr-my-6 {
    margin-bottom: calc(var(--micro-width) * 6 *  0.0625rem);
    margin-top: calc(var(--micro-width) * 6 *  0.0625rem);
}
.sqr-py-6 {
    padding-bottom: calc(var(--micro-width) * 6 *  0.0625rem);
    padding-top: calc(var(--micro-width) * 6 *  0.0625rem);
}
.sqr-pt-6 {
    padding-top: calc(var(--micro-width) * 6 *  0.0625rem);
}
.sqr-pb-6 {
    padding-bottom: calc(var(--micro-width) * 6 *  0.0625rem);
}
.sqr-l-6 {
    left: calc(var(--micro-width) * 6 *  0.0625rem);
}
.sqr-r-6 {
    left: calc(var(--micro-width) * 6 *  0.0625rem);
}
.sqr-ml-6 {
    margin-left: calc(var(--micro-width) * 6 *  0.0625rem);
}


.-sqr-ml-6 {
    margin-left: calc(var(--micro-width) * 6 *  -0.0625rem);
}
.-sqr-mr-6 {
    margin-right: calc(var(--micro-width) * 6 *  -0.0625rem);
}
*/
.sqr-mr-6 {
  margin-right: calc(var(--micro-width) * 6 * 0.0625rem);
}

.-sqr-l-6 {
  left: calc(var(--micro-width) * 6 * -0.0625rem);
}

.-sqr-r-6 {
  right: calc(var(--micro-width) * 6 * -0.0625rem);
}

.sqr-w-7 {
  width: calc(var(--micro-width) * 7 * 0.0625rem);
}

.sqr-h-7 {
  height: calc(var(--micro-width) * 7 * 0.0625rem);
}

.sqr-mt-7 {
  margin-top: calc(var(--micro-width) * 7 * 0.0625rem);
}

.sqr-mx-7 {
  margin-left: calc(var(--micro-width) * 7 * 0.0625rem);
  margin-right: calc(var(--micro-width) * 7 * 0.0625rem);
}

.sqr-px-7 {
  padding-left: calc(var(--micro-width) * 7 * 0.0625rem);
  padding-right: calc(var(--micro-width) * 7 * 0.0625rem);
}

.sqr-pt-7 {
  padding-top: calc(var(--micro-width) * 7 * 0.0625rem);
}

.sqr-pl-7 {
  padding-left: calc(var(--micro-width) * 7 * 0.0625rem);
}

/*

.sqr-my-7 {
    margin-bottom: calc(var(--micro-width) * 7 *  0.0625rem);
    margin-top: calc(var(--micro-width) * 7 *  0.0625rem);
}
.sqr-py-7 {
    padding-bottom: calc(var(--micro-width) * 7 *  0.0625rem);
    padding-top: calc(var(--micro-width) * 7 *  0.0625rem);
}
.sqr-pt-7 {
    padding-top: calc(var(--micro-width) * 7 *  0.0625rem);
}
.sqr-pb-7 {
    padding-bottom: calc(var(--micro-width) * 7 *  0.0625rem);
}
.sqr-l-7 {
    left: calc(var(--micro-width) * 7 *  0.0625rem);
}
.sqr-r-7 {
    left: calc(var(--micro-width) * 7 *  0.0625rem);
}
.sqr-ml-7 {
    margin-left: calc(var(--micro-width) * 7 *  0.0625rem);
}


.-sqr-ml-7 {
    margin-left: calc(var(--micro-width) * 7 *  -0.0625rem);
}
.-sqr-mr-7 {
    margin-right: calc(var(--micro-width) * 7 *  -0.0625rem);
}
*/
.sqr-mr-7 {
  margin-right: calc(var(--micro-width) * 7 * 0.0625rem);
}

.-sqr-l-7 {
  left: calc(var(--micro-width) * 7 * -0.0625rem);
}

.-sqr-r-7 {
  right: calc(var(--micro-width) * 7 * -0.0625rem);
}

.sqr-w-8 {
  width: calc(var(--micro-width) * 8 * 0.0625rem);
}

.sqr-h-8 {
  height: calc(var(--micro-width) * 8 * 0.0625rem);
}

.sqr-mt-8 {
  margin-top: calc(var(--micro-width) * 8 * 0.0625rem);
}

.sqr-mx-8 {
  margin-left: calc(var(--micro-width) * 8 * 0.0625rem);
  margin-right: calc(var(--micro-width) * 8 * 0.0625rem);
}

.sqr-px-8 {
  padding-left: calc(var(--micro-width) * 8 * 0.0625rem);
  padding-right: calc(var(--micro-width) * 8 * 0.0625rem);
}

.sqr-pt-8 {
  padding-top: calc(var(--micro-width) * 8 * 0.0625rem);
}

.sqr-pl-8 {
  padding-left: calc(var(--micro-width) * 8 * 0.0625rem);
}

/*

.sqr-my-8 {
    margin-bottom: calc(var(--micro-width) * 8 *  0.0625rem);
    margin-top: calc(var(--micro-width) * 8 *  0.0625rem);
}
.sqr-py-8 {
    padding-bottom: calc(var(--micro-width) * 8 *  0.0625rem);
    padding-top: calc(var(--micro-width) * 8 *  0.0625rem);
}
.sqr-pt-8 {
    padding-top: calc(var(--micro-width) * 8 *  0.0625rem);
}
.sqr-pb-8 {
    padding-bottom: calc(var(--micro-width) * 8 *  0.0625rem);
}
.sqr-l-8 {
    left: calc(var(--micro-width) * 8 *  0.0625rem);
}
.sqr-r-8 {
    left: calc(var(--micro-width) * 8 *  0.0625rem);
}
.sqr-ml-8 {
    margin-left: calc(var(--micro-width) * 8 *  0.0625rem);
}


.-sqr-ml-8 {
    margin-left: calc(var(--micro-width) * 8 *  -0.0625rem);
}
.-sqr-mr-8 {
    margin-right: calc(var(--micro-width) * 8 *  -0.0625rem);
}
*/
.sqr-mr-8 {
  margin-right: calc(var(--micro-width) * 8 * 0.0625rem);
}

.-sqr-l-8 {
  left: calc(var(--micro-width) * 8 * -0.0625rem);
}

.-sqr-r-8 {
  right: calc(var(--micro-width) * 8 * -0.0625rem);
}

/* ── SPANNING: one section across N macro columns (0.4.0) ──────────────
   Threshold derived from the package's OWN constants: a column is not a
   column below SQR_MIN_COL_PX (320) — square-root.js:56 — so N columns
   need N*320px. Media queries resolve `rem` against the INITIAL 16px root,
   never the solved :root font-size, so this stays stable while the solver
   rescales the design. N*320/16 = N*20rem. */
/* --macro-width / --micro-width */
/* THE N-COLUMN RULES, ONCE. Emitted under two gates that ask the same
   question at two scales -- Correspondence, and the reason 0.7.0 exists:

     @media (min-width: N*320px)   the no-JS fallback, raw pixels
     html[data-sqr-cols="N"]       what the SOLVER actually solved

   $at is the attribute the selector carries: '' under the media gate, so the
   compiled selectors there are byte-identical to 0.6.0's; '[data-sqr-cols=…]'
   under the attribute gate, where it lands ON the html element rather than
   before it -- html[data-sqr-cols="2"].sqr-mode-rows is one element with an
   attribute and a class, never `html … html`. */
/* = N*320/16 — 0.0625 is the house 1/16 */
/* WIDTH — the section itself. Below the gate it is one macro column,
   byte-identical to .sqr-w-6. */
.sqr-wide-2 {
  width: calc(var(--micro-width) * 6 * 0.0625rem);
}

/* GATE 1 — RAW PIXELS (0.4.0, unchanged). The fallback for a page whose
   JS has not solved yet, or is not running at all. */
@media (min-width: 40rem) {
  /* WIDTH — the section itself. Below both gates it is one macro column,
     byte-identical to .sqr-w-6. Under the media gate the selector carries no
     html prefix at all, so its specificity stays (0,1,0) exactly as it was;
     adding a descendant `html ` there would have quietly outranked host
     overrides that beat it today. */
  .sqr-wide-2 {
    width: calc(var(--micro-width) * 12 * 0.0625rem);
  }
  /* MODE A — ALIGNED ROWS. Cards alternate in document order
     (1 left, 2 right, 3 left …) because that is what grid-auto-flow
     row does; nothing is reordered, the DOM is untouched. */
  html.sqr-mode-rows .sqr-span-2 {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr)); /* minmax(0,…): a bare 1fr keeps an auto min-content floor, so one wide card pushed the second column off the Fold (owner, 2026-09-09 05:20) */
    grid-auto-flow: row;
    column-gap: 0; /* the cards carry their own side margins; a 1u gap on top of them put 90px between the columns and 16px at the edges (owner, 2026-09-09 06:20) */
    align-content: start;
    padding-inline: calc(var(--micro-width) * 0.0625rem * 0.25); /* the edges match the middle: two card margins meet between columns (0.5u), so the deck adds 0.25u at each edge */
  }
  html.sqr-mode-rows .sqr-span-2 > .sqr-row {
    grid-column: 1/-1;
  }
  /* MODE B — MASONRY FILL. Native grid masonry is not shipped on
     Android Chrome, so multi-column IS the masonry. No JS, ever:
     a JS masonry breaks Livewire morphs and scroll snap. */
  html.sqr-mode-flow .sqr-flow-2 {
    /* block, for the same reason MODE A states grid: multi-column is
       only honoured on a block container, so a deck that is a flex row
       on the phone -- or anything a host stylesheet made it -- would
       silently stay one column here while MODE A worked. The two modes
       answer the same markup, so each states the display it needs. */
    display: block;
    column-count: 2;
    column-gap: 0; /* the cards carry their own side margins; a 1u gap on top of them put 90px between the columns and 16px at the edges (owner, 2026-09-09 06:20) */
    column-fill: balance;
    padding-inline: calc(var(--micro-width) * 0.0625rem * 0.25); /* the edges match the middle (0.5u) */
  }
  html.sqr-mode-flow .sqr-flow-2 > * {
    break-inside: avoid;
  }
  html.sqr-mode-flow .sqr-flow-2 > .sqr-row {
    column-span: all;
  }
  /* per-card pin — a utility on the card, never a layout fork */
  html.sqr-mode-rows .sqr-span-2 > .sqr-left {
    grid-column: 1;
  }
  html.sqr-mode-rows .sqr-span-2 > .sqr-right {
    grid-column: 2;
  }
}
/* GATE 2 — WHAT THE SOLVER SOLVED (0.7.0). One include per count that
   CONTAINS n, because a screen the solver called 3 columns must still
   split a .sqr-flow-2 deck — the same "N or more" semantics the media
   gates get for free from min-width (80rem satisfies 40rem), spelled out.
   Exact-match selectors, so specificity is (0,2,1) and nothing new enters
   the cascade: no :is(), no new selector feature, and the ceiling rule
   below at (0,3,0) still wins on specificity as well as source order. */
/* WIDTH — the section itself. Below both gates it is one macro column,
   byte-identical to .sqr-w-6. Under the media gate the selector carries no
   html prefix at all, so its specificity stays (0,1,0) exactly as it was;
   adding a descendant `html ` there would have quietly outranked host
   overrides that beat it today. */
html[data-sqr-cols="2"] .sqr-wide-2 {
  width: calc(var(--micro-width) * 12 * 0.0625rem);
}

/* MODE A — ALIGNED ROWS. Cards alternate in document order
   (1 left, 2 right, 3 left …) because that is what grid-auto-flow
   row does; nothing is reordered, the DOM is untouched. */
html[data-sqr-cols="2"].sqr-mode-rows .sqr-span-2 {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr)); /* minmax(0,…): a bare 1fr keeps an auto min-content floor, so one wide card pushed the second column off the Fold (owner, 2026-09-09 05:20) */
  grid-auto-flow: row;
  column-gap: 0; /* the cards carry their own side margins; a 1u gap on top of them put 90px between the columns and 16px at the edges (owner, 2026-09-09 06:20) */
  align-content: start;
  padding-inline: calc(var(--micro-width) * 0.0625rem * 0.25); /* the edges match the middle: two card margins meet between columns (0.5u), so the deck adds 0.25u at each edge */
}

html[data-sqr-cols="2"].sqr-mode-rows .sqr-span-2 > .sqr-row {
  grid-column: 1/-1;
}

/* MODE B — MASONRY FILL. Native grid masonry is not shipped on
   Android Chrome, so multi-column IS the masonry. No JS, ever:
   a JS masonry breaks Livewire morphs and scroll snap. */
html[data-sqr-cols="2"].sqr-mode-flow .sqr-flow-2 {
  /* block, for the same reason MODE A states grid: multi-column is
     only honoured on a block container, so a deck that is a flex row
     on the phone -- or anything a host stylesheet made it -- would
     silently stay one column here while MODE A worked. The two modes
     answer the same markup, so each states the display it needs. */
  display: block;
  column-count: 2;
  column-gap: 0; /* the cards carry their own side margins; a 1u gap on top of them put 90px between the columns and 16px at the edges (owner, 2026-09-09 06:20) */
  column-fill: balance;
  padding-inline: calc(var(--micro-width) * 0.0625rem * 0.25); /* the edges match the middle (0.5u) */
}

html[data-sqr-cols="2"].sqr-mode-flow .sqr-flow-2 > * {
  break-inside: avoid;
}

html[data-sqr-cols="2"].sqr-mode-flow .sqr-flow-2 > .sqr-row {
  column-span: all;
}

/* per-card pin — a utility on the card, never a layout fork */
html[data-sqr-cols="2"].sqr-mode-rows .sqr-span-2 > .sqr-left {
  grid-column: 1;
}

html[data-sqr-cols="2"].sqr-mode-rows .sqr-span-2 > .sqr-right {
  grid-column: 2;
}

/* WIDTH — the section itself. Below both gates it is one macro column,
   byte-identical to .sqr-w-6. Under the media gate the selector carries no
   html prefix at all, so its specificity stays (0,1,0) exactly as it was;
   adding a descendant `html ` there would have quietly outranked host
   overrides that beat it today. */
html[data-sqr-cols="3"] .sqr-wide-2 {
  width: calc(var(--micro-width) * 12 * 0.0625rem);
}

/* MODE A — ALIGNED ROWS. Cards alternate in document order
   (1 left, 2 right, 3 left …) because that is what grid-auto-flow
   row does; nothing is reordered, the DOM is untouched. */
html[data-sqr-cols="3"].sqr-mode-rows .sqr-span-2 {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr)); /* minmax(0,…): a bare 1fr keeps an auto min-content floor, so one wide card pushed the second column off the Fold (owner, 2026-09-09 05:20) */
  grid-auto-flow: row;
  column-gap: 0; /* the cards carry their own side margins; a 1u gap on top of them put 90px between the columns and 16px at the edges (owner, 2026-09-09 06:20) */
  align-content: start;
  padding-inline: calc(var(--micro-width) * 0.0625rem * 0.25); /* the edges match the middle: two card margins meet between columns (0.5u), so the deck adds 0.25u at each edge */
}

html[data-sqr-cols="3"].sqr-mode-rows .sqr-span-2 > .sqr-row {
  grid-column: 1/-1;
}

/* MODE B — MASONRY FILL. Native grid masonry is not shipped on
   Android Chrome, so multi-column IS the masonry. No JS, ever:
   a JS masonry breaks Livewire morphs and scroll snap. */
html[data-sqr-cols="3"].sqr-mode-flow .sqr-flow-2 {
  /* block, for the same reason MODE A states grid: multi-column is
     only honoured on a block container, so a deck that is a flex row
     on the phone -- or anything a host stylesheet made it -- would
     silently stay one column here while MODE A worked. The two modes
     answer the same markup, so each states the display it needs. */
  display: block;
  column-count: 2;
  column-gap: 0; /* the cards carry their own side margins; a 1u gap on top of them put 90px between the columns and 16px at the edges (owner, 2026-09-09 06:20) */
  column-fill: balance;
  padding-inline: calc(var(--micro-width) * 0.0625rem * 0.25); /* the edges match the middle (0.5u) */
}

html[data-sqr-cols="3"].sqr-mode-flow .sqr-flow-2 > * {
  break-inside: avoid;
}

html[data-sqr-cols="3"].sqr-mode-flow .sqr-flow-2 > .sqr-row {
  column-span: all;
}

/* per-card pin — a utility on the card, never a layout fork */
html[data-sqr-cols="3"].sqr-mode-rows .sqr-span-2 > .sqr-left {
  grid-column: 1;
}

html[data-sqr-cols="3"].sqr-mode-rows .sqr-span-2 > .sqr-right {
  grid-column: 2;
}

/* WIDTH — the section itself. Below both gates it is one macro column,
   byte-identical to .sqr-w-6. Under the media gate the selector carries no
   html prefix at all, so its specificity stays (0,1,0) exactly as it was;
   adding a descendant `html ` there would have quietly outranked host
   overrides that beat it today. */
html[data-sqr-cols="4"] .sqr-wide-2 {
  width: calc(var(--micro-width) * 12 * 0.0625rem);
}

/* MODE A — ALIGNED ROWS. Cards alternate in document order
   (1 left, 2 right, 3 left …) because that is what grid-auto-flow
   row does; nothing is reordered, the DOM is untouched. */
html[data-sqr-cols="4"].sqr-mode-rows .sqr-span-2 {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr)); /* minmax(0,…): a bare 1fr keeps an auto min-content floor, so one wide card pushed the second column off the Fold (owner, 2026-09-09 05:20) */
  grid-auto-flow: row;
  column-gap: 0; /* the cards carry their own side margins; a 1u gap on top of them put 90px between the columns and 16px at the edges (owner, 2026-09-09 06:20) */
  align-content: start;
  padding-inline: calc(var(--micro-width) * 0.0625rem * 0.25); /* the edges match the middle: two card margins meet between columns (0.5u), so the deck adds 0.25u at each edge */
}

html[data-sqr-cols="4"].sqr-mode-rows .sqr-span-2 > .sqr-row {
  grid-column: 1/-1;
}

/* MODE B — MASONRY FILL. Native grid masonry is not shipped on
   Android Chrome, so multi-column IS the masonry. No JS, ever:
   a JS masonry breaks Livewire morphs and scroll snap. */
html[data-sqr-cols="4"].sqr-mode-flow .sqr-flow-2 {
  /* block, for the same reason MODE A states grid: multi-column is
     only honoured on a block container, so a deck that is a flex row
     on the phone -- or anything a host stylesheet made it -- would
     silently stay one column here while MODE A worked. The two modes
     answer the same markup, so each states the display it needs. */
  display: block;
  column-count: 2;
  column-gap: 0; /* the cards carry their own side margins; a 1u gap on top of them put 90px between the columns and 16px at the edges (owner, 2026-09-09 06:20) */
  column-fill: balance;
  padding-inline: calc(var(--micro-width) * 0.0625rem * 0.25); /* the edges match the middle (0.5u) */
}

html[data-sqr-cols="4"].sqr-mode-flow .sqr-flow-2 > * {
  break-inside: avoid;
}

html[data-sqr-cols="4"].sqr-mode-flow .sqr-flow-2 > .sqr-row {
  column-span: all;
}

/* per-card pin — a utility on the card, never a layout fork */
html[data-sqr-cols="4"].sqr-mode-rows .sqr-span-2 > .sqr-left {
  grid-column: 1;
}

html[data-sqr-cols="4"].sqr-mode-rows .sqr-span-2 > .sqr-right {
  grid-column: 2;
}

/* = N*320/16 — 0.0625 is the house 1/16 */
/* WIDTH — the section itself. Below the gate it is one macro column,
   byte-identical to .sqr-w-6. */
.sqr-wide-3 {
  width: calc(var(--micro-width) * 6 * 0.0625rem);
}

/* GATE 1 — RAW PIXELS (0.4.0, unchanged). The fallback for a page whose
   JS has not solved yet, or is not running at all. */
@media (min-width: 60rem) {
  /* WIDTH — the section itself. Below both gates it is one macro column,
     byte-identical to .sqr-w-6. Under the media gate the selector carries no
     html prefix at all, so its specificity stays (0,1,0) exactly as it was;
     adding a descendant `html ` there would have quietly outranked host
     overrides that beat it today. */
  .sqr-wide-3 {
    width: calc(var(--micro-width) * 18 * 0.0625rem);
  }
  /* MODE A — ALIGNED ROWS. Cards alternate in document order
     (1 left, 2 right, 3 left …) because that is what grid-auto-flow
     row does; nothing is reordered, the DOM is untouched. */
  html.sqr-mode-rows .sqr-span-3 {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr)); /* minmax(0,…): a bare 1fr keeps an auto min-content floor, so one wide card pushed the second column off the Fold (owner, 2026-09-09 05:20) */
    grid-auto-flow: row;
    column-gap: 0; /* the cards carry their own side margins; a 1u gap on top of them put 90px between the columns and 16px at the edges (owner, 2026-09-09 06:20) */
    align-content: start;
    padding-inline: calc(var(--micro-width) * 0.0625rem * 0.25); /* the edges match the middle: two card margins meet between columns (0.5u), so the deck adds 0.25u at each edge */
  }
  html.sqr-mode-rows .sqr-span-3 > .sqr-row {
    grid-column: 1/-1;
  }
  /* MODE B — MASONRY FILL. Native grid masonry is not shipped on
     Android Chrome, so multi-column IS the masonry. No JS, ever:
     a JS masonry breaks Livewire morphs and scroll snap. */
  html.sqr-mode-flow .sqr-flow-3 {
    /* block, for the same reason MODE A states grid: multi-column is
       only honoured on a block container, so a deck that is a flex row
       on the phone -- or anything a host stylesheet made it -- would
       silently stay one column here while MODE A worked. The two modes
       answer the same markup, so each states the display it needs. */
    display: block;
    column-count: 3;
    column-gap: 0; /* the cards carry their own side margins; a 1u gap on top of them put 90px between the columns and 16px at the edges (owner, 2026-09-09 06:20) */
    column-fill: balance;
    padding-inline: calc(var(--micro-width) * 0.0625rem * 0.25); /* the edges match the middle (0.5u) */
  }
  html.sqr-mode-flow .sqr-flow-3 > * {
    break-inside: avoid;
  }
  html.sqr-mode-flow .sqr-flow-3 > .sqr-row {
    column-span: all;
  }
  /* per-card pin — a utility on the card, never a layout fork */
  html.sqr-mode-rows .sqr-span-3 > .sqr-left {
    grid-column: 1;
  }
  html.sqr-mode-rows .sqr-span-3 > .sqr-right {
    grid-column: 2;
  }
}
/* GATE 2 — WHAT THE SOLVER SOLVED (0.7.0). One include per count that
   CONTAINS n, because a screen the solver called 3 columns must still
   split a .sqr-flow-2 deck — the same "N or more" semantics the media
   gates get for free from min-width (80rem satisfies 40rem), spelled out.
   Exact-match selectors, so specificity is (0,2,1) and nothing new enters
   the cascade: no :is(), no new selector feature, and the ceiling rule
   below at (0,3,0) still wins on specificity as well as source order. */
/* WIDTH — the section itself. Below both gates it is one macro column,
   byte-identical to .sqr-w-6. Under the media gate the selector carries no
   html prefix at all, so its specificity stays (0,1,0) exactly as it was;
   adding a descendant `html ` there would have quietly outranked host
   overrides that beat it today. */
html[data-sqr-cols="3"] .sqr-wide-3 {
  width: calc(var(--micro-width) * 18 * 0.0625rem);
}

/* MODE A — ALIGNED ROWS. Cards alternate in document order
   (1 left, 2 right, 3 left …) because that is what grid-auto-flow
   row does; nothing is reordered, the DOM is untouched. */
html[data-sqr-cols="3"].sqr-mode-rows .sqr-span-3 {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr)); /* minmax(0,…): a bare 1fr keeps an auto min-content floor, so one wide card pushed the second column off the Fold (owner, 2026-09-09 05:20) */
  grid-auto-flow: row;
  column-gap: 0; /* the cards carry their own side margins; a 1u gap on top of them put 90px between the columns and 16px at the edges (owner, 2026-09-09 06:20) */
  align-content: start;
  padding-inline: calc(var(--micro-width) * 0.0625rem * 0.25); /* the edges match the middle: two card margins meet between columns (0.5u), so the deck adds 0.25u at each edge */
}

html[data-sqr-cols="3"].sqr-mode-rows .sqr-span-3 > .sqr-row {
  grid-column: 1/-1;
}

/* MODE B — MASONRY FILL. Native grid masonry is not shipped on
   Android Chrome, so multi-column IS the masonry. No JS, ever:
   a JS masonry breaks Livewire morphs and scroll snap. */
html[data-sqr-cols="3"].sqr-mode-flow .sqr-flow-3 {
  /* block, for the same reason MODE A states grid: multi-column is
     only honoured on a block container, so a deck that is a flex row
     on the phone -- or anything a host stylesheet made it -- would
     silently stay one column here while MODE A worked. The two modes
     answer the same markup, so each states the display it needs. */
  display: block;
  column-count: 3;
  column-gap: 0; /* the cards carry their own side margins; a 1u gap on top of them put 90px between the columns and 16px at the edges (owner, 2026-09-09 06:20) */
  column-fill: balance;
  padding-inline: calc(var(--micro-width) * 0.0625rem * 0.25); /* the edges match the middle (0.5u) */
}

html[data-sqr-cols="3"].sqr-mode-flow .sqr-flow-3 > * {
  break-inside: avoid;
}

html[data-sqr-cols="3"].sqr-mode-flow .sqr-flow-3 > .sqr-row {
  column-span: all;
}

/* per-card pin — a utility on the card, never a layout fork */
html[data-sqr-cols="3"].sqr-mode-rows .sqr-span-3 > .sqr-left {
  grid-column: 1;
}

html[data-sqr-cols="3"].sqr-mode-rows .sqr-span-3 > .sqr-right {
  grid-column: 2;
}

/* WIDTH — the section itself. Below both gates it is one macro column,
   byte-identical to .sqr-w-6. Under the media gate the selector carries no
   html prefix at all, so its specificity stays (0,1,0) exactly as it was;
   adding a descendant `html ` there would have quietly outranked host
   overrides that beat it today. */
html[data-sqr-cols="4"] .sqr-wide-3 {
  width: calc(var(--micro-width) * 18 * 0.0625rem);
}

/* MODE A — ALIGNED ROWS. Cards alternate in document order
   (1 left, 2 right, 3 left …) because that is what grid-auto-flow
   row does; nothing is reordered, the DOM is untouched. */
html[data-sqr-cols="4"].sqr-mode-rows .sqr-span-3 {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr)); /* minmax(0,…): a bare 1fr keeps an auto min-content floor, so one wide card pushed the second column off the Fold (owner, 2026-09-09 05:20) */
  grid-auto-flow: row;
  column-gap: 0; /* the cards carry their own side margins; a 1u gap on top of them put 90px between the columns and 16px at the edges (owner, 2026-09-09 06:20) */
  align-content: start;
  padding-inline: calc(var(--micro-width) * 0.0625rem * 0.25); /* the edges match the middle: two card margins meet between columns (0.5u), so the deck adds 0.25u at each edge */
}

html[data-sqr-cols="4"].sqr-mode-rows .sqr-span-3 > .sqr-row {
  grid-column: 1/-1;
}

/* MODE B — MASONRY FILL. Native grid masonry is not shipped on
   Android Chrome, so multi-column IS the masonry. No JS, ever:
   a JS masonry breaks Livewire morphs and scroll snap. */
html[data-sqr-cols="4"].sqr-mode-flow .sqr-flow-3 {
  /* block, for the same reason MODE A states grid: multi-column is
     only honoured on a block container, so a deck that is a flex row
     on the phone -- or anything a host stylesheet made it -- would
     silently stay one column here while MODE A worked. The two modes
     answer the same markup, so each states the display it needs. */
  display: block;
  column-count: 3;
  column-gap: 0; /* the cards carry their own side margins; a 1u gap on top of them put 90px between the columns and 16px at the edges (owner, 2026-09-09 06:20) */
  column-fill: balance;
  padding-inline: calc(var(--micro-width) * 0.0625rem * 0.25); /* the edges match the middle (0.5u) */
}

html[data-sqr-cols="4"].sqr-mode-flow .sqr-flow-3 > * {
  break-inside: avoid;
}

html[data-sqr-cols="4"].sqr-mode-flow .sqr-flow-3 > .sqr-row {
  column-span: all;
}

/* per-card pin — a utility on the card, never a layout fork */
html[data-sqr-cols="4"].sqr-mode-rows .sqr-span-3 > .sqr-left {
  grid-column: 1;
}

html[data-sqr-cols="4"].sqr-mode-rows .sqr-span-3 > .sqr-right {
  grid-column: 2;
}

/* = N*320/16 — 0.0625 is the house 1/16 */
/* WIDTH — the section itself. Below the gate it is one macro column,
   byte-identical to .sqr-w-6. */
.sqr-wide-4 {
  width: calc(var(--micro-width) * 6 * 0.0625rem);
}

/* GATE 1 — RAW PIXELS (0.4.0, unchanged). The fallback for a page whose
   JS has not solved yet, or is not running at all. */
@media (min-width: 80rem) {
  /* WIDTH — the section itself. Below both gates it is one macro column,
     byte-identical to .sqr-w-6. Under the media gate the selector carries no
     html prefix at all, so its specificity stays (0,1,0) exactly as it was;
     adding a descendant `html ` there would have quietly outranked host
     overrides that beat it today. */
  .sqr-wide-4 {
    width: calc(var(--micro-width) * 24 * 0.0625rem);
  }
  /* MODE A — ALIGNED ROWS. Cards alternate in document order
     (1 left, 2 right, 3 left …) because that is what grid-auto-flow
     row does; nothing is reordered, the DOM is untouched. */
  html.sqr-mode-rows .sqr-span-4 {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr)); /* minmax(0,…): a bare 1fr keeps an auto min-content floor, so one wide card pushed the second column off the Fold (owner, 2026-09-09 05:20) */
    grid-auto-flow: row;
    column-gap: 0; /* the cards carry their own side margins; a 1u gap on top of them put 90px between the columns and 16px at the edges (owner, 2026-09-09 06:20) */
    align-content: start;
    padding-inline: calc(var(--micro-width) * 0.0625rem * 0.25); /* the edges match the middle: two card margins meet between columns (0.5u), so the deck adds 0.25u at each edge */
  }
  html.sqr-mode-rows .sqr-span-4 > .sqr-row {
    grid-column: 1/-1;
  }
  /* MODE B — MASONRY FILL. Native grid masonry is not shipped on
     Android Chrome, so multi-column IS the masonry. No JS, ever:
     a JS masonry breaks Livewire morphs and scroll snap. */
  html.sqr-mode-flow .sqr-flow-4 {
    /* block, for the same reason MODE A states grid: multi-column is
       only honoured on a block container, so a deck that is a flex row
       on the phone -- or anything a host stylesheet made it -- would
       silently stay one column here while MODE A worked. The two modes
       answer the same markup, so each states the display it needs. */
    display: block;
    column-count: 4;
    column-gap: 0; /* the cards carry their own side margins; a 1u gap on top of them put 90px between the columns and 16px at the edges (owner, 2026-09-09 06:20) */
    column-fill: balance;
    padding-inline: calc(var(--micro-width) * 0.0625rem * 0.25); /* the edges match the middle (0.5u) */
  }
  html.sqr-mode-flow .sqr-flow-4 > * {
    break-inside: avoid;
  }
  html.sqr-mode-flow .sqr-flow-4 > .sqr-row {
    column-span: all;
  }
  /* per-card pin — a utility on the card, never a layout fork */
  html.sqr-mode-rows .sqr-span-4 > .sqr-left {
    grid-column: 1;
  }
  html.sqr-mode-rows .sqr-span-4 > .sqr-right {
    grid-column: 2;
  }
}
/* GATE 2 — WHAT THE SOLVER SOLVED (0.7.0). One include per count that
   CONTAINS n, because a screen the solver called 3 columns must still
   split a .sqr-flow-2 deck — the same "N or more" semantics the media
   gates get for free from min-width (80rem satisfies 40rem), spelled out.
   Exact-match selectors, so specificity is (0,2,1) and nothing new enters
   the cascade: no :is(), no new selector feature, and the ceiling rule
   below at (0,3,0) still wins on specificity as well as source order. */
/* WIDTH — the section itself. Below both gates it is one macro column,
   byte-identical to .sqr-w-6. Under the media gate the selector carries no
   html prefix at all, so its specificity stays (0,1,0) exactly as it was;
   adding a descendant `html ` there would have quietly outranked host
   overrides that beat it today. */
html[data-sqr-cols="4"] .sqr-wide-4 {
  width: calc(var(--micro-width) * 24 * 0.0625rem);
}

/* MODE A — ALIGNED ROWS. Cards alternate in document order
   (1 left, 2 right, 3 left …) because that is what grid-auto-flow
   row does; nothing is reordered, the DOM is untouched. */
html[data-sqr-cols="4"].sqr-mode-rows .sqr-span-4 {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr)); /* minmax(0,…): a bare 1fr keeps an auto min-content floor, so one wide card pushed the second column off the Fold (owner, 2026-09-09 05:20) */
  grid-auto-flow: row;
  column-gap: 0; /* the cards carry their own side margins; a 1u gap on top of them put 90px between the columns and 16px at the edges (owner, 2026-09-09 06:20) */
  align-content: start;
  padding-inline: calc(var(--micro-width) * 0.0625rem * 0.25); /* the edges match the middle: two card margins meet between columns (0.5u), so the deck adds 0.25u at each edge */
}

html[data-sqr-cols="4"].sqr-mode-rows .sqr-span-4 > .sqr-row {
  grid-column: 1/-1;
}

/* MODE B — MASONRY FILL. Native grid masonry is not shipped on
   Android Chrome, so multi-column IS the masonry. No JS, ever:
   a JS masonry breaks Livewire morphs and scroll snap. */
html[data-sqr-cols="4"].sqr-mode-flow .sqr-flow-4 {
  /* block, for the same reason MODE A states grid: multi-column is
     only honoured on a block container, so a deck that is a flex row
     on the phone -- or anything a host stylesheet made it -- would
     silently stay one column here while MODE A worked. The two modes
     answer the same markup, so each states the display it needs. */
  display: block;
  column-count: 4;
  column-gap: 0; /* the cards carry their own side margins; a 1u gap on top of them put 90px between the columns and 16px at the edges (owner, 2026-09-09 06:20) */
  column-fill: balance;
  padding-inline: calc(var(--micro-width) * 0.0625rem * 0.25); /* the edges match the middle (0.5u) */
}

html[data-sqr-cols="4"].sqr-mode-flow .sqr-flow-4 > * {
  break-inside: avoid;
}

html[data-sqr-cols="4"].sqr-mode-flow .sqr-flow-4 > .sqr-row {
  column-span: all;
}

/* per-card pin — a utility on the card, never a layout fork */
html[data-sqr-cols="4"].sqr-mode-rows .sqr-span-4 > .sqr-left {
  grid-column: 1;
}

html[data-sqr-cols="4"].sqr-mode-rows .sqr-span-4 > .sqr-right {
  grid-column: 2;
}

/* ── SOLVED DECK COLUMNS (0.9.0) ───────────────────────────────────────
   `.sqr-span-2` names its count, so phone-authored content can never become a
   four-column deck without new classes. `data-sqr-deck-cols="solved"` on a
   scope — a host element (square-root.js's host solve) or <html> — stops the
   count naming a number and starts it naming A DECK:

     Inside a solved scope, every .sqr-span-N / .sqr-flow-N / .sqr-wide-N
     resolves to S, the data-sqr-cols of THAT scope. Authored smaller than the
     solve: PROMOTED to it. Authored larger: CLAMPED to it. The authored N
     selects nothing but the class name — which is why these rules match
     [class*="sqr-span-"] rather than enumerating N, the same shape the ceiling
     rule below has used since 0.4.0. It also keeps the block at 48 rules
     instead of 144.

   THE CEILING STILL WINS. Every selector here is guarded with
   html:not([data-sqr-max-cols="1"]), because these rules outrank the ceiling
   rule below on specificity and source order both; the guard means they never
   match on a page that declared one column, rather than losing a race.

   TWO FORMS PER SCOPE, and they are not the same selector: the scope can be a
   DESCENDANT of <html> (a host pane) or <html> ITSELF (the whole document in
   solved mode). The mode class always lives on <html>, so the two forms differ in
   where .sqr-mode-rows attaches: beside the scope, or beside <html>. */
/* $s is either a Sass number (Gate 3's raw-pixel case, pre-solve) or the
   literal string 'var(--sqr-cols)' (Gate 4, 0.9.1) -- CSS calc() multiplies
   any number of terms, numeric or var(), so the width expression is built
   the same way either way; only the Sass-side `$sqr-macro-units * $s`
   pre-multiplication (which breaks the moment $s is a string) is avoided. */
/* GATE 3 — THE SOLVED PRE-PAINT (0.9.0). §9.5 of the desktop brief asks for
   "gates for 3 and 4 so a pre-solve desktop paint is right at 1024/1440". A
   finding first: the raw-pixel gates for 3 and 4 already exist above (60rem
   and 80rem) and have honoured .sqr-wide-3 / .sqr-span-4 since 0.4.0. What is
   actually missing is the SOLVED case — pre-solve, a 1440 desktop paints a
   .sqr-span-2 deck as two 720px columns and then reflows to four. These are
   those gates, and the 0.4.0 blocks above are untouched byte for byte.

   Ascending, so the widest matching gate wins by source order, and at a lower
   specificity than the data-sqr-cols rules below, so the solver's answer
   replaces the guess the moment it lands. The gate measures the WINDOW while a
   host measures the PANE, so at 1440 behind a 360px sidebar the gate guesses 4
   and the solver corrects to 3 — server-render data-sqr-cols on the host when
   the shell already knows it and there is no reflow at all. */
@media (min-width: 40rem) {
  /* Gate 3's $s is a Sass number: fold it exactly as 0.9.0 did (byte-
     identical output, `12`/`18`/`24`, not `6 * 2`). Gate 4's $s is the
     string 'var(--sqr-cols)', which Sass cannot multiply — build that one
     as a three-term calc() and let the browser multiply it instead. */
  html:not([data-sqr-max-cols="1"]) [data-sqr-deck-cols=solved] [class*=sqr-wide-] {
    width: calc(var(--micro-width) * 12 * 0.0625rem);
  }
  html:not([data-sqr-max-cols="1"])[data-sqr-deck-cols=solved] [class*=sqr-wide-] {
    width: calc(var(--micro-width) * 12 * 0.0625rem);
  }
  html:not([data-sqr-max-cols="1"]).sqr-mode-rows [data-sqr-deck-cols=solved] [class*=sqr-span-] {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    grid-auto-flow: row;
    column-gap: 0;
    align-content: start;
    padding-inline: calc(var(--micro-width) * 0.0625rem * 0.25);
  }
  html:not([data-sqr-max-cols="1"]).sqr-mode-rows [data-sqr-deck-cols=solved] [class*=sqr-span-] > .sqr-row {
    grid-column: 1/-1;
  }
  html:not([data-sqr-max-cols="1"]).sqr-mode-rows [data-sqr-deck-cols=solved] [class*=sqr-span-] > .sqr-left {
    grid-column: 1;
  }
  html:not([data-sqr-max-cols="1"]).sqr-mode-rows [data-sqr-deck-cols=solved] [class*=sqr-span-] > .sqr-right {
    grid-column: 2;
  }
  html:not([data-sqr-max-cols="1"])[data-sqr-deck-cols=solved].sqr-mode-rows [class*=sqr-span-] {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    grid-auto-flow: row;
    column-gap: 0;
    align-content: start;
    padding-inline: calc(var(--micro-width) * 0.0625rem * 0.25);
  }
  html:not([data-sqr-max-cols="1"])[data-sqr-deck-cols=solved].sqr-mode-rows [class*=sqr-span-] > .sqr-row {
    grid-column: 1/-1;
  }
  html:not([data-sqr-max-cols="1"])[data-sqr-deck-cols=solved].sqr-mode-rows [class*=sqr-span-] > .sqr-left {
    grid-column: 1;
  }
  html:not([data-sqr-max-cols="1"])[data-sqr-deck-cols=solved].sqr-mode-rows [class*=sqr-span-] > .sqr-right {
    grid-column: 2;
  }
  html:not([data-sqr-max-cols="1"]).sqr-mode-flow [data-sqr-deck-cols=solved] [class*=sqr-flow-] {
    display: block;
    column-count: 2;
    column-gap: 0;
    column-fill: balance;
    padding-inline: calc(var(--micro-width) * 0.0625rem * 0.25);
  }
  html:not([data-sqr-max-cols="1"]).sqr-mode-flow [data-sqr-deck-cols=solved] [class*=sqr-flow-] > * {
    break-inside: avoid;
  }
  html:not([data-sqr-max-cols="1"]).sqr-mode-flow [data-sqr-deck-cols=solved] [class*=sqr-flow-] > .sqr-row {
    column-span: all;
  }
  html:not([data-sqr-max-cols="1"])[data-sqr-deck-cols=solved].sqr-mode-flow [class*=sqr-flow-] {
    display: block;
    column-count: 2;
    column-gap: 0;
    column-fill: balance;
    padding-inline: calc(var(--micro-width) * 0.0625rem * 0.25);
  }
  html:not([data-sqr-max-cols="1"])[data-sqr-deck-cols=solved].sqr-mode-flow [class*=sqr-flow-] > * {
    break-inside: avoid;
  }
  html:not([data-sqr-max-cols="1"])[data-sqr-deck-cols=solved].sqr-mode-flow [class*=sqr-flow-] > .sqr-row {
    column-span: all;
  }
}
@media (min-width: 60rem) {
  /* Gate 3's $s is a Sass number: fold it exactly as 0.9.0 did (byte-
     identical output, `12`/`18`/`24`, not `6 * 2`). Gate 4's $s is the
     string 'var(--sqr-cols)', which Sass cannot multiply — build that one
     as a three-term calc() and let the browser multiply it instead. */
  html:not([data-sqr-max-cols="1"]) [data-sqr-deck-cols=solved] [class*=sqr-wide-] {
    width: calc(var(--micro-width) * 18 * 0.0625rem);
  }
  html:not([data-sqr-max-cols="1"])[data-sqr-deck-cols=solved] [class*=sqr-wide-] {
    width: calc(var(--micro-width) * 18 * 0.0625rem);
  }
  html:not([data-sqr-max-cols="1"]).sqr-mode-rows [data-sqr-deck-cols=solved] [class*=sqr-span-] {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    grid-auto-flow: row;
    column-gap: 0;
    align-content: start;
    padding-inline: calc(var(--micro-width) * 0.0625rem * 0.25);
  }
  html:not([data-sqr-max-cols="1"]).sqr-mode-rows [data-sqr-deck-cols=solved] [class*=sqr-span-] > .sqr-row {
    grid-column: 1/-1;
  }
  html:not([data-sqr-max-cols="1"]).sqr-mode-rows [data-sqr-deck-cols=solved] [class*=sqr-span-] > .sqr-left {
    grid-column: 1;
  }
  html:not([data-sqr-max-cols="1"]).sqr-mode-rows [data-sqr-deck-cols=solved] [class*=sqr-span-] > .sqr-right {
    grid-column: 2;
  }
  html:not([data-sqr-max-cols="1"])[data-sqr-deck-cols=solved].sqr-mode-rows [class*=sqr-span-] {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    grid-auto-flow: row;
    column-gap: 0;
    align-content: start;
    padding-inline: calc(var(--micro-width) * 0.0625rem * 0.25);
  }
  html:not([data-sqr-max-cols="1"])[data-sqr-deck-cols=solved].sqr-mode-rows [class*=sqr-span-] > .sqr-row {
    grid-column: 1/-1;
  }
  html:not([data-sqr-max-cols="1"])[data-sqr-deck-cols=solved].sqr-mode-rows [class*=sqr-span-] > .sqr-left {
    grid-column: 1;
  }
  html:not([data-sqr-max-cols="1"])[data-sqr-deck-cols=solved].sqr-mode-rows [class*=sqr-span-] > .sqr-right {
    grid-column: 2;
  }
  html:not([data-sqr-max-cols="1"]).sqr-mode-flow [data-sqr-deck-cols=solved] [class*=sqr-flow-] {
    display: block;
    column-count: 3;
    column-gap: 0;
    column-fill: balance;
    padding-inline: calc(var(--micro-width) * 0.0625rem * 0.25);
  }
  html:not([data-sqr-max-cols="1"]).sqr-mode-flow [data-sqr-deck-cols=solved] [class*=sqr-flow-] > * {
    break-inside: avoid;
  }
  html:not([data-sqr-max-cols="1"]).sqr-mode-flow [data-sqr-deck-cols=solved] [class*=sqr-flow-] > .sqr-row {
    column-span: all;
  }
  html:not([data-sqr-max-cols="1"])[data-sqr-deck-cols=solved].sqr-mode-flow [class*=sqr-flow-] {
    display: block;
    column-count: 3;
    column-gap: 0;
    column-fill: balance;
    padding-inline: calc(var(--micro-width) * 0.0625rem * 0.25);
  }
  html:not([data-sqr-max-cols="1"])[data-sqr-deck-cols=solved].sqr-mode-flow [class*=sqr-flow-] > * {
    break-inside: avoid;
  }
  html:not([data-sqr-max-cols="1"])[data-sqr-deck-cols=solved].sqr-mode-flow [class*=sqr-flow-] > .sqr-row {
    column-span: all;
  }
}
@media (min-width: 80rem) {
  /* Gate 3's $s is a Sass number: fold it exactly as 0.9.0 did (byte-
     identical output, `12`/`18`/`24`, not `6 * 2`). Gate 4's $s is the
     string 'var(--sqr-cols)', which Sass cannot multiply — build that one
     as a three-term calc() and let the browser multiply it instead. */
  html:not([data-sqr-max-cols="1"]) [data-sqr-deck-cols=solved] [class*=sqr-wide-] {
    width: calc(var(--micro-width) * 24 * 0.0625rem);
  }
  html:not([data-sqr-max-cols="1"])[data-sqr-deck-cols=solved] [class*=sqr-wide-] {
    width: calc(var(--micro-width) * 24 * 0.0625rem);
  }
  html:not([data-sqr-max-cols="1"]).sqr-mode-rows [data-sqr-deck-cols=solved] [class*=sqr-span-] {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    grid-auto-flow: row;
    column-gap: 0;
    align-content: start;
    padding-inline: calc(var(--micro-width) * 0.0625rem * 0.25);
  }
  html:not([data-sqr-max-cols="1"]).sqr-mode-rows [data-sqr-deck-cols=solved] [class*=sqr-span-] > .sqr-row {
    grid-column: 1/-1;
  }
  html:not([data-sqr-max-cols="1"]).sqr-mode-rows [data-sqr-deck-cols=solved] [class*=sqr-span-] > .sqr-left {
    grid-column: 1;
  }
  html:not([data-sqr-max-cols="1"]).sqr-mode-rows [data-sqr-deck-cols=solved] [class*=sqr-span-] > .sqr-right {
    grid-column: 2;
  }
  html:not([data-sqr-max-cols="1"])[data-sqr-deck-cols=solved].sqr-mode-rows [class*=sqr-span-] {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    grid-auto-flow: row;
    column-gap: 0;
    align-content: start;
    padding-inline: calc(var(--micro-width) * 0.0625rem * 0.25);
  }
  html:not([data-sqr-max-cols="1"])[data-sqr-deck-cols=solved].sqr-mode-rows [class*=sqr-span-] > .sqr-row {
    grid-column: 1/-1;
  }
  html:not([data-sqr-max-cols="1"])[data-sqr-deck-cols=solved].sqr-mode-rows [class*=sqr-span-] > .sqr-left {
    grid-column: 1;
  }
  html:not([data-sqr-max-cols="1"])[data-sqr-deck-cols=solved].sqr-mode-rows [class*=sqr-span-] > .sqr-right {
    grid-column: 2;
  }
  html:not([data-sqr-max-cols="1"]).sqr-mode-flow [data-sqr-deck-cols=solved] [class*=sqr-flow-] {
    display: block;
    column-count: 4;
    column-gap: 0;
    column-fill: balance;
    padding-inline: calc(var(--micro-width) * 0.0625rem * 0.25);
  }
  html:not([data-sqr-max-cols="1"]).sqr-mode-flow [data-sqr-deck-cols=solved] [class*=sqr-flow-] > * {
    break-inside: avoid;
  }
  html:not([data-sqr-max-cols="1"]).sqr-mode-flow [data-sqr-deck-cols=solved] [class*=sqr-flow-] > .sqr-row {
    column-span: all;
  }
  html:not([data-sqr-max-cols="1"])[data-sqr-deck-cols=solved].sqr-mode-flow [class*=sqr-flow-] {
    display: block;
    column-count: 4;
    column-gap: 0;
    column-fill: balance;
    padding-inline: calc(var(--micro-width) * 0.0625rem * 0.25);
  }
  html:not([data-sqr-max-cols="1"])[data-sqr-deck-cols=solved].sqr-mode-flow [class*=sqr-flow-] > * {
    break-inside: avoid;
  }
  html:not([data-sqr-max-cols="1"])[data-sqr-deck-cols=solved].sqr-mode-flow [class*=sqr-flow-] > .sqr-row {
    column-span: all;
  }
}
/* GATE 4 — WHAT THE SOLVER SOLVED FOR THIS SCOPE (0.9.0, VAR-DRIVEN in
   0.9.1). Was a per-N loop (2..4), one attribute selector per count. That
   enumeration is gone: `data-sqr-max-cols="auto"` (docs/desktop-side.md
   §4(4), owner's ruling 2026-09-19) lets a TV solve to 6, 7, 8+ columns, and
   enumerating every count a monitor could reach is the fork this package
   exists to avoid. square-root.js now publishes `--sqr-cols: S` on every
   solved scope -- <html> itself (next to `font-size`) and each host (next to
   `--micro-width`, in sqrSolveHost's decls) -- so ONE rule per shape reads
   the count straight from the cascade instead of the attribute's string:
   `repeat(var(--sqr-cols), …)` and `column-count: var(--sqr-cols)` accept any
   integer, no @for needed. The `[data-sqr-cols]` presence check is kept in
   the selector (not the count) purely as the "has this scope solved yet"
   guard Gate 3's raw-pixel fallback needs to stay ahead of; the guard does
   not read the attribute's VALUE, so it costs nothing to widen to 8, and 0.9.0
   is still on disk unmodified above (Gates 1-3), a page with a numeric
   ceiling still gets the exact same CSS it always did because --sqr-cols
   there simply equals data-sqr-cols's own number. */
/* Gate 3's $s is a Sass number: fold it exactly as 0.9.0 did (byte-
   identical output, `12`/`18`/`24`, not `6 * 2`). Gate 4's $s is the
   string 'var(--sqr-cols)', which Sass cannot multiply — build that one
   as a three-term calc() and let the browser multiply it instead. */
html:not([data-sqr-max-cols="1"]) [data-sqr-deck-cols=solved][data-sqr-cols] [class*=sqr-wide-] {
  width: calc(var(--micro-width) * 6 * var(--sqr-cols) * 0.0625rem);
}

html:not([data-sqr-max-cols="1"])[data-sqr-deck-cols=solved][data-sqr-cols] [class*=sqr-wide-] {
  width: calc(var(--micro-width) * 6 * var(--sqr-cols) * 0.0625rem);
}

html:not([data-sqr-max-cols="1"]).sqr-mode-rows [data-sqr-deck-cols=solved][data-sqr-cols] [class*=sqr-span-] {
  display: grid;
  grid-template-columns: repeat(var(--sqr-cols), minmax(0, 1fr));
  grid-auto-flow: row;
  column-gap: 0;
  align-content: start;
  padding-inline: calc(var(--micro-width) * 0.0625rem * 0.25);
}

html:not([data-sqr-max-cols="1"]).sqr-mode-rows [data-sqr-deck-cols=solved][data-sqr-cols] [class*=sqr-span-] > .sqr-row {
  grid-column: 1/-1;
}

html:not([data-sqr-max-cols="1"]).sqr-mode-rows [data-sqr-deck-cols=solved][data-sqr-cols] [class*=sqr-span-] > .sqr-left {
  grid-column: 1;
}

html:not([data-sqr-max-cols="1"]).sqr-mode-rows [data-sqr-deck-cols=solved][data-sqr-cols] [class*=sqr-span-] > .sqr-right {
  grid-column: 2;
}

html:not([data-sqr-max-cols="1"])[data-sqr-deck-cols=solved][data-sqr-cols].sqr-mode-rows [class*=sqr-span-] {
  display: grid;
  grid-template-columns: repeat(var(--sqr-cols), minmax(0, 1fr));
  grid-auto-flow: row;
  column-gap: 0;
  align-content: start;
  padding-inline: calc(var(--micro-width) * 0.0625rem * 0.25);
}

html:not([data-sqr-max-cols="1"])[data-sqr-deck-cols=solved][data-sqr-cols].sqr-mode-rows [class*=sqr-span-] > .sqr-row {
  grid-column: 1/-1;
}

html:not([data-sqr-max-cols="1"])[data-sqr-deck-cols=solved][data-sqr-cols].sqr-mode-rows [class*=sqr-span-] > .sqr-left {
  grid-column: 1;
}

html:not([data-sqr-max-cols="1"])[data-sqr-deck-cols=solved][data-sqr-cols].sqr-mode-rows [class*=sqr-span-] > .sqr-right {
  grid-column: 2;
}

html:not([data-sqr-max-cols="1"]).sqr-mode-flow [data-sqr-deck-cols=solved][data-sqr-cols] [class*=sqr-flow-] {
  display: block;
  column-count: var(--sqr-cols);
  column-gap: 0;
  column-fill: balance;
  padding-inline: calc(var(--micro-width) * 0.0625rem * 0.25);
}

html:not([data-sqr-max-cols="1"]).sqr-mode-flow [data-sqr-deck-cols=solved][data-sqr-cols] [class*=sqr-flow-] > * {
  break-inside: avoid;
}

html:not([data-sqr-max-cols="1"]).sqr-mode-flow [data-sqr-deck-cols=solved][data-sqr-cols] [class*=sqr-flow-] > .sqr-row {
  column-span: all;
}

html:not([data-sqr-max-cols="1"])[data-sqr-deck-cols=solved][data-sqr-cols].sqr-mode-flow [class*=sqr-flow-] {
  display: block;
  column-count: var(--sqr-cols);
  column-gap: 0;
  column-fill: balance;
  padding-inline: calc(var(--micro-width) * 0.0625rem * 0.25);
}

html:not([data-sqr-max-cols="1"])[data-sqr-deck-cols=solved][data-sqr-cols].sqr-mode-flow [class*=sqr-flow-] > * {
  break-inside: avoid;
}

html:not([data-sqr-max-cols="1"])[data-sqr-deck-cols=solved][data-sqr-cols].sqr-mode-flow [class*=sqr-flow-] > .sqr-row {
  column-span: all;
}

/* THE CEILING WINS. A page that declares one column never spans. */
:root[data-sqr-max-cols="1"] [class*=sqr-wide-] {
  width: calc(var(--micro-width) * 6 * 0.0625rem);
}

:root[data-sqr-max-cols="1"] [class*=sqr-span-],
:root[data-sqr-max-cols="1"] [class*=sqr-flow-] {
  display: block;
  column-count: initial;
}

/* NO MODE CLASS ON <html> = flow (the default the store writes). */
html:not(.sqr-mode-rows):not(.sqr-mode-flow) { /* see docs: host must set one */ }

/* A SPANNING DECK IS TRANSPARENT TO THE VERTICAL SNAP RULE.
   _scrollsnap.scss gives scroll-snap-align to `.scrollsnap-vertical > .snap-y`,
   a DIRECT child, on purpose. But the layout class can never go on the snapping
   column itself: a multi-column box with a definite block-size (and that column
   is height:100vh) does not balance — it fragments into height-bound columns
   that run off sideways. So on a page whose cards are siblings in the column,
   the deck has to be one element deep, and that would silently cost every card
   its snap. This puts the rule back, one level down, and only for markup that
   opted into spanning. Deliberately outside the gate: the deck element exists
   on the phone too, where it is otherwise inert. */
.scrollsnap-vertical > [class*=sqr-span-] > .snap-y,
.scrollsnap-vertical > [class*=sqr-flow-] > .snap-y {
  scroll-snap-align: start;
  scroll-snap-stop: always;
}

/*
    dont want ladnscape media queryies on
        -watches
        -heights that are not the minium:not sure somewher ebetween 320-360
        -width: our lowest device width res is 320 for a NOT WATCH, so it's height would be 640, do 620 to be safe, that height would now be width in landsscape
        -was not working expected maybe meaning of width and height change? I did 320 both, is good actually, blessing in disquise once I tested on dev tools responsive view
        */
/*

    this might have been the way to go buy I am experimenting between this landscape/portrait CSS logic
    and the JS column per devicce width because when orientation changes the width I think is more important
    than whether it is  portrait or landscape. But that is assuming devices will always have a good enough height in
    landscape, however both methods scale things down anyway so I can experiment but leave this code always
    here if not using it. It definitley has its up sides and great for most designs but maybe not square root.
    I ended up using this for now. still figuring it out... saves me all the JS if width>height
    bigger than watch...361 and below any tablet to not effect screens seems to work best
*/
@media screen and (orientation: landscape) and (min-width: 361px) and (max-width: 768px) {
  .mobile-right-button {
    background: red;
  }
  .sqr-macro-pixel {
    width: calc(var(--macro-height) * 1px);
    height: calc(var(--macro-width) * 1px);
  }
  .sqr-macro-rem {
    width: calc(var(--macro-height) * 0.0625rem);
    height: calc(var(--macro-width) * 0.0625rem);
  }
  .sqr-micro-pixel {
    width: calc(var(--micro-height) * 1px);
    height: calc(var(--micro-width) * 1px);
  }
  .sqr-micro-rem {
    width: calc(var(--micro-height) * 0.0625rem);
    height: calc(var(--micro-width) * 0.0625rem);
  }
}
/*watch rules: 2xs*/
@media (max-width: 320px) {
  .\32 xs\:hide, .\32 xs\:hidden {
    display: none;
  }
  .\32 xs\:block {
    display: block;
  }
}
@media (min-width: 321px) {
  .xs\:sqr-my-1\/2 {
    margin-top: calc(var(--micro-width) * 0.0625rem * 0.25);
    margin-bottom: calc(var(--micro-width) * 0.0625rem * 0.25);
  }
  .xs\:sqr-mx-1\/4 {
    margin-left: calc(var(--micro-width) * 0.0625rem * 0.25);
    margin-right: calc(var(--micro-width) * 0.0625rem * 0.25);
  }
}
.text-2xs {
  font-size: 0.65rem;
}