:root[data-theme="light"] {
  --ac: #85f;
  --sac: #85fa;
  --c0: #fff;
  --c1: #eee;
  --c2: #ddd;
  --c3: #ccc;
  --c4: #bbb;
  --c5: #aaa;
  --c6: #999;
  --c7: #888;
  --c8: #777;
  --c9: #666;
  --ca: #555;
  --cb: #444;
  --cc: #333;
  --cd: #222;
  --ce: #111;
  --cf: #000;
  --ar: url("data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIGhlaWdodD0iMjRweCIgdmlld0JveD0iMCAtOTYwIDk2MCA5NjAiIHdpZHRoPSIyNHB4IiBmaWxsPSIjMWQxYTI0Ij48cGF0aCBkPSJNNDgwLTM0NCAyNDAtNTg0bDU2LTU2IDE4NCAxODQgMTg0LTE4NCA1NiA1Ni0yNDAgMjQwWiIvPjwvc3ZnPg==");
}
:root, :root[data-theme="dark"] {
  --ac: #85f;
  --sac: #85fa;
  --c0: #000;
  --c1: #111;
  --c2: #222;
  --c3: #333;
  --c4: #444;
  --c5: #555;
  --c6: #666;
  --c7: #777;
  --c8: #888;
  --c9: #999;
  --ca: #aaa;
  --cb: #bbb;
  --cc: #ccc;
  --cd: #ddd;
  --ce: #eee;
  --cf: #fff;
  --ar: url("data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIGhlaWdodD0iMjRweCIgdmlld0JveD0iMCAtOTYwIDk2MCA5NjAiIHdpZHRoPSIyNHB4IiBmaWxsPSIjZTdlMGVlIj48cGF0aCBkPSJNNDgwLTM0NCAyNDAtNTg0bDU2LTU2IDE4NCAxODQgMTg0LTE4NCA1NiA1Ni0yNDAgMjQwWiIvPjwvc3ZnPg==");
}

@font-face {
  font-family: "Estedad";
  src: url("../font/estedad.woff2");
  font-weight: normal;
  font-style: normal;
}

* {
  unicode-bidi: plaintext;
  -webkit-tap-highlight-color: transparent;
  scrollbar-color: var(--c5) var(--c3);
}

::selection {
  background: var(--sac);
  color: #eee;
}

:focus-visible {
  outline: 2px solid var(--ac);
  outline-offset: 1px;
}

html {
  font-family: "Estedad";
  font-size: 14px;
  line-height: 1.5;
  -webkit-text-size-adjust: 100%;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  background: var(--c1);
  color: var(--ce);
}
body { margin: 0 14px; }
body.fullscreen { margin: 0; }

h1 { padding-top: 1rem; }
h1, h2, h3, h4, h5, h6 {
  font-weight: 700;
  line-height: 1.15;
  margin-top: 0;
  margin-bottom: 1rem;
}

a[href], a.link {
  color: var(--ac);
  text-decoration-color: var(--ac);
  text-decoration: none;
  cursor: pointer;
}
a[href]:hover, a.link:hover { text-decoration: underline; }

pre, code { font-family: monospace; }
pre { padding: 2px 0; }

img { max-width: calc(100vw - 28px); }

p, table, figure, figcaption, h1, h2, h3, h4, h5, h6 { max-width: 640px; }

/* ol ul */

hr {
  box-sizing: border-box;
  width: 100%;
  margin: 2rem 0;
  border: 1px solid var(--c3);
  border-top: 1px;
}

button, input, select, textarea, optgroup, option {
  font-family: inherit;
  font-size: inherit;
  color: inherit;
}
button, input, select, textarea {
  background-color: var(--c1);
  border: 1px solid var(--c3);
  outline-color: var(--ac);
  accent-color: var(--ac);
  border-radius: 4px;
}

input[type="checkbox"], input[type="range"] {
  vertical-align: middle;
}

button { cursor: pointer; }

select {
  appearance: none;
  height: calc(1lh + 4px);
  padding: 0 28px 0 8px;
  background-repeat: no-repeat;
  background-size: auto 75%;
  background-position: right 4px center;
  background-image: var(--ar);
}

table {
  border-collapse: collapse;
  margin: 1rem 0;
}
table pre, table code {
  font-size: inherit;
  line-height: inherit;
}
th > pre:only-child, td > pre:only-child {
  margin: 0;
  padding: 0;
}
thead tr {
  border-bottom: solid 1px var(--c3);
}
tr:not(:last-child) {
  border-bottom: solid 1px var(--c2);
}
th, td {
  padding: 2px 8px 2px 0;
}
th:last-child, td:last-child {
  padding-right: 0;
}
th {
  text-align: left;
  vertical-align: bottom;
}
td {
  color: var(--cb);
  vertical-align: top;
}