/* feather.css : terse utility classes */

/*

UI idea:
  rounded things are never scrollable
  square things are scrollable
  
  maybe doubling up like this (or having a class that does)
  is a good ui pattern

*/

/*  cascade layers: later layers win.  unlayered rules (e.g. a consuming
    page's own <style>) beat every layer here, so apps can always override
    feather without specificity battles.  */
@layer reset, tokens, page, prose, utilities;


/*  part 1: resets  */

@layer reset {

*,
*::before,
*::after {
  box-sizing: border-box;
  margin: 0;
}
:not(:defined) {  /* hide undefined web components */
  display: none;
}
html {
  -moz-text-size-adjust: none;
  -webkit-text-size-adjust: none;
  text-size-adjust: none;
  overflow: hidden;
  font-size: 16px;
}
body, h1, h2, h3, h4, p,
figure, blockquote, dl, dd {
  margin-block-end: 0;
}
ul[role='list'],
ol[role='list'] {
  list-style: none;
}
h1, h2, h3, h4, h5, h6,
button, input, label, select {
  line-height: inherit;
}
button, summary {
  cursor: pointer;
  touch-action: manipulation;
  text-align: unset;
  text-transform: inherit;
}
h1, h2, h3,
h4, h5, h6 {
  text-wrap: balance;
  font-size: 1em;
}
a {
  text-decoration: none;
  color: inherit;
}
iframe {
  border: none;
  background: white;
}
img,
picture {
  max-width: 100%;
  display: block;
}
hr {
  border: none;
  height: 1px;
  width: 100%;
  background-color: var(--f9)
}
input, button,
textarea, select {
  padding: unset;
  font-family: unset;
  font-size: 1em;
  background: unset;
  border: unset;
  border-radius: unset;
  color: unset;
  letter-spacing: unset;
  line-height: inherit;
  outline: none; }
textarea  { resize: none; }
b, strong { font-weight: bold; }
i         { font-style: italic; }

}  /* end @layer reset */


/*  part 2: variables  */

@layer tokens {

:root {
  /* the page follows the os, and SAYS so: native chrome (scrollbars, inputs,
     pickers) reads this, and so does an svg referenced as an image — a
     borrowed favicon whose light/dark switch lives inside the file resolves
     prefers-color-scheme against the used color scheme of the element that
     references it, which is light until this is declared. */
  color-scheme: light dark;

  --font-mono: Consolas, "SF Mono", Menlo, Monaco, "Liberation Mono", "DejaVu Mono", "Courier New", monospace;
  --font-serif: "Georgia", "Times New Roman", "Liberation Serif", "DejaVu Serif", Times, serif;
  --font-sans: Roboto, "Helvetica Neue", Helvetica, Arial, "Liberation Sans", "DejaVu Sans", sans-serif;
  --mono-scale:   0.9;
  --kerning:      0.024em;
  --letter-spacing: normal;
  --line-height:  1.2;

  --s0:   0px;
  --s1:   2px;
  --s2:   4px;
  --s3:   8px;
  --s4:  12px;
  --s5:  16px;
  --s6:  20px;
  --s7:  25px;
  --s8:  30px;
  --s9:  36px;
  --s10: 44px;
  --s11: 52px;
  --s12: 62px;
  --s13: 74px;
  --s14: 88px;
  --s15: 104px;
  --s16: 122px;
  --s17: 143px;
  --s18: 168px;
  --s19: 196px;
  --s20: 228px;

  --p-page:       36px clamp(16px, 4vw, 24px) clamp(100px, 36vh, 400px);

  --light-f-4:    #334dde;
  --light-f-3:    #286e2c;
  --light-f-2:    #e87800;
  --light-f-1:    #d32f2f;

  --light-b-4:    #bbdefb;
  --light-b-3:    #c8e6c9;
  --light-b-2:    #fff9c4;
  --light-b-1:    #ffccbc;

  --dark-f-4:     #8899ff;
  --dark-f-3:     #66f699;
  --dark-f-2:     #ffeb6b;
  --dark-f-1:     #ff6d40;

  --dark-b-4:     #1a237e;
  --dark-b-3:     #1b5e20;
  --dark-b-2:     #472e12;
  --dark-b-1:     #560c0c;

  --light-selection: #bbdefb;
  --dark-selection:  #3f51b5;
}
:root {
  --focus-color: #0000ff77;
  --active-offset: 10%;
  --percent-scale: 50%;
  
  --f-1: var(--light-f-1);
  --f-2: var(--light-f-2);
  --f-3: var(--light-f-3);
  --f-4: var(--light-f-4);
  
  --b-1: var(--light-b-1);
  --b-2: var(--light-b-2);
  --b-3: var(--light-b-3);
  --b-4: var(--light-b-4);

  --selection: var(--light-selection);


  --b0:  #fafafa;
  --b1:  hsl(0 0% 96%);
  --b2:  hsl(0 0% 93%);
  --b3:  hsl(0 0% 90%);
  --b4:  hsl(0 0% 86%);
  --b5:  hsl(0 0% 80%);
  --b6:  hsl(0 0% 70%);
  --b7:  hsl(0 0% 58%);
  --b8:  hsl(0 0% 44%);
  --b9:  hsl(0 0% 30%);
  --b10: hsl(0 0% 15%);

  --f0:  #000;
  --f1:  hsl(0 0% 18%);
  --f2:  hsl(0 0% 25%);
  --f3:  hsl(0 0% 32%);
  --f4:  hsl(0 0% 40%);
  --f5:  hsl(0 0% 48%);
  --f6:  hsl(0 0% 56%);
  --f7:  hsl(0 0% 64%);
  --f8:  hsl(0 0% 72%);
  --f9:  hsl(0 0% 84%);
  --f10: hsl(0 0% 92%);
}

/* a palette, opted into by class: it restates the greyscale ramp above in a
   hue, so anything drawn in the b and f ramps comes along without knowing. */
.spring {
  --b0:  hsl(150 35% 97%);
  --b1:  hsl(150 34% 95%);
  --b2:  hsl(150 33% 92%);
  --b3:  hsl(150 32% 89%);
  --b4:  hsl(150 31% 85%);
  --b5:  hsl(150 30% 79%);
  --b6:  hsl(150 29% 69%);
  --b7:  hsl(150 28% 57%);
  --b8:  hsl(150 27% 44%);
  --b9:  hsl(150 26% 31%);
  --b10: hsl(150 25% 20%);

  --f0:  hsl(150 50% 15%);
  --f1:  hsl(150 47% 20%);
  --f2:  hsl(150 44% 26%);
  --f3:  hsl(150 42% 32%);
  --f4:  hsl(150 40% 38%);
  --f5:  hsl(150 38% 44%);
  --f6:  hsl(150 36% 52%);
  --f7:  hsl(150 34% 60%);
  --f8:  hsl(150 32% 70%);
  --f9:  hsl(150 30% 82%);
  --f10: hsl(150 28% 91%);
}
.summer {
  --b0:  hsl(8 70% 97%);
  --b1:  hsl(8 65% 95%);
  --b2:  hsl(8 60% 92%);
  --b3:  hsl(8 55% 89%);
  --b4:  hsl(8 50% 85%);
  --b5:  hsl(8 48% 78%);
  --b6:  hsl(8 46% 68%);
  --b7:  hsl(8 44% 58%);
  --b8:  hsl(8 42% 46%);
  --b9:  hsl(8 40% 35%);
  --b10: hsl(8 38% 27%);

  --f0:  hsl(8 65% 20%);
  --f1:  hsl(8 60% 26%);
  --f2:  hsl(8 55% 32%);
  --f3:  hsl(8 50% 38%);
  --f4:  hsl(8 48% 44%);
  --f5:  hsl(8 46% 50%);
  --f6:  hsl(8 44% 58%);
  --f7:  hsl(8 42% 66%);
  --f8:  hsl(8 40% 74%);
  --f9:  hsl(8 38% 84%);
  --f10: hsl(8 36% 92%);
}
.autumn {
  --b0:  hsl(38 80% 97%);
  --b1:  hsl(38 75% 95%);
  --b2:  hsl(38 70% 92%);
  --b3:  hsl(38 65% 89%);
  --b4:  hsl(38 60% 85%);
  --b5:  hsl(38 55% 78%);
  --b6:  hsl(38 50% 68%);
  --b7:  hsl(38 47% 58%);
  --b8:  hsl(38 44% 46%);
  --b9:  hsl(38 41% 35%);
  --b10: hsl(38 38% 27%);

  --f0:  hsl(38 70% 20%);
  --f1:  hsl(38 65% 26%);
  --f2:  hsl(38 60% 32%);
  --f3:  hsl(38 55% 38%);
  --f4:  hsl(38 52% 44%);
  --f5:  hsl(38 50% 50%);
  --f6:  hsl(38 48% 58%);
  --f7:  hsl(38 46% 66%);
  --f8:  hsl(38 44% 74%);
  --f9:  hsl(38 42% 84%);
  --f10: hsl(38 40% 92%);
}
.winter {
  --b0:  hsl(205 70% 97%);
  --b1:  hsl(205 65% 95%);
  --b2:  hsl(205 60% 92%);
  --b3:  hsl(205 55% 89%);
  --b4:  hsl(205 50% 85%);
  --b5:  hsl(205 48% 78%);
  --b6:  hsl(205 46% 68%);
  --b7:  hsl(205 44% 58%);
  --b8:  hsl(205 42% 46%);
  --b9:  hsl(205 40% 35%);
  --b10: hsl(205 38% 27%);

  --f0:  hsl(205 55% 18%);
  --f1:  hsl(205 52% 24%);
  --f2:  hsl(205 50% 30%);
  --f3:  hsl(205 48% 36%);
  --f4:  hsl(205 46% 42%);
  --f5:  hsl(205 44% 48%);
  --f6:  hsl(205 42% 56%);
  --f7:  hsl(205 40% 64%);
  --f8:  hsl(205 38% 72%);
  --f9:  hsl(205 36% 82%);
  --f10: hsl(205 34% 91%);
}

@media (prefers-color-scheme: dark) {
  :root {
    --focus-color: #6666ff77;
    --active-offset: 10%;
    --percent-scale: 150%;

    --f-1: var(--dark-f-1);
    --f-2: var(--dark-f-2);
    --f-3: var(--dark-f-3);
    --f-4: var(--dark-f-4);
    
    --b-1: var(--dark-b-1);
    --b-2: var(--dark-b-2);
    --b-3: var(--dark-b-3);
    --b-4: var(--dark-b-4);

    --selection: var(--dark-selection);

    --b0:  #000000;
    --b1:  hsl(0 0% 7%);
    --b2:  hsl(0 0% 9%);
    --b3:  hsl(0 0% 12%);
    --b4:  hsl(0 0% 16%);
    --b5:  hsl(0 0% 22%);
    --b6:  hsl(0 0% 30%);
    --b7:  hsl(0 0% 38%);
    --b8:  hsl(0 0% 48%);
    --b9:  hsl(0 0% 60%);
    --b10: hsl(0 0% 72%);

    --f0:  #fff;
    --f1:  hsl(0 0% 84%);
    --f2:  hsl(0 0% 80%);
    --f3:  hsl(0 0% 74%);
    --f4:  hsl(0 0% 68%);
    --f5:  hsl(0 0% 62%);
    --f6:  hsl(0 0% 56%);
    --f7:  hsl(0 0% 50%);
    --f8:  hsl(0 0% 44%);
    --f9:  hsl(0 0% 36%);
    --f10: hsl(0 0% 28%);
  }

  .spring {
    --b0:  hsl(150 25% 10%);
    --b1:  hsl(150 24% 12%);
    --b2:  hsl(150 23% 15%);
    --b3:  hsl(150 24% 19%);
    --b4:  hsl(150 25% 24%);
    --b5:  hsl(150 26% 30%);
    --b6:  hsl(150 27% 38%);
    --b7:  hsl(150 28% 46%);
    --b8:  hsl(150 30% 55%);
    --b9:  hsl(150 32% 64%);
    --b10: hsl(150 34% 72%);

    --f0:  hsl(150 35% 88%);
    --f1:  hsl(150 34% 84%);
    --f2:  hsl(150 33% 79%);
    --f3:  hsl(150 32% 73%);
    --f4:  hsl(150 31% 66%);
    --f5:  hsl(150 30% 60%);
    --f6:  hsl(150 29% 54%);
    --f7:  hsl(150 28% 48%);
    --f8:  hsl(150 27% 42%);
    --f9:  hsl(150 26% 28%);
    --f10: hsl(150 25% 20%);
  }
  .summer {
    --b0:  hsl(8 40% 10%);
    --b1:  hsl(8 42% 12%);
    --b2:  hsl(8 43% 15%);
    --b3:  hsl(8 44% 19%);
    --b4:  hsl(8 45% 24%);
    --b5:  hsl(8 46% 30%);
    --b6:  hsl(8 47% 38%);
    --b7:  hsl(8 48% 46%);
    --b8:  hsl(8 50% 55%);
    --b9:  hsl(8 52% 64%);
    --b10: hsl(8 54% 72%);

    --f0:  hsl(8 60% 88%);
    --f1:  hsl(8 58% 84%);
    --f2:  hsl(8 56% 79%);
    --f3:  hsl(8 54% 73%);
    --f4:  hsl(8 52% 66%);
    --f5:  hsl(8 50% 60%);
    --f6:  hsl(8 48% 54%);
    --f7:  hsl(8 46% 48%);
    --f8:  hsl(8 44% 42%);
    --f9:  hsl(8 42% 34%);
    --f10: hsl(8 40% 26%);
  }
  .autumn {
    --b0:  hsl(38 45% 10%);
    --b1:  hsl(38 46% 12%);
    --b2:  hsl(38 47% 15%);
    --b3:  hsl(38 48% 19%);
    --b4:  hsl(38 49% 24%);
    --b5:  hsl(38 50% 30%);
    --b6:  hsl(38 51% 38%);
    --b7:  hsl(38 52% 46%);
    --b8:  hsl(38 54% 55%);
    --b9:  hsl(38 56% 64%);
    --b10: hsl(38 58% 72%);

    --f0:  hsl(38 65% 88%);
    --f1:  hsl(38 63% 84%);
    --f2:  hsl(38 61% 79%);
    --f3:  hsl(38 59% 73%);
    --f4:  hsl(38 57% 66%);
    --f5:  hsl(38 55% 60%);
    --f6:  hsl(38 53% 54%);
    --f7:  hsl(38 51% 48%);
    --f8:  hsl(38 49% 42%);
    --f9:  hsl(38 47% 34%);
    --f10: hsl(38 45% 26%);
  }
  .winter {
    --b0:  hsl(205 40% 10%);
    --b1:  hsl(205 41% 12%);
    --b2:  hsl(205 42% 15%);
    --b3:  hsl(205 43% 19%);
    --b4:  hsl(205 44% 24%);
    --b5:  hsl(205 45% 30%);
    --b6:  hsl(205 46% 38%);
    --b7:  hsl(205 47% 46%);
    --b8:  hsl(205 49% 55%);
    --b9:  hsl(205 51% 64%);
    --b10: hsl(205 53% 72%);

    --f0:  hsl(205 55% 88%);
    --f1:  hsl(205 53% 84%);
    --f2:  hsl(205 51% 79%);
    --f3:  hsl(205 49% 73%);
    --f4:  hsl(205 47% 66%);
    --f5:  hsl(205 45% 60%);
    --f6:  hsl(205 43% 54%);
    --f7:  hsl(205 41% 48%);
    --f8:  hsl(205 39% 42%);
    --f9:  hsl(205 37% 34%);
    --f10: hsl(205 35% 26%);
  }
}

}  /* end @layer tokens */


