index.css

area,
base,
basefont,
datalist,
head,
link,
meta,
noembed,
noframes,
param,
rp,
script,
style,
template,
title {
  display: none;
}

[hidden]:not([hidden="until-found" i]):not(embed) {
  display: none;
}

[hidden="until-found" i]:not(embed) {
  content-visibility: hidden;
}

embed[hidden] {
  display: inline;
  height: 0;
  width: 0;
}

input[type="hidden" i] {
  display: none !important;
}

@media (scripting) {
  noscript {
    display: none !important;
  }
}

html,
body {
  display: block;
}

address,
blockquote,
center,
dialog,
div,
figure,
figcaption,
footer,
form,
header,
hr,
legend,
listing,
main,
p,
plaintext,
pre,
search,
xmp {
  display: block;
}

blockquote,
figure,
listing,
p,
plaintext,
pre,
xmp {
  margin-block: 1em;
}

blockquote,
figure {
  margin-inline: 40px;
}

address {
  font-style: italic;
}
listing,
plaintext,
pre,
xmp {
  font-family: monospace;
  white-space: pre;
}

dialog:not([open]) {
  display: none;
}
dialog {
  position: absolute;
  inset-inline-start: 0;
  inset-inline-end: 0;
  width: fit-content;
  height: fit-content;
  margin: auto;
  border: solid;
  padding: 1em;
  background-color: Canvas;
  color: CanvasText;
}
dialog:modal {
  position: fixed;
  overflow: auto;
  inset-block: 0;
  max-width: calc(100% - 6px - 2em);
  max-height: calc(100% - 6px - 2em);
}
dialog::backdrop {
  background: rgba(0, 0, 0, 0.1);
}

[popover]:not(:popover-open):not(dialog[open]) {
  display: none;
}

dialog:popover-open {
  display: block;
}

[popover] {
  position: fixed;
  inset: 0;
  width: fit-content;
  height: fit-content;
  margin: auto;
  border: solid;
  padding: 0.25em;
  overflow: auto;
  color: CanvasText;
  background-color: Canvas;
}

:popover-open::backdrop {
  position: fixed;
  inset: 0;
  pointer-events: none !important;
  background-color: transparent;
}

slot {
  display: contents;
}

pre[wrap] {
  white-space: pre-wrap;
}

form {
  margin-block-end: 1em;
}

cite,
dfn,
em,
i,
var {
  font-style: italic;
}
b,
strong {
  font-weight: bolder;
}
code,
kbd,
samp,
tt {
  font-family: monospace;
}
big {
  font-size: larger;
}
small {
  font-size: smaller;
}

sub {
  vertical-align: sub;
}
sup {
  vertical-align: super;
}
sub,
sup {
  line-height: normal;
  font-size: smaller;
}

ruby {
  display: ruby;
}
rt {
  display: ruby-text;
}

:link {
  color: #0000ee;
}
:visited {
  color: #551a8b;
}
:link:active,
:visited:active {
  color: #ff0000;
}
:link,
:visited {
  text-decoration: underline;
  cursor: pointer;
}

:focus-visible {
  outline: auto;
}

mark {
  background: yellow;
  color: black;
} /* this color is just a suggestion and can be changed based on implementation feedback */

abbr[title],
acronym[title] {
  text-decoration: dotted underline;
}
ins,
u {
  text-decoration: underline;
}
del,
s,
strike {
  text-decoration: line-through;
}

q::before {
  content: open-quote;
}
q::after {
  content: close-quote;
}

br {
  display-outside: newline;
} /* this also has bidi implications */
nobr {
  white-space: nowrap;
}
wbr {
  display-outside: break-opportunity;
} /* this also has bidi implications */
nobr wbr {
  white-space: normal;
}

br[clear="left" i] {
  clear: left;
}
br[clear="right" i] {
  clear: right;
}
br[clear="all" i],
br[clear="both" i] {
  clear: both;
}

[dir]:dir(ltr),
bdi:dir(ltr),
input[type="tel" i]:dir(ltr) {
  direction: ltr;
}
[dir]:dir(rtl),
bdi:dir(rtl) {
  direction: rtl;
}

