:root {
--x0:  0; 
--x1:  4px; 
--x2:  8px; 
--x3:  12px; 
--x4:  16px; 
--x5:  20px; 
--x6:  24px; 
--x7:  28px;
--x8:  32px; 
--x9:  36px; 
--x10: 40px;
--x11: 44px;
--x12: 48px;
--x13: 52px;
--x14: 56px;
--x15: 60px;

--header-height: var(--x12);

--sans: 1em/1.6 system-ui, -apple-system, BlinkMacSystemFont, Segoe UI, Roboto, Oxygen, Ubuntu, Cantarell, Droid Sans, Helvetica Neue, Fira Sans, sans-serif;
--mono: SFMono-Regular, Consolas, 'Liberation Mono', Menlo, Courier, 'Courier New', monospace;
--shadow-bg: 0 var(--x2) var(--x4) var(--z0);
--shadow: 0 var(--x1) var(--x8) rgba(0,0,0,0.4);
}

.inverted .undo-inverted, :root  { 

--z0: #111827;  --a0: #2a1c26; --b0: #2a2429;  --c0: #162730; 
--z1: #1e2433;  --a1: #421f24; --b1: #45322a;  --c1: #1c3b3b; 
--z2: #2b313f;  --a2: #5a2122; --b2: #60422b;  --c2: #1f4f47; 
--z3: #393e4c;  --a3: #71231f; --b3: #7b522a;  --c3: #226452; 
--z4: #474c59;  --a4: #89221c; --b4: #976328;  --c4: #227a5e; 
--z5: #565a66;  --a5: #a22018; --b5: #b47424;  --c5: #20906a; 
--z6: #656974;  --a6: #bb1b13; --b6: #d1861d;  --c6: #1ba776; 
--z7: #747782;  --a7: #d4100b; --b7: #f0990f;  --c7: #0ebf82; 
--z8: #848790;  --a8: #e62b18; --b8: #ffa723;  --c8: #31ce8f; 
--z9: #94969f;  --a9: #ee5035; --b9: #ffb146;  --c9: #59d49c; 
--z10: #a4a6ae; --a10: #f66d50;--b10: #ffbc63; --c10: #76dbaa; 
--z11: #b4b7bd; --a11: #fb866c;--b11: #ffc67d; --c11: #8fe0b7; 
--z12: #c5c7cc; --a12: #ff9f88;--b12: #ffd197; --c12: #a7e6c5; 
--z13: #d6d8db; --a13: #ffb7a5;--b13: #ffdbb1; --c13: #bdecd3; 
--z14: #e7e9eb; --a14: #ffcfc3;--b14: #ffe6cb; --c14: #d2f1e1; 
--z15: #f9fafb; --a15: #fee6e1;--b15: #fef1e5; --c15: #e8f6ef; 

--d0: #152239;  --e0: #181e39; --f0: #1f1d39;  --g0: #291d30; 
--d1: #1a3050;  --e1: #202651; --f1: #2f2251;  --g1: #43223b; 
--d2: #1d3d69;  --e2: #282e69; --f2: #3f2769;  --g2: #5e2647; 
--d3: #1e4c82;  --e3: #303782; --f3: #502b82;  --g3: #7a2953; 
--d4: #1e5a9d;  --e4: #383f9d; --f4: #622e9d;  --g4: #962a5f; 
--d5: #1c69b8;  --e5: #4047b8; --f5: #7430b8;  --g5: #b32a6c; 
--d6: #1779d4;  --e6: #4750d4; --f6: #8732d4;  --g6: #d12678; 
--d7: #0b89f0;  --e7: #4e59f0; --f7: #9933f0;  --g7: #ef2085; 
--d8: #3797ff;  --e8: #6366ff; --f8: #aa43ff;  --g8: #ff3892; 
--d9: #62a3ff;  --e9: #7e78ff; --f9: #b85fff;  --g9: #ff5c9f; 
--d10: #7fafff; --e10: #958aff; --f10: #c477ff;--g10: #ff78ac; 
--d11: #98bbfe; --e11: #a99cff; --f11: #cf8fff;--g11: #ff91b9; 
--d12: #aec8fe; --e12: #bbafff; --f12: #daa5ff;--g12: #ffa8c6; 
--d13: #c3d4fd; --e13: #cdc2fe; --f13: #e3bbfe;--g13: #ffbed4; 
--d14: #d7e2fd; --e14: #ddd6fd; --f14: #ebd1fd;--g14: #ffd4e1; 
--d15: #eaeffc; --e15: #ece9fc; --f15: #f3e8fc;--g15: #fde9ef;

--accent0:  var(--d0);  --comp0:  var(--g0);
--accent1:  var(--d1);  --comp1:  var(--g1);
--accent2:  var(--d2);  --comp2:  var(--g2);
--accent3:  var(--d3);  --comp3:  var(--g3);
--accent4:  var(--d4);  --comp4:  var(--g4);
--accent5:  var(--d5);  --comp5:  var(--g5);
--accent6:  var(--d6);  --comp6:  var(--g6);
--accent7:  var(--d7);  --comp7:  var(--g7);
--accent8:  var(--d8);  --comp8:  var(--g8);
--accent9:  var(--d9);  --comp9:  var(--g9);
--accent10: var(--d10); --comp10: var(--g10);
--accent11: var(--d11); --comp11: var(--g11);
--accent12: var(--d12); --comp12: var(--g12);
--accent13: var(--d13); --comp13: var(--g13);
--accent14: var(--d14); --comp14: var(--g14);
--accent15: var(--d15); --comp15: var(--g15);

}

