:root {
  color-scheme: dark;

  --main-bg-color: #2E1882;
  --coral: #FF8181;
  --lilac: #bcacf3;
  --night: #4458E1;
  --true-blue: #0091FF;
  --sky: #6AD5FF;
  --sunny: #F7D800;
  --code-bg: #1f0e52;

  --bg: var(--main-bg-color);
  --fg: var(--sky);
  --dim: #b6cad9;
  --faint: #e6e1d8;
  --accent: var(--coral);
  --card: var(--code-bg);
}

* {
  box-sizing: border-box
}

body,
html {
  margin: 0;
  background: var(--bg);
  color: var(--fg);
  font-family: "Quicksand", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
  font-size: 24px;
  font-weight: 100;
}

a {
  color: var(--accent);
  font-weight: 400;
}

.wrap {
  max-width: 40rem;
  margin: 0 auto;
  padding: 3rem 1.25rem 6rem
}

header {
  margin-bottom: 3rem
}

header a {
  color: var(--fg);
  text-decoration: none;
  font-size: 2rem;
  font-weight: 100;
  letter-spacing: .01em
}

header p {
  color: var(--dim);
  font-size: .9rem;
  margin: .3rem 0 0
}

h1 {
  color: var(--lilac);
  font-size: 1.25rem;
  font-weight: 400;
  line-height: 1.25;
  margin: 0 0 .4rem;
  letter-spacing: -.01em;
  text-transform: uppercase;
}

h1:after {
  background-color: var(--true-blue);
  content: '';
  display: block;
  height: 2px;
  margin-top: 0.25rem;
  width: 100%;
}

time {
  display: block;
  color: var(--dim);
  font-size: .82rem;
  letter-spacing: .06em;
  text-transform: uppercase;
  margin-bottom: 2rem
}

article h1,
article h2,
article h3 {
  font-size: 1.05rem;
  margin: 2rem 0 .5rem;
  line-height: 1.35
}

article p {
  margin: 1rem 0
}

article ul,
article ol {
  margin: 1rem 0;
  padding-left: 1.4rem
}

article li {
  margin: .25rem 0
}

article code {
  font: .86em ui-monospace, SFMono-Regular, Menlo, monospace;
  background: var(--code-bg);
  padding: .12em .38em;
  border-radius: 3px
}

article pre {
  background: var(--card);
  border: 1px solid var(--code-bg);
  border-radius: 7px;
  padding: .9rem 1rem;
  overflow-x: auto;
  margin: 1.1rem 0
}

article pre code {
  background: none;
  color: var(--faint);
  padding: 0;
  font-size: .82rem;
  line-height: 1.55
}

article table {
  border-collapse: collapse;
  margin: 1.1rem 0;
  font-size: .88rem;
  display: block;
  overflow-x: auto
}

article th,
article td {
  border: 1px solid var(--faint);
  padding: .4rem .65rem;
  text-align: left
}

article th {
  color: var(--dim);
  font-weight: 600
}

article blockquote {
  margin: 1.1rem 0;
  padding-left: 1rem;
  border-left: 2px solid var(--accent);
  color: var(--dim)
}

.idx {
  list-style: none;
  margin: 0;
  padding: 0
}

.idx li {
  padding: 1.1rem 0;
  position: relative;
  border-top: 1px solid var(--faint)
}

.idx li:first-child {
  border-top: none
}

.idx a {
  font-weight: 600;
  text-decoration: none;
  font-size: 1.02rem
}

.idx time {
    color: var(--sunny);
    display: inline-block;
    font-size: 0.675rem;
    text-transform: none;
    letter-spacing: 0;
    margin: 0;
    position: absolute;
    right: 0;
    top: 1.5rem;
}

.idx p {
  margin: .3rem 0 0;
  color: var(--dim);
  font-size: .9rem
}

.yr {
  color: var(--dim);
  font-size: .8rem;
  letter-spacing: .1em;
  margin: 2.5rem 0 .5rem;
  text-transform: uppercase
}

footer {
  margin-top: 4rem;
  padding-top: 1.25rem;
  border-top: 1px solid var(--faint);
  color: var(--dim);
  font-size: .85rem
}

footer a {
  color: var(--dim)
}

/* --- blog/wiki layer ---------------------------------------------------- */
header {
  display: flex;
  flex-direction: column;
  gap: .5rem;
  margin-bottom: 3rem
}

