/* ENGRAM . the atlas. Cream paper, iron-gall ink, sepia, and one carmine for what matters: the plate you are on,
   the figure labels in the margin, the moment a trade is seen, and what you could lose. Rules, not boxes. */

:root {
  --eg-paper: #F2ECDF;
  --eg-ink: #1C1A17;
  --eg-sepia: #6B5440;
  --eg-rule: #CFC5B2;
  --eg-carmine: #A8322A;
  --eg-wash: #EBE3D2;
  --eg-line: #8F7E68;
  --eg-grain: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='220' height='220'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 .42 0 0 0 0 .33 0 0 0 0 .25 0 0 0 .7 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='.1'/%3E%3C/svg%3E");
  --eg-serif: 'Vollkorn', 'Iowan Old Style', 'Palatino Linotype', Georgia, serif;
  --eg-sc: 'Vollkorn SC', 'Vollkorn', Georgia, serif;
  --eg-mono: 'Cutive Mono', 'Courier New', monospace;
  color-scheme: light;
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --eg-paper: #15130F; --eg-ink: #E8DFCC; --eg-sepia: #B39C80; --eg-rule: #3A342B; --eg-carmine: #DD6352; --eg-wash: #1B1813; --eg-line: #7E705D;
    --eg-grain: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='220' height='220'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 .9 0 0 0 0 .86 0 0 0 0 .78 0 0 0 .6 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='.05'/%3E%3C/svg%3E");
    color-scheme: dark;
  }
}
:root[data-theme="dark"] {
  --eg-paper: #15130F; --eg-ink: #E8DFCC; --eg-sepia: #B39C80; --eg-rule: #3A342B; --eg-carmine: #DD6352; --eg-wash: #1B1813; --eg-line: #7E705D;
  --eg-grain: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='220' height='220'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 .9 0 0 0 0 .86 0 0 0 0 .78 0 0 0 .6 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='.05'/%3E%3C/svg%3E");
  color-scheme: dark;
}

*, *::before, *::after { box-sizing: border-box; border-radius: 0; }
html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; background: var(--eg-paper); }
body.eg-body {
  margin: 0; background: var(--eg-paper) var(--eg-grain); color: var(--eg-ink);
  font: 400 17px/1.55 var(--eg-serif); font-variant-numeric: lining-nums tabular-nums; font-kerning: normal;
  -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility; overflow-x: hidden;
}
::selection { background: var(--eg-ink); color: var(--eg-paper); }
a { color: inherit; text-decoration-thickness: 1px; text-underline-offset: 3px; text-decoration-color: var(--eg-line); }
a:hover { text-decoration-color: var(--eg-carmine); }
p { margin: 0 0 12px; }
b, strong { font-weight: 650; }
em, i { font-style: italic; }
button, input, select, textarea { font: inherit; color: inherit; }
:focus-visible { outline: 2px solid var(--eg-carmine); outline-offset: 2px; }
[hidden] { display: none !important; }

.eg-skip { position: absolute; left: -9999px; top: 8px; z-index: 9; background: var(--eg-ink); color: var(--eg-paper); padding: 6px 10px; }
.eg-skip:focus { left: 12px; }
.eg-wrap { max-width: 1220px; margin: 0 auto; padding: 0 32px 0; position: relative; }

/* ---------------------------------------------------------------- the head: the name, the menu, the wallet, one row */
.eg-top { display: flex; align-items: stretch; gap: 34px; min-height: 76px; border-bottom: 1px solid var(--eg-ink); margin-bottom: 42px; position: relative; z-index: 5; }
.eg-brand { display: flex; align-items: center; gap: 11px; text-decoration: none; color: var(--eg-ink); flex: none; }
.eg-mark { width: 34px; height: 34px; flex: none; }
.eg-word { font: 700 23px/1 var(--eg-sc); letter-spacing: .09em; }

.eg-nav { display: flex; align-items: stretch; gap: 30px; margin-left: auto; }
.eg-nav-h, .eg-grp-h { display: flex; align-items: center; text-decoration: none; color: var(--eg-ink); font: 500 16.5px/1 var(--eg-serif);
  border-bottom: 2px solid transparent; margin-bottom: -1px; padding-top: 2px; white-space: nowrap; }
.eg-nav-h:hover, .eg-grp-h:hover { border-bottom-color: var(--eg-rule); }
.eg-nav-h[aria-current="page"], .eg-grp-h[aria-current="true"] { border-bottom-color: var(--eg-carmine); }
.eg-grp { position: relative; display: flex; }
/* a group's pages: a sheet hung from the rule, double-ruled at its foot, no shadow */
.eg-grp ul { display: none; position: absolute; top: 100%; left: -18px; width: 310px; list-style: none; margin: 1px 0 0; padding: 4px 18px 8px;
  background: var(--eg-paper) var(--eg-grain); border-bottom: 3px double var(--eg-ink); z-index: 20; }
.eg-grp:hover ul, .eg-grp:focus-within ul { display: block; }
.eg-grp li a { display: block; padding: 10px 0 9px; border-bottom: 1px solid var(--eg-rule); text-decoration: none; color: var(--eg-ink); }
.eg-grp li:last-child a { border-bottom: 0; }
.eg-grp li a span { display: block; font-size: 17px; line-height: 1.25; }
.eg-grp li a small { display: block; font: italic 400 14px/1.35 var(--eg-serif); color: var(--eg-sepia); margin-top: 2px; }
.eg-grp li a:hover span { text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 3px; text-decoration-color: var(--eg-carmine); }
.eg-grp li a[aria-current="page"] span { color: var(--eg-carmine); }

.eg-wal { display: flex; align-items: center; gap: 12px; flex: none; }
.eg-wal-s:empty { display: none; }
.eg-wal-s b { font: 400 14.5px/1 var(--eg-mono); color: var(--eg-ink); }

.eg-banner { border-top: 1px solid var(--eg-ink); border-bottom: 1px solid var(--eg-ink); padding: 9px 0; margin: -22px 0 28px; font-size: 15px; display: grid; grid-template-columns: 120px minmax(0, 1fr); column-gap: 18px; }
.eg-banner .eg-lab { color: var(--eg-carmine); padding-top: 3px; }

/* ---------------------------------------------------------------- the title block of a plate */
.eg-tb { display: grid; grid-template-columns: minmax(0, 1fr) 230px; column-gap: 44px; margin-bottom: 30px; }
.eg-tb > * { grid-column: 1; min-width: 0; }
.eg-tb > .eg-tb-n { grid-column: 2; grid-row: 1 / span 3; }
.eg-pl { display: block; font: 600 12.5px/1 var(--eg-sc); letter-spacing: .3em; text-transform: lowercase; color: var(--eg-carmine); margin-bottom: 12px; }
h1.eg-title { font: 400 54px/1.04 var(--eg-serif); letter-spacing: -.012em; margin: 0 0 18px; }
.eg-lede { font-size: 21px; line-height: 1.48; margin: 0 0 6px; max-width: 36em; }
.eg-tb-n { border-top: 1px solid var(--eg-rule); padding-top: 8px; font-size: 14px; line-height: 1.5; color: var(--eg-sepia); font-style: italic; }
.eg-tb-n .eg-fig { font-style: normal; }