address,
blockquote,
center,
div,
figure,
figcaption,
footer,
form,
header,
hr,
legend,
listing,
main,
p,
plaintext,
pre,
summary,
xmp,
article,
aside,
:heading,
hgroup,
nav,
section,
search,
table,
caption,
colgroup,
col,
thead,
tbody,
tfoot,
tr,
td,
th,
dir,
dd,
dl,
dt,
menu,
ol,
ul,
li,
bdi,
output,
[dir="ltr" i],
[dir="rtl" i],
[dir="auto" i] {
  unicode-bidi: isolate;
}

bdo,
bdo[dir] {
  unicode-bidi: isolate-override;
}

input[dir="auto" i]:is(
    [type="search" i],
    [type="tel" i],
    [type="url" i],
    [type="email" i]
  ),
textarea[dir="auto" i],
pre[dir="auto" i] {
  unicode-bidi: plaintext;
}
/* see prose for input elements whose type attribute is in the Text state */

/* the rules setting the 'content' property on br and wbr elements also has bidi implications */

address,
blockquote,
center,
div,
figure,
figcaption,
footer,
form,
header,
hr,
legend,
listing,
main,
p,
plaintext,
pre,
summary,
xmp,
article,
aside,
:heading,
hgroup,
nav,
section,
search,
table,
caption,
colgroup,
col,
thead,
tbody,
tfoot,
tr,
td,
th,
dir,
dd,
dl,
dt,
menu,
ol,
ul,
li,
[dir="ltr" i],
[dir="rtl" i],
[dir="auto" i],
*|* {
  unicode-bidi: bidi-override;
}
input:not([type="submit" i]):not([type="reset" i]):not([type="button" i]),
textarea {
  unicode-bidi: normal;
}

article,
aside,
:heading,
hgroup,
nav,
section {
  display: block;
}

:heading {
  font-weight: bold;
}

:heading(1) {
  margin-block: 0.67em;
  font-size: 2em;
}
:heading(2) {
  margin-block: 0.83em;
  font-size: 1.5em;
}
:heading(3) {
  margin-block: 1em;
  font-size: 1.17em;
}
:heading(4) {
  margin-block: 1.33em;
  font-size: 1em;
}
:heading(5) {
  margin-block: 1.67em;
  font-size: 0.83em;
}
:heading(6, 7, 8, 9) {
  font-size: 0.67em;
  margin-block: 2.33em;
}

dir,
dd,
dl,
dt,
menu,
ol,
ul {
  display: block;
}
li {
  display: list-item;
  text-align: match-parent;
}

dir,
dl,
menu,
ol,
ul {
  margin-block: 1em;
}

:is(dir, dl, menu, ol, ul) :is(dir, dl, menu, ol, ul) {
  margin-block: 0;
}

dd {
  margin-inline-start: 40px;
}
dir,
menu,
ol,
ul {
  padding-inline-start: 40px;
}

ol,
ul,
menu {
  counter-reset: list-item;
}
ol {
  list-style-type: decimal;
}

dir,
menu,
ul {
  list-style-type: disc;
}
:is(dir, menu, ol, ul) :is(dir, menu, ul) {
  list-style-type: circle;
}
:is(dir, menu, ol, ul) :is(dir, menu, ol, ul) :is(dir, menu, ul) {
  list-style-type: square;
}

ol[type="1"],
li[type="1"] {
  list-style-type: decimal;
}
ol[type="a" s],
li[type="a" s] {
  list-style-type: lower-alpha;
}
ol[type="A" s],
li[type="A" s] {
  list-style-type: upper-alpha;
}
ol[type="i" s],
li[type="i" s] {
  list-style-type: lower-roman;
}
ol[type="I" s],
li[type="I" s] {
  list-style-type: upper-roman;
}
ul[type="none" i],
li[type="none" i] {
  list-style-type: none;
}
ul[type="disc" i],
li[type="disc" i] {
  list-style-type: disc;
}
ul[type="circle" i],
li[type="circle" i] {
  list-style-type: circle;
}
ul[type="square" i],
li[type="square" i] {
  list-style-type: square;
}

li {
  list-style-position: inside;
}
li :is(dir, menu, ol, ul) {
  list-style-position: outside;
}
:is(dir, menu, ol, ul) :is(dir, menu, ol, ul, li) {
  list-style-position: unset;
}

