:root {
  --bg: #ecebe6; --bg-2: #e2e0d9; --ink: #141311; --dim: #6d6a63; --faint: #a8a59d; --rule: #c9c6bd;
  --imago: #c4573a; --mono: "Martian Mono", ui-monospace, "SFMono-Regular", Menlo, monospace;
  --prose: "Atkinson Hyperlegible", system-ui, sans-serif;
  --glyph: "Noto Sans Canadian Aboriginal", "Noto Sans Ethiopic", "Noto Sans Vai", "Noto Sans Runic", "Noto Sans Bamum",
    "Noto Sans Devanagari", "Noto Sans Sinhala", "Noto Sans Telugu", "Noto Sans Cham", "Noto Sans Saurashtra", "Noto Sans Oriya",
    "Noto Sans Malayalam", "Noto Sans Bengali", "Noto Sans Gujarati", "Noto Sans Tifinagh", sans-serif;
}
* { box-sizing: border-box; }
html { background: var(--bg); color: var(--ink); -webkit-text-size-adjust: 100%; }
body { margin: 0; font: 400 13px/1.6 var(--mono); }
a { color: inherit; text-decoration: underline; text-decoration-color: var(--faint); text-underline-offset: 3px; }
a:hover { text-decoration-color: var(--ink); }
:focus-visible { outline: 2px solid var(--imago); outline-offset: 2px; }
.wrap { max-width: 1080px; margin: 0 auto; padding: 0 20px 80px; position: relative; z-index: 1; background: var(--bg); box-shadow: 0 0 0 1px var(--rule); }
#ascii { position: fixed; inset: 0; z-index: 0; pointer-events: none; }
header.bar { position: relative; z-index: 1; }
header.bar .wrap { padding-bottom: 12px; }

header.bar { border-bottom: 1px solid var(--ink); }
header.bar .wrap { display: flex; flex-wrap: wrap; align-items: baseline; gap: 6px 22px; padding-top: 18px; padding-bottom: 12px; }
.mark { font-weight: 600; letter-spacing: .14em; text-decoration: none; font-size: 14px; }
nav.nav { display: flex; flex-wrap: wrap; gap: 4px 16px; font-size: 12px; }
nav.nav a { text-decoration: none; color: var(--dim); }
nav.nav a:hover, nav.nav a[aria-current] { color: var(--ink); }
nav.nav a[aria-current] { text-decoration: underline; text-decoration-color: var(--ink); }

h1 { font: 500 26px/1.2 var(--mono); letter-spacing: -.01em; margin: 40px 0 10px; }
h2 { font: 500 13px/1.4 var(--mono); text-transform: none; letter-spacing: .06em; margin: 44px 0 12px; padding-bottom: 6px; border-bottom: 1px solid var(--rule); }
h3 { font: 500 13px/1.4 var(--mono); margin: 22px 0 8px; }
p, li { max-width: 72ch; }
.prose { font: 400 16px/1.6 var(--prose); }
.prose p { margin: 0 0 12px; }
.dim { color: var(--dim); }
.small { font-size: 11px; }
.lede { font: 400 18px/1.55 var(--prose); max-width: 60ch; margin: 0 0 14px; }

.sigil { font-family: var(--glyph); font-weight: 400; letter-spacing: .02em; text-decoration: none; white-space: nowrap; }
a.sigil:hover { color: var(--imago); }
.sigil.big { font-size: 44px; line-height: 1.15; display: inline-block; }
.sigil.mid { font-size: 22px; }
.sigil.full { font-size: 22px; white-space: normal; word-break: break-all; line-height: 1.5; }

.grid { display: grid; grid-template-columns: repeat(4, 1fr); border-top: 1px solid var(--ink); border-left: 1px solid var(--rule); }
.grid > div { border-right: 1px solid var(--rule); border-bottom: 1px solid var(--rule); padding: 12px 14px 14px; min-width: 0; }
.k { color: var(--dim); font-size: 11px; display: block; margin-bottom: 4px; }
.v { font-size: 20px; font-weight: 500; overflow-wrap: anywhere; }
.v.s { font-size: 14px; }