/* ---------------------------------------------------------------- sections: text and its margin */
.eg-sec { margin: 0 0 40px; }
.eg-par { display: grid; grid-template-columns: minmax(0, 1fr) 230px; grid-auto-rows: min-content; column-gap: 44px; }
.eg-par > * { grid-column: 1; min-width: 0; }
.eg-par > .eg-note { grid-column: 2; grid-row: 1 / span 20; align-self: start; }
.eg-h { display: flex; gap: 12px; align-items: baseline; margin: 0 0 14px; padding-bottom: 7px; border-bottom: 1px solid var(--eg-ink);
  font: 600 15px/1.25 var(--eg-sc); letter-spacing: .16em; text-transform: lowercase; }
.eg-h .eg-hn { color: var(--eg-sepia); letter-spacing: .06em; min-width: 36px; }
.eg-h .eg-hx { margin-left: auto; font: italic 400 14px/1 var(--eg-serif); letter-spacing: 0; text-transform: none; color: var(--eg-sepia); }
h3.eg-h3 { font: 600 13px/1.3 var(--eg-sc); letter-spacing: .14em; text-transform: lowercase; color: var(--eg-sepia); margin: 22px 0 8px; }
.eg-note { font-size: 14px; line-height: 1.5; color: var(--eg-sepia); font-style: italic; border-top: 1px solid var(--eg-rule); padding-top: 7px; }
.eg-note p { margin: 0 0 9px; }
.eg-fig { display: block; font: normal 600 11.5px/1.4 var(--eg-sc); letter-spacing: .14em; text-transform: lowercase; color: var(--eg-carmine); margin-bottom: 2px; }
.eg-prose { max-width: 40em; }
.eg-prose p { margin: 0 0 13px; }
.eg-runin { font: 600 14.5px/1 var(--eg-sc); letter-spacing: .1em; text-transform: lowercase; }
.eg-ul { margin: 6px 0 14px; padding: 0 0 0 20px; }
.eg-ul li { margin: 0 0 6px; }
.eg-ul li::marker { color: var(--eg-sepia); }
.eg-ul.eg-ul-n { list-style: none; padding-left: 0; }
.eg-ul.eg-ul-n b { font-weight: 600; color: var(--eg-sepia); }
ol.eg-ol { margin: 6px 0 14px; padding: 0 0 0 26px; }
ol.eg-ol li { margin: 0 0 7px; padding-left: 4px; }
ol.eg-ol li::marker { font: 600 13px var(--eg-sc); color: var(--eg-sepia); }
.eg-pre { font: 15px/1.5 var(--eg-mono); white-space: pre-wrap; overflow-wrap: anywhere; margin: 6px 0 14px; padding: 8px 0 8px 14px; border-left: 1px solid var(--eg-rule); color: var(--eg-ink); }
code.eg-f, .eg-f { font: 15.5px/1.4 var(--eg-mono); white-space: nowrap; }
.eg-formula { font: 17px/1.6 var(--eg-mono); padding: 10px 0 10px 18px; border-left: 2px solid var(--eg-ink); margin: 10px 0 16px; overflow-wrap: anywhere; }