/*  part 3: page styling  */

@layer page {

html            { height: 100%;
                  overscroll-behavior: none;
                  font-family: var(--font-sans) }
body            { margin: 0;
                  height: 100%;
                  overscroll-behavior: none;
                  color: var(--f2);
                  --border-color: var(--f9);
                  overflow: auto;
                  position: relative;
                  background: var(--b1);
                  font-feature-settings: normal;
                  font-variation-settings: normal;
                  min-height: 100%;
                  letter-spacing: var(--letter-spacing);
                  line-height: var(--line-height); }

@media (prefers-color-scheme: dark) {
  body          { --border-color: var(--b4); }
}


/* naming ::-webkit-scrollbar opts out of the platform's fading overlay
   bars, so a scrollable pane always says it is scrollable.  do NOT add
   scrollbar-width or scrollbar-color: chrome drops this whole family,
   rounding included, the moment either standard property is set. */
::-webkit-scrollbar              { width: 8px; }
::-webkit-scrollbar:horizontal   { height: 8px; }
::-webkit-scrollbar-thumb {
  background: var(--b4);
  border-radius: 4px;
}
::-webkit-scrollbar-track  { background: transparent; }
::-webkit-scrollbar-corner { background: transparent; }

::selection {
  background: var(--selection);
  color: var(--f0);
}


}  /* end @layer page */


/*  part 4: prose styling  */

@layer prose {

.no-br br,
.no-br br ~ *,
.no-br .line-break,
.no-br .line-break ~ *,
br.no-br {
  display: none;
}

.post-content p + p,
post-item > p + p {
  margin-top: 1em;
}

/* a reading column, not chrome: one line-height for everything in it, text
   a step darker than the ui around it, and a measure short enough to track
   a line back to the next one.  the measure is on the text blocks alone, so
   a pre still gets the column's whole width. */
.prose {
  color: var(--f1);
  line-height: 1.6;
}
.prose > * {
  margin-block: 1.1em;
}
.prose > *:first-child {
  margin-top: 0;
}
.prose > *:last-child {
  margin-bottom: 0;
}
.prose > :where(p, ul, ol, blockquote, details, h1, h2, h3) {
  max-width: 68ch;
}
/* a section is a heading and the blocks under it: the space above a heading
   is what groups them, so it is three times the space below. */
.prose :where(h1, h2, h3) {
  color: var(--f0);
  scroll-margin-top: var(--s7);
}
.prose > :where(h1, h2, h3) {
  margin-bottom: 0;
}
.prose > :where(h1, h2, h3) + * {
  margin-top: 0.6em;
}
.prose :where(h1) {
  font-size: 1.8em;
}
.prose > :where(h2) {
  margin-top: 2.4em;
}
.prose :where(h2) {
  font-size: 1.35em;
}
.prose > :where(h3) {
  margin-top: 1.9em;
}
.prose :where(h3) {
  font-size: 1.1em;
}
.prose :where(p) {
  overflow-wrap: break-word;
}
.prose :where(img),
.prose :where(video) {
  max-width: 100%;
  display: block;
  max-height: 350px;
}
.prose :where(audio) {
  width: 100%;
  display: block;
}
.prose :where(a) {
  color: var(--f-4);
  text-decoration: underline;
  text-decoration-thickness: from-font;
  text-underline-offset: 0.15em;
}
/* the callout is prose's one emphasis device.  a grey rule on a grey page
   is not a signal, so it takes the accent: a 4px rule, the matching tint
   behind it, and chips tinted off the surface they sit on rather than the
   page's. */
.prose :where(blockquote) {
  border-left: 4px solid var(--f-4);
  background-color: var(--b-4);
  border-radius: 0 var(--s3) var(--s3) 0;
  padding: var(--s5) var(--s6);
  color: var(--f0);
}
.prose :where(blockquote) :where(code) {
  background-color: rgb(0 0 0 / 8%);
}
@media (prefers-color-scheme: dark) {
  .prose :where(blockquote) :where(code) {
    background-color: rgb(255 255 255 / 12%);
  }
}
/* code reads as code: a surface one step off the page, a border around it,
   and inline spans tinted the same way.  --b1 is the body's own background,
   so a block painted --b1 was invisible. */
.prose :where(pre) {
  font-family: var(--font-mono);
  font-size: calc(1em * var(--mono-scale));
  line-height: 1.4;
  tab-size: 2;
  overflow-x: auto;
  width: 100%;
  display: block;
  padding: var(--s5);
  border: 1px solid var(--b5);
  border-radius: var(--s3);
  background-color: var(--b3);
}
/* an inline span is inside a sentence: horizontal padding there reads as a
   space, so it gets colour and almost no box. */
.prose :where(code) {
  font-family: var(--font-mono);
  font-size: calc(1em * var(--mono-scale));
  color: var(--f0);
  background-color: var(--b4);
  border-radius: var(--s2);
  padding: 0 0.25em;
  overflow-wrap: anywhere;
}
/* near black, a step of the b ramp is a smaller step to the eye than the
   same one near white, so the chip and the block both take a heavier fill
   than their light-mode counterparts. */
@media (prefers-color-scheme: dark) {
  .prose :where(code) {
    background-color: var(--b5);
  }
  .prose :where(pre) {
    background-color: var(--b4);
    border-color: var(--b6);
  }
  .prose :where(pre code) {
    background: none;
  }
}
.prose :where(pre code) {
  background: none;
  border-radius: 0;
  padding: 0;
  color: inherit;
}
.prose :where(hr) {
  margin: 2.4em 0;
  background-color: var(--border-color);
}

.prose :where(ul),
.prose :where(ol) {
  padding-left: 24px;
}
.prose :where(ul p),
.prose :where(ol p) {
  margin: 0.5em 0;
}
.prose :where(ul p:first-child),
.prose :where(ol p:first-child) {
  margin: 0;
  margin-bottom: 0.5em;
}
.prose :where(ul p:last-child),
.prose :where(ol p:last-child) {
  margin: 0;
  margin-top: 0.5em;
}
.prose :where(li) {
  margin: 0.7em 0;
}
/* a list item of two paragraphs is the term-and-meaning grid prose has
   instead of a table, so the first paragraph reads as the term. */
.prose :where(li) > p:first-child:not(:last-child) {
  color: var(--f0);
}
.prose :where(ul ul),
.prose :where(ol ul),
.prose :where(ul ol),
.prose :where(ol ol) {
  margin-bottom: 0;
}
.prose :where(summary) {
  user-select: none;
  -webkit-user-select: none;
  color: var(--f3);
}
.prose :where(table) {
  border-collapse: collapse;
  border-radius: 0.3em;
  th, td {
    border: 1px solid var(--border-color);
    padding: 0.5em 1em;
  }
}

}  /* end @layer prose */