table {
  display: table;
}
caption {
  display: table-caption;
}
colgroup,
colgroup[hidden] {
  display: table-column-group;
}
col,
col[hidden] {
  display: table-column;
}
thead,
thead[hidden] {
  display: table-header-group;
}
tbody,
tbody[hidden] {
  display: table-row-group;
}
tfoot,
tfoot[hidden] {
  display: table-footer-group;
}
tr,
tr[hidden] {
  display: table-row;
}
td,
th {
  display: table-cell;
}

colgroup[hidden],
col[hidden],
thead[hidden],
tbody[hidden],
tfoot[hidden],
tr[hidden] {
  visibility: collapse;
}

table {
  box-sizing: border-box;
  border-spacing: 2px;
  border-collapse: separate;
  text-indent: initial;
}
td,
th {
  padding: 1px;
}
th {
  font-weight: bold;
}

caption {
  text-align: center;
}
thead,
tbody,
tfoot,
table > tr {
  vertical-align: middle;
}
tr,
td,
th {
  vertical-align: inherit;
}

thead,
tbody,
tfoot,
tr {
  border-color: inherit;
}
table[rules="none" i],
table[rules="groups" i],
table[rules="rows" i],
table[rules="cols" i],
table[rules="all" i],
table[frame="void" i],
table[frame="above" i],
table[frame="below" i],
table[frame="hsides" i],
table[frame="lhs" i],
table[frame="rhs" i],
table[frame="vsides" i],
table[frame="box" i],
table[frame="border" i],
table[rules="none" i] > tr > td,
table[rules="none" i] > tr > th,
table[rules="groups" i] > tr > td,
table[rules="groups" i] > tr > th,
table[rules="rows" i] > tr > td,
table[rules="rows" i] > tr > th,
table[rules="cols" i] > tr > td,
table[rules="cols" i] > tr > th,
table[rules="all" i] > tr > td,
table[rules="all" i] > tr > th,
table[rules="none" i] > thead > tr > td,
table[rules="none" i] > thead > tr > th,
table[rules="groups" i] > thead > tr > td,
table[rules="groups" i] > thead > tr > th,
table[rules="rows" i] > thead > tr > td,
table[rules="rows" i] > thead > tr > th,
table[rules="cols" i] > thead > tr > td,
table[rules="cols" i] > thead > tr > th,
table[rules="all" i] > thead > tr > td,
table[rules="all" i] > thead > tr > th,
table[rules="none" i] > tbody > tr > td,
table[rules="none" i] > tbody > tr > th,
table[rules="groups" i] > tbody > tr > td,
table[rules="groups" i] > tbody > tr > th,
table[rules="rows" i] > tbody > tr > td,
table[rules="rows" i] > tbody > tr > th,
table[rules="cols" i] > tbody > tr > td,
table[rules="cols" i] > tbody > tr > th,
table[rules="all" i] > tbody > tr > td,
table[rules="all" i] > tbody > tr > th,
table[rules="none" i] > tfoot > tr > td,
table[rules="none" i] > tfoot > tr > th,
table[rules="groups" i] > tfoot > tr > td,
table[rules="groups" i] > tfoot > tr > th,
table[rules="rows" i] > tfoot > tr > td,
table[rules="rows" i] > tfoot > tr > th,
table[rules="cols" i] > tfoot > tr > td,
table[rules="cols" i] > tfoot > tr > th,
table[rules="all" i] > tfoot > tr > td,
table[rules="all" i] > tfoot > tr > th {
  border-color: black;
}

table[align="left" i] {
  float: left;
}
table[align="right" i] {
  float: right;
}
table[align="center" i] {
  margin-inline: auto;
}
thead[align="absmiddle" i],
tbody[align="absmiddle" i],
tfoot[align="absmiddle" i],
tr[align="absmiddle" i],
td[align="absmiddle" i],
th[align="absmiddle" i] {
  text-align: center;
}