.inverted {
--z0: #ffffff;  --a0: #ffebe5;  --b0: #fff5e9;  --c0: #edfaf3; 
--z1: #ececee;  --a1: #ffd2c6;  --b1: #ffeace;  --c1: #d7f5e4; 
--z2: #dadade;  --a2: #ffbaa7;  --b2: #ffdfb3;  --c2: #c1efd5; 
--z3: #c8c8ce;  --a3: #ffa28a;  --b3: #ffd399;  --c3: #aae9c7; 
--z4: #b6b6be;  --a4: #fe886d;  --b4: #ffc87f;  --c4: #92e2b9; 
--z5: #a4a5ae;  --a5: #f76e51;  --b5: #ffbd64;  --c5: #78dcab; 
--z6: #93949e;  --a6: #ef5135;  --b6: #ffb247;  --c6: #5ad59d; 
--z7: #82838f;  --a7: #e62c18;  --b7: #ffa723;  --c7: #31ce8f; 
--z8: #727380;  --a8: #d30d0a;  --b8: #ef980e;  --c8: #0dbe81; 
--z9: #616371;  --a9: #b91612;  --b9: #cf841c;  --c9: #18a574; 
--z10: #525463; --a10: #9e1a17; --b10: #b17122; --c10: #1d8c68; 
--z11: #424555; --a11: #851b1a; --b11: #935e26; --c11: #1e745b; 
--z12: #333647; --a12: #6c1b1c; --b12: #764c27; --c12: #1d5d4e; 
--z13: #25283a; --a13: #53191e; --b13: #5a3a27; --c13: #1a4742; 
--z14: #171b2d; --a14: #3b1620; --b14: #3e2a26; --c14: #153236; 
--z15: #080c21; --a15: #221320; --b15: #231a23; --c15: #0f1e2a; 

--d0: #eff3ff;  --e0: #f2eeff;  --f0: #f9ecff;  --g0: #ffedf3; 
--d1: #dbe5ff;  --e1: #e2d9ff;  --f1: #f0d5ff;  --g1: #ffd7e5; 
--d2: #c7d8ff;  --e2: #d1c5ff;  --f2: #e7bfff;  --g2: #ffc1d6; 
--d3: #b2caff;  --e3: #bfb2ff;  --f3: #dda8ff;  --g3: #ffabc8; 
--d4: #9bbdff;  --e4: #ac9eff;  --f4: #d290ff;  --g4: #ff93bb; 
--d5: #81b0ff;  --e5: #978bff;  --f5: #c679ff;  --g5: #ff7aad; 
--d6: #63a3ff;  --e6: #7f78ff;  --f6: #b960ff;  --g6: #ff5da0; 
--d7: #3897ff;  --e7: #6366ff;  --f7: #ab44ff;  --g7: #ff3992; 
--d8: #0788f0;  --e8: #4d58f0;  --f8: #9932f0;  --g8: #ef1e85; 
--d9: #1077d2;  --e9: #444ed2;  --f9: #842fd2;  --g9: #cf2277; 
--d10: #1466b5; --e10: #3b44b5; --f10: #702cb5; --g10: #b02369; 
--d11: #165599; --e11: #323a99; --f11: #5d2899; --g11: #91235c; 
--d12: #15467e; --e12: #29317e; --f12: #4a247e; --g12: #74214f; 
--d13: #143664; --e13: #212764; --f13: #381f64; --g13: #581e42; 
--d14: #11284b; --e14: #181e4b; --f14: #271a4b; --g14: #3c1a36; 
--d15: #0d1a33; --e15: #101633; --f15: #161433; --g15: #21142a;

--accent0:  var(--d0);  --comp0:  var(--g0);
--accent1:  var(--d1);  --comp1:  var(--g1);
--accent2:  var(--d2);  --comp2:  var(--g2);
--accent3:  var(--d3);  --comp3:  var(--g3);
--accent4:  var(--d4);  --comp4:  var(--g4);
--accent5:  var(--d5);  --comp5:  var(--g5);
--accent6:  var(--d6);  --comp6:  var(--g6);
--accent7:  var(--d7);  --comp7:  var(--g7);
--accent8:  var(--d8);  --comp8:  var(--g8);
--accent9:  var(--d9);  --comp9:  var(--g9);
--accent10: var(--d10); --comp10: var(--g10);
--accent11: var(--d11); --comp11: var(--g11);
--accent12: var(--d12); --comp12: var(--g12);
--accent13: var(--d13); --comp13: var(--g13);
--accent14: var(--d14); --comp14: var(--g14);
--accent15: var(--d15); --comp15: var(--g15);

--shadow-bg: 0 var(--x2) var(--x4) var(--z3);
}