/*  part 5: utility classes  */

@layer utilities {

.break-word     { word-break: break-word; }
.break-all      { word-break: break-all; }
.break-none     { word-break: keep-all; }
.action         { touch-action: manipulation; }
.invisible      { visibility: hidden; }
.hidden         { display: none !important; }
*[hidden]       { display: none !important; }
.jc             { justify-content: center; }
.jb             { justify-content: space-between; }
.ja             { justify-content: space-around; }
.js             { justify-content: start; }
.je             { justify-content: end; }
.as             { align-items: start; }
.af             { align-items: stretch; }
.ae             { align-items: end; }
.ac             { align-items: center; }
.self-start     { align-self: start; }
.self-end       { align-self: end; }
.self-center    { align-self: center; }
.self-stretch   { align-self: stretch; }
.wfc            { width: fit-content; }
.wmc            { min-width: max-content; }
.wf             { width: 100%; }
.wn             { width: 0; }
.mwf            { max-width: 100%; }
.mw-page        { max-width: 600px; }
.mw-pill        { max-width: 630px; }

.w0             { width: var(--s0); }
.w1             { width: var(--s1); }
.w2             { width: var(--s2); }
.w3             { width: var(--s3); }
.w4             { width: var(--s4); }
.w5             { width: var(--s5); }
.w6             { width: var(--s6); }
.w7             { width: var(--s7); }
.w8             { width: var(--s8); }
.w9             { width: var(--s9); }
.w10            { width: var(--s10); }
.w11            { width: var(--s11); }
.w12            { width: var(--s12); }
.w13            { width: var(--s13); }
.w14            { width: var(--s14); }
.w15            { width: var(--s15); }
.w16            { width: var(--s16); }
.w17            { width: var(--s17); }
.w18            { width: var(--s18); }
.w19            { width: var(--s19); }
.w20            { width: var(--s20); }
.min-w0         { min-width: var(--s0); }
.min-w1         { min-width: var(--s1); }
.min-w2         { min-width: var(--s2); }
.min-w3         { min-width: var(--s3); }
.min-w4         { min-width: var(--s4); }
.min-w5         { min-width: var(--s5); }
.min-w6         { min-width: var(--s6); }
.min-w7         { min-width: var(--s7); }
.min-w8         { min-width: var(--s8); }
.min-w9         { min-width: var(--s9); }
.min-w10        { min-width: var(--s10); }
.min-w11        { min-width: var(--s11); }
.min-w12        { min-width: var(--s12); }
.min-w13        { min-width: var(--s13); }
.min-w14        { min-width: var(--s14); }
.min-w15        { min-width: var(--s15); }
.min-w16        { min-width: var(--s16); }
.min-w17        { min-width: var(--s17); }
.min-w18        { min-width: var(--s18); }
.min-w19        { min-width: var(--s19); }
.min-w20        { min-width: var(--s20); }
.max-w0         { max-width: var(--s0); }
.max-w1         { max-width: var(--s1); }
.max-w2         { max-width: var(--s2); }
.max-w3         { max-width: var(--s3); }
.max-w4         { max-width: var(--s4); }
.max-w5         { max-width: var(--s5); }
.max-w6         { max-width: var(--s6); }
.max-w7         { max-width: var(--s7); }
.max-w8         { max-width: var(--s8); }
.max-w9         { max-width: var(--s9); }
.max-w10        { max-width: var(--s10); }
.max-w11        { max-width: var(--s11); }
.max-w12        { max-width: var(--s12); }
.max-w13        { max-width: var(--s13); }
.max-w14        { max-width: var(--s14); }
.max-w15        { max-width: var(--s15); }
.max-w16        { max-width: var(--s16); }
.max-w17        { max-width: var(--s17); }
.max-w18        { max-width: var(--s18); }
.max-w19        { max-width: var(--s19); }
.max-w20        { max-width: var(--s20); }

.hf             { height: 100%; }
.mhf            { max-height: 100%; }
.max-h70vh      { max-height: 70vh; }
.hfc            { height: fit-content; }

.h0             { height: var(--s0); }
.h1             { height: var(--s1); }
.h2             { height: var(--s2); }
.h3             { height: var(--s3); }
.h4             { height: var(--s4); }
.h5             { height: var(--s5); }
.h6             { height: var(--s6); }
.h7             { height: var(--s7); }
.h8             { height: var(--s8); }
.h9             { height: var(--s9); }
.h10            { height: var(--s10); }
.h11            { height: var(--s11); }
.h12            { height: var(--s12); }
.h13            { height: var(--s13); }
.h14            { height: var(--s14); }
.h15            { height: var(--s15); }
.h16            { height: var(--s16); }
.h17            { height: var(--s17); }
.h18            { height: var(--s18); }
.h19            { height: var(--s19); }
.h20            { height: var(--s20); }
.min-h0         { min-height: var(--s0); }
.min-h1         { min-height: var(--s1); }
.min-h2         { min-height: var(--s2); }
.min-h3         { min-height: var(--s3); }
.min-h4         { min-height: var(--s4); }
.min-h5         { min-height: var(--s5); }
.min-h6         { min-height: var(--s6); }
.min-h7         { min-height: var(--s7); }
.min-h8         { min-height: var(--s8); }
.min-h9         { min-height: var(--s9); }
.min-h10        { min-height: var(--s10); }
.min-h11        { min-height: var(--s11); }
.min-h12        { min-height: var(--s12); }
.min-h13        { min-height: var(--s13); }
.min-h14        { min-height: var(--s14); }
.min-h15        { min-height: var(--s15); }
.min-h16        { min-height: var(--s16); }
.min-h17        { min-height: var(--s17); }
.min-h18        { min-height: var(--s18); }
.min-h19        { min-height: var(--s19); }
.min-h20        { min-height: var(--s20); }
.max-h0         { max-height: var(--s0); }
.max-h1         { max-height: var(--s1); }
.max-h2         { max-height: var(--s2); }
.max-h3         { max-height: var(--s3); }
.max-h4         { max-height: var(--s4); }
.max-h5         { max-height: var(--s5); }
.max-h6         { max-height: var(--s6); }
.max-h7         { max-height: var(--s7); }
.max-h8         { max-height: var(--s8); }
.max-h9         { max-height: var(--s9); }
.max-h10        { max-height: var(--s10); }
.max-h11        { max-height: var(--s11); }
.max-h12        { max-height: var(--s12); }
.max-h13        { max-height: var(--s13); }
.max-h14        { max-height: var(--s14); }
.max-h15        { max-height: var(--s15); }
.max-h16        { max-height: var(--s16); }
.max-h17        { max-height: var(--s17); }
.max-h18        { max-height: var(--s18); }
.max-h19        { max-height: var(--s19); }
.max-h20        { max-height: var(--s20); }

.pe-none        { pointer-events: none; }
.pe-auto        { pointer-events: auto; }

.mono           { font-family: var(--font-mono); }
.serif          { font-family: var(--font-serif); }
.sans           { font-family: var(--font-sans); }
.italic         { font-style: italic; }
.ellipsis       { overflow: hidden; min-width: 0; text-overflow: ellipsis; white-space: nowrap; }
.capitalize     { text-transform: capitalize; }
.underline      { text-decoration: underline; }
.no-underline   { text-decoration: none !important; }
.bold           { font-weight: bold; }
.semibold       { font-weight: 600; }
.strike         { text-decoration: line-through; }
.pre            { white-space: pre; }
.pre-line       { white-space: pre-line; }
.pre-wrap       { white-space: pre-wrap; }
.nowrap         { white-space: nowrap; }
.tl             { text-align: left; }
.tc             { text-align: center; }
.tr             { text-align: right; }
.contain        { object-fit: contain; }
.middle         { vertical-align: middle; }
.right          { float: right; }
.block          { display: block; }
.inline         { display: inline }
.inline-block   { display: inline-block }
.fc             { display: flex;
                  flex-direction: column; }
.fc.scroll-y > * { flex-shrink: 0; }
.fcr            { display: flex;
                  flex-direction: column-reverse; }
.fcw            { display: flex;
                  flex-direction: column;
                  flex-wrap: wrap; }
.fr             { display: flex;
                  flex-direction: row; }
.frw            { display: flex;
                  flex-direction: row;
                  flex-wrap: wrap; }
.frrw           { display: flex;
                  flex-direction: row-reverse;
                  flex-wrap: wrap; }
.frr            { display: flex;
                  flex-direction: row-reverse; }
.frc, .center   { display: flex;
                  align-items: center;
                  justify-content: center; }
.fcc            { display: flex;
                  direction: column;
                  align-items: center;
                  justify-content: center; }
.basis-full     { flex-basis: 100%; }
.basis-half     { flex-basis: 50%; flex-shrink: 0; }
.basis-none     { flex-basis: 0%; flex-shrink: 1; }
.shrink-none    { flex-shrink: 0; }
.relative       { position: relative; }
.absolute       { position: absolute; }
.fade-above     { position: absolute; bottom: 100%; left: 0; right: 0;
                  height: 40px; pointer-events: none;
                  background: linear-gradient(to bottom, transparent, var(--b1)); }
.fixed          { position: fixed; }
.sticky         { position: sticky; }
.top0           { top: 0; }
.left0          { left: 0; }
.right0         { right: 0; }
.bottom0        { bottom: 0; }
.z-2            { z-index: -20; }
.z-1            { z-index: -10; }
.z0             { z-index: 0; }
.z1             { z-index: 10; }
.z2             { z-index: 20; }
.grow           { flex-grow: 1; }


.g0             { gap: var(--s0); }
.g1             { gap: var(--s1); }
.g2             { gap: var(--s2); }
.g3             { gap: var(--s3); }
.g4             { gap: var(--s4); }
.g5             { gap: var(--s5); }
.g6             { gap: var(--s6); }
.g7             { gap: var(--s7); }
.g8             { gap: var(--s8); }
.g9             { gap: var(--s9); }
.g10            { gap: var(--s10); }
.g11            { gap: var(--s11); }
.g12            { gap: var(--s12); }
.g13            { gap: var(--s13); }
.g14            { gap: var(--s14); }
.g15            { gap: var(--s15); }
.g16            { gap: var(--s16); }
.g17            { gap: var(--s17); }
.g18            { gap: var(--s18); }
.g19            { gap: var(--s19); }
.g20            { gap: var(--s20); }

.p-page         { padding: var(--p-page); }

.p0             { padding: var(--s0); }
.p1             { padding: var(--s1); }
.p2             { padding: var(--s2); }
.p3             { padding: var(--s3); }
.p4             { padding: var(--s4); }
.p5             { padding: var(--s5); }
.p6             { padding: var(--s6); }
.p7             { padding: var(--s7); }
.p8             { padding: var(--s8); }
.p9             { padding: var(--s9); }
.p10            { padding: var(--s10); }
.p11            { padding: var(--s11); }
.p12            { padding: var(--s12); }
.p13            { padding: var(--s13); }
.p14            { padding: var(--s14); }
.p15            { padding: var(--s15); }
.p16            { padding: var(--s16); }
.p17            { padding: var(--s17); }
.p18            { padding: var(--s18); }
.p19            { padding: var(--s19); }
.p20            { padding: var(--s20); }

.p-0            { padding: var(--s0) var(--s1); }
.p-1            { padding: var(--s1) var(--s2); }
.p-2            { padding: var(--s2) var(--s3); }
.p-3            { padding: var(--s3) var(--s4); }
.p-4            { padding: var(--s4) var(--s5); }
.p-5            { padding: var(--s5) var(--s6); }
.p-6            { padding: var(--s6) var(--s7); }
.p-7            { padding: var(--s7) var(--s8); }
.p-8            { padding: var(--s8) var(--s9); }
.p-9            { padding: var(--s9) var(--s10); }
.p-10           { padding: var(--s10) var(--s11); }
.p-11           { padding: var(--s11) var(--s12); }
.p-12           { padding: var(--s12) var(--s13); }
.p-13           { padding: var(--s13) var(--s14); }
.p-14           { padding: var(--s14) var(--s15); }
.p-15           { padding: var(--s15) var(--s16); }
.p-16           { padding: var(--s16) var(--s17); }
.p-17           { padding: var(--s17) var(--s18); }
.p-18           { padding: var(--s18) var(--s19); }
.p-19           { padding: var(--s19) var(--s20); }

.px0            { padding-left: var(--s0);  padding-right: var(--s0);  }
.px1            { padding-left: var(--s1);  padding-right: var(--s1);  }
.px2            { padding-left: var(--s2);  padding-right: var(--s2);  }
.px3            { padding-left: var(--s3);  padding-right: var(--s3);  }
.px4            { padding-left: var(--s4);  padding-right: var(--s4);  }
.px5            { padding-left: var(--s5);  padding-right: var(--s5);  }
.px6            { padding-left: var(--s6);  padding-right: var(--s6);  }
.px7            { padding-left: var(--s7);  padding-right: var(--s7);  }
.px8            { padding-left: var(--s8);  padding-right: var(--s8);  }
.px9            { padding-left: var(--s9);  padding-right: var(--s9);  }
.px10           { padding-left: var(--s10); padding-right: var(--s10); }
.px11           { padding-left: var(--s11); padding-right: var(--s11); }
.px12           { padding-left: var(--s12); padding-right: var(--s12); }
.px13           { padding-left: var(--s13); padding-right: var(--s13); }
.px14           { padding-left: var(--s14); padding-right: var(--s14); }
.px15           { padding-left: var(--s15); padding-right: var(--s15); }
.px16           { padding-left: var(--s16); padding-right: var(--s16); }
.px17           { padding-left: var(--s17); padding-right: var(--s17); }
.px18           { padding-left: var(--s18); padding-right: var(--s18); }
.px19           { padding-left: var(--s19); padding-right: var(--s19); }
.px20           { padding-left: var(--s20); padding-right: var(--s20); }

.py0            { padding-top: var(--s0);  padding-bottom: var(--s0);  }
.py1            { padding-top: var(--s1);  padding-bottom: var(--s1);  }
.py2            { padding-top: var(--s2);  padding-bottom: var(--s2);  }
.py3            { padding-top: var(--s3);  padding-bottom: var(--s3);  }
.py4            { padding-top: var(--s4);  padding-bottom: var(--s4);  }
.py5            { padding-top: var(--s5);  padding-bottom: var(--s5);  }
.py6            { padding-top: var(--s6);  padding-bottom: var(--s6);  }
.py7            { padding-top: var(--s7);  padding-bottom: var(--s7);  }
.py8            { padding-top: var(--s8);  padding-bottom: var(--s8);  }
.py9            { padding-top: var(--s9);  padding-bottom: var(--s9);  }
.py10           { padding-top: var(--s10); padding-bottom: var(--s10); }
.py11           { padding-top: var(--s11); padding-bottom: var(--s11); }
.py12           { padding-top: var(--s12); padding-bottom: var(--s12); }
.py13           { padding-top: var(--s13); padding-bottom: var(--s13); }
.py14           { padding-top: var(--s14); padding-bottom: var(--s14); }
.py15           { padding-top: var(--s15); padding-bottom: var(--s15); }
.py16           { padding-top: var(--s16); padding-bottom: var(--s16); }
.py17           { padding-top: var(--s17); padding-bottom: var(--s17); }
.py18           { padding-top: var(--s18); padding-bottom: var(--s18); }
.py19           { padding-top: var(--s19); padding-bottom: var(--s19); }
.py20           { padding-top: var(--s20); padding-bottom: var(--s20); }

.pl0            { padding-left: var(--s0); }
.pl1            { padding-left: var(--s1); }
.pl2            { padding-left: var(--s2); }
.pl3            { padding-left: var(--s3); }
.pl4            { padding-left: var(--s4); }
.pl5            { padding-left: var(--s5); }
.pl6            { padding-left: var(--s6); }
.pl7            { padding-left: var(--s7); }
.pl8            { padding-left: var(--s8); }
.pl9            { padding-left: var(--s9); }
.pl10           { padding-left: var(--s10); }
.pl11           { padding-left: var(--s11); }
.pl12           { padding-left: var(--s12); }
.pl13           { padding-left: var(--s13); }
.pl14           { padding-left: var(--s14); }
.pl15           { padding-left: var(--s15); }
.pl16           { padding-left: var(--s16); }
.pl17           { padding-left: var(--s17); }
.pl18           { padding-left: var(--s18); }
.pl19           { padding-left: var(--s19); }
.pl20           { padding-left: var(--s20); }

.pr0            { padding-right: var(--s0); }
.pr1            { padding-right: var(--s1); }
.pr2            { padding-right: var(--s2); }
.pr3            { padding-right: var(--s3); }
.pr4            { padding-right: var(--s4); }
.pr5            { padding-right: var(--s5); }
.pr6            { padding-right: var(--s6); }
.pr7            { padding-right: var(--s7); }
.pr8            { padding-right: var(--s8); }
.pr9            { padding-right: var(--s9); }
.pr10           { padding-right: var(--s10); }
.pr11           { padding-right: var(--s11); }
.pr12           { padding-right: var(--s12); }
.pr13           { padding-right: var(--s13); }
.pr14           { padding-right: var(--s14); }
.pr15           { padding-right: var(--s15); }
.pr16           { padding-right: var(--s16); }
.pr17           { padding-right: var(--s17); }
.pr18           { padding-right: var(--s18); }
.pr19           { padding-right: var(--s19); }
.pr20           { padding-right: var(--s20); }

.pt0            { padding-top: var(--s0); }
.pt1            { padding-top: var(--s1); }
.pt2            { padding-top: var(--s2); }
.pt3            { padding-top: var(--s3); }
.pt4            { padding-top: var(--s4); }
.pt5            { padding-top: var(--s5); }
.pt6            { padding-top: var(--s6); }
.pt7            { padding-top: var(--s7); }
.pt8            { padding-top: var(--s8); }
.pt9            { padding-top: var(--s9); }
.pt10           { padding-top: var(--s10); }
.pt11           { padding-top: var(--s11); }
.pt12           { padding-top: var(--s12); }
.pt13           { padding-top: var(--s13); }
.pt14           { padding-top: var(--s14); }
.pt15           { padding-top: var(--s15); }
.pt16           { padding-top: var(--s16); }
.pt17           { padding-top: var(--s17); }
.pt18           { padding-top: var(--s18); }
.pt19           { padding-top: var(--s19); }
.pt20           { padding-top: var(--s20); }

.pb0            { padding-bottom: var(--s0); }
.pb1            { padding-bottom: var(--s1); }
.pb2            { padding-bottom: var(--s2); }
.pb3            { padding-bottom: var(--s3); }
.pb4            { padding-bottom: var(--s4); }
.pb5            { padding-bottom: var(--s5); }
.pb6            { padding-bottom: var(--s6); }
.pb7            { padding-bottom: var(--s7); }
.pb8            { padding-bottom: var(--s8); }
.pb9            { padding-bottom: var(--s9); }
.pb10           { padding-bottom: var(--s10); }
.pb11           { padding-bottom: var(--s11); }
.pb12           { padding-bottom: var(--s12); }
.pb13           { padding-bottom: var(--s13); }
.pb14           { padding-bottom: var(--s14); }
.pb15           { padding-bottom: var(--s15); }
.pb16           { padding-bottom: var(--s16); }
.pb17           { padding-bottom: var(--s17); }
.pb18           { padding-bottom: var(--s18); }
.pb19           { padding-bottom: var(--s19); }
.pb20           { padding-bottom: var(--s20); }
.pb-page        { padding-bottom: 65vh; }
.pr-page        { padding-right: 40vw; }

.ma             { margin: auto; }
.mxa            { margin: 0 auto; }
.mya            { margin: auto 0; }

.m0             { margin: var(--s0); }
.m1             { margin: var(--s1); }
.m2             { margin: var(--s2); }
.m3             { margin: var(--s3); }
.m4             { margin: var(--s4); }
.m5             { margin: var(--s5); }
.m6             { margin: var(--s6); }
.m7             { margin: var(--s7); }
.m8             { margin: var(--s8); }
.m9             { margin: var(--s9); }
.m10            { margin: var(--s10); }
.m11            { margin: var(--s11); }
.m12            { margin: var(--s12); }
.m13            { margin: var(--s13); }
.m14            { margin: var(--s14); }
.m15            { margin: var(--s15); }
.m16            { margin: var(--s16); }
.m17            { margin: var(--s17); }
.m18            { margin: var(--s18); }
.m19            { margin: var(--s19); }
.m20            { margin: var(--s20); }

.mx0            { margin-left: var(--s0);  margin-right: var(--s0);  }
.mx1            { margin-left: var(--s1);  margin-right: var(--s1);  }
.mx2            { margin-left: var(--s2);  margin-right: var(--s2);  }
.mx3            { margin-left: var(--s3);  margin-right: var(--s3);  }
.mx4            { margin-left: var(--s4);  margin-right: var(--s4);  }
.mx5            { margin-left: var(--s5);  margin-right: var(--s5);  }
.mx6            { margin-left: var(--s6);  margin-right: var(--s6);  }
.mx7            { margin-left: var(--s7);  margin-right: var(--s7);  }
.mx8            { margin-left: var(--s8);  margin-right: var(--s8);  }
.mx9            { margin-left: var(--s9);  margin-right: var(--s9);  }
.mx10           { margin-left: var(--s10); margin-right: var(--s10); }
.mx11           { margin-left: var(--s11); margin-right: var(--s11); }
.mx12           { margin-left: var(--s12); margin-right: var(--s12); }
.mx13           { margin-left: var(--s13); margin-right: var(--s13); }
.mx14           { margin-left: var(--s14); margin-right: var(--s14); }
.mx15           { margin-left: var(--s15); margin-right: var(--s15); }
.mx16           { margin-left: var(--s16); margin-right: var(--s16); }
.mx17           { margin-left: var(--s17); margin-right: var(--s17); }
.mx18           { margin-left: var(--s18); margin-right: var(--s18); }
.mx19           { margin-left: var(--s19); margin-right: var(--s19); }
.mx20           { margin-left: var(--s20); margin-right: var(--s20); }

.my0            { margin-top: var(--s0);  margin-bottom: var(--s0);  }
.my1            { margin-top: var(--s1);  margin-bottom: var(--s1);  }
.my2            { margin-top: var(--s2);  margin-bottom: var(--s2);  }
.my3            { margin-top: var(--s3);  margin-bottom: var(--s3);  }
.my4            { margin-top: var(--s4);  margin-bottom: var(--s4);  }
.my5            { margin-top: var(--s5);  margin-bottom: var(--s5);  }
.my6            { margin-top: var(--s6);  margin-bottom: var(--s6);  }
.my7            { margin-top: var(--s7);  margin-bottom: var(--s7);  }
.my8            { margin-top: var(--s8);  margin-bottom: var(--s8);  }
.my9            { margin-top: var(--s9);  margin-bottom: var(--s9);  }
.my10           { margin-top: var(--s10); margin-bottom: var(--s10); }
.my11           { margin-top: var(--s11); margin-bottom: var(--s11); }
.my12           { margin-top: var(--s12); margin-bottom: var(--s12); }
.my13           { margin-top: var(--s13); margin-bottom: var(--s13); }
.my14           { margin-top: var(--s14); margin-bottom: var(--s14); }
.my15           { margin-top: var(--s15); margin-bottom: var(--s15); }
.my16           { margin-top: var(--s16); margin-bottom: var(--s16); }
.my17           { margin-top: var(--s17); margin-bottom: var(--s17); }
.my18           { margin-top: var(--s18); margin-bottom: var(--s18); }
.my19           { margin-top: var(--s19); margin-bottom: var(--s19); }
.my20           { margin-top: var(--s20); margin-bottom: var(--s20); }


.ml0            { margin-left: var(--s0); }
.ml1            { margin-left: var(--s1); }
.ml2            { margin-left: var(--s2); }
.ml3            { margin-left: var(--s3); }
.ml4            { margin-left: var(--s4); }
.ml5            { margin-left: var(--s5); }
.ml6            { margin-left: var(--s6); }
.ml7            { margin-left: var(--s7); }
.ml8            { margin-left: var(--s8); }
.ml9            { margin-left: var(--s9); }
.ml10           { margin-left: var(--s10); }
.ml11           { margin-left: var(--s11); }
.ml12           { margin-left: var(--s12); }
.ml13           { margin-left: var(--s13); }
.ml14           { margin-left: var(--s14); }
.ml15           { margin-left: var(--s15); }
.ml16           { margin-left: var(--s16); }
.ml17           { margin-left: var(--s17); }
.ml18           { margin-left: var(--s18); }
.ml19           { margin-left: var(--s19); }
.ml20           { margin-left: var(--s20); }

.mr0            { margin-right: var(--s0); }
.mr1            { margin-right: var(--s1); }
.mr2            { margin-right: var(--s2); }
.mr3            { margin-right: var(--s3); }
.mr4            { margin-right: var(--s4); }
.mr5            { margin-right: var(--s5); }
.mr6            { margin-right: var(--s6); }
.mr7            { margin-right: var(--s7); }
.mr8            { margin-right: var(--s8); }
.mr9            { margin-right: var(--s9); }
.mr10           { margin-right: var(--s10); }
.mr11           { margin-right: var(--s11); }
.mr12           { margin-right: var(--s12); }
.mr13           { margin-right: var(--s13); }
.mr14           { margin-right: var(--s14); }
.mr15           { margin-right: var(--s15); }
.mr16           { margin-right: var(--s16); }
.mr17           { margin-right: var(--s17); }
.mr18           { margin-right: var(--s18); }
.mr19           { margin-right: var(--s19); }
.mr20           { margin-right: var(--s20); }

.mt0            { margin-top: var(--s0); }
.mt1            { margin-top: var(--s1); }
.mt2            { margin-top: var(--s2); }
.mt3            { margin-top: var(--s3); }
.mt4            { margin-top: var(--s4); }
.mt5            { margin-top: var(--s5); }
.mt6            { margin-top: var(--s6); }
.mt7            { margin-top: var(--s7); }
.mt8            { margin-top: var(--s8); }
.mt9            { margin-top: var(--s9); }
.mt10           { margin-top: var(--s10); }
.mt11           { margin-top: var(--s11); }
.mt12           { margin-top: var(--s12); }
.mt13           { margin-top: var(--s13); }
.mt14           { margin-top: var(--s14); }
.mt15           { margin-top: var(--s15); }
.mt16           { margin-top: var(--s16); }
.mt17           { margin-top: var(--s17); }
.mt18           { margin-top: var(--s18); }
.mt19           { margin-top: var(--s19); }
.mt20           { margin-top: var(--s20); }

.mb0            { margin-bottom: var(--s0); }
.mb1            { margin-bottom: var(--s1); }
.mb2            { margin-bottom: var(--s2); }
.mb3            { margin-bottom: var(--s3); }
.mb4            { margin-bottom: var(--s4); }
.mb5            { margin-bottom: var(--s5); }
.mb6            { margin-bottom: var(--s6); }
.mb7            { margin-bottom: var(--s7); }
.mb8            { margin-bottom: var(--s8); }
.mb9            { margin-bottom: var(--s9); }
.mb10           { margin-bottom: var(--s10); }
.mb11           { margin-bottom: var(--s11); }
.mb12           { margin-bottom: var(--s12); }
.mb13           { margin-bottom: var(--s13); }
.mb14           { margin-bottom: var(--s14); }
.mb15           { margin-bottom: var(--s15); }
.mb16           { margin-bottom: var(--s16); }
.mb17           { margin-bottom: var(--s17); }
.mb18           { margin-bottom: var(--s18); }
.mb19           { margin-bottom: var(--s19); }
.mb20           { margin-bottom: var(--s20); }

.o0             { opacity: 0%; }
.o1             { opacity: 10%; }
.o2             { opacity: 20%; }
.o3             { opacity: 30%; }
.o4             { opacity: 40%; }
.o5             { opacity: 50%; }
.o6             { opacity: 60%; }
.o7             { opacity: 70%; }
.o8             { opacity: 80%; }
.o9             { opacity: 90%; }
.o10            { opacity: 100%; }

.scroll-y         { overflow-y: auto; }
.scroll-x         { overflow-x: auto; }
.scroll-y-always  { overflow-y: scroll; }
.scroll-x-always  { overflow-x: scroll; }
.gutter-stable    { scrollbar-gutter: stable both-edges; } /* XX rename to scroll-bars-stable */
.scroll-none      { overflow: hidden; }
.scroll-x-none    { overflow-x: hidden; }



.f-4            { color: var(--f-4); }
.f-3            { color: var(--f-3); }
.f-2            { color: var(--f-2); }
.f-1            { color: var(--f-1); }

.f0             { color: var(--f0); }
.f1             { color: var(--f1); }
.f2             { color: var(--f2); }
.f3             { color: var(--f3); }
.f4             { color: var(--f4); }
.f5             { color: var(--f5); }
.f6             { color: var(--f6); }
.f7             { color: var(--f7); }
.f8             { color: var(--f8); }
.f9             { color: var(--f9); }
.f10            { color: var(--f10); }

.b-none         { background-color: none; }

.b-4            { background-color: var(--b-4); }
.b-3            { background-color: var(--b-3); }
.b-2            { background-color: var(--b-2); }
.b-1            { background-color: var(--b-1); }

.b-1-soft       { background-color: rgb(from var(--f-1) r g b / 0.08); }
.b-2-soft       { background-color: rgb(from var(--f-2) r g b / 0.08); }
.b-3-soft       { background-color: rgb(from var(--f-3) r g b / 0.08); }
.b-4-soft       { background-color: rgb(from var(--f-4) r g b / 0.08); }

.b0             { background-color: var(--b0); }
.b1             { background-color: var(--b1); }
.b2             { background-color: var(--b2); }
.b3             { background-color: var(--b3); }
.b4             { background-color: var(--b4); }
.b5             { background-color: var(--b5); }
.b6             { background-color: var(--b6); }
.b7             { background-color: var(--b7); }
.b8             { background-color: var(--b8); }
.b9             { background-color: var(--b9); }
.b10            { background-color: var(--b10); }

.fs-4           { font-size: 0.6rem; }
.fs-3           { font-size: 0.7rem; }
.fs-2           { font-size: 0.8rem; }
.fs-1           { font-size: 0.9rem; }
.fs-0           { font-size: 1rem; }
.fs0            { font-size: 1rem; }
.fs1            { font-size: 1.15rem; }
.fs2            { font-size: 1.3rem; }
.fs3            { font-size: 1.45rem; }
.fs4            { font-size: 1.6rem; }
.fs5            { font-size: 2rem; }
.fs6            { font-size: 2.4rem; }
.fs7            { font-size: 2.8rem; }
.fs8            { font-size: 3.4rem; }
.fs9            { font-size: 4.4rem; }
.fs10           { font-size: 5.4rem; }

.lh0            { line-height: 1; }
.lh1            { line-height: 1.1; }
.lh2            { line-height: 1.2; }
.lh3            { line-height: 1.3; }
.lh4            { line-height: 1.4; }
.lh5            { line-height: 1.5; }
.lh6            { line-height: 1.6; }
.lh7            { line-height: 1.7; }
.lh8            { line-height: 1.8; }
.lh9            { line-height: 1.9; }
.lh10           { line-height: 2; }

/*  a card's own border draws its outside and the rules inside divide its rows,
    so the last row must not draw one against the card's own.  */
.carded > :last-child { border-bottom: none; }

/*  a header that says, from anywhere down a list of them, that this is the row
    you opened.  it takes a step darker than the rows still closed.  */
details[open] > summary.opened { background-color: var(--b2); }

.bd0            { border: none; }
.bd1            { border: 1px solid var(--border-color); }
.bd2            { border: 2px solid var(--border-color); }
.bd3            { border: 4px solid var(--border-color); }

.bdt0           { border-top: none; }
.bdt1           { border-top: 1px solid var(--border-color); }
.bdt2           { border-top: 2px solid var(--border-color); }
.bdt3           { border-top: 4px solid var(--border-color); }

.bdb0           { border-bottom: none; }
.bdb1           { border-bottom: 1px solid var(--border-color); }
.bdb2           { border-bottom: 2px solid var(--border-color); }
.bdb3           { border-bottom: 4px solid var(--border-color); }

.bdl0           { border-left: none; }
.bdl1           { border-left: 1px solid var(--border-color); }
.bdl2           { border-left: 2px solid var(--border-color); }
.bdl3           { border-left: 4px solid var(--border-color); }

.bdr0           { border-right: none; }
.bdr1           { border-right: 1px solid var(--border-color); }
.bdr2           { border-right: 2px solid var(--border-color); }
.bdr3           { border-right: 4px solid var(--border-color); }

.bbv > * {
  border-bottom: 1px solid var(--border-color);
}
.bbv > *:last-child {
  border-bottom: none;
}
.bbh > * {
  border-right: 1px solid var(--border-color);
}
.bbh > *:last-child {
  border-right: none;
}

.br0            { border-radius: var(--s0); }
.br1            { border-radius: var(--s1); }
.br2            { border-radius: var(--s2); }
.br3            { border-radius: var(--s3); }
.br4            { border-radius: var(--s4); }
.br5            { border-radius: var(--s5); }
.br6            { border-radius: var(--s6); }
.br7            { border-radius: var(--s7); }
.br8            { border-radius: var(--s8); }
.br9            { border-radius: var(--s9); }
.br10           { border-radius: var(--s10); }

.btrr0          { border-top-right-radius: var(--s0); }
.btrr1          { border-top-right-radius: var(--s1); }
.btrr2          { border-top-right-radius: var(--s2); }
.btrr3          { border-top-right-radius: var(--s3); }
.btrr4          { border-top-right-radius: var(--s4); }
.btrr5          { border-top-right-radius: var(--s5); }
.btrr6          { border-top-right-radius: var(--s6); }
.btrr7          { border-top-right-radius: var(--s7); }
.btrr8          { border-top-right-radius: var(--s8); }
.btrr9          { border-top-right-radius: var(--s9); }
.btrr10         { border-top-right-radius: var(--s10); }

.btlr0          { border-top-left-radius: var(--s0); }
.btlr1          { border-top-left-radius: var(--s1); }
.btlr2          { border-top-left-radius: var(--s2); }
.btlr3          { border-top-left-radius: var(--s3); }
.btlr4          { border-top-left-radius: var(--s4); }
.btlr5          { border-top-left-radius: var(--s5); }
.btlr6          { border-top-left-radius: var(--s6); }
.btlr7          { border-top-left-radius: var(--s7); }
.btlr8          { border-top-left-radius: var(--s8); }
.btlr9          { border-top-left-radius: var(--s9); }
.btlr10         { border-top-left-radius: var(--s10); }

.bbrr0          { border-bottom-right-radius: var(--s0); }
.bbrr1          { border-bottom-right-radius: var(--s1); }
.bbrr2          { border-bottom-right-radius: var(--s2); }
.bbrr3          { border-bottom-right-radius: var(--s3); }
.bbrr4          { border-bottom-right-radius: var(--s4); }
.bbrr5          { border-bottom-right-radius: var(--s5); }
.bbrr6          { border-bottom-right-radius: var(--s6); }
.bbrr7          { border-bottom-right-radius: var(--s7); }
.bbrr8          { border-bottom-right-radius: var(--s8); }
.bbrr9          { border-bottom-right-radius: var(--s9); }
.bbrr10         { border-bottom-right-radius: var(--s10); }

.bblr0          { border-bottom-left-radius: var(--s0); }
.bblr1          { border-bottom-left-radius: var(--s1); }
.bblr2          { border-bottom-left-radius: var(--s2); }
.bblr3          { border-bottom-left-radius: var(--s3); }
.bblr4          { border-bottom-left-radius: var(--s4); }
.bblr5          { border-bottom-left-radius: var(--s5); }
.bblr6          { border-bottom-left-radius: var(--s6); }
.bblr7          { border-bottom-left-radius: var(--s7); }
.bblr8          { border-bottom-left-radius: var(--s8); }
.bblr9          { border-bottom-left-radius: var(--s9); }
.bblr10         { border-bottom-left-radius: var(--s10); }

.bc-4           { --border-color: var(--f-4); }
.bc-3           { --border-color: var(--f-3); }
.bc-2           { --border-color: var(--f-2); }
.bc-1           { --border-color: var(--f-1); }
.bc0            { --border-color: var(--f0); }
.bc1            { --border-color: var(--f1); }
.bc2            { --border-color: var(--f2); }
.bc3            { --border-color: var(--f3); }
.bc4            { --border-color: var(--f4); }
.bc5            { --border-color: var(--f5); }
.bc6            { --border-color: var(--f6); }
.bc7            { --border-color: var(--f7); }
.bc8            { --border-color: var(--f8); }
.bc9            { --border-color: var(--f9); }
.bc10           { --border-color: var(--f10); }

.bcb0            { --border-color: var(--b0); }
.bcb1            { --border-color: var(--b1); }
.bcb2            { --border-color: var(--b2); }
.bcb3            { --border-color: var(--b3); }
.bcb4            { --border-color: var(--b4); }
.bcb5            { --border-color: var(--b5); }
.bcb6            { --border-color: var(--b6); }
.bcb7            { --border-color: var(--b7); }
.bcb8            { --border-color: var(--b8); }
.bcb9            { --border-color: var(--b9); }
.bcb10           { --border-color: var(--b10); }

.toggled        { background-color: var(--f0);
                  color: var(--b0); }
.toggled.b0     { background-color: var(--f3); }
.toggled.b1     { background-color: var(--f4); }
.toggled.b2     { background-color: var(--f5); }
.toggled.b3     { background-color: var(--f6); }
.toggled.b4     { background-color: var(--f7); }
.toggled.b5     { background-color: var(--f5); }
.toggled.b6     { background-color: var(--f6); }
.toggled.b7     { background-color: var(--f7); }
.toggled.b8     { background-color: var(--f8); }
.toggled.b9     { background-color: var(--f9); }
.toggled.b10    { background-color: var(--f10); }

.toggled.b-1    { background-color: var(--f-1); }
.toggled.b-2    { background-color: var(--f-2); }
.toggled.b-3    { background-color: var(--f-3); }
.toggled.b-4    { background-color: var(--f-4); }
.toggled.f0     { color: var(--b0); }
.toggled.f1     { color: var(--b1); }
.toggled.f2     { color: var(--b2); }
.toggled.f3     { color: var(--b3); }
.toggled.f4     { color: var(--b4); }
.toggled.f5     { color: var(--b5); }
.toggled.f6     { color: var(--b6); }
.toggled.f7     { color: var(--b7); }
.toggled.f8     { color: var(--b8); }
.toggled.f9     { color: var(--b9); }
.toggled.f10    { color: var(--b10); }

.toggled.f-1    { color: var(--b-1); }
.toggled.f-2    { color: var(--b-2); }
.toggled.f-3    { color: var(--b-3); }
.toggled.f-4    { color: var(--b-4); }
.active         { filter: invert(var(--active-offset)); }
*:disabled      { opacity: 0.4; cursor: not-allowed; pointer-events: none; transition: opacity 0.3s ease; }
.disabled       { opacity: 0.4; cursor: not-allowed; pointer-events: none; transition: opacity 0.3s ease; }


/*  an interactive element eases between its colors, so a .toggled swap reads
    as the element changing state rather than as a cut.  it sits here, on
    .hover, rather than on .toggled: a transition declared on the toggled state
    alone is gone the frame the class is removed, so un-toggling would snap.
    outside the hover media query, because a touch device toggles things too.  */
.hover                 { transition: background-color 0.2s ease, color 0.2s ease; }

/*  hovers : desktop only  */

@media (hover: hover) and (pointer: fine) {
  /*  the highlight fades in, and out a little slower -- leaving is the less
      interesting half, so it gets out of the way without snapping.  */
  .hover               { transition: filter 0.18s ease,
                                     background-color 0.2s ease,
                                     color 0.2s ease; }
  .hover:hover         { filter: invert(17%); transition-duration: 0.12s; }
  .hover-fg:hover      { color: var(--f0); }
  .hover-bd:hover      { border-color: var(--f0); }
  .hover-f:hover       { color: var(--f0); border-color: var(--f0); }
  .hover.active:hover  { filter: invert(25%); }
  .hover:disabled      { filter: none; }
}

@media (max-width: 700px) {
  .desktop-only        { display: none !important; }
}
@media (min-width: 700px) {
  .mobile-only        { display: none !important; }
}

.focus:focus {
  outline: none;
  box-shadow: inset 0 0 0 2px currentColor;
}
.focus-within:focus-within {
  outline: none;
  box-shadow: inset 0 0 0 2px currentColor;
}
/*  shadows  */

.sh1            {
                  box-shadow:
                    0 1px 2px  rgb(from var(--f2) r g b / 0.14),
                    0 1px 1px  rgb(from var(--f2) r g b / 0.08);
                    }
.sh2            {    
                  box-shadow:
                    0 4px 12px rgb(from var(--f2) r g b / 0.18),
                    0 2px 6px  rgb(from var(--f2) r g b / 0.10);
                    }
.sh3            {
                  box-shadow:
                    0 12px 28px rgb(from var(--f2) r g b / 0.22),
                    0 6px 12px  rgb(from var(--f2) r g b / 0.14),
                    0 2px 4px   rgb(from var(--f2) r g b / 0.10);
                    }

.pointer        { cursor: pointer; }
.grabber        { cursor: grab; }
.no-select      { user-select: none;
                  -webkit-user-select: none; }
.page {
  padding: var(--p-page);
  margin: auto;
  max-width: 650px;
  width: 100%;
}
.page-wide {
  padding: var(--p-page);
  margin: auto;
  max-width: 880px;
}


/* part 6: form/input/actionable styling */


.loader { position: relative; display: flex; }
.loading {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  pointer-events: none;
}
.loader .loading {
  opacity: 0;
  transition: opacity 300ms;
}
.is-loading.loader {
  pointer-events: none;
}
.is-loading .loader .loading,
.loader.is-loading .loading {
  opacity: 1;
}
.loader .loaded {
  opacity: 1;
  transition: opacity 300ms;
}
.is-loading .loader .loaded,
.loader.is-loading .loaded {
  opacity: 0;
}
/*  .pulsable + .is-requesting: an in-flight request pulses the element's own
    colorscale.  the pulse is split in two -- the keyframes drive its SHAPE
    (--pulse-phase), a transition drives its VOLUME (--pulse-amount) -- so that
    dropping .is-requesting fades the pulse out instead of snapping it off.
    an animation that is removed takes its value with it in one frame, and no
    transition can catch that, because the declared value never changed.  here
    the animation only PAUSES: it holds the phase it stopped on while the
    amount eases to zero.  paused animations cost nothing per frame, so an
    idle .pulsable is idle.

    the filter is !important because it is the one place these elements'
    filter is decided: hover and active feed into it as amounts below,
    rather than declaring filters of their own that would out-specify this
    one and cut the pulse mid-request.  */
@property --pulse-phase {
  syntax: "<number>";
  inherits: false;
  initial-value: 0;
}
@property --pulse-amount {
  syntax: "<number>";
  inherits: false;
  initial-value: 0;
}
@property --hover-amount {
  syntax: "<number>";
  inherits: false;
  initial-value: 0;
}
@property --active-amount {
  syntax: "<percentage>";
  inherits: false;
  initial-value: 0%;
}
.pulsable {
  --pulse-amount: 0;
  --hover-amount: 0;
  --active-amount: 0%;
  animation: requestPulse 2s ease-out infinite paused;
  /*  the colour half is .hover's, restated: this declaration REPLACES that
      list rather than extending it, and a pulsable that is also toggleable
      would otherwise lose its state easing.  */
  transition: --pulse-amount 380ms ease-out, --hover-amount 180ms ease,
              background-color 0.2s ease, color 0.2s ease;
  filter:
    invert(calc(var(--pulse-phase) * var(--pulse-amount) * 100%
                + var(--hover-amount) * 100%
                + var(--active-amount)))
    saturate(calc(100% - var(--pulse-phase) * var(--pulse-amount) * 100%))
    !important;
}
.pulsable.active {
  --active-amount: var(--active-offset);
}
.pulsable.is-requesting {
  --pulse-amount: 1;
  animation-play-state: running;
}
@keyframes requestPulse {
  from {
    --pulse-phase: 0;
  }
  50% {
    --pulse-phase: 1;
  }
  to {
    --pulse-phase: 0;
  }
}
@media (hover: hover) and (pointer: fine) {
  .pulsable:hover        { --hover-amount: 0.17; transition-duration: 380ms, 120ms; }
  .pulsable.active:hover { --hover-amount: 0.25; --active-amount: 0%; }
  .pulsable:disabled     { --hover-amount: 0; }
}
@media (prefers-reduced-motion: reduce) {
  .pulsable { animation: none; }
  .pulsable.is-requesting { --pulse-phase: 0.45; }
}
/*  .spin: an inline spinner (a rotating ring in the current text color).  pair
    with data-indicator + data-show to show it while a request is in flight.  */
.spin {
  display: inline-block;
  width: 1em;
  height: 1em;
  border: 2px solid currentColor;
  border-top-color: transparent;
  border-radius: 50%;
  vertical-align: middle;
  animation: cspin 0.6s linear infinite;
}
@keyframes cspin {
  to { transform: rotate(360deg); }
}
::placeholder {
  color: var(--f5);
  opacity: 0.5;
}
input[type="checkbox"] {
  appearance: none;
  -webkit-appearance: none;
  width: 1em;
  height: 1em;
  border: 1.5px solid currentColor;
  border-radius: 20%;
  display: inline-block;
  vertical-align: middle;
  cursor: pointer;
  position: relative;
}
input[type="checkbox"]:checked::before {
  content: '';
  position: absolute;
  top: 50%;
  left: 50%;
  width: 0.5em;
  height: 0.5em;
  background: currentColor;
  border-radius: 20%;
  transform: translate(-50%, -50%);
}
input[type="radio"] {
  appearance: none;
  -webkit-appearance: none;
  width: 1em;
  height: 1em;
  border: 1.5px solid currentColor;
  border-radius: 50%;
  display: inline-block;
  vertical-align: middle;
  cursor: pointer;
  position: relative;
}
input[type="radio"]:checked::before {
  content: '';
  position: absolute;
  top: 50%;
  left: 50%;
  width: 0.5em;
  height: 0.5em;
  background: currentColor;
  border-radius: 50%;
  transform: translate(-50%, -50%);
}
input[type=range] {
  -webkit-appearance: none;
  appearance: none;
  width: 100%;
  height: 5px;
  background: var(--f4);
  outline: none;
  border-radius: 5px;
}
/* Style the slider thumb */
input[type=range]::-webkit-slider-thumb {
  -webkit-appearance: none;
  appearance: none;
  width: 0.8em;
  height: 0.8em;
  background: var(--f0);
  cursor: pointer;
  border-radius: 50%;
  border: none;
}
input[type=range]::-moz-range-thumb {
  width: 0.8em;
  height: 0.8em;
  background: var(--f0);
  cursor: pointer;
  border-radius: 50%;
  border: none;
}
details summary.no-arrow::-webkit-details-marker,
details summary.no-arrow::marker {
  display: none;
  content: "";
}

/*  a summary laid out with flex loses its ::marker, so a row that opens stops
    looking like one.  .arrow draws the disclosure itself: a flex item at the
    start of the row that turns when the details opens.  */
details > summary.arrow {
  list-style: none;
}
details > summary.arrow::-webkit-details-marker {
  display: none;
}
details > summary.arrow::before {
  content: "\25B8";
  flex: none;
  color: var(--f4);
  transition: rotate 0.15s ease;
}
details[open] > summary.arrow::before {
  rotate: 90deg;
}
@media (prefers-reduced-motion: reduce) {
  details > summary.arrow::before { transition: none; }
}

/*  dialogs  */

dialog {
  color: var(--f1);
  background: var(--b1);
  border: 1px solid var(--b4);
  border-radius: var(--s4);
  box-shadow: 0 1px 2px hsl(0 0% 0% / 0.24),
              0 16px 40px -12px hsl(0 0% 0% / 0.5);
}
dialog::backdrop {
  background: hsl(0 0% 6% / 0);
  backdrop-filter: blur(0px) saturate(100%);
  -webkit-backdrop-filter: blur(0px) saturate(100%);
}
dialog[open]::backdrop {
  background: hsl(0 0% 6% / 0.44);
  backdrop-filter: blur(7px) saturate(130%);
  -webkit-backdrop-filter: blur(7px) saturate(130%);
}
/*  both directions: `overlay`/`display` need allow-discrete, else the close
    is instant no matter what the other properties transition.  */
@media (prefers-reduced-motion: no-preference) {
  dialog {
    opacity: 0;
    transform: translateY(6px) scale(0.985);
    transition: opacity 140ms ease, transform 140ms ease,
                overlay 140ms allow-discrete, display 140ms allow-discrete;
  }
  dialog[open] {
    opacity: 1;
    transform: none;
  }
  dialog::backdrop {
    transition: background 180ms ease, backdrop-filter 180ms ease,
                -webkit-backdrop-filter 180ms ease,
                overlay 180ms allow-discrete, display 180ms allow-discrete;
  }
  @starting-style {
    dialog[open] {
      opacity: 0;
      transform: translateY(6px) scale(0.985);
    }
    dialog[open]::backdrop {
      background: hsl(0 0% 6% / 0);
      backdrop-filter: blur(0px) saturate(100%);
      -webkit-backdrop-filter: blur(0px) saturate(100%);
    }
  }
}

/*  calendar bucket tree  */

.bl-line {
  border-left: 1px solid var(--f9);
  margin-left: 6px;
}
.cal-toggle::after {
  content: '';
  flex: 1;
  height: 1px;
  background: var(--f6);
  opacity: 0.5;
  margin-left: var(--s3);
}


/*  part 7: focus-visible & extra states
    companions to .hover / .active / .disabled / .focus above.  */

/*  keyboard-only focus ring.  the reset clears native outlines, so restore a
    visible one for keyboard users — pointer/mouse focus stays clean.  */
:focus-visible {
  outline: 1px solid var(--f5);
  outline-offset: 2px;
  position: relative;
  z-index: 1;      /* lift the ring above flush neighbors so it is never clipped */
}
/*  bordered controls that sit flush in a row (input + buttons) get an INSET ring:
    an outside ring would be painted over by the adjacent element / card edge.  */
input:focus-visible,
textarea:focus-visible,
select:focus-visible,
button:focus-visible {
  outline: 1px solid var(--f5);
  outline-offset: -1px;
}
/*  opt-out: a control that IS its surface, rather than a box sitting on one,
    draws no ring of its own — its container shows the focus.  */
.ring-none:focus-visible { outline: none; }

/*  opt-in: inset ring instead of the outline  */
.focus-visible:focus-visible {
  outline: none;
  box-shadow: inset 0 0 0 2px currentColor;
}


/*  part 8: responsive variants  (mobile-first; min-width)
    prefix a curated set of layout utilities with sm- / md- / lg-.
    hyphen separator is sail-friendly: a colon-prefixed class can't use the
    `.cls` shorthand because `:` begins sail text content.
        sm- >= 40rem    md- >= 48rem    lg- >= 64rem
    e.g.  ;div.fc.md-fr   — stacks on mobile, row from 48rem up.  */

@media (min-width: 40rem) {
  .sm-hidden       { display: none !important; }
  .sm-block        { display: block; }
  .sm-inline-block { display: inline-block; }
  .sm-fc           { display: flex; flex-direction: column; }
  .sm-fr           { display: flex; flex-direction: row; }
  .sm-frw          { display: flex; flex-direction: row; flex-wrap: wrap; }
  .sm-frr          { display: flex; flex-direction: row-reverse; }
  .sm-grow         { flex-grow: 1; }
  .sm-shrink-none  { flex-shrink: 0; }
  .sm-wf           { width: 100%; }
  .sm-wfc          { width: fit-content; }
  .sm-wn           { width: 0; }
  .sm-hf           { height: 100%; }
  .sm-jc           { justify-content: center; }
  .sm-jb           { justify-content: space-between; }
  .sm-js           { justify-content: start; }
  .sm-je           { justify-content: end; }
  .sm-ac           { align-items: center; }
  .sm-as           { align-items: start; }
  .sm-ae           { align-items: end; }
  .sm-af           { align-items: stretch; }
  .sm-g0           { gap: var(--s0); }
  .sm-g1           { gap: var(--s1); }
  .sm-g2           { gap: var(--s2); }
  .sm-g3           { gap: var(--s3); }
  .sm-g4           { gap: var(--s4); }
  .sm-g5           { gap: var(--s5); }
  .sm-g6           { gap: var(--s6); }
}

@media (min-width: 48rem) {
  .md-hidden       { display: none !important; }
  .md-block        { display: block; }
  .md-inline-block { display: inline-block; }
  .md-fc           { display: flex; flex-direction: column; }
  .md-fr           { display: flex; flex-direction: row; }
  .md-frw          { display: flex; flex-direction: row; flex-wrap: wrap; }
  .md-frr          { display: flex; flex-direction: row-reverse; }
  .md-grow         { flex-grow: 1; }
  .md-shrink-none  { flex-shrink: 0; }
  .md-wf           { width: 100%; }
  .md-wfc          { width: fit-content; }
  .md-wn           { width: 0; }
  .md-w20          { width: var(--s20); }
  .md-hf           { height: 100%; }
  .md-max-hn       { max-height: none; }
  .md-bdb0         { border-bottom: none; }
  .md-bdr1         { border-right: 1px solid var(--border-color); }
  .md-jc           { justify-content: center; }
  .md-jb           { justify-content: space-between; }
  .md-js           { justify-content: start; }
  .md-je           { justify-content: end; }
  .md-ac           { align-items: center; }
  .md-as           { align-items: start; }
  .md-ae           { align-items: end; }
  .md-af           { align-items: stretch; }
  .md-g0           { gap: var(--s0); }
  .md-g1           { gap: var(--s1); }
  .md-g2           { gap: var(--s2); }
  .md-g3           { gap: var(--s3); }
  .md-g4           { gap: var(--s4); }
  .md-g5           { gap: var(--s5); }
  .md-g6           { gap: var(--s6); }
}

@media (min-width: 64rem) {
  .lg-hidden       { display: none !important; }
  .lg-block        { display: block; }
  .lg-inline-block { display: inline-block; }
  .lg-fc           { display: flex; flex-direction: column; }
  .lg-fr           { display: flex; flex-direction: row; }
  .lg-frw          { display: flex; flex-direction: row; flex-wrap: wrap; }
  .lg-frr          { display: flex; flex-direction: row-reverse; }
  .lg-grow         { flex-grow: 1; }
  .lg-shrink-none  { flex-shrink: 0; }
  .lg-wf           { width: 100%; }
  .lg-wfc          { width: fit-content; }
  .lg-wn           { width: 0; }
  .lg-hf           { height: 100%; }
  .lg-jc           { justify-content: center; }
  .lg-jb           { justify-content: space-between; }
  .lg-js           { justify-content: start; }
  .lg-je           { justify-content: end; }
  .lg-ac           { align-items: center; }
  .lg-as           { align-items: start; }
  .lg-ae           { align-items: end; }
  .lg-af           { align-items: stretch; }
  .lg-g0           { gap: var(--s0); }
  .lg-g1           { gap: var(--s1); }
  .lg-g2           { gap: var(--s2); }
  .lg-g3           { gap: var(--s3); }
  .lg-g4           { gap: var(--s4); }
  .lg-g5           { gap: var(--s5); }
  .lg-g6           { gap: var(--s6); }
}

/*  THE OUTLINER
    ------------
    A tree where every row is an address: a fold caret, a bullet, and the
    text.  The bullet is the menu of what may be done to the row, hung under
    the dot itself.

    The two slots are fixed width so that rows at one depth line up whether
    or not they have children or anything to do.  A bullet with its children
    folded away wears a ring, so a closed row is closed on the screen and not
    only in the markup.  */

.node           { position: relative; padding-block: 1px; }

.caret-slot     { width: 14px; height: 18px; flex-shrink: 0; }
.bullet-slot    { width: 18px; height: 18px; flex-shrink: 0; }

/*  a handle has no resting surface of its own: it sits on whatever the row
    sits on.  the highlight cannot come from .hover -- that is a filter, and
    over a transparent button it inverts the DOT and nothing else -- so the
    two say it here, in color, over the surface they are actually on.  */
button.caret-slot,
button.bullet-slot { background-color: transparent;
                     transition: background-color 0.2s ease; }

@media (hover: hover) and (pointer: fine) {
  button.bullet-slot:hover { background-color: var(--b3); }
}

.caret          { width: 0; height: 0; border-style: solid;
                  border-width: 4px 0 4px 6px;
                  border-color: transparent transparent transparent var(--f5); }
.caret-open     { transform: rotate(90deg); }

.bullet         { width: 7px; height: 7px; border-radius: 50%;
                  background-color: var(--f2); flex-shrink: 0; }
.bullet.ring    { box-shadow: 0 0 0 4px rgb(from var(--f2) r g b / 0.20); }

/*  a row's menu, hung under the button that opens it.  It opens RIGHTWARD:
    rows begin at the column's own left edge, so a menu that grows right is
    inside the column at every depth.  */
.drop           { position: absolute; top: 100%; left: 0;
                  min-width: 11rem; box-shadow: 0 2px 8px rgb(0 0 0 / 0.12); }

/*  a growing box, ceilinged: <feather-textarea> reads max-height off its
    host and flips its own overflow to auto once it hits one.  */
.rows5          { max-height: calc(var(--line-height) * 5em); }

/*  a row that holds markup, drawn as the document it is.  The height is the
    reader's: nothing outside a sandboxed frame can measure what is in it, so
    the box is dragged rather than guessed, and the frame fills whatever it
    is dragged to.  */
.frame-box      { resize: vertical; overflow: hidden; border-radius: 2px;
                  height: 16rem; min-height: 6rem; background-color: var(--b0); }
.frame-pane     { height: 100%; display: block; }

}  /* end @layer utilities */