@import url('https://rsms.me/inter/inter.css');
@import url('https://rsms.me/res/fonts/iaw.css');

:root {
  --sansFont: "Inter";
  --monoFont: "iaw-mono"; 

  --fontSize: 12px;
  --lineHeight: calc(var(--fontSize) * 1.5);

  --h1-size: 2.8rem;
  --h2-size: 2.2rem;
  --h3-size: 1.5rem;
  --h4-size: 1rem;

  --columnGap: calc(var(--lineHeight) * 2);
  --rowGap: var(--lineHeight);

  --foreground-color-rgb: 0,0,0;
  --foreground-color-a: 1;
  --foreground-color: rgba(var(--foreground-color-rgb), var(--foreground-color-a));
  --background-color: white;
}

@supports (font-variation-settings: normal) {
  :root {
    --sansFont: "Inter var";
    --monoFont: "iaw-mono";
  }
}

/* reset */
* {
  font: inherit;
  line-height: inherit;
}
a, abbr, acronym, address, applet, article, aside, audio, b, big, blockquote,
body, canvas, caption, center, cite, code, dd, del, details, dfn, div, dl, dt,
em, embed, fieldset, figcaption, figure, footer, form, grid, h1, h2, h3, h4, h5,
h6, header, hgroup, hr, html, i, iframe, img, ins, kbd, label, legend, li, main,
mark, menu, nav, noscript, object, ol, output, p, pre, q, s, samp, section,
small, span, strike, strong, sub, summary, sup, table, tbody, td, tfoot, th,
thead, time, tr, tt, u, ul, var, video {
  margin: 0;
  padding: 0;
  border: 0;
  vertical-align: baseline;
}
blockquote, q { quotes: none; }
blockquote:before, blockquote:after, q:before, q:after {
  content: "";
  content: none;
}
table {
  border-collapse: collapse;
  border-spacing: 0;
}
a, a:active, a:visited { color: inherit; }





/* document */
html {
  font-family: var(--sansFont), -system-ui, system-ui, sans-serif;
  font-size:   var(--fontSize);
  line-height: var(--lineHeight);
  background:  var(--background-color);
  color:       var(--foreground-color);
}
body {
  padding: calc(var(--lineHeight)* 2);
}
@media only screen and (max-width: 600px) {
  body {
    padding: var(--lineHeight);
  }
}

.compact { 
  --gap: 0
}

hr {
  margin-top: -0.5px;
  margin-bottom: -0.5px;
  height: 1px;
  background-color: var(--foreground-color);
}

h1 { 
  font-size: var(--h1-size); 
  line-height: calc(var(--lineHeight) * 2);
}
h2 { 
  font-size: var(--h2-size); 
  line-height: calc(var(--lineHeight) * 2);
}
h3 { font-size: var(--h3-size); }
h4 { font-size: var(--h4-size); }

/* large headers */
h1.large, .h1.large {
  --h1-size: 4rem;
  line-height: calc(var(--lineHeight) * 3);
}
h1.xlarge, .h1.xlarge {
  --h1-size: 5.5rem;
  line-height: calc(var(--lineHeight) * 4);
}
h1.xxlarge, .h1.xxlarge {
  --h1-size: 7.5rem;
  line-height: calc(var(--lineHeight) * 5);
}
h1.xxxlarge, .h1.xxxlarge {
  --h1-size: 10.5rem;
  line-height: calc(var(--lineHeight) * 7);
}
/* small text */
.small {
  font-size: 0.85rem;
  line-height: var(--lineHeight);
}
.xsmall {
  font-size: 0.8em;
  line-height: calc(var(--lineHeight) * 0.75);
  padding-top: calc(var(--lineHeight) * 0.25);
}
.xxsmall {
  font-size: 0.65em;
  line-height: calc(var(--lineHeight) * 0.7);
  padding-top: calc(var(--lineHeight) * 0.3);
}
.xxxsmall {
  font-size: 0.5em;
  line-height: calc(var(--lineHeight) * 0.5);
  padding-bottom: calc(var(--lineHeight) * 0.25);
}

/* visualize base grid */
:root {
  --base-grid-color1: rgba(143, 255, 131, 0.585);
  --base-grid-color2: rgba(119, 124, 255, 0.1);
}