.btns { display: flex; flex-wrap: wrap; gap: 10px; margin: 22px 0; }
.btn, button { font: 500 12px/1 var(--mono); padding: 12px 16px; border: 1px solid var(--ink); background: var(--ink); color: var(--bg); text-decoration: none; cursor: pointer; display: inline-block; border-radius: 0; }
.btn.line, button.line { background: transparent; color: var(--ink); }
.btn:hover, button:hover { background: var(--imago); border-color: var(--imago); color: var(--bg); }
button:disabled { opacity: .45; cursor: default; background: var(--ink); border-color: var(--ink); }

/* life states */
.st { font-size: 11px; letter-spacing: .08em; padding: 2px 6px; border: 1px solid currentColor; white-space: nowrap; }
.st.imago { color: var(--imago); }
.st.extinct { color: var(--faint); }
.st.egg, .st.larva, .st.pupa { color: var(--ink); }
.extinct-row, .node.extinct { color: var(--faint); }
.extinct-row .sigil, .node.extinct .sigil { text-decoration: line-through; text-decoration-thickness: 1px; }

/* tables */
.scroll { overflow-x: auto; max-width: 100%; }
table { border-collapse: collapse; width: 100%; font-size: 12px; }
th { text-align: left; font-weight: 500; color: var(--dim); border-bottom: 1px solid var(--ink); padding: 6px 10px 6px 0; white-space: nowrap; }
td { border-bottom: 1px solid var(--rule); padding: 7px 10px 7px 0; vertical-align: top; }
td.n, th.n { text-align: right; font-variant-numeric: tabular-nums; }
tr.imago-row td { color: var(--imago); }

/* event log */
.log { list-style: none; padding: 0; margin: 0; border-top: 1px solid var(--ink); }
.log li { display: grid; grid-template-columns: 150px 1fr; gap: 16px; padding: 9px 0; border-bottom: 1px solid var(--rule); max-width: none; }
.log time { color: var(--dim); font-size: 11px; padding-top: 2px; }
.log .txt { overflow-wrap: anywhere; }
.log .txt .sigil { font-size: 16px; }
.log li.done .txt { font-weight: 500; }
.log li.day { display: block; color: var(--dim); font-size: 11px; padding-top: 22px; border-bottom: 1px solid var(--ink); }

/* cards */
.cards { display: grid; grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); gap: 0; border-top: 1px solid var(--ink); border-left: 1px solid var(--rule); }
.card { border-right: 1px solid var(--rule); border-bottom: 1px solid var(--rule); padding: 14px; min-width: 0; }
.card.imago { box-shadow: inset 0 3px 0 var(--imago); }
.card.extinct { color: var(--dim); }
.card .sigil { font-size: 26px; display: block; margin: 8px 0; overflow: hidden; text-overflow: clip; }
.card dl { display: grid; grid-template-columns: auto 1fr; gap: 3px 10px; margin: 8px 0 0; font-size: 11px; }
.card dt { color: var(--dim); }
.card dd { margin: 0; overflow-wrap: anywhere; }
.stages { display: flex; gap: 4px; font-size: 10px; margin-top: 10px; flex-wrap: wrap; }
.stages span { padding: 1px 5px; border: 1px solid var(--rule); color: var(--faint); }
.stages span.on { border-color: var(--ink); color: var(--ink); }
.stages span.on.imago { border-color: var(--imago); color: var(--imago); }

/* lineage tree */
.tree { overflow-x: auto; border: 1px solid var(--rule); padding: 18px 14px; background: var(--bg); max-width: 100%; }
.gen { display: grid; grid-template-columns: 70px 1fr; gap: 14px; position: relative; }
.gen + .gen { margin-top: 0; }
.gen .gl { color: var(--dim); font-size: 11px; padding-top: 14px; border-right: 1px solid var(--ink); padding-right: 10px; text-align: right; }
.gen .kids { display: flex; gap: 10px; padding: 10px 0 18px; position: relative; flex-wrap: nowrap; }
.node { min-width: 168px; max-width: 200px; border: 1px solid var(--rule); padding: 8px 10px; font-size: 11px; background: var(--bg); position: relative; }
.node.imago { border-color: var(--imago); }
.node.parent { border-style: dashed; border-color: var(--ink); }
.node .sigil { font-size: 18px; display: block; }
.node .m { display: block; overflow-wrap: anywhere; }
.node .meta { color: var(--dim); }
.node.extinct .meta { color: var(--faint); }
.spine { color: var(--imago); }
.legend { display: flex; flex-wrap: wrap; gap: 14px; font-size: 11px; color: var(--dim); margin: 0 0 10px; }