caption[align="bottom" i] {
  caption-side: bottom;
}
p[align="left" i],
h1[align="left" i],
h2[align="left" i],
h3[align="left" i],
h4[align="left" i],
h5[align="left" i],
h6[align="left" i] {
  text-align: left;
}
p[align="right" i],
h1[align="right" i],
h2[align="right" i],
h3[align="right" i],
h4[align="right" i],
h5[align="right" i],
h6[align="right" i] {
  text-align: right;
}
p[align="center" i],
h1[align="center" i],
h2[align="center" i],
h3[align="center" i],
h4[align="center" i],
h5[align="center" i],
h6[align="center" i] {
  text-align: center;
}
p[align="justify" i],
h1[align="justify" i],
h2[align="justify" i],
h3[align="justify" i],
h4[align="justify" i],
h5[align="justify" i],
h6[align="justify" i] {
  text-align: justify;
}
thead[valign="top" i],
tbody[valign="top" i],
tfoot[valign="top" i],
tr[valign="top" i],
td[valign="top" i],
th[valign="top" i] {
  vertical-align: top;
}
thead[valign="middle" i],
tbody[valign="middle" i],
tfoot[valign="middle" i],
tr[valign="middle" i],
td[valign="middle" i],
th[valign="middle" i] {
  vertical-align: middle;
}
thead[valign="bottom" i],
tbody[valign="bottom" i],
tfoot[valign="bottom" i],
tr[valign="bottom" i],
td[valign="bottom" i],
th[valign="bottom" i] {
  vertical-align: bottom;
}
thead[valign="baseline" i],
tbody[valign="baseline" i],
tfoot[valign="baseline" i],
tr[valign="baseline" i],
td[valign="baseline" i],
th[valign="baseline" i] {
  vertical-align: baseline;
}

td[nowrap],
th[nowrap] {
  white-space: nowrap;
}

table[rules="none" i],
table[rules="groups" i],
table[rules="rows" i],
table[rules="cols" i],
table[rules="all" i] {
  border-style: hidden;
  border-collapse: collapse;
}
table[border] {
  border-style: outset;
} /* only if border is not equivalent to zero */
table[frame="void" i] {
  border-style: hidden;
}
table[frame="above" i] {
  border-style: outset hidden hidden hidden;
}
table[frame="below" i] {
  border-style: hidden hidden outset hidden;
}
table[frame="hsides" i] {
  border-style: outset hidden outset hidden;
}
table[frame="lhs" i] {
  border-style: hidden hidden hidden outset;
}
table[frame="rhs" i] {
  border-style: hidden outset hidden hidden;
}
table[frame="vsides" i] {
  border-style: hidden outset;
}
table[frame="box" i],
table[frame="border" i] {
  border-style: outset;
}

table[border] > tr > td,
table[border] > tr > th,
table[border] > thead > tr > td,
table[border] > thead > tr > th,
table[border] > tbody > tr > td,
table[border] > tbody > tr > th,
table[border] > tfoot > tr > td,
table[border] > tfoot > tr > th {
  /* only if border is not equivalent to zero */
  border-width: 1px;
  border-style: inset;
}
table[rules="none" i] > tr > td,
table[rules="none" i] > tr > th,
table[rules="none" i] > thead > tr > td,
table[rules="none" i] > thead > tr > th,
table[rules="none" i] > tbody > tr > td,
table[rules="none" i] > tbody > tr > th,
table[rules="none" i] > tfoot > tr > td,
table[rules="none" i] > tfoot > tr > th,
table[rules="groups" i] > tr > td,
table[rules="groups" i] > tr > th,
table[rules="groups" i] > thead > tr > td,
table[rules="groups" i] > thead > tr > th,
table[rules="groups" i] > tbody > tr > td,
table[rules="groups" i] > tbody > tr > th,
table[rules="groups" i] > tfoot > tr > td,
table[rules="groups" i] > tfoot > tr > th,
table[rules="rows" i] > tr > td,
table[rules="rows" i] > tr > th,
table[rules="rows" i] > thead > tr > td,
table[rules="rows" i] > thead > tr > th,
table[rules="rows" i] > tbody > tr > td,
table[rules="rows" i] > tbody > tr > th,
table[rules="rows" i] > tfoot > tr > td,
table[rules="rows" i] > tfoot > tr > th {
  border-width: 1px;
  border-style: none;
}
table[rules="cols" i] > tr > td,
table[rules="cols" i] > tr > th,
table[rules="cols" i] > thead > tr > td,
table[rules="cols" i] > thead > tr > th,
table[rules="cols" i] > tbody > tr > td,
table[rules="cols" i] > tbody > tr > th,
table[rules="cols" i] > tfoot > tr > td,
table[rules="cols" i] > tfoot > tr > th {
  border-width: 1px;
  border-block-style: none;
  border-inline-style: solid;
}
table[rules="all" i] > tr > td,
table[rules="all" i] > tr > th,
table[rules="all" i] > thead > tr > td,
table[rules="all" i] > thead > tr > th,
table[rules="all" i] > tbody > tr > td,
table[rules="all" i] > tbody > tr > th,
table[rules="all" i] > tfoot > tr > td,
table[rules="all" i] > tfoot > tr > th {
  border-width: 1px;
  border-style: solid;
}