.show-base-grid {
  --baseline: calc(var(--lineHeight) / 2);
  background-image: repeating-linear-gradient(
    0deg,
    var(--base-grid-color2),
    var(--base-grid-color2) 1px,
    transparent 1px,
    transparent calc(var(--baseline) / 2),
    var(--base-grid-color1) calc(calc(var(--baseline) / 2)),
    var(--base-grid-color1) calc(calc(var(--baseline) / 2) + 1px),
    transparent calc(calc(var(--baseline) / 2) + 1px),
    transparent var(--baseline)
  );
  background-repeat: repeat-y;
  background-size: 100% var(--baseline);
  background-position: 0 0.5px;
}
/* text */
.single-line {
  white-space: nowrap;
  overflow-x: clip;
  text-overflow: ellipsis;
}
/* layout mode */
.block { display: block }
.inline { display: inline-block }
.flex-h { display: -webkit-box; display: flex; -webkit-box-orient: horizontal; -webkit-box-direction: normal; flex-direction: row }
.flex-v { display: -webkit-box; display: flex; -webkit-box-orient: vertical; -webkit-box-direction: normal; flex-direction: column }
/* relative positioning */
.top {}
.left { text-align:left }
.right { text-align:right }
.bottom { }
.center { text-align:center }
.flex-v.center { align-self:center }
.flex-h .bottom { align-self:flex-end }
img.top { -o-object-position: center top; object-position: center top; align-self:center }
img.center { -o-object-position: center center; object-position: center center; align-self:center }
img.bottom { -o-object-position: center bottom; object-position: center bottom; align-self:center }
img.left.top { -o-object-position: left top; object-position: left top; align-self:flex-start }
img.left.center { -o-object-position: left center; object-position: left center; align-self:flex-start }
img.left.bottom { -o-object-position: left bottom; object-position: left bottom; align-self:flex-start }
img.right.top { -o-object-position: right top; object-position: right top; align-self:flex-end }
img.right.center { -o-object-position: right center; object-position: right center; align-self:flex-end }
img.right.bottom { -o-object-position: right bottom; object-position: right bottom; align-self:flex-end }
/* spacing */
.padding0 { padding: 0 }
.padding1 { padding: calc(var(--lineHeight) * 1) }
.padding2 { padding: calc(var(--lineHeight) * 2) }
.padding3 { padding: calc(var(--lineHeight) * 3) }
.padding4 { padding: calc(var(--lineHeight) * 4) }
.padding5 { padding: calc(var(--lineHeight) * 5) }
.padding5 { padding: calc(var(--lineHeight) * 6) }
.padding5 { padding: calc(var(--lineHeight) * 7) }
.padding5 { padding: calc(var(--lineHeight) * 8) }
.margin0 { margin: 0 }
.margin1 { margin: calc(var(--lineHeight) * 1) }
.margin2 { margin: calc(var(--lineHeight) * 2) }
.margin3 { margin: calc(var(--lineHeight) * 3) }
.margin4 { margin: calc(var(--lineHeight) * 4) }
.margin5 { margin: calc(var(--lineHeight) * 5) }
.margin5 { margin: calc(var(--lineHeight) * 6) }
.margin5 { margin: calc(var(--lineHeight) * 7) }
.margin5 { margin: calc(var(--lineHeight) * 8) }
/* size */
.w-1 { width: calc(var(--lineHeight) * 1) }
.w-2 { width: calc(var(--lineHeight) * 2) }
.w-3 { width: calc(var(--lineHeight) * 3) }
.w-4 { width: calc(var(--lineHeight) * 4) }
.w-5 { width: calc(var(--lineHeight) * 5) }
.w-6 { width: calc(var(--lineHeight) * 6) }
.w-7 { width: calc(var(--lineHeight) * 7) }
.w-8 { width: calc(var(--lineHeight) * 8) }
.w-9 { width: calc(var(--lineHeight) * 9) }
.w-10 { width: calc(var(--lineHeight) * 10) }
.w-11 { width: calc(var(--lineHeight) * 11) }
.w-12 { width: calc(var(--lineHeight) * 12) }
.w-13 { width: calc(var(--lineHeight) * 13) }
.w-14 { width: calc(var(--lineHeight) * 14) }
.w-15 { width: calc(var(--lineHeight) * 15) }
.w-16 { width: calc(var(--lineHeight) * 16) }
.w-17 { width: calc(var(--lineHeight) * 17) }
.w-18 { width: calc(var(--lineHeight) * 18) }
.w-19 { width: calc(var(--lineHeight) * 19) }
.w-20 { width: calc(var(--lineHeight) * 20) }
.w-21 { width: calc(var(--lineHeight) * 21) }
.w-22 { width: calc(var(--lineHeight) * 22) }
.w-23 { width: calc(var(--lineHeight) * 23) }
.w-24 { width: calc(var(--lineHeight) * 24) }
.w-25 { width: calc(var(--lineHeight) * 25) }
.w-26 { width: calc(var(--lineHeight) * 26) }
.w-27 { width: calc(var(--lineHeight) * 27) }
.w-28 { width: calc(var(--lineHeight) * 28) }
.w-29 { width: calc(var(--lineHeight) * 29) }
.w-30 { width: calc(var(--lineHeight) * 30) }
.w-31 { width: calc(var(--lineHeight) * 31) }
.w-32 { width: calc(var(--lineHeight) * 32) }
.w-33 { width: calc(var(--lineHeight) * 33) }
.w-34 { width: calc(var(--lineHeight) * 34) }
.w-35 { width: calc(var(--lineHeight) * 35) }
.w-36 { width: calc(var(--lineHeight) * 36) }
.w-37 { width: calc(var(--lineHeight) * 37) }
.w-38 { width: calc(var(--lineHeight) * 38) }
.w-39 { width: calc(var(--lineHeight) * 39) }
.w-40 { width: calc(var(--lineHeight) * 40) }
.w-full { width: 100%; }
.h-1 { height: calc(var(--lineHeight) * 1) }
.h-2 { height: calc(var(--lineHeight) * 2) }
.h-3 { height: calc(var(--lineHeight) * 3) }
.h-4 { height: calc(var(--lineHeight) * 4) }
.h-5 { height: calc(var(--lineHeight) * 5) }
.h-6 { height: calc(var(--lineHeight) * 6) }
.h-7 { height: calc(var(--lineHeight) * 7) }
.h-8 { height: calc(var(--lineHeight) * 8) }
.h-9 { height: calc(var(--lineHeight) * 9) }
.h-10 { height: calc(var(--lineHeight) * 10) }
.h-11 { height: calc(var(--lineHeight) * 11) }
.h-12 { height: calc(var(--lineHeight) * 12) }
.h-13 { height: calc(var(--lineHeight) * 13) }
.h-14 { height: calc(var(--lineHeight) * 14) }
.h-15 { height: calc(var(--lineHeight) * 15) }
.h-16 { height: calc(var(--lineHeight) * 16) }
.h-17 { height: calc(var(--lineHeight) * 17) }
.h-18 { height: calc(var(--lineHeight) * 18) }
.h-19 { height: calc(var(--lineHeight) * 19) }
.h-20 { height: calc(var(--lineHeight) * 20) }
.h-21 { height: calc(var(--lineHeight) * 21) }
.h-22 { height: calc(var(--lineHeight) * 22) }
.h-23 { height: calc(var(--lineHeight) * 23) }
.h-24 { height: calc(var(--lineHeight) * 24) }
.h-25 { height: calc(var(--lineHeight) * 25) }
.h-26 { height: calc(var(--lineHeight) * 26) }
.h-27 { height: calc(var(--lineHeight) * 27) }
.h-28 { height: calc(var(--lineHeight) * 28) }
.h-29 { height: calc(var(--lineHeight) * 29) }
.h-30 { height: calc(var(--lineHeight) * 30) }
.h-31 { height: calc(var(--lineHeight) * 31) }
.h-32 { height: calc(var(--lineHeight) * 32) }
.h-33 { height: calc(var(--lineHeight) * 33) }
.h-34 { height: calc(var(--lineHeight) * 34) }
.h-35 { height: calc(var(--lineHeight) * 35) }
.h-36 { height: calc(var(--lineHeight) * 36) }
.h-37 { height: calc(var(--lineHeight) * 37) }
.h-38 { height: calc(var(--lineHeight) * 38) }
.h-39 { height: calc(var(--lineHeight) * 39) }
.h-40 { height: calc(var(--lineHeight) * 40) }
/* opacity */
.opacity0  { opacity:0; }
.opacity1  { opacity:0.1; }
.opacity2  { opacity:0.2; }
.opacity3  { opacity:0.3; }
.opacity4  { opacity:0.4; }
.opacity5  { opacity:0.5; }
.opacity6  { opacity:0.6; }
.opacity7  { opacity:0.7; }
.opacity8  { opacity:0.8; }
.opacity9  { opacity:0.9; }
.opacity10 { opacity:1; }
/* colors */
:root {
  --red:    rgb(238, 39, 17);
  --blue:   blue;
  --green:  rgb(18, 192, 91);
  --yellow: rgb(249, 191, 15);
}
.red    { color: var(--red); }
.bg-red    { background-color: var(--red); }
.blue   { color: var(--blue); }
.bg-blue   { background-color: var(--blue); }
.green  { color: var(--green); }
.bg-green  { background-color: var(--green); }
.yellow { color: var(--yellow); }
.bg-yellow { background-color: var(--yellow); }