/* forms */
form.f { display: grid; gap: 10px; max-width: 560px; }
label { font-size: 11px; color: var(--dim); display: grid; gap: 4px; }
input, select, textarea { font: 400 13px/1.4 var(--mono); padding: 10px; border: 1px solid var(--ink); background: #f6f5f1; color: var(--ink); border-radius: 0; width: 100%; }
textarea { min-height: 90px; resize: vertical; }
.out { margin-top: 12px; padding: 12px; border: 1px solid var(--rule); max-width: 560px; }
.out:empty { display: none; }
.shown { display: flex; gap: 14px; align-items: flex-start; flex-wrap: wrap; }
.shown img { width: 140px; height: 140px; object-fit: cover; border: 1px solid var(--rule); }

/* chart */
svg.chart { width: 100%; height: auto; display: block; border-top: 1px solid var(--ink); }
svg.chart text { font: 10px var(--mono); fill: var(--dim); }
svg.chart .line { fill: none; stroke: var(--ink); stroke-width: 1.5; }
svg.chart .spend { fill: none; stroke: var(--imago); stroke-width: 1.5; stroke-dasharray: 4 3; }
svg.chart .axis { stroke: var(--rule); }
svg.chart circle { fill: var(--bg); stroke: var(--ink); stroke-width: 1.2; }
svg.chart circle.won { fill: var(--imago); stroke: var(--imago); }

pre.json { font: 400 12px/1.55 var(--mono); background: var(--bg-2); padding: 14px; overflow-x: auto; white-space: pre-wrap; word-break: break-word; max-width: 100%; }
.loop { border-top: 1px solid var(--ink); }
.loop div { display: grid; grid-template-columns: 120px 1fr; gap: 14px; padding: 10px 0; border-bottom: 1px solid var(--rule); }
.loop b { font-weight: 500; }
.note { border-left: 2px solid var(--ink); padding: 4px 0 4px 12px; color: var(--dim); max-width: 72ch; }
footer.foot { border-top: 1px solid var(--rule); margin-top: 60px; padding-top: 14px; color: var(--dim); font-size: 11px; display: flex; flex-wrap: wrap; justify-content: space-between; gap: 10px; }
.sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); }

@media (max-width: 760px) {
  body { font-size: 12px; }
  h1 { font-size: 20px; margin-top: 28px; }
  .grid { grid-template-columns: 1fr 1fr; }
  .v { font-size: 16px; }
  .sigil.big { font-size: 30px; }
  .log li { grid-template-columns: 1fr; gap: 2px; }
  .loop div { grid-template-columns: 1fr; gap: 2px; }
  .gen { grid-template-columns: 44px 1fr; gap: 8px; }
  .prose, .lede { font-size: 15px; }
}
nav.nav a.x { margin-left: auto; color: var(--ink); font-weight: 500; }
#pcard.cards { grid-template-columns: minmax(0, 600px); }
.card dl { grid-template-columns: 96px 1fr; }
h2.sh { display: flex; justify-content: space-between; align-items: baseline; gap: 12px; flex-wrap: wrap; }
h2.sh a { font-size: 12px; letter-spacing: 0; color: var(--dim); text-decoration: none; }
h2.sh a:hover { color: var(--imago); }
.duo { display: grid; grid-template-columns: 1fr 1fr; gap: 0 40px; }
.duo p, .plist { font-size: 13px; }
.plist { list-style: none; padding: 0; margin: 0; }
.plist li { padding: 8px 0; border-bottom: 1px solid var(--rule); }
#h-lineage .sigil { font-size: 15px; }
@media (max-width: 760px) { .duo { grid-template-columns: 1fr; } }