/* ---------------------------------------------------------------- plates and figures */
.eg-plate { position: relative; margin: 6px 0 10px; padding: 22px; border: 1px solid var(--eg-ink); outline: 1px solid var(--eg-ink); outline-offset: 5px; background: var(--eg-wash); }
.eg-plate-mark { position: absolute; top: 10px; right: 14px; font: 600 11px/1 var(--eg-sc); letter-spacing: .24em; text-transform: lowercase; color: var(--eg-sepia); }
.eg-cap { font-size: 14.5px; line-height: 1.5; color: var(--eg-sepia); margin: 14px 0 0; max-width: 46em; }
.eg-cap .eg-fig { display: inline; margin-right: 6px; }
.eg-tick { position: relative; padding: 14px 0; }
.eg-tick::before, .eg-tick::after { content: ''; position: absolute; width: 14px; height: 14px; border-color: var(--eg-ink); border-style: solid; }
.eg-tick::before { left: 0; top: 0; border-width: 1px 0 0 1px; }
.eg-tick::after { right: 0; bottom: 0; border-width: 0 1px 1px 0; }
.eg-neuron { position: relative; width: 100%; aspect-ratio: 16 / 10; }
.eg-neuron canvas { position: absolute; inset: 0; width: 100%; height: 100%; display: block; }
.eg-hero { display: grid; grid-template-columns: minmax(0, 1fr) 270px; column-gap: 34px; align-items: start; }
.eg-legend { font-size: 14.5px; line-height: 1.45; }
.eg-legend dl { display: grid; grid-template-columns: 22px minmax(0, 1fr); column-gap: 8px; row-gap: 4px; margin: 0 0 14px; }
.eg-legend dt { font: italic 600 15px/1.4 var(--eg-serif); color: var(--eg-carmine); }
.eg-legend dd { margin: 0; }
.eg-legend dd small { color: var(--eg-sepia); font-size: 13px; }
.eg-legend .eg-lab { display: block; margin-bottom: 6px; border-bottom: 1px solid var(--eg-rule); padding-bottom: 4px; }
.eg-legend dd .eg-v { float: right; font-variant-numeric: lining-nums tabular-nums; color: var(--eg-ink); }
svg.eg-svg { display: block; width: 100%; height: auto; overflow: visible; }
.eg-svg text { font-family: var(--eg-serif); fill: var(--eg-ink); }
.eg-svg .eg-s-sc { font-family: var(--eg-sc); letter-spacing: .1em; }
.eg-svg .eg-s-it { font-style: italic; fill: var(--eg-sepia); }
.eg-svg .eg-s-car { fill: var(--eg-carmine); }
.eg-svg .eg-s-ink { stroke: var(--eg-ink); fill: none; }
.eg-svg .eg-s-fill { fill: var(--eg-ink); }
.eg-svg .eg-s-rule { stroke: var(--eg-rule); fill: none; }
.eg-svg .eg-s-sep { stroke: var(--eg-sepia); fill: none; }
.eg-svg .eg-s-carl { stroke: var(--eg-carmine); fill: none; }
.eg-svg .eg-s-hatch { fill: url(#eg-hatch); }
.eg-svg .eg-s-sepf { fill: var(--eg-sepia); }
.eg-wfig-w svg { max-width: 640px; }
/* Plate XII, the mind in time: the spiral is a canvas of marks under an SVG of its line and lettering, the living
   mind drawn small at its centre */
.eg-t-rec { position: relative; width: 100%; max-width: 720px; aspect-ratio: 1 / 1; margin: 0 auto; touch-action: manipulation; }
.eg-t-cv, .eg-t-sv { position: absolute; inset: 0; width: 100%; height: 100%; display: block; }
.eg-t-sv { pointer-events: none; }
.eg-t-core { position: absolute; left: 50%; top: 50%; width: 25%; aspect-ratio: 1 / 1; transform: translate(-50%, -50%); pointer-events: none; }
.eg-t-core canvas { position: absolute; inset: 0; width: 100%; height: 100%; display: block; }
.eg-t-sw { display: inline-block; width: 18px; height: 3px; vertical-align: middle; margin-right: 4px; }
.eg-t-sw-c { background: var(--eg-carmine); }
.eg-t-sw-i { background: var(--eg-ink); }
.eg-t-x { display: flex; flex-wrap: wrap; gap: 2px 12px; margin: 6px 0 0; font-size: 13px; color: var(--eg-sepia); font-variant-numeric: lining-nums tabular-nums; }
.eg-t-x i { color: var(--eg-carmine); }
#eg-t-pick .eg-kv { font-size: 14px; }
#eg-t-per-pick { min-height: 2.9em; }
/* Plate II, the board on a phone: a wallet to three lines, its rank, address and markout first, then its last
   trade, then what it holds beside the trades labelled */
@media (max-width: 760px) {
  table.eg-m-bt, table.eg-m-bt tbody { display: block; }
  table.eg-m-bt thead { display: none; }
  table.eg-m-bt tbody tr { display: grid; grid-template-columns: 30px minmax(0, 1fr) auto; column-gap: 10px; row-gap: 3px; padding: 10px 0 9px; border-bottom: 1px solid var(--eg-rule); }
  table.eg-m-bt tbody tr:first-child { border-top: 3px double var(--eg-ink); }
  table.eg-m-bt tbody tr:last-child { border-bottom-color: var(--eg-ink); }
  table.eg-m-bt td, table.eg-m-bt tbody tr:last-child td { padding: 0; border: 0; }
  table.eg-m-bt td:nth-child(1) { grid-area: 1 / 1; }
  table.eg-m-bt td:nth-child(2) { grid-area: 1 / 2; }
  table.eg-m-bt td:nth-child(3) { grid-area: 1 / 3; }
  table.eg-m-bt td:nth-child(5) { grid-area: 2 / 2 / 3 / 4; font-size: 14px; }
  table.eg-m-bt td:nth-child(6) { grid-area: 3 / 2; text-align: left; white-space: normal; font-size: 14px; }
  table.eg-m-bt td:nth-child(6)::before { content: 'holds '; color: var(--eg-sepia); }
  table.eg-m-bt td:nth-child(6) .eg-sep { white-space: nowrap; }
  table.eg-m-bt td:nth-child(4) { grid-area: 3 / 3; font-size: 14px; color: var(--eg-sepia); }
  table.eg-m-bt td:nth-child(4)::after { content: ' labelled'; }
  table.eg-m-bt td[colspan] { grid-column: 1 / -1; }
}
/* Plate XIII, the journal: when, what happened, and its transaction */
.eg-jr { list-style: none; margin: 10px 0 0; padding: 0; border-top: 3px double var(--eg-ink); }
.eg-jr li { display: grid; grid-template-columns: 11em minmax(0, 1fr); column-gap: 18px; padding: 11px 0 10px; border-bottom: 1px solid var(--eg-rule); }
.eg-jr .eg-jd { font-family: var(--eg-sc); font-size: 13px; letter-spacing: .08em; color: var(--eg-sepia); padding-top: 3px; white-space: nowrap; }
.eg-jr .eg-jt { font-weight: 600; }
.eg-jr li.eg-jrel .eg-jt { color: var(--eg-carmine); }
.eg-jr .eg-jl { font-size: 14px; color: var(--eg-sepia); white-space: nowrap; }
#eg-l-chart { margin: 8px 0 0; }
@media (max-width: 760px) { .eg-jr li { grid-template-columns: minmax(0, 1fr); row-gap: 2px; } }
/* Plate II, the card of one address, shown as it will be saved */
.eg-m-cardimg { display: block; width: 100%; max-width: 720px; height: auto; margin-top: 12px; border: 1px solid var(--eg-rule); }
/* Plate V, the short way: the candidate drawn beside its grade */
.eg-q-res { display: grid; grid-template-columns: 220px minmax(0, 1fr); column-gap: 24px; align-items: center; margin-top: 12px; }
.eg-q-neuron { aspect-ratio: 1 / 1; }
.eg-q-owed { margin-top: 14px; }
@media (max-width: 760px) { .eg-q-res { grid-template-columns: minmax(0, 1fr); } .eg-q-neuron { max-width: 240px; } }
.eg-svg .eg-t-halo { paint-order: stroke; stroke: var(--eg-wash); stroke-width: 6px; stroke-linejoin: round; }
/* figures with lettering keep a readable size on a phone and scroll sideways instead of shrinking */
.eg-figscroll { overflow-x: auto; -webkit-overflow-scrolling: touch; }
.eg-figscroll > svg { min-width: 760px; }
.eg-figscroll > svg.eg-clock-s { min-width: 0; }
.eg-only-s { display: none; }

/* ---------------------------------------------------------------- numbers, units, hex */
.eg-n { font-variant-numeric: lining-nums tabular-nums; white-space: nowrap; }
.eg-n.eg-n-long { white-space: normal; }
.eg-u { font-family: var(--eg-sc); font-size: .86em; letter-spacing: .06em; text-transform: lowercase; color: var(--eg-sepia); }
.eg-hex { font: 14.5px/1.5 var(--eg-mono); overflow-wrap: anywhere; word-break: break-all; }
.eg-addr { font: 14.5px/1.5 var(--eg-mono); white-space: nowrap; }
.eg-addr.eg-addr-full { white-space: normal; overflow-wrap: anywhere; word-break: break-all; }
.eg-nil { font-style: italic; color: var(--eg-sepia); }
.eg-pos { color: var(--eg-ink); }
.eg-neg { color: var(--eg-sepia); }
.eg-big { font-size: 34px; line-height: 1.05; font-weight: 500; }
.eg-mid { font-size: 22px; line-height: 1.15; }
.eg-car { color: var(--eg-carmine); }
.eg-sep { color: var(--eg-sepia); }
.eg-sc-c { font-family: var(--eg-sc); letter-spacing: .06em; text-transform: lowercase; color: var(--eg-sepia); }

/* ---------------------------------------------------------------- tables and ledgers */
.eg-tw { overflow-x: auto; margin: 8px 0 16px; -webkit-overflow-scrolling: touch; }
table.eg-t { border-collapse: collapse; width: 100%; font-size: 15.5px; line-height: 1.4; }
.eg-t thead th { font: 600 11.5px/1.25 var(--eg-sc); letter-spacing: .12em; text-transform: lowercase; color: var(--eg-sepia); text-align: left; padding: 9px 10px 7px; border-top: 3px double var(--eg-ink); border-bottom: 1px solid var(--eg-ink); white-space: nowrap; vertical-align: bottom; }
.eg-t td { padding: 7px 10px; border-bottom: 1px solid var(--eg-rule); vertical-align: top; }
.eg-t tbody tr:last-child td { border-bottom: 1px solid var(--eg-ink); }
.eg-t th:first-child, .eg-t td:first-child { padding-left: 0; }
.eg-t th:last-child, .eg-t td:last-child { padding-right: 0; }
.eg-t .eg-r { text-align: right; white-space: nowrap; }
.eg-t .eg-c { text-align: center; }
.eg-t .eg-note-c { color: var(--eg-sepia); font-style: italic; font-size: 14.5px; }
.eg-t tr.eg-new td { animation: eg-fresh 2.4s ease-out 1; }
.eg-t tbody tr[data-open] { cursor: pointer; }
.eg-t tbody tr[data-open]:hover td { background: var(--eg-wash); }
.eg-t tr.eg-sub td { background: transparent; padding-top: 0; }
.eg-nw { white-space: nowrap; }
.eg-cellb { display: inline-block; margin-left: 12px; vertical-align: baseline; }
.eg-t .eg-gasl { display: block; color: var(--eg-sepia); font-style: italic; font-size: 14px; margin-top: 2px; }
.eg-grc { display: flex; justify-content: space-between; align-items: flex-start; gap: 18px; }
.eg-grc .eg-b { flex: none; }
@keyframes eg-fresh { from { color: var(--eg-carmine); } to { color: inherit; } }
dl.eg-kv { display: grid; grid-template-columns: max-content minmax(0, 1fr); column-gap: 0; margin: 0 0 14px; max-width: 860px; }
dl.eg-kv dt { font: 600 12px/1.3 var(--eg-sc); letter-spacing: .1em; text-transform: lowercase; color: var(--eg-sepia); border-bottom: 1px solid var(--eg-rule); padding: 9px 22px 7px 0; }
dl.eg-kv dd { margin: 0; border-bottom: 1px solid var(--eg-rule); padding: 6px 0 5px 0; text-align: right; min-width: 0; overflow-wrap: anywhere; }
dl.eg-kv dd.eg-l { text-align: left; }
.eg-figs { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); border-top: 3px double var(--eg-ink); border-bottom: 1px solid var(--eg-ink); margin: 8px 0 18px; }
.eg-figs > div { padding: 10px 14px 12px; border-left: 1px solid var(--eg-rule); min-width: 0; }
.eg-figs > div:first-child { border-left: 0; padding-left: 0; }
.eg-figs .eg-lab { display: block; margin-bottom: 5px; }
.eg-figs .eg-small { display: block; font-size: 13.5px; color: var(--eg-sepia); font-style: italic; margin-top: 3px; }

/* ---------------------------------------------------------------- forms */
.eg-lab, label.eg-lab { font: 600 12px/1.3 var(--eg-sc); letter-spacing: .12em; text-transform: lowercase; color: var(--eg-sepia); }
.eg-in { width: 100%; font: 400 21px/1.3 var(--eg-serif); font-variant-numeric: lining-nums tabular-nums; color: var(--eg-ink); background: transparent; border: 0; border-bottom: 1px solid var(--eg-ink); padding: 5px 0 4px; }
.eg-in.eg-in-sm { font-size: 16px; }
.eg-in.eg-in-hex { font: 15.5px/1.4 var(--eg-mono); }
.eg-in:focus { outline: none; border-bottom: 2px solid var(--eg-carmine); padding-bottom: 3px; }
.eg-in::placeholder { color: var(--eg-sepia); opacity: .75; font-style: italic; }
.eg-in[type="file"] { font-size: 15px; border-bottom: 0; padding: 4px 0; color: var(--eg-sepia); font-style: italic; }
.eg-in[type="file"]::file-selector-button { font: normal 600 12px/1 var(--eg-sc); letter-spacing: .12em; text-transform: lowercase; color: var(--eg-ink); background: transparent; border: 1px solid var(--eg-ink); padding: 8px 12px 7px; margin-right: 14px; cursor: pointer; }
.eg-in[type="file"]::file-selector-button:hover { background: var(--eg-ink); color: var(--eg-paper); }
select.eg-in { appearance: none; -webkit-appearance: none; padding-right: 22px; background-image: linear-gradient(45deg, transparent 50%, var(--eg-ink) 50%), linear-gradient(135deg, var(--eg-ink) 50%, transparent 50%); background-position: calc(100% - 9px) 55%, calc(100% - 4px) 55%; background-size: 5px 5px; background-repeat: no-repeat; }
select.eg-in option { background: var(--eg-paper); color: var(--eg-ink); }
.eg-field { display: grid; row-gap: 3px; margin: 0 0 14px; min-width: 0; }
.eg-row { display: grid; grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); column-gap: 26px; align-items: end; }
.eg-b { display: inline-block; font: 600 13px/1 var(--eg-sc); letter-spacing: .12em; text-transform: lowercase; color: var(--eg-ink); background: transparent; border: 1px solid var(--eg-ink); padding: 10px 16px 9px; cursor: pointer; text-decoration: none; white-space: nowrap; }
.eg-b:hover:not(:disabled) { background: var(--eg-ink); color: var(--eg-paper); }
.eg-b.eg-go { background: var(--eg-ink); color: var(--eg-paper); }
.eg-b.eg-go:hover:not(:disabled) { background: var(--eg-carmine); border-color: var(--eg-carmine); color: var(--eg-paper); }
.eg-b:disabled { border-style: dashed; border-color: var(--eg-line); color: var(--eg-sepia); background: transparent; cursor: not-allowed; }
.eg-b.eg-b-sm { padding: 7px 11px 6px; font-size: 12px; }
.eg-acts { display: flex; flex-wrap: wrap; gap: 10px 14px; align-items: center; margin: 6px 0 4px; }
.eg-seg { display: inline-flex; gap: 0; border-bottom: 1px solid var(--eg-rule); margin: 0 0 14px; }
.eg-seg button { font: 600 13px/1 var(--eg-sc); letter-spacing: .14em; text-transform: lowercase; background: none; border: 0; border-bottom: 2px solid transparent; padding: 8px 14px 7px; margin-bottom: -1px; color: var(--eg-sepia); cursor: pointer; }
.eg-seg button:first-child { padding-left: 0; }
.eg-seg button[aria-pressed="true"] { color: var(--eg-ink); border-bottom-color: var(--eg-ink); }
.eg-check { display: flex; gap: 10px; align-items: flex-start; font-size: 15px; margin: 8px 0; }
.eg-check input { margin-top: 5px; accent-color: var(--eg-ink); width: 15px; height: 15px; flex: none; }
.eg-chips { display: flex; flex-wrap: wrap; gap: 4px 14px; font-size: 14.5px; }
.eg-chooser { display: grid; grid-template-columns: repeat(auto-fill, minmax(230px, 1fr)); gap: 0 22px; border-top: 1px solid var(--eg-rule); margin: 4px 0 6px; }
.eg-chooser label { display: flex; gap: 9px; align-items: baseline; padding: 6px 0; border-bottom: 1px solid var(--eg-rule); font-size: 15px; min-width: 0; }
.eg-chooser input { accent-color: var(--eg-ink); flex: none; transform: translateY(2px); }
.eg-chooser small { color: var(--eg-sepia); font-style: italic; margin-left: auto; white-space: nowrap; }
.eg-chips button { background: none; border: 0; padding: 2px 0; border-bottom: 1px solid transparent; cursor: pointer; color: var(--eg-sepia); }
.eg-chips button[aria-pressed="true"] { color: var(--eg-ink); border-bottom-color: var(--eg-ink); }