header nav {
  display: flex;
  flex-wrap: wrap;
  gap: .9rem;
  font-size: .85rem
}

header nav a {
  color: var(--sunny);
  font-size: 0.85rem;
  font-weight: 400;
  text-decoration: none;
}

header nav a:hover {
  color: var(--fg)
}

header p {
  margin: 0
}

.kick {
  display: block;
  font-size: .74rem;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--dim);
  text-decoration: none;
  margin-bottom: .4rem
}

.kick:hover {
  color: var(--accent)
}

.lede {
  color: var(--dim);
  font-size: 1rem;
  margin: .2rem 0 2rem
}

h2.sec {
  font-size: .76rem;
  letter-spacing: .11em;
  text-transform: uppercase;
  color: var(--dim);
  margin: 3rem 0 .4rem;
  font-weight: 600
}

h2.sec a {
  color: inherit;
  text-decoration: none
}

h2.sec a:hover {
  color: var(--accent)
}

.idx .kick {
  margin-bottom: .15rem
}

.idx .ttl {
  font-weight: 600;
  font-size: 1.02rem;
  text-decoration: none
}

.cards {
  list-style: none;
  margin: 0;
  padding: 0
}

.cards li {
  padding: 1.1rem 0;
  border-top: 1px solid var(--faint)
}

.cards li:first-child {
  border-top: none
}

.cards a {
  font-weight: 600;
  text-decoration: none
}

.cards p {
  margin: .25rem 0 .35rem;
  color: var(--dim);
  font-size: .92rem
}

.cards span {
  color: var(--dim);
  font-size: .78rem;
  letter-spacing: .04em
}

.notes {
  list-style: none;
  margin: .4rem 0 0;
  padding: 0
}

.notes li {
  padding: .5rem 0;
  border-top: 1px solid var(--faint);
  font-size: .95rem;
  margin: 0 0 1.5rem;
  padding: 1rem 0 0;
}

.notes li:first-child {
  border-top: none
}

.notes a {
  text-decoration: none;
  font-weight: 500
}

.notes span {
  color: var(--dim);
  font-size: .86rem;
  display: block;
  margin-top: .1rem
}

nav.toc {
  margin: 1.5rem 0 2rem;
  padding: .9rem 1rem;
  background: var(--card);
  border: 1px solid var(--true-blue);
  border-radius: 7px;
  display: flex;
  flex-direction: column;
  gap: .3rem;
  font-size: .88rem
}

nav.toc a {
  text-decoration: none;
  color: var(--faint);
}

nav.toc a:hover {
  color: var(--accent)
}

nav.toc a.l3 {
  padding-left: 1rem;
  font-size: .84rem
}

article.note {
  font-size: 1.02rem
}

.back {
  margin-top: 3.5rem;
  padding-top: 1.25rem;
  border-top: 1px solid var(--faint)
}

.back h2 {
  font-size: .76rem;
  letter-spacing: .11em;
  text-transform: uppercase;
  color: var(--dim);
  margin: 0 0 .4rem;
  font-weight: 600
}

.back ul {
  list-style: none;
  margin: 0;
  padding: 0;
  font-size: .92rem
}

.back li {
  padding: .25rem 0
}

.back a {
  text-decoration: none
}

article h1 {
  scroll-margin-top: 1rem
}

article h2,
article h3 {
  scroll-margin-top: 1rem
}
/* --- the main slot ------------------------------------------------------
   Deliberately plain: layout and hierarchy only, using the existing tokens,
   so there is something to restyle rather than something to undo. */
.heroes {
  margin: 0 0 2.5rem
}

.hero {
  padding: 1.5rem 1.6rem;
  background: var(--card);
  border: 1px solid var(--faint);
  border-radius: 10px;
  margin-bottom: 1rem
}

.hero .kick {
  margin-bottom: .5rem
}

.hero h2 {
  font-size: 1.5rem;
  line-height: 1.2;
  margin: 0 0 .5rem;
  letter-spacing: -.01em
}

.hero h2 a {
  color: var(--fg);
  text-decoration: none
}

.hero h2 a:hover {
  color: var(--accent)
}

.hero p {
  margin: 0;
  color: var(--dim)
}

.hero .more {
  margin-top: .9rem;
  font-size: .85rem;
  display: flex;
  gap: .75rem;
  align-items: baseline
}

.hero .more time {
  display: inline;
  margin: 0
}

.hero .more a {
  text-decoration: none;
  font-weight: 600
}