table[rules="groups" i] > colgroup {
  border-inline-width: 1px;
  border-inline-style: solid;
}
table[rules="groups" i] > thead,
table[rules="groups" i] > tbody,
table[rules="groups" i] > tfoot {
  border-block-width: 1px;
  border-block-style: solid;
}

table[rules="rows" i] > tr,
table[rules="rows" i] > thead > tr,
table[rules="rows" i] > tbody > tr,
table[rules="rows" i] > tfoot > tr {
  border-block-width: 1px;
  border-block-style: solid;
}

table {
  font-weight: initial;
  font-style: initial;
  font-variant: initial;
  font-size: initial;
  line-height: initial;
  white-space: initial;
  text-align: initial;
}

:is(table, thead, tbody, tfoot, tr) > form {
  display: none !important;
}

input,
button,
textarea {
  letter-spacing: initial;
  word-spacing: initial;
  line-height: initial;
}

input,
select,
button,
textarea {
  text-transform: initial;
  text-indent: initial;
  text-shadow: initial;
  appearance: auto;
}

input:not(
  [type="image" i],
  [type="range" i],
  [type="checkbox" i],
  [type="radio" i]
) {
  overflow: clip !important;
  overflow-clip-margin: 0 !important;
}

input,
select,
textarea {
  text-align: initial;
}

:autofill {
  field-sizing: fixed !important;
}

input:is([type="reset" i], [type="button" i], [type="submit" i]),
button {
  text-align: center;
}

input,
button {
  display: inline-block;
}

input[type="hidden" i],
input[type="file" i],
input[type="image" i] {
  appearance: none;
}

input:is(
  [type="radio" i],
  [type="checkbox" i],
  [type="reset" i],
  [type="button" i],
  [type="submit" i],
  [type="color" i],
  [type="search" i]
),
select,
button {
  box-sizing: border-box;
}

textarea {
  white-space: pre-wrap;
}

input:not([type="image" i]),
textarea {
  box-sizing: border-box;
}

hr {
  color: gray;
  border-style: inset;
  border-width: 1px;
  margin-block: 0.5em;
  margin-inline: auto;
  overflow: hidden;
}

hr[align="left" i] {
  margin-left: 0;
  margin-right: auto;
}
hr[align="right" i] {
  margin-left: auto;
  margin-right: 0;
}
hr[align="center" i] {
  margin-left: auto;
  margin-right: auto;
}
hr[color],
hr[noshade] {
  border-style: solid;
}

fieldset {
  display: block;
  margin-inline: 2px;
  border: groove 2px ThreeDFace;
  padding-block: 0.35em 0.625em;
  padding-inline: 0.75em;
  min-inline-size: min-content;
}

legend {
  padding-inline: 2px;
}

legend[align="left" i] {
  justify-self: left;
}

legend[align="center" i] {
  justify-self: center;
}

legend[align="right" i] {
  justify-self: right;
}

iframe {
  border: 2px inset;
}
video {
  object-fit: contain;
}

img:is([sizes="auto" i], [sizes^="auto," i]) {
  contain: size !important;
  contain-intrinsic-size: 300px 150px;
}

img[align="left" i] {
  margin-right: 3px;
}
img[align="right" i] {
  margin-left: 3px;
}

embed[align="left" i],
iframe[align="left" i],
img[align="left" i],
input[type="image" i][align="left" i],
object[align="left" i] {
  float: left;
}