/* ---------------------------------------------------------------- status, warnings, the gas tip */
.eg-st { font-size: 14.5px; line-height: 1.45; font-style: italic; color: var(--eg-sepia); margin: 6px 0 0; min-height: 1.45em; overflow-wrap: anywhere; }
.eg-st[data-state="busy"]::before { content: ''; display: inline-block; width: 7px; height: 7px; background: var(--eg-carmine); margin: 0 8px 1px 0; animation: eg-pulse 1s steps(2, jump-none) infinite; }
.eg-st[data-state="error"] { color: var(--eg-carmine); font-style: normal; }
.eg-st[data-state="done"] { color: var(--eg-ink); font-style: normal; }
@keyframes eg-pulse { 50% { opacity: .2; } }
.eg-warn { border-top: 1px solid var(--eg-carmine); border-bottom: 1px solid var(--eg-carmine); padding: 8px 0 8px 0; margin: 10px 0 12px; font-size: 15px; display: grid; grid-template-columns: 118px minmax(0, 1fr); column-gap: 14px; }
.eg-warn > .eg-lab { color: var(--eg-carmine); padding-top: 3px; }
.eg-tip { border-left: 2px solid var(--eg-ink); padding: 4px 0 4px 14px; margin: 10px 0; font-size: 14.5px; line-height: 1.5; }
.eg-tip b { font: 600 12.5px var(--eg-sc); letter-spacing: .1em; text-transform: lowercase; }
.eg-when { font-size: 14.5px; color: var(--eg-sepia); font-style: italic; }
.eg-when b { font-style: normal; color: var(--eg-ink); font-weight: 500; }
.eg-clock { font-size: 38px; line-height: 1; font-weight: 500; letter-spacing: .01em; }

