website update

2 files changed, 502 insertions, 162 deletions

diff --git a/docs/res/base.css b/docs/res/base.css
index b4254200d..1f349f903 100644
--- a/docs/res/base.css
+++ b/docs/res/base.css
@@ -1,3 +1,19 @@
+:root {
+  --fontSize: 15px;
+  /*--emsAcrossViewport: 80;
+  --fontSize: calc(100vw / var(--emsAcrossViewport));*/
+
+  --lineHeight: calc(var(--fontSize) * 1.5);
+
+  --spacing: 2rem;
+  --spacingv: calc(var(--lineHeight) / 2);
+
+  --gridGapCol: var(--spacing);
+  --gridGapRow: calc(var(--spacing) / 2);
+
+  --red: #F02D09;
+}
+
 * { margin:0; padding:0; font-synthesis: none; }
 html { }
 body {
@@ -5,12 +21,15 @@ body {
   color: #111;
   font: 15px/22px 'Inter', system-ui, sans-serif;
 
-  font-size: 15px;
-  line-height: 1.5;
+  /*font-size: 15px;
+  line-height: 1.5;*/
+
+  font-size: var(--fontSize);
+  line-height: var(--lineHeight);
+
   letter-spacing: -0.004em;
 
   font-weight: 400;
-  padding-bottom: 30px;
 
   -webkit-text-size-adjust: 100%;
   -ms-text-size-adjust: 100%;
@@ -89,12 +108,13 @@ a[href^="#"]:hover {
   text-decoration-style: dashed;
 }
 
-p {
-  margin: 20px 0;
-}
-code, pre, q {
-  font-family: "SFMono-Regular", Menlo, Consolas, Inconsolata, monospace;
-  font-size:0.96em;
+/*p, pre {
+  margin: 1rem 0;
+}*/
+code, pre, q, tt {
+  font-family: 'IBM Plex Mono', monospace;
+  font-feature-settings: 'ss02' 1, 'zero' 1;
+  line-height: inherit;
 }
 code {
   display: block;
@@ -102,7 +122,10 @@ code {
   padding: 0.5em 0;
   overflow: auto;
 }
-pre, q {
+pre {
+  white-space: pre-wrap;
+}
+q {
   display: inline;
   white-space: pre-wrap;
 }
@@ -149,29 +172,84 @@ small {
   letter-spacing: 0.012em;
 }
 
-h1, h2, h3 {
-  font-weight: 500;
+h1, h2, h3, h4, h5, h6 {
   -webkit-font-smoothing: antialiased;
   -moz-osx-font-smoothing: grayscale;
 }
-h1 {
+/*h1, .h1 {
   color: #222;
   font-size: 55px;
   letter-spacing: -0.038em;
   line-height: 1.1em;
   text-indent: -2px;
+  font-weight: 700;
+}
+h1 {
   margin-bottom: 30px;
   margin-top: 10px;
+}*/
+h1, .h1 {
+  margin-left: calc(3rem / -20);
+  font-weight: 700;
+  font-size: 4rem;
+  letter-spacing: -0.07em;
+  line-height: calc(var(--spacingv) * 6);
+}
+h1 {
+  margin-bottom: calc(var(--spacingv) * 2);
+}
+
+h2, .h2 {
   font-weight: 700;
+  font-size: 1.8rem;
+  letter-spacing: -0.03em;
+  line-height: calc(var(--spacingv) * 3);
 }
 h2 {
-  font-size: 30px;
-  font-weight: 600;
-  letter-spacing: -0.025em;
-  line-height: 30px;
-  margin-bottom: 25px;
-  margin-top: 10px;
+  margin-bottom: calc(var(--spacingv) * 2);
+}
+h3, .h3 {
+  font-weight: 700;
+  font-size: 1.2rem;
+  letter-spacing: -0.018em;
+  line-height: calc(var(--spacingv) * 2);
+}
+h3 {
+  margin-bottom: calc(var(--spacingv) * 2);
+}
+
+h3 q, h3. q {
+  font-weight: 400;
+  padding-left: 0.5em;
+}
+
+h1 > a, h2 > a, h3 > a, h4 > a,
+.h1 > a, .h2 > a, .h3 > a, .h4 > a {
+  color: inherit;
+  text-decoration: none !important;
+  text-shadow: none;
+  background: none;
+  outline:none;
+}
+
+h4, h5, h6, .h4, .h5, .h6 {
+  font-weight: 640;
+  letter-spacing: -0.015em;
+}
+h4, h5, h6 {
+  margin-bottom: calc(var(--spacingv) * 1);
 }
+/* add top margin to Hn when it follows another element */
+* + h1 { margin-top: calc(var(--spacingv) * 6); }
+* + h2 { margin-top: calc(var(--spacingv) * 4); }
+* + h3 { margin-top: calc(var(--spacingv) * 3); }
+* + h4 { margin-top: calc(var(--spacingv) * 2); }
+
+p, pre, p + grid, pre + grid {
+  margin-bottom: var(--lineHeight);
+}
+
+
 .row.dark h2,
 .row.black h2 {
   letter-spacing: -0.014em;
@@ -208,26 +286,10 @@ h2.banner {
     background: rgba(0,0,0,0.1);
   }
 
-h3 {
-  font-size: 20px;
-  font-weight: 600;
-  letter-spacing: -0.02em;
-}
 .row.dark h3,
 .row.black h3 {
   letter-spacing: -0.012em;
 }
-h3 q {
-  font-weight: 400;
-  padding-left: 0.5em;
-}
-
-h1 > a, h2 > a, h3 > a {
-  color: inherit;
-  text-decoration: none !important;
-  text-shadow: none;
-  background: none;
-}
 
 .row {
   padding: 50px;
@@ -262,15 +324,18 @@ h1 > a, h2 > a, h3 > a {
   }
 
 .row-divider {
-  margin:0 auto;
+  height: 1rem;
+  /*margin: 0 auto;
   max-width: 888px;
-  height: 1px;
-  border-bottom: 1px dashed rgba(0,0,0,0.09);
+  height: 0.11rem;
+  background: black;*/
 }
 
 .row.menu {
   padding: 0;
   border-bottom:1px solid rgba(0,0,0,0.1);
+  background: #111;
+  color: white;
 }
   .row.menu ul {
     width: auto;
@@ -284,27 +349,38 @@ h1 > a, h2 > a, h3 > a {
     white-space: nowrap;
   }
   .row.menu ul li {
-    margin-right: 50px;
+    /*margin-right: 50px;*/
     margin-bottom: -1px;
     text-indent: -0.5px;
+    text-align: center;
   }
     .row.menu ul li > a {
       color: inherit;
-      opacity: 0.6;
+      opacity: 0.8;
       text-decoration:none;
       display: inline-block;
-      padding: 15px 0 13px 0;
-      transition: 300ms opacity cubic-bezier(0.25, 0.47, 0.44, 0.93);
-      border-bottom: 3px solid transparent;
+      padding: 15px 25px 13px 25px;
+      /*transition: 80ms opacity cubic-bezier(0.25, 0.47, 0.44, 0.93);*/
+      /*border-bottom: 3px solid transparent;*/
     }
     .row.menu ul li > a:hover, .row.menu ul li > a.active {
-      color: black;
-      border-bottom-color: black;
+      color: white;
+      background: var(--red);
+      border-bottom-color: white;
       opacity: 1;
-    } 
+    }
+    .row.menu ul li:first-child > a {
+      padding-left:0;
+      padding-right:0;
+      margin-right: 25px;
+      background:transparent;
+    }
+    .row.menu ul li > a.active {
+      font-weight:600;
+    }
   .row.menu ul li.home > a {
-    font-weight: 500;
-    color: black;
+    font-weight: 600;
+    color: white;
     opacity: 1;
   }
 
@@ -396,22 +472,21 @@ tablex {
   }
 
 /* --------------------------------------------------------------------- */
-/*
-grid with 4 major columns subdivided twice
-
-|                   |                   |                   |                   |
-|         1         |         2         |         3         |         4         |
-|                   |                   |                   |                   |
-|                   |                   |                   |                   |
-|    1    |    2    |    3    |    4    |    5    |    6    |    7    |    8    |
-|         |         |         |         |         |         |         |         |
-|         |         |         |         |         |         |         |         |
-| 1  | 2  | 3  | 4  | 5  | 6  | 7  | 8  | 9  | 10 | 11 | 12 | 13 | 14 | 15 | 16 |
-|    |    |    |    |    |    |    |    |    |    |    |    |    |    |    |    |
-|    |    |    |    |    |    |    |    |    |    |    |    |    |    |    |    |
+/* grid */
 
+grid {
+  grid-column-gap: 2rem;
+  grid-row-gap: 0;
+}
+grid > c.spacer {
+  grid-column: 1 / -1;
+  height: calc(var(--spacingv) * 6);
+}
 
-*/
+@media only screen and (max-width: 565px) {
+  grid { grid-column-gap: 1rem; }
+  grid > c.spacer { height: calc(var(--spacingv) * 3); }
+}
 
 .row.features { display:none; }
 @supports (display: grid) {
@@ -419,105 +494,28 @@ grid with 4 major columns subdivided twice
 }
 .row.features p.example { margin-top:2rem; opacity:0.4; }
 
-grid {
-  display: grid;
-  grid-template-columns: repeat(4, 1fr);
+.row.features grid {
   grid-column-gap: 1rem;
-  grid-row-gap: 1rem;
-}
-grid.c4 { grid-template-columns: repeat(4, 1fr); }
-grid.c8 { grid-template-columns: repeat(8, 1fr); }
-grid.c9 { grid-template-columns: repeat(9, 1fr); }
-grid.c16 { grid-template-columns: repeat(16, 1fr); }
-/*grid, grid4 {
-  grid-template-columns: repeat(4, 1fr);
-}*/
-c {
-  display: block;
-  grid-column-end: span 1;
-}
-c[start="1"] { grid-column-start: 1; }
-c[start="2"] { grid-column-start: 2; }
-c[start="3"] { grid-column-start: 3; }
-c[start="4"] { grid-column-start: 4; }
-c[start="5"] { grid-column-start: 5; }
-c[start="6"] { grid-column-start: 6; }
-c[start="7"] { grid-column-start: 7; }
-c[start="8"] { grid-column-start: 8; }
-c[start="9"] { grid-column-start: 9; }
-
-c[span="1"] { grid-column-end: span 1; }
-c[span="2"] { grid-column-end: span 2; }
-c[span="3"] { grid-column-end: span 3; }
-c[span="4"] { grid-column-end: span 4; }
-c[span="5"] { grid-column-end: span 5; }
-c[span="6"] { grid-column-end: span 6; }
-c[span="7"] { grid-column-end: span 7; }
-c[span="8"] { grid-column-end: span 8; }
-c[span="9"] { grid-column-end: span 9; }
-
-c[span="1-1"] { grid-column: 1 / 1; }
-c[span="2-5"] { grid-column: 2 / 5; }
-c[span="2-4"] { grid-column: 2 / 4; }
-
-grid.c4 c[span="2..."], c[span="2.."] { grid-column: 2 / 5; }
-grid.c8 c[span="2..."], c[span="2.."] { grid-column: 2 / 9; }
-
-/* .debug can be added to a grid to visualize its effective cells.
-   .debug-color applies alternating colors. */
-grid.debug > *, grid.debug-color > * {
-  --color: rgba(250, 230, 0, 0.2);
-  background-image: linear-gradient(to bottom, var(--color) 0%, var(--color) 100%);
-}
-grid.debug > :nth-child(4n+2) { --color: rgba(250, 0, 0, 0.1); }
-grid.debug > :nth-child(4n+3) { --color: rgba(40, 120, 255, 0.1); }
-grid.debug > :nth-child(4n+4) { --color: rgba(0, 230, 80, 0.17); }
-
-.col-all { grid-column: 1 / span 16; }
-
-.col-1   { grid-column: 1 / span 2; }
-.col-1-2 { grid-column: 1 / span 4; }
-.col-1-3 { grid-column: 1 / span 6; }
-.col-1-4 { grid-column: 1 / span 8; }
-.col-1-5 { grid-column: 1 / span 10; }
-.col-1-6 { grid-column: 1 / span 12; }
-.col-1-7 { grid-column: 1 / span 14; }
-.col-1-8 { grid-column: 1 / span 16; }
-
-.col-2   { grid-column: 2 / span 2; }
-.col-2-2 { grid-column: 2 / span 4; }
-.col-2-3 { grid-column: 2 / span 6; }
-.col-2-4 { grid-column: 2 / span 8; }
-.col-2-5 { grid-column: 2 / span 10; }
-.col-2-6 { grid-column: 2 / span 12; }
-.col-2-7 { grid-column: 2 / span 14; }
-
-.col-3   { grid-column: 3 / span 2; }
-.col-3-2 { grid-column: 3 / span 4; }
-.col-3-3 { grid-column: 3 / span 6; }
-.col-3-4 { grid-column: 3 / span 8; }
-.col-3-5 { grid-column: 3 / span 10; }
-.col-3-6 { grid-column: 3 / span 12; }
-
-.col-4   { grid-column: 4 / span 2; }
-.col-4-2 { grid-column: 4 / span 4; }
-.col-4-3 { grid-column: 4 / span 6; }
-.col-4-4 { grid-column: 4 / span 8; }
-.col-4-5 { grid-column: 4 / span 10; }
-
-.col-5   { grid-column: 5 / span 2; }
-.col-5-2 { grid-column: 5 / span 4; }
-.col-5-3 { grid-column: 5 / span 6; }
-.col-5-4 { grid-column: 5 / span 8; }
-
-.col-6   { grid-column: 6 / span 2; }
-.col-6-2 { grid-column: 6 / span 4; }
-.col-6-3 { grid-column: 6 / span 6; }
-
-.col-7   { grid-column: 7 / span 2; }
-.col-7-2 { grid-column: 7 / span 4; }
-
-.col-8   { grid-column: 8 / span 2; }
+  grid-row-gap: 0.5rem;
+  margin-bottom: 0;
+}
+
+/* --------------------------------------------------------------------- */
+/* flow */
+
+flow { display:block; appearance: none; -webkit-appearance: none }
+flow[columns] {
+  column-gap: var(--spacing);
+  /*column-fill: balance;*/
+}
+flow[columns="2"] {
+  column-count: 2;
+}
+@media only screen and (max-width: 600px) {
+  flow[columns-s="1"] {
+    column-count: 1;
+  }
+}
 
 /* --------------------------------------------------------------------- */
 
@@ -593,14 +591,15 @@ box.large tablex r out {
 
 /* ------------------------------------------------------ */
 
+
 /* wide windows */
 @media only screen and (min-width: 566px) {
-  .narrow-window { display: none; }
+  .narrow-window, .only-small-screen { display: none; }
 }
 
 /* narrow windows */
 @media only screen and (max-width: 565px) {
-  .wide-window { display: none; }
+  .wide-window, .only-large-screen { display: none; }
   .row.menu ul {
     justify-content: space-between;
   }
diff --git a/docs/res/grid.css b/docs/res/grid.css
new file mode 100644
index 000000000..3d5a70bdc
--- /dev/null
+++ b/docs/res/grid.css
@@ -0,0 +1,341 @@
+/* Raster Simple CSS Grid System, version 3 */
+grid {
+  display: grid;
+  grid-template-columns: repeat(4, 1fr);
+  --grid-cs: 1; /* start */
+  --grid-ce: -1 /* end */
+}
+
+/* c -- cell or column */
+grid > c { display: block; appearance: none; -webkit-appearance: none }
+
+grid[columns="1"] { grid-template-columns: repeat(1, 1fr) }
+grid[columns="2"] { grid-template-columns: repeat(2, 1fr) }
+grid[columns="3"] { grid-template-columns: repeat(3, 1fr) }
+grid[columns="4"] { grid-template-columns: repeat(4, 1fr) }
+grid[columns="5"] { grid-template-columns: repeat(5, 1fr) }
+grid[columns="6"] { grid-template-columns: repeat(6, 1fr) }
+grid[columns="7"] { grid-template-columns: repeat(7, 1fr) }
+grid[columns="8"] { grid-template-columns: repeat(8, 1fr) }
+grid[columns="9"] { grid-template-columns: repeat(9, 1fr) }
+grid[columns="10"] { grid-template-columns: repeat(10, 1fr) }
+grid[columns="11"] { grid-template-columns: repeat(11, 1fr) }
+grid[columns="12"] { grid-template-columns: repeat(12, 1fr) }
+grid[columns="13"] { grid-template-columns: repeat(13, 1fr) }
+grid[columns="14"] { grid-template-columns: repeat(14, 1fr) }
+grid[columns="15"] { grid-template-columns: repeat(15, 1fr) }
+grid[columns="16"] { grid-template-columns: repeat(16, 1fr) }
+grid[columns="17"] { grid-template-columns: repeat(17, 1fr) }
+grid[columns="18"] { grid-template-columns: repeat(18, 1fr) }
+grid[columns="19"] { grid-template-columns: repeat(19, 1fr) }
+grid[columns="20"] { grid-template-columns: repeat(20, 1fr) }
+grid[columns="21"] { grid-template-columns: repeat(21, 1fr) }
+grid[columns="22"] { grid-template-columns: repeat(22, 1fr) }
+grid[columns="23"] { grid-template-columns: repeat(23, 1fr) }
+grid[columns="24"] { grid-template-columns: repeat(24, 1fr) }
+grid[columns="25"] { grid-template-columns: repeat(25, 1fr) }
+grid[columns="26"] { grid-template-columns: repeat(26, 1fr) }
+grid[columns="27"] { grid-template-columns: repeat(27, 1fr) }
+grid[columns="28"] { grid-template-columns: repeat(28, 1fr) }
+grid[columns="29"] { grid-template-columns: repeat(29, 1fr) }
+grid[columns="30"] { grid-template-columns: repeat(30, 1fr) }
+
+/* span=start... */
+grid > c[span^="1"] { --grid-cs: 1 }
+grid > c[span^="2"] { --grid-cs: 2 }
+grid > c[span^="3"] { --grid-cs: 3 }
+grid > c[span^="4"] { --grid-cs: 4 }
+grid > c[span^="5"] { --grid-cs: 5 }
+grid > c[span^="6"] { --grid-cs: 6 }
+grid > c[span^="7"] { --grid-cs: 7 }
+grid > c[span^="8"] { --grid-cs: 8 }
+grid > c[span^="9"] { --grid-cs: 9 }
+grid > c[span^="10"] { --grid-cs: 10 }
+grid > c[span^="11"] { --grid-cs: 11 }
+grid > c[span^="12"] { --grid-cs: 12 }
+grid > c[span^="13"] { --grid-cs: 13 }
+grid > c[span^="14"] { --grid-cs: 14 }
+grid > c[span^="15"] { --grid-cs: 15 }
+grid > c[span^="16"] { --grid-cs: 16 }
+grid > c[span^="17"] { --grid-cs: 17 }
+grid > c[span^="18"] { --grid-cs: 18 }
+grid > c[span^="19"] { --grid-cs: 19 }
+grid > c[span^="20"] { --grid-cs: 20 }
+grid > c[span^="21"] { --grid-cs: 21 }
+grid > c[span^="22"] { --grid-cs: 22 }
+grid > c[span^="23"] { --grid-cs: 23 }
+grid > c[span^="24"] { --grid-cs: 24 }
+grid > c[span^="25"] { --grid-cs: 25 }
+grid > c[span^="26"] { --grid-cs: 26 }
+grid > c[span^="27"] { --grid-cs: 27 }
+grid > c[span^="28"] { --grid-cs: 28 }
+grid > c[span^="29"] { --grid-cs: 29 }
+grid > c[span^="30"] { --grid-cs: 30 }
+
+/* span=...+width, span=...-end */
+grid > c[span$="+1"], grid > c[span="1"] { --grid-ce: 1 }
+grid > c[span$="+2"], grid > c[span$="-1"], grid > c[span="2"] { --grid-ce: 2 }
+grid > c[span$="+3"], grid > c[span$="-2"], grid > c[span="3"] { --grid-ce: 3 }
+grid > c[span$="+4"], grid > c[span$="-3"], grid > c[span="4"] { --grid-ce: 4 }
+grid > c[span$="+5"], grid > c[span$="-4"], grid > c[span="5"] { --grid-ce: 5 }
+grid > c[span$="+6"], grid > c[span$="-5"], grid > c[span="6"] { --grid-ce: 6 }
+grid > c[span$="+7"], grid > c[span$="-6"], grid > c[span="7"] { --grid-ce: 7 }
+grid > c[span$="+8"], grid > c[span$="-7"], grid > c[span="8"] { --grid-ce: 8 }
+grid > c[span$="+9"], grid > c[span$="-8"], grid > c[span="9"] { --grid-ce: 9 }
+grid > c[span$="+10"], grid > c[span$="-9"], grid > c[span="10"] { --grid-ce: 10 }
+grid > c[span$="+11"], grid > c[span$="-10"], grid > c[span="11"] { --grid-ce: 11 }
+grid > c[span$="+12"], grid > c[span$="-11"], grid > c[span="12"] { --grid-ce: 12 }
+grid > c[span$="+13"], grid > c[span$="-12"], grid > c[span="13"] { --grid-ce: 13 }
+grid > c[span$="+14"], grid > c[span$="-13"], grid > c[span="14"] { --grid-ce: 14 }
+grid > c[span$="+15"], grid > c[span$="-14"], grid > c[span="15"] { --grid-ce: 15 }
+grid > c[span$="+16"], grid > c[span$="-15"], grid > c[span="16"] { --grid-ce: 16 }
+grid > c[span$="+17"], grid > c[span$="-16"], grid > c[span="17"] { --grid-ce: 17 }
+grid > c[span$="+18"], grid > c[span$="-17"], grid > c[span="18"] { --grid-ce: 18 }
+grid > c[span$="+19"], grid > c[span$="-18"], grid > c[span="19"] { --grid-ce: 19 }
+grid > c[span$="+20"], grid > c[span$="-19"], grid > c[span="20"] { --grid-ce: 20 }
+grid > c[span$="+21"], grid > c[span$="-20"], grid > c[span="21"] { --grid-ce: 21 }
+grid > c[span$="+22"], grid > c[span$="-21"], grid > c[span="22"] { --grid-ce: 22 }
+grid > c[span$="+23"], grid > c[span$="-22"], grid > c[span="23"] { --grid-ce: 23 }
+grid > c[span$="+24"], grid > c[span$="-23"], grid > c[span="24"] { --grid-ce: 24 }
+grid > c[span$="+25"], grid > c[span$="-24"], grid > c[span="25"] { --grid-ce: 25 }
+grid > c[span$="+26"], grid > c[span$="-25"], grid > c[span="26"] { --grid-ce: 26 }
+grid > c[span$="+27"], grid > c[span$="-26"], grid > c[span="27"] { --grid-ce: 27 }
+grid > c[span$="+28"], grid > c[span$="-27"], grid > c[span="28"] { --grid-ce: 28 }
+grid > c[span$="+29"], grid > c[span$="-28"], grid > c[span="29"] { --grid-ce: 29 }
+grid > c[span$="+30"], grid > c[span$="-29"], grid > c[span="30"] { --grid-ce: 30 }
+grid > c[span$="-30"] { --grid-ce: 31 }
+
+/* connect vars */
+grid > c[span] { grid-column-end: span var(--grid-ce) }
+grid > c[span*="+"], grid > c[span*="-"], grid > c[span*=".."] {
+  grid-column-start: var(--grid-cs) }
+grid > c[span*="-"], grid > c[span*=".."] {
+  grid-column-end: var(--grid-ce) }
+grid > c[span="row"] { grid-column: 1 / -1 }
+
+/* for window width <= 600 */
+@media only screen and (max-width: 600px) {
+  grid[columns-s="1"] { grid-template-columns: repeat(1, 1fr) }
+  grid[columns-s="2"] { grid-template-columns: repeat(2, 1fr) }
+  grid[columns-s="3"] { grid-template-columns: repeat(3, 1fr) }
+  grid[columns-s="4"] { grid-template-columns: repeat(4, 1fr) }
+  grid[columns-s="5"] { grid-template-columns: repeat(5, 1fr) }
+  grid[columns-s="6"] { grid-template-columns: repeat(6, 1fr) }
+  grid[columns-s="7"] { grid-template-columns: repeat(7, 1fr) }
+  grid[columns-s="8"] { grid-template-columns: repeat(8, 1fr) }
+  grid[columns-s="9"] { grid-template-columns: repeat(9, 1fr) }
+  grid[columns-s="10"] { grid-template-columns: repeat(10, 1fr) }
+  grid[columns-s="11"] { grid-template-columns: repeat(11, 1fr) }
+  grid[columns-s="12"] { grid-template-columns: repeat(12, 1fr) }
+  grid[columns-s="13"] { grid-template-columns: repeat(13, 1fr) }
+  grid[columns-s="14"] { grid-template-columns: repeat(14, 1fr) }
+  grid[columns-s="15"] { grid-template-columns: repeat(15, 1fr) }
+  grid[columns-s="16"] { grid-template-columns: repeat(16, 1fr) }
+  grid[columns-s="17"] { grid-template-columns: repeat(17, 1fr) }
+  grid[columns-s="18"] { grid-template-columns: repeat(18, 1fr) }
+  grid[columns-s="19"] { grid-template-columns: repeat(19, 1fr) }
+  grid[columns-s="20"] { grid-template-columns: repeat(20, 1fr) }
+  grid[columns-s="21"] { grid-template-columns: repeat(21, 1fr) }
+  grid[columns-s="22"] { grid-template-columns: repeat(22, 1fr) }
+  grid[columns-s="23"] { grid-template-columns: repeat(23, 1fr) }
+  grid[columns-s="24"] { grid-template-columns: repeat(24, 1fr) }
+  grid[columns-s="25"] { grid-template-columns: repeat(25, 1fr) }
+  grid[columns-s="26"] { grid-template-columns: repeat(26, 1fr) }
+  grid[columns-s="27"] { grid-template-columns: repeat(27, 1fr) }
+  grid[columns-s="28"] { grid-template-columns: repeat(28, 1fr) }
+  grid[columns-s="29"] { grid-template-columns: repeat(29, 1fr) }
+  grid[columns-s="30"] { grid-template-columns: repeat(30, 1fr) }
+  
+  /* span-s=start... */
+  grid > c[span-s^="1"] { --grid-cs: 1 }
+  grid > c[span-s^="2"] { --grid-cs: 2 }
+  grid > c[span-s^="3"] { --grid-cs: 3 }
+  grid > c[span-s^="4"] { --grid-cs: 4 }
+  grid > c[span-s^="5"] { --grid-cs: 5 }
+  grid > c[span-s^="6"] { --grid-cs: 6 }
+  grid > c[span-s^="7"] { --grid-cs: 7 }
+  grid > c[span-s^="8"] { --grid-cs: 8 }
+  grid > c[span-s^="9"] { --grid-cs: 9 }
+  grid > c[span-s^="10"] { --grid-cs: 10 }
+  grid > c[span-s^="11"] { --grid-cs: 11 }
+  grid > c[span-s^="12"] { --grid-cs: 12 }
+  grid > c[span-s^="13"] { --grid-cs: 13 }
+  grid > c[span-s^="14"] { --grid-cs: 14 }
+  grid > c[span-s^="15"] { --grid-cs: 15 }
+  grid > c[span-s^="16"] { --grid-cs: 16 }
+  grid > c[span-s^="17"] { --grid-cs: 17 }
+  grid > c[span-s^="18"] { --grid-cs: 18 }
+  grid > c[span-s^="19"] { --grid-cs: 19 }
+  grid > c[span-s^="20"] { --grid-cs: 20 }
+  grid > c[span-s^="21"] { --grid-cs: 21 }
+  grid > c[span-s^="22"] { --grid-cs: 22 }
+  grid > c[span-s^="23"] { --grid-cs: 23 }
+  grid > c[span-s^="24"] { --grid-cs: 24 }
+  grid > c[span-s^="25"] { --grid-cs: 25 }
+  grid > c[span-s^="26"] { --grid-cs: 26 }
+  grid > c[span-s^="27"] { --grid-cs: 27 }
+  grid > c[span-s^="28"] { --grid-cs: 28 }
+  grid > c[span-s^="29"] { --grid-cs: 29 }
+  grid > c[span-s^="30"] { --grid-cs: 30 }
+  
+  /* span-s=...+width, span-s=...-end */
+  grid > c[span-s$="+1"], grid > c[span-s="1"] { --grid-ce: 1 }
+  grid > c[span-s$="+2"], grid > c[span-s$="-1"], grid > c[span-s="2"] { --grid-ce: 2 }
+  grid > c[span-s$="+3"], grid > c[span-s$="-2"], grid > c[span-s="3"] { --grid-ce: 3 }
+  grid > c[span-s$="+4"], grid > c[span-s$="-3"], grid > c[span-s="4"] { --grid-ce: 4 }
+  grid > c[span-s$="+5"], grid > c[span-s$="-4"], grid > c[span-s="5"] { --grid-ce: 5 }
+  grid > c[span-s$="+6"], grid > c[span-s$="-5"], grid > c[span-s="6"] { --grid-ce: 6 }
+  grid > c[span-s$="+7"], grid > c[span-s$="-6"], grid > c[span-s="7"] { --grid-ce: 7 }
+  grid > c[span-s$="+8"], grid > c[span-s$="-7"], grid > c[span-s="8"] { --grid-ce: 8 }
+  grid > c[span-s$="+9"], grid > c[span-s$="-8"], grid > c[span-s="9"] { --grid-ce: 9 }
+  grid > c[span-s$="+10"], grid > c[span-s$="-9"], grid > c[span-s="10"] { --grid-ce: 10 }
+  grid > c[span-s$="+11"], grid > c[span-s$="-10"], grid > c[span-s="11"] { --grid-ce: 11 }
+  grid > c[span-s$="+12"], grid > c[span-s$="-11"], grid > c[span-s="12"] { --grid-ce: 12 }
+  grid > c[span-s$="+13"], grid > c[span-s$="-12"], grid > c[span-s="13"] { --grid-ce: 13 }
+  grid > c[span-s$="+14"], grid > c[span-s$="-13"], grid > c[span-s="14"] { --grid-ce: 14 }
+  grid > c[span-s$="+15"], grid > c[span-s$="-14"], grid > c[span-s="15"] { --grid-ce: 15 }
+  grid > c[span-s$="+16"], grid > c[span-s$="-15"], grid > c[span-s="16"] { --grid-ce: 16 }
+  grid > c[span-s$="+17"], grid > c[span-s$="-16"], grid > c[span-s="17"] { --grid-ce: 17 }
+  grid > c[span-s$="+18"], grid > c[span-s$="-17"], grid > c[span-s="18"] { --grid-ce: 18 }
+  grid > c[span-s$="+19"], grid > c[span-s$="-18"], grid > c[span-s="19"] { --grid-ce: 19 }
+  grid > c[span-s$="+20"], grid > c[span-s$="-19"], grid > c[span-s="20"] { --grid-ce: 20 }
+  grid > c[span-s$="+21"], grid > c[span-s$="-20"], grid > c[span-s="21"] { --grid-ce: 21 }
+  grid > c[span-s$="+22"], grid > c[span-s$="-21"], grid > c[span-s="22"] { --grid-ce: 22 }
+  grid > c[span-s$="+23"], grid > c[span-s$="-22"], grid > c[span-s="23"] { --grid-ce: 23 }
+  grid > c[span-s$="+24"], grid > c[span-s$="-23"], grid > c[span-s="24"] { --grid-ce: 24 }
+  grid > c[span-s$="+25"], grid > c[span-s$="-24"], grid > c[span-s="25"] { --grid-ce: 25 }
+  grid > c[span-s$="+26"], grid > c[span-s$="-25"], grid > c[span-s="26"] { --grid-ce: 26 }
+  grid > c[span-s$="+27"], grid > c[span-s$="-26"], grid > c[span-s="27"] { --grid-ce: 27 }
+  grid > c[span-s$="+28"], grid > c[span-s$="-27"], grid > c[span-s="28"] { --grid-ce: 28 }
+  grid > c[span-s$="+29"], grid > c[span-s$="-28"], grid > c[span-s="29"] { --grid-ce: 29 }
+  grid > c[span-s$="+30"], grid > c[span-s$="-29"], grid > c[span-s="30"] { --grid-ce: 30 }
+  grid > c[span-s$="-30"] { --grid-ce: 31 }
+  
+  /* connect vars */
+  grid > c[span-s] { grid-column-end: span var(--grid-ce) }
+  grid > c[span-s*="+"], grid > c[span-s*="-"], grid > c[span-s*=".."] {
+    grid-column-start: var(--grid-cs) }
+  grid > c[span-s*="-"], grid > c[span-s*=".."] {
+    grid-column-end: var(--grid-ce) }
+  grid > c[span-s="row"] { grid-column: 1 / -1 }
+}
+
+/* for window width >= 1600 */
+@media only screen and (min-width: 1599px) {
+  grid[columns-l="1"] { grid-template-columns: repeat(1, 1fr) }
+  grid[columns-l="2"] { grid-template-columns: repeat(2, 1fr) }
+  grid[columns-l="3"] { grid-template-columns: repeat(3, 1fr) }
+  grid[columns-l="4"] { grid-template-columns: repeat(4, 1fr) }
+  grid[columns-l="5"] { grid-template-columns: repeat(5, 1fr) }
+  grid[columns-l="6"] { grid-template-columns: repeat(6, 1fr) }
+  grid[columns-l="7"] { grid-template-columns: repeat(7, 1fr) }
+  grid[columns-l="8"] { grid-template-columns: repeat(8, 1fr) }
+  grid[columns-l="9"] { grid-template-columns: repeat(9, 1fr) }
+  grid[columns-l="10"] { grid-template-columns: repeat(10, 1fr) }
+  grid[columns-l="11"] { grid-template-columns: repeat(11, 1fr) }
+  grid[columns-l="12"] { grid-template-columns: repeat(12, 1fr) }
+  grid[columns-l="13"] { grid-template-columns: repeat(13, 1fr) }
+  grid[columns-l="14"] { grid-template-columns: repeat(14, 1fr) }
+  grid[columns-l="15"] { grid-template-columns: repeat(15, 1fr) }
+  grid[columns-l="16"] { grid-template-columns: repeat(16, 1fr) }
+  grid[columns-l="17"] { grid-template-columns: repeat(17, 1fr) }
+  grid[columns-l="18"] { grid-template-columns: repeat(18, 1fr) }
+  grid[columns-l="19"] { grid-template-columns: repeat(19, 1fr) }
+  grid[columns-l="20"] { grid-template-columns: repeat(20, 1fr) }
+  grid[columns-l="21"] { grid-template-columns: repeat(21, 1fr) }
+  grid[columns-l="22"] { grid-template-columns: repeat(22, 1fr) }
+  grid[columns-l="23"] { grid-template-columns: repeat(23, 1fr) }
+  grid[columns-l="24"] { grid-template-columns: repeat(24, 1fr) }
+  grid[columns-l="25"] { grid-template-columns: repeat(25, 1fr) }
+  grid[columns-l="26"] { grid-template-columns: repeat(26, 1fr) }
+  grid[columns-l="27"] { grid-template-columns: repeat(27, 1fr) }
+  grid[columns-l="28"] { grid-template-columns: repeat(28, 1fr) }
+  grid[columns-l="29"] { grid-template-columns: repeat(29, 1fr) }
+  grid[columns-l="30"] { grid-template-columns: repeat(30, 1fr) }
+  
+  /* span-l=start... */
+  grid > c[span-l^="1"] { --grid-cs: 1 }
+  grid > c[span-l^="2"] { --grid-cs: 2 }
+  grid > c[span-l^="3"] { --grid-cs: 3 }
+  grid > c[span-l^="4"] { --grid-cs: 4 }
+  grid > c[span-l^="5"] { --grid-cs: 5 }
+  grid > c[span-l^="6"] { --grid-cs: 6 }
+  grid > c[span-l^="7"] { --grid-cs: 7 }
+  grid > c[span-l^="8"] { --grid-cs: 8 }
+  grid > c[span-l^="9"] { --grid-cs: 9 }
+  grid > c[span-l^="10"] { --grid-cs: 10 }
+  grid > c[span-l^="11"] { --grid-cs: 11 }
+  grid > c[span-l^="12"] { --grid-cs: 12 }
+  grid > c[span-l^="13"] { --grid-cs: 13 }
+  grid > c[span-l^="14"] { --grid-cs: 14 }
+  grid > c[span-l^="15"] { --grid-cs: 15 }
+  grid > c[span-l^="16"] { --grid-cs: 16 }
+  grid > c[span-l^="17"] { --grid-cs: 17 }
+  grid > c[span-l^="18"] { --grid-cs: 18 }
+  grid > c[span-l^="19"] { --grid-cs: 19 }
+  grid > c[span-l^="20"] { --grid-cs: 20 }
+  grid > c[span-l^="21"] { --grid-cs: 21 }
+  grid > c[span-l^="22"] { --grid-cs: 22 }
+  grid > c[span-l^="23"] { --grid-cs: 23 }
+  grid > c[span-l^="24"] { --grid-cs: 24 }
+  grid > c[span-l^="25"] { --grid-cs: 25 }
+  grid > c[span-l^="26"] { --grid-cs: 26 }
+  grid > c[span-l^="27"] { --grid-cs: 27 }
+  grid > c[span-l^="28"] { --grid-cs: 28 }
+  grid > c[span-l^="29"] { --grid-cs: 29 }
+  grid > c[span-l^="30"] { --grid-cs: 30 }
+  
+  /* span-l=...+width, span-l=...-end */
+  grid > c[span-l$="+1"], grid > c[span-l="1"] { --grid-ce: 1 }
+  grid > c[span-l$="+2"], grid > c[span-l$="-1"], grid > c[span-l="2"] { --grid-ce: 2 }
+  grid > c[span-l$="+3"], grid > c[span-l$="-2"], grid > c[span-l="3"] { --grid-ce: 3 }
+  grid > c[span-l$="+4"], grid > c[span-l$="-3"], grid > c[span-l="4"] { --grid-ce: 4 }
+  grid > c[span-l$="+5"], grid > c[span-l$="-4"], grid > c[span-l="5"] { --grid-ce: 5 }
+  grid > c[span-l$="+6"], grid > c[span-l$="-5"], grid > c[span-l="6"] { --grid-ce: 6 }
+  grid > c[span-l$="+7"], grid > c[span-l$="-6"], grid > c[span-l="7"] { --grid-ce: 7 }
+  grid > c[span-l$="+8"], grid > c[span-l$="-7"], grid > c[span-l="8"] { --grid-ce: 8 }
+  grid > c[span-l$="+9"], grid > c[span-l$="-8"], grid > c[span-l="9"] { --grid-ce: 9 }
+  grid > c[span-l$="+10"], grid > c[span-l$="-9"], grid > c[span-l="10"] { --grid-ce: 10 }
+  grid > c[span-l$="+11"], grid > c[span-l$="-10"], grid > c[span-l="11"] { --grid-ce: 11 }
+  grid > c[span-l$="+12"], grid > c[span-l$="-11"], grid > c[span-l="12"] { --grid-ce: 12 }
+  grid > c[span-l$="+13"], grid > c[span-l$="-12"], grid > c[span-l="13"] { --grid-ce: 13 }
+  grid > c[span-l$="+14"], grid > c[span-l$="-13"], grid > c[span-l="14"] { --grid-ce: 14 }
+  grid > c[span-l$="+15"], grid > c[span-l$="-14"], grid > c[span-l="15"] { --grid-ce: 15 }
+  grid > c[span-l$="+16"], grid > c[span-l$="-15"], grid > c[span-l="16"] { --grid-ce: 16 }
+  grid > c[span-l$="+17"], grid > c[span-l$="-16"], grid > c[span-l="17"] { --grid-ce: 17 }
+  grid > c[span-l$="+18"], grid > c[span-l$="-17"], grid > c[span-l="18"] { --grid-ce: 18 }
+  grid > c[span-l$="+19"], grid > c[span-l$="-18"], grid > c[span-l="19"] { --grid-ce: 19 }
+  grid > c[span-l$="+20"], grid > c[span-l$="-19"], grid > c[span-l="20"] { --grid-ce: 20 }
+  grid > c[span-l$="+21"], grid > c[span-l$="-20"], grid > c[span-l="21"] { --grid-ce: 21 }
+  grid > c[span-l$="+22"], grid > c[span-l$="-21"], grid > c[span-l="22"] { --grid-ce: 22 }
+  grid > c[span-l$="+23"], grid > c[span-l$="-22"], grid > c[span-l="23"] { --grid-ce: 23 }
+  grid > c[span-l$="+24"], grid > c[span-l$="-23"], grid > c[span-l="24"] { --grid-ce: 24 }
+  grid > c[span-l$="+25"], grid > c[span-l$="-24"], grid > c[span-l="25"] { --grid-ce: 25 }
+  grid > c[span-l$="+26"], grid > c[span-l$="-25"], grid > c[span-l="26"] { --grid-ce: 26 }
+  grid > c[span-l$="+27"], grid > c[span-l$="-26"], grid > c[span-l="27"] { --grid-ce: 27 }
+  grid > c[span-l$="+28"], grid > c[span-l$="-27"], grid > c[span-l="28"] { --grid-ce: 28 }
+  grid > c[span-l$="+29"], grid > c[span-l$="-28"], grid > c[span-l="29"] { --grid-ce: 29 }
+  grid > c[span-l$="+30"], grid > c[span-l$="-29"], grid > c[span-l="30"] { --grid-ce: 30 }
+  grid > c[span-l$="-30"] { --grid-ce: 31 }
+  
+  /* connect vars */
+  grid > c[span-l] { grid-column-end: span var(--grid-ce) }
+  grid > c[span-l*="+"], grid > c[span-l*="-"], grid > c[span-l*=".."] {
+    grid-column-start: var(--grid-cs) }
+  grid > c[span-l*="-"], grid > c[span-l*=".."] {
+    grid-column-end: var(--grid-ce) }
+  grid > c[span-l="row"] { grid-column: 1 / -1 }
+}
+
+/* .debug can be added to a grid to visualize its effective cells */
+grid.debug > * {
+--color: rgba(248,110,91 ,0.3);
+background-image:
+  linear-gradient(to bottom, var(--color) 0%, var(--color) 100%);
+}
+grid.debug > :nth-child(6n+2) { --color: rgba(103,126,208,0.3) }
+grid.debug > :nth-child(6n+3) { --color: rgba(224,174,72 ,0.3) }
+grid.debug > :nth-child(6n+4) { --color: rgba(77, 214,115,0.3) }
+grid.debug > :nth-child(6n+5) { --color: rgba(217,103,219,0.3) }
+grid.debug > :nth-child(6n+6) { --color: rgba(94, 204,211,0.3) }
+grid.debug > :nth-child(6n+7) { --color: rgba(248,110,91 ,0.3) }