* {
  box-sizing: border-box;
}


html {
  font-size: 1em;
  line-height: 1.4;
  -ms-text-size-adjust: 100%;
  -webkit-text-size-adjust: 100%;
}

::-moz-selection {
  background: #b3d4fc;
  text-shadow: none;
}

::selection {
  background: #b3d4fc;
  text-shadow: none;
}

body::-webkit-scrollbar {
    background: transparent;
    width: 8px;
    padding-right: 4px;
}
 
body::-webkit-scrollbar-track {
    background: transparent;
}
 
body::-webkit-scrollbar-thumb {
  background-color: var(--z3);
  border-radius: 20px;
}

body {
    margin: 0;
    padding: var(--x4);
    font: var(--sans);
    font-weight: 400;
    font-style: normal;
    text-rendering: optimizeLegibility;
    -webkit-font-smoothing: antialiased;
    font-smooth: always;
    color: var(--z14);
    background-color: var(--z1);
}

.inverted body {
  -webkit-font-smoothing: auto;
  font-smooth: auto;
}

img, iframe {border: none; max-width: 100%}
a {color: var(--accent10);  text-decoration:none}
a:hover {color: var(--accent12); text-decoration: underline}
pre {font: 1em/1.6 var(--mono); background: var(--accent2); padding: 1em; overflow: auto}
code {font: 1em/1.6 var(--mono);}
blockquote { background: var(--z0); padding: var(--x8); margin: 0;}

 /* Headlines */

h1,h2,h3,h4,h5,h6 {margin: 0.6em 0; font-weight: 600;}
h1 {font-size: 2.625em; line-height: 1.2}
h2 {font-size: 1.625em; line-height: 1.2}
h3 {font-size: 1.3125em; line-height: 1.24}
h4 {font-size: 1.1875em; line-height: 1.23}
h5,h6 {font-size: 1em; font-weight:bold}

/* Table */

table {border-collapse: collapse; border-spacing: 0; margin:1em 0}
th, td {text-align: left; vertical-align: top; border: 1px solid; padding: 0.4em}
thead,tfoot {background: var(--z2)}
pre,code,input,select,textarea,button,img {border-radius: var(--x1)}
input, select, textarea {font-size: 1em; color:var(--accent4); background: var(--accent2); border: 0; padding: 0.6em}
.grid, .grid-mobile {display: flex; flex-flow: row wrap}
[style*="--c:"], .grid>.grid, .cell {flex:var(--c,1); margin:var(--x2)}
[style*="--c:"]:first-child, .cell:first-child {margin-left:0}
[style*="--c:"]:last-child, .cell:last-child {margin-right:0}
.cell-grow { flex-grow: 1; }
.cell-shrink { flex-grow: 0; }

button, input[type=submit], input[type=reset], input[type="button"] { 
  -webkit-appearance: none; 
  font-size: 1em; 
  line-height: var(--x8);
  font-weight: bold;
  display: inline-block; 
  color: var(--z0); 
  background: var(--accent7);  
  border: 0; 
  padding: var(--x2) var(--x4); 
  cursor: pointer; 
  text-align: center;
}


hr {
  display: block;
  height: 1px;
  border: 0;
  border-top: 1px solid var(--z4);
  margin: 1em 0;
  padding: 0;
}

audio, canvas, iframe, img, svg, video {
  vertical-align: middle;
}

fieldset {
  border: 0;
  margin: 0;
  padding: 0;
}

textarea {
  resize: vertical;
}

details {
  background-color: var(--z2);
  margin-bottom: var(--x2);
  border-radius: var(--x1);
  overflow: hidden;
  color: var(--z8);
}

summary {
  display: block;
  background: var(--z2);
  padding: var(--x4);
  padding-left: var(--x10);
  color: var(--z12);
  position: relative;
  cursor: pointer;
}

summary:before {
  content: '';
  border-width: .4rem;
  border-style: solid;
  border-color: transparent transparent transparent var(--z15);
  position: absolute;
  top: var(--x6);
  left: var(--x4);
  transform: rotate(0);
  transform-origin: .2rem 50%;
  transition: .25s transform ease;
}


details > div {
  padding:  0 var(--x4) var(--x4) var(--x10);
}



/* THE MAGIC 🧙‍♀️ */
details[open] > summary:before {
  transform: rotate(90deg);
}


details summary::marker {
  display:none;
}

details > ul {
  padding-bottom: 1rem;
  margin-bottom: 0;
}

.sticky {
  position: fixed;
  top:  0;
  left:  0;
  right:  0;
  z-index: 100;
}

.sticky.sticky-bottom {
  top:  auto;
  bottom: 0;
}

.hidden {
  display: none !important;
}

@media (max-width: 960px) {
  .grid { display: block; }
  .grid-mobile { display: flex; }
  [style*="--c:"], .grid>.grid, .cell {flex:var(--c,1); margin: 0}
}

.container {
  max-width: 1200px;
  margin: var(--header-height) auto;
}