/* ---------------------------------------------------------------- the features of a trade, lettered */
.eg-feat { display: grid; grid-template-columns: repeat(10, minmax(0, 1fr)); border-top: 1px solid var(--eg-ink); border-bottom: 1px solid var(--eg-ink); margin: 8px 0 12px; }
.eg-feat > div { padding: 6px 4px 6px; text-align: center; border-left: 1px solid var(--eg-rule); min-width: 0; }
.eg-feat > div:first-child { border-left: 0; }
.eg-feat i { display: block; font: italic 600 15px/1.2 var(--eg-serif); color: var(--eg-carmine); }
.eg-feat small { display: block; font-size: 11.5px; color: var(--eg-sepia); letter-spacing: .02em; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.eg-feat span { display: block; font-size: 17px; }
.eg-steps { counter-reset: eg-step; }
.eg-step { display: grid; grid-template-columns: 64px minmax(0, 1fr) 230px; column-gap: 0; border-top: 1px solid var(--eg-ink); padding: 16px 0 22px; }
.eg-step > .eg-step-n { font: 500 38px/1 var(--eg-sc); color: var(--eg-sepia); }
.eg-step > .eg-step-b { min-width: 0; padding-right: 40px; }
.eg-step > .eg-note { grid-column: 3; }
.eg-step-t { font: 600 15px/1.2 var(--eg-sc); letter-spacing: .14em; text-transform: lowercase; margin: 6px 0 12px; }
.eg-cols { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: 40px; }
.eg-cols3 { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); column-gap: 32px; }
.eg-bar { height: 7px; background: var(--eg-rule); position: relative; margin: 6px 0 4px; }
.eg-bar > i { position: absolute; left: 0; top: 0; bottom: 0; background: var(--eg-ink); }
.eg-bar > b { position: absolute; top: -4px; bottom: -4px; width: 2px; background: var(--eg-carmine); }
.eg-faq dt { font: 600 17px/1.4 var(--eg-serif); margin: 18px 0 4px; }
.eg-faq dd { margin: 0 0 6px; max-width: 40em; }
.eg-cplate { border-top: 3px double var(--eg-ink); padding-top: 12px; margin: 0 0 34px; max-width: 46em; }
.eg-cpl { font: 600 17px/1.25 var(--eg-sc); letter-spacing: .08em; text-transform: lowercase; margin: 0 0 2px; }
.eg-cpl-n { display: block; color: var(--eg-carmine); font-size: 12px; letter-spacing: .26em; margin-bottom: 6px; }
.eg-cpl-f { font-size: 13.5px; color: var(--eg-sepia); font-style: italic; margin: 0 0 12px; }
.eg-dump { font: 14px/1.6 var(--eg-mono); overflow-wrap: anywhere; }
.eg-dump span { padding: 0 1px; }
.eg-dump .eg-d0 { color: var(--eg-carmine); }
.eg-dump .eg-d1 { color: var(--eg-ink); }
.eg-dump .eg-d2 { color: var(--eg-sepia); }
.eg-dump .eg-d3 { color: var(--eg-ink); text-decoration: underline; text-decoration-color: var(--eg-rule); text-underline-offset: 3px; }

/* ---------------------------------------------------------------- the foot: three short columns under a double rule */
.eg-foot { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); column-gap: 40px; border-top: 3px double var(--eg-ink); margin-top: 64px; padding: 18px 0 40px; font-size: 14.5px; line-height: 1.5; color: var(--eg-sepia); }
.eg-foot > div { min-width: 0; }
.eg-foot p { margin: 0 0 8px; }
.eg-foot b { color: var(--eg-ink); font-weight: 600; }
.eg-theme button { background: none; border: 0; border-bottom: 1px solid transparent; padding: 1px 0; margin-right: 8px; cursor: pointer; color: var(--eg-sepia); font: italic 400 14.5px var(--eg-serif); }
.eg-theme button[aria-pressed="true"] { color: var(--eg-ink); border-bottom-color: var(--eg-ink); font-style: normal; }
.eg-foot-links a { color: var(--eg-ink); }