embed[align="right" i],
iframe[align="right" i],
img[align="right" i],
input[type="image" i][align="right" i],
object[align="right" i] {
  float: right;
}

embed[align="top" i],
iframe[align="top" i],
img[align="top" i],
input[type="image" i][align="top" i],
object[align="top" i] {
  vertical-align: top;
}

embed[align="baseline" i],
iframe[align="baseline" i],
img[align="baseline" i],
input[type="image" i][align="baseline" i],
object[align="baseline" i] {
  vertical-align: baseline;
}

embed[align="texttop" i],
iframe[align="texttop" i],
img[align="texttop" i],
input[type="image" i][align="texttop" i],
object[align="texttop" i] {
  vertical-align: text-top;
}

embed[align="absmiddle" i],
iframe[align="absmiddle" i],
img[align="absmiddle" i],
input[type="image" i][align="absmiddle" i],
object[align="absmiddle" i],
embed[align="abscenter" i],
iframe[align="abscenter" i],
img[align="abscenter" i],
input[type="image" i][align="abscenter" i],
object[align="abscenter" i] {
  vertical-align: middle;
}

embed[align="bottom" i],
iframe[align="bottom" i],
img[align="bottom" i],
input[type="image" i][align="bottom" i],
object[align="bottom" i] {
  vertical-align: bottom;
}

details,
summary {
  display: block;
}
details > summary:first-of-type {
  display: list-item;
  counter-increment: list-item 0;
  list-style: disclosure-closed inside;
}
details[open] > summary:first-of-type {
  list-style-type: disclosure-open;
}

marquee {
  display: inline-block;
  text-align: initial;
  overflow: hidden !important;
}

meter {
  appearance: auto;
}

progress {
  appearance: auto;
}

select {
  letter-spacing: initial;
  word-spacing: initial;
  line-height: initial;
}

select {
  display: inline-block;
}

select {
  background-color: transparent;
  border: 1px solid currentColor;
  user-select: none;
  box-sizing: border-box;
}

select option:enabled:hover {
  background-color: color-mix(currentColor 10%, transparent);
}
select option:enabled:active {
  background-color: color-mix(currentColor 20%, transparent);
}
select option:disabled {
  color: color-mix(currentColor 50%, transparent);
}

select option {
  min-inline-size: 24px;
  min-block-size: max(24px, 1lh);
  padding-inline: 0.5em;
  padding-block-end: 0;
  display: flex;
  align-items: center;
  gap: 0.5em;
  white-space: nowrap;
}

select option::checkmark {
  content: "\2713" / "";
}
select option:not(:checked)::checkmark {
  visibility: hidden;
}

select optgroup {
  display: block;
  font-weight: bolder;
}

select optgroup option {
  font-weight: normal;
}

select optgroup legend {
  padding-inline: 0.5em;
  min-block-size: 1lh;
}

select {
  border-radius: 0.5em;
  padding-block: 0.25em;
  padding-inline: 0.5em;
  min-block-size: calc-size(auto, max(size, 24px, 1lh));
  min-inline-size: calc-size(auto, max(size, 24px));
  display: inline-flex;
  gap: 0.5em;
  border-radius: 0.5em;
  field-sizing: content !important;
}

select > button:first-child {
  all: unset;
  display: contents;
}

select:enabled:hover {
  background-color: color-mix(currentColor 10%, transparent);
}
select:enabled:active {
  background-color: color-mix(currentColor 20%, transparent);
}
select:disabled {
  color: color-mix(currentColor 50%, transparent);
}

::picker(select) {
  box-sizing: border-box;
  border: 1px solid;
  padding: 0;
  color: CanvasText;
  background-color: Canvas;
  margin: 0;
  inset: auto;
  min-inline-size: anchor-size(self-inline);
  max-block-size: stretch;
  overflow: auto;
  position-area: block-end span-inline-end;
  position-try-order: most-block-size;
  position-try-fallbacks:
    block-start span-inline-end,
    block-end span-inline-start,
    block-start span-inline-start;
}

select::picker-icon {
  content: counter(fake-counter-name, disclosure-open);
  display: block;
  margin-inline-start: auto;
}

select {
  overflow: auto;
  display: inline-block;
  block-size: calc(max(24px, 1lh) * attr(size type(<integer>), 4));
}