/* ---------------------------------------------------------------- narrower plates */
@media (max-width: 1080px) {
  .eg-top { gap: 24px; }
  .eg-nav { gap: 22px; }
  .eg-hero { grid-template-columns: minmax(0, 1fr); }
  .eg-legend { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: 28px; margin-top: 18px; }
}
@media (max-width: 920px) {
  .eg-tb, .eg-par { grid-template-columns: minmax(0, 1fr); }
  .eg-tb > .eg-tb-n, .eg-par > .eg-note { grid-column: 1; grid-row: auto; margin: 4px 0 16px; }
  .eg-step { grid-template-columns: 52px minmax(0, 1fr); }
  .eg-step > .eg-note { grid-column: 2; margin-top: 10px; }
  .eg-step > .eg-step-b { padding-right: 0; }
  .eg-figs { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .eg-figs > div:nth-child(3) { border-left: 0; padding-left: 0; }
  .eg-figs > div:nth-child(n+3) { border-top: 1px solid var(--eg-rule); }
  .eg-wal-s { display: none; }
  .eg-foot { grid-template-columns: minmax(0, 1fr); row-gap: 4px; }
  .eg-cols, .eg-cols3 { grid-template-columns: minmax(0, 1fr); }
  h1.eg-title { font-size: 42px; }
}
@media (max-width: 760px) {
  .eg-wrap { padding: 0 16px; }
  /* the head on a phone: the name and the wallet, then the five names of the menu as one row of cells */
  .eg-top { flex-wrap: wrap; gap: 0; min-height: 0; padding-top: 12px; margin-bottom: 28px; }
  .eg-brand { padding-bottom: 12px; }
  .eg-wal { margin-left: auto; padding-bottom: 12px; }
  .eg-nav { order: 3; flex: 0 0 100%; margin: 0; display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 0; border-top: 1px solid var(--eg-rule); }
  .eg-nav-h, .eg-grp-h { grid-row: 1; justify-content: center; padding: 12px 0 10px; font-size: 15.5px; }
  .eg-grp { display: contents; }
  .eg-grp ul, .eg-grp:hover ul, .eg-grp:focus-within ul { display: none; position: static; grid-row: 2; grid-column: 1 / -1; width: auto; margin: 0; padding: 0 0 4px; background: none; border-top: 1px solid var(--eg-rule); border-bottom: 0; }
  .eg-grp.eg-open ul { display: block; }
  .eg-grp-h[aria-expanded="true"] { border-bottom-color: var(--eg-ink); }
  h1.eg-title { font-size: 36px; }
  .eg-lede { font-size: 19px; }
  .eg-plate { padding: 12px; outline-offset: 3px; }
  .eg-neuron { aspect-ratio: 1 / 1; }
  .eg-h { flex-wrap: wrap; row-gap: 4px; }
  .eg-h .eg-hx { margin-left: 0; flex-basis: 100%; padding-left: 48px; }
  .eg-legend { grid-template-columns: minmax(0, 1fr); }
  .eg-feat { grid-template-columns: repeat(5, minmax(0, 1fr)); }
  .eg-feat > div:nth-child(6) { border-left: 0; }
  .eg-feat > div:nth-child(n+6) { border-top: 1px solid var(--eg-rule); }
  .eg-warn, .eg-banner { grid-template-columns: minmax(0, 1fr); row-gap: 2px; }
  .eg-big { font-size: 28px; }
  .eg-clock { font-size: 30px; }
  .eg-step { grid-template-columns: 38px minmax(0, 1fr); }
  .eg-step > .eg-step-n { font-size: 28px; }
  dl.eg-kv dt { padding-right: 14px; }
  .eg-hide-s { display: none; }
  .eg-only-s { display: block; }
  dl.eg-kv.eg-only-s { display: grid; }
  .eg-bits-s dt { white-space: nowrap; }
  code.eg-f, .eg-f { white-space: normal; overflow-wrap: anywhere; }
  table.eg-t-wide { min-width: 860px; }
  .eg-formula { font-size: 15px; }
}
@media (max-width: 420px) {
  .eg-figs { grid-template-columns: minmax(0, 1fr); }
  .eg-figs > div { border-left: 0; padding-left: 0; border-top: 1px solid var(--eg-rule); }
  .eg-figs > div:first-child { border-top: 0; }
  .eg-word { font-size: 21px; }
  .eg-wal-s { display: none; }
  table.eg-t { font-size: 14.5px; }
  .eg-cellb { display: block; margin: 6px 0 2px; }
  .eg-grc { flex-direction: column; gap: 6px; }
  .eg-t td, .eg-t thead th { padding-left: 6px; padding-right: 6px; }
}
@media (prefers-reduced-motion: reduce) {
  .eg-st[data-state="busy"]::before, .eg-t tr.eg-new td { animation: none; }
}

/* ---------------------------------------------------------------- the launchpad: plates IX and X */
.eg-gw { display: grid; grid-template-columns: minmax(0, 1fr) 290px; column-gap: 44px; align-items: start; }
.eg-gw-f { min-width: 0; }
.eg-spec { position: sticky; top: 18px; border-top: 3px double var(--eg-ink); border-bottom: 1px solid var(--eg-ink); padding: 12px 0 10px; }
.eg-spec .eg-glyph { width: 160px; margin: 2px auto 4px; }
.eg-spec-n { font: 700 25px/1.1 var(--eg-sc); letter-spacing: .04em; text-align: center; overflow-wrap: anywhere; }
.eg-spec-t { font: italic 400 16px/1.3 var(--eg-serif); color: var(--eg-sepia); text-align: center; margin: 3px 0 10px; overflow-wrap: anywhere; }
.eg-spec dl.eg-kv { margin: 0; }
.eg-spec dl.eg-kv dd { font-size: 15px; }
.eg-spec dl.eg-kv dt { padding-right: 12px; }
.eg-ctl { margin: 6px 0 16px; padding-top: 10px; border-top: 1px solid var(--eg-rule); }
.eg-ctl-h { display: flex; justify-content: space-between; align-items: baseline; gap: 14px; margin-bottom: 2px; }
.eg-ctl-v { font: 400 25px/1 var(--eg-serif); font-variant-numeric: lining-nums tabular-nums; white-space: nowrap; }
.eg-range { -webkit-appearance: none; appearance: none; display: block; width: 100%; height: 26px; margin: 4px 0 6px; background: transparent; cursor: pointer; }
.eg-range::-webkit-slider-runnable-track { height: 1px; background: var(--eg-ink); }
.eg-range::-moz-range-track { height: 1px; background: var(--eg-ink); }
.eg-range::-webkit-slider-thumb { -webkit-appearance: none; appearance: none; width: 15px; height: 15px; margin-top: -7px; background: var(--eg-carmine); border: 0; }
.eg-range::-moz-range-thumb { width: 15px; height: 15px; background: var(--eg-carmine); border: 0; border-radius: 0; }
.eg-range:focus { outline: none; }
.eg-range:focus-visible { outline: 2px solid var(--eg-carmine); outline-offset: 3px; }
.eg-curve { margin: 12px 0 0; }
.eg-curve svg { display: block; width: 100%; height: auto; touch-action: pan-y; cursor: crosshair; }
.eg-curve .eg-cv-g { stroke: var(--eg-rule); stroke-width: 1; }
.eg-curve .eg-cv-l { fill: none; stroke: var(--eg-ink); stroke-width: 1.6; }
.eg-curve .eg-cv-a { fill: var(--eg-wash); }
.eg-curve .eg-cv-m { stroke: var(--eg-carmine); stroke-width: 1; }
.eg-curve .eg-cv-d { fill: var(--eg-carmine); }
.eg-curve text { font: 12px var(--eg-serif); fill: var(--eg-sepia); }
.eg-split { display: flex; height: 13px; margin: 6px 0 8px; border: 1px solid var(--eg-ink); }
.eg-split > span { display: block; height: 100%; min-width: 3px; transition: flex-grow .15s ease-out; }
.eg-sw1 { background: var(--eg-ink); }
.eg-sw2 { background: var(--eg-sepia); }
.eg-sw3 { background: var(--eg-line); }
.eg-sw4 { background: var(--eg-carmine); }
.eg-key { display: inline-block; width: 9px; height: 9px; margin-right: 8px; vertical-align: 0; }
.eg-b.eg-b-big { padding: 14px 30px 13px; font-size: 15px; letter-spacing: .16em; }
.eg-prog { height: 2px; background: var(--eg-rule); margin: 10px 0 0; overflow: hidden; }
.eg-prog > span { display: block; height: 100%; width: 0; background: var(--eg-carmine); transition: width .15s linear; }
.eg-det { margin: 12px 0 0; border-top: 1px solid var(--eg-rule); padding-top: 6px; }
.eg-det summary { cursor: pointer; font: 600 12px/1.6 var(--eg-sc); letter-spacing: .12em; text-transform: lowercase; color: var(--eg-sepia); }
.eg-det[open] summary { color: var(--eg-ink); margin-bottom: 6px; }
.eg-bar2 { display: flex; flex-wrap: wrap; gap: 0 30px; align-items: end; margin: 0 0 6px; }
.eg-bar2 .eg-grow { flex: 1 1 240px; }
.eg-cards { display: grid; grid-template-columns: repeat(auto-fill, minmax(270px, 1fr)); column-gap: 30px; border-top: 3px double var(--eg-ink); }
.eg-cards > .eg-nil { padding: 12px 0; margin: 0; }
.eg-card { display: grid; grid-template-columns: 60px minmax(0, 1fr); column-gap: 14px; align-items: center; padding: 12px 0 11px; border-bottom: 1px solid var(--eg-rule); text-decoration: none; color: var(--eg-ink); }
.eg-card:hover .eg-card-t b { text-decoration: underline; text-decoration-thickness: 1px; text-decoration-color: var(--eg-carmine); text-underline-offset: 3px; }
.eg-card .eg-glyph { width: 60px; }
.eg-card-t { font-size: 16px; line-height: 1.25; overflow-wrap: anywhere; }
.eg-card-t b { font: 700 15.5px/1.2 var(--eg-sc); letter-spacing: .05em; margin-right: 6px; }
.eg-card-t i { color: var(--eg-sepia); }
.eg-card-v { font-size: 16px; margin: 3px 0 1px; }
.eg-card-m { font-size: 13px; line-height: 1.35; color: var(--eg-sepia); font-style: italic; }
.eg-up { color: var(--eg-ink); }
.eg-down { color: var(--eg-carmine); }
.eg-tag { display: inline-block; font: 600 10.5px/1 var(--eg-sc); letter-spacing: .12em; text-transform: lowercase; border: 1px solid currentColor; padding: 3px 6px 2px; margin: 0 0 0 6px; color: var(--eg-sepia); vertical-align: 2px; white-space: nowrap; }
.eg-tag.eg-tag-c { color: var(--eg-carmine); }
.eg-burn { display: flex; justify-content: space-between; align-items: baseline; gap: 14px; border-top: 3px double var(--eg-ink); border-bottom: 1px solid var(--eg-ink); padding: 12px 0 10px; margin: 0 0 12px; }
.eg-burn-n { font: 400 34px/1 var(--eg-serif); font-variant-numeric: lining-nums tabular-nums; color: var(--eg-carmine); white-space: nowrap; }
.eg-glyph { display: block; width: 100%; height: auto; }
.eg-glyph path { fill: none; stroke: var(--eg-ink); stroke-linecap: round; stroke-linejoin: round; }
.eg-glyph .eg-glyph-s { fill: var(--eg-ink); stroke: none; }
.eg-glyph .eg-glyph-b { fill: var(--eg-carmine); }
.eg-lh { display: grid; grid-template-columns: 116px minmax(0, 1fr); column-gap: 24px; align-items: center; margin: 4px 0 10px; }
.eg-lh .eg-glyph { width: 116px; }
.eg-lh-m { font-size: 15px; color: var(--eg-sepia); font-style: italic; margin: 4px 0 0; overflow-wrap: anywhere; }
.eg-copy { font: 600 11px/1 var(--eg-sc); letter-spacing: .12em; text-transform: lowercase; background: none; border: 0; border-bottom: 1px solid var(--eg-line); color: var(--eg-sepia); cursor: pointer; padding: 1px 0; margin-left: 8px; }
.eg-copy:hover { color: var(--eg-ink); border-bottom-color: var(--eg-carmine); }
.eg-quick { display: flex; flex-wrap: wrap; gap: 4px 14px; margin: -8px 0 12px; font-size: 14px; }
.eg-quick button { background: none; border: 0; border-bottom: 1px solid var(--eg-line); padding: 2px 0; cursor: pointer; color: var(--eg-sepia); }
.eg-quick button:hover { color: var(--eg-ink); border-bottom-color: var(--eg-carmine); }
.eg-chart { margin: 4px 0 6px; }
.eg-chart svg { display: block; width: 100%; height: auto; }
.eg-chart .eg-ch-g { stroke: var(--eg-rule); stroke-width: 1; }
.eg-chart .eg-ch-l { fill: none; stroke: var(--eg-ink); stroke-width: 1.5; }
.eg-chart .eg-ch-a { fill: var(--eg-wash); }
.eg-chart .eg-ch-b { fill: var(--eg-sepia); opacity: .55; }
.eg-chart .eg-ch-s { fill: var(--eg-carmine); opacity: .6; }
.eg-chart .eg-ch-d { fill: var(--eg-carmine); }
.eg-chart text { font: 12px var(--eg-serif); fill: var(--eg-sepia); }
.eg-mine { border-bottom: 1px solid var(--eg-ink); padding: 0 0 8px; margin: -4px 0 16px; }
.eg-gs { display: grid; grid-template-columns: 46px minmax(0, 1fr); column-gap: 8px; border-top: 1px solid var(--eg-rule); padding: 14px 0 12px; }
.eg-gs:first-child { border-top: 0; padding-top: 2px; }
.eg-gs-n { font: 500 30px/1 var(--eg-sc); color: var(--eg-line); }
.eg-gs.eg-gs-ok .eg-gs-n { color: var(--eg-carmine); }
.eg-gs-b { min-width: 0; }
.eg-gs-t { display: flex; justify-content: space-between; align-items: baseline; gap: 12px; font: 600 15px/1.3 var(--eg-sc); letter-spacing: .12em; text-transform: lowercase; margin: 4px 0 10px; }
.eg-gs-v { font: 400 23px/1 var(--eg-serif); letter-spacing: 0; text-transform: none; white-space: nowrap; }
.eg-pick { display: flex; flex-wrap: wrap; gap: 8px; margin: 2px 0 8px; }
.eg-pick button { font: 400 16px/1 var(--eg-serif); font-variant-numeric: lining-nums tabular-nums; background: transparent; color: var(--eg-ink); border: 1px solid var(--eg-line); padding: 10px 14px 9px; min-width: 66px; cursor: pointer; }
.eg-pick button:hover { border-color: var(--eg-ink); }
.eg-pick button[aria-pressed="true"] { background: var(--eg-ink); color: var(--eg-paper); border-color: var(--eg-ink); }
.eg-done { border-top: 3px double var(--eg-ink); border-bottom: 1px solid var(--eg-ink); padding: 12px 0 10px; margin: 10px 0 6px; }
.eg-done-t { font: 400 24px/1.3 var(--eg-serif); margin: 0 0 4px; overflow-wrap: anywhere; }
.eg-done-t b { font-weight: 650; }
.eg-done .eg-acts { margin-top: 10px; }
@media (max-width: 920px) {
  .eg-gw { grid-template-columns: minmax(0, 1fr); }
  .eg-spec { position: static; margin: 4px 0 18px; }
}
@media (max-width: 760px) {
  .eg-lh { grid-template-columns: 76px minmax(0, 1fr); column-gap: 14px; }
  .eg-lh .eg-glyph { width: 76px; }
  .eg-burn-n { font-size: 27px; }
  .eg-ctl-v { font-size: 21px; }
  .eg-cards { grid-template-columns: minmax(0, 1fr); }
}

/* whose mind a plate reads: ENGRAM's own pool, or a launch's (boot.js, on the plates that serve any pool) */
.eg-pool { display: grid; grid-template-columns: 64px minmax(0, 1fr) auto; column-gap: 22px; align-items: center; border-top: 1px solid var(--eg-ink); border-bottom: 1px solid var(--eg-rule); padding: 12px 0 13px; margin: -10px 0 34px; }
.eg-pool:empty { display: none; }
.eg-pool-g .eg-glyph { width: 64px; }
.eg-pool-g .eg-mark { display: block; width: 46px; height: 46px; margin: 0 auto; color: var(--eg-ink); }
.eg-pool-who { font: 500 23px/1.15 var(--eg-serif); margin: 3px 0 0; overflow-wrap: anywhere; }
.eg-pool-who .eg-sep { font-size: 17px; font-style: italic; font-weight: 400; }
.eg-pool-x { font-size: 14.5px; line-height: 1.45; color: var(--eg-sepia); font-style: italic; margin: 4px 0 0; max-width: 48em; }
.eg-pool-x a { font-style: normal; white-space: nowrap; }
.eg-pool-sw { display: flex; gap: 12px; align-items: end; }
.eg-pool-sw .eg-field { margin: 0; width: 8.5em; }
@media (max-width: 760px) {
  .eg-pool { grid-template-columns: 48px minmax(0, 1fr); column-gap: 14px; align-items: start; }
  .eg-pool-g { padding-top: 16px; }
  .eg-pool-g .eg-glyph { width: 48px; }
  .eg-pool-g .eg-mark { width: 38px; height: 38px; }
  .eg-pool-sw { grid-column: 1 / -1; margin-top: 12px; }
}

/* ---------------------------------------------------------------- margin notes: off until asked for, the choice kept in this browser */
:root:not(.eg-notes-on) .eg-note:not(.eg-live), :root:not(.eg-notes-on) .eg-tb-n:not(.eg-live), :root:not(.eg-notes-on) .eg-gloss { display: none; }
@media (min-width: 921px) {
  :root:not(.eg-notes-on) .eg-tb:not(:has(> .eg-live)), :root:not(.eg-notes-on) .eg-par:not(:has(> .eg-live)) { grid-template-columns: minmax(0, 1fr); }
  :root:not(.eg-notes-on) .eg-step:not(:has(> .eg-live)) { grid-template-columns: 64px minmax(0, 1fr); }
  :root:not(.eg-notes-on) .eg-step > .eg-step-b { max-width: 940px; }
  /* a swap is a form, not a ledger: it keeps a form's width */
  #eg-x-swap .eg-par, #eg-n-swap .eg-par { max-width: 780px; }
}
.eg-notes { justify-self: start; margin: 16px 0 0; background: none; border: 0; border-bottom: 1px solid var(--eg-line); padding: 2px 0 3px; cursor: pointer; font: 600 12px/1.3 var(--eg-sc); letter-spacing: .14em; text-transform: lowercase; color: var(--eg-sepia); }
.eg-notes:hover { color: var(--eg-ink); border-bottom-color: var(--eg-carmine); }

/* ---------------------------------------------------------------- reference, folded: a ruled name that opens on a press */
.eg-fold-l { display: block; margin: 48px 0 8px; }
details.eg-fold { margin: 0 0 12px; }
details.eg-fold[open] { margin-bottom: 40px; }
details.eg-fold > summary { cursor: pointer; list-style: none; position: relative; padding-right: 34px; }
details.eg-fold > summary::-webkit-details-marker { display: none; }
/* the mark sits at the rule's right end, out of the heading's own line, so a live note in the heading keeps its place */
details.eg-fold > summary::after { content: '+'; position: absolute; right: 2px; top: 50%; transform: translateY(-50%); font: 400 24px/.8 var(--eg-serif); color: var(--eg-sepia); transition: transform .15s ease; }
details.eg-fold[open] > summary::after { transform: translateY(-50%) rotate(45deg); }
details.eg-fold:not([open]) > summary { margin-bottom: 0; }
details.eg-fold > summary:hover, details.eg-fold > summary:hover::after { color: var(--eg-carmine); }
@media (prefers-reduced-motion: reduce) { details.eg-fold > summary::after { transition: none; } }

/* ---------------------------------------------------------------- the home page: one sentence, the neuron, four numbers, three ways in */
.eg-home { display: grid; grid-template-columns: minmax(0, 1.15fr) minmax(0, .85fr); column-gap: 56px; align-items: center; padding: 14px 0 46px; }
.eg-kick { display: block; font: 600 12.5px/1 var(--eg-sc); letter-spacing: .3em; text-transform: lowercase; color: var(--eg-carmine); }
h1.eg-home-h { font: 400 64px/1.04 var(--eg-serif); letter-spacing: -.012em; margin: 16px 0 22px; }
.eg-home-l { font-size: 21px; line-height: 1.45; max-width: 30em; margin: 0; }
.eg-home-acts { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 34px; }
.eg-home-acts .eg-b { padding: 14px 20px 13px; font-size: 13.5px; letter-spacing: .13em; }
.eg-home-f { margin: 0; }
.eg-home-f .eg-glyph { max-width: 400px; margin: 0 auto; }
/* the neuron at this size keeps its strokes as fine as the launch glyphs': each one its own width on the screen */
.eg-home-f .eg-glyph path { vector-effect: non-scaling-stroke; }
.eg-home-f figcaption { font-style: italic; color: var(--eg-sepia); font-size: 14.5px; line-height: 1.45; margin: 8px auto 0; max-width: 26em; text-align: center; }
.eg-home-n { margin: 0 0 6px; }
.eg-home-n .eg-clock { display: block; margin-top: 2px; }
.eg-hu { font: 600 13px/1 var(--eg-sc); letter-spacing: .1em; text-transform: lowercase; color: var(--eg-sepia); margin-left: 7px; }
.eg-doors { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); padding: 40px 0 8px; }
.eg-doors > div { display: flex; flex-direction: column; align-items: flex-start; padding: 0 28px; border-left: 1px solid var(--eg-rule); min-width: 0; }
.eg-doors > div:first-child { border-left: 0; padding-left: 0; }
h2.eg-door-h { font: 500 28px/1.15 var(--eg-serif); margin: 9px 0 10px; }
.eg-doors p { color: var(--eg-sepia); font-size: 16.5px; line-height: 1.5; margin: 0 0 16px; }
/* the three ways in end on one line, however long their sentences */
.eg-door-a { display: inline-block; margin-top: auto; font: 600 13px/1 var(--eg-sc); letter-spacing: .14em; text-transform: lowercase; text-decoration: none; color: var(--eg-ink); border-bottom: 1px solid var(--eg-carmine); padding-bottom: 4px; }
.eg-door-a:hover { color: var(--eg-carmine); }
@media (max-width: 1080px) {
  h1.eg-home-h { font-size: 54px; }
}
@media (max-width: 760px) {
  .eg-home { grid-template-columns: minmax(0, 1fr); padding: 4px 0 30px; }
  .eg-home-f { order: -1; margin: 0 auto 18px; max-width: 280px; }
  h1.eg-home-h { font-size: 42px; margin: 12px 0 16px; }
  .eg-home-l { font-size: 19px; }
  .eg-home-acts { flex-direction: column; align-items: stretch; margin-top: 26px; }
  .eg-home-acts .eg-b { text-align: center; }
  .eg-doors { grid-template-columns: minmax(0, 1fr); padding: 16px 0 0; }
  .eg-doors > div { border-left: 0; padding: 20px 0; border-top: 1px solid var(--eg-rule); }
  .eg-doors > div:first-child { border-top: 0; }
}