body {
    /* windows has no built-in serif fonts that look very good :( Sitka, Constantia, Cambria are at least decent */
    font-family: "Source Serif Pro", P052, "Noto Serif", "Abyssinica SIL", C059, "Nimbus Roman", Utopia, Sitka, Constantia, Cambria, Palatino, "Palatino Linotype", "Palatino LT STD", Georgia, serif;
}

/* body::before {
    /* https://stackoverflow.com/a/33091315/10113238 * /
    content: "";
    position: fixed;
    left: 0;
    right: 0;
    top: 0;
    z-index: -1;

    display: block;
    /* background-image: url('https://i.sm4.ca/justbg.png'); * /
    background-image: url('/justbg2.jpg');
    background-size: cover;
    width: 100%;
    height: 100%;

    filter: opacity(0.1) blur(4px);
} */

#lastmod-info {
    color: rgb(77, 77, 77);
}

#content pre {
    margin-top: 0;
    padding: 0.5rem;
    line-height: 1.4;
    font-size: 0.8rem;
    margin-bottom: 1em;
    text-align: left;
    overflow-x: scroll;
}

h2, h3, h4, h5, h6 {
    margin: 0;
}

#things-i-like h2 {
    margin-left: 1rem;
}

#hi-message {
    font-size: 300%;
    font-family: system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif;
}

p, ul {
    margin: 0;
    padding-bottom: 1rem;
}

.h-card {
    text-align: center;
}

.smitop {
    font-weight: bold;
    color: black;
    text-decoration: none;
}

img {
    display: block;
    margin-bottom: 1rem;
}

figure {
    margin: 0;
}

figure > img {
    margin-bottom: 0.2em;
}

/* Image-first Bayesian network embeds from /bn */
[data-bn-embed] {
    margin-bottom: 1rem;
}

figcaption {
    font-size: 95%;
    font-style: italic;
    text-align: center;
}

kbd {
    border: 1px solid #c6cbd1;
    border-radius: 4px;
    box-shadow: 1px 1px 0 #959da5;
    color: #232323;
    display: inline-block;
    font-size: 17px;
    line-height: 17px;
    padding: 3px 5px;
    vertical-align: middle;
}

#content, footer {
    max-width: 45rem;
    line-height: 1.5;
    width: 100%;
}
#content {
    margin-top: 1em;
    text-align: justify;
    font-size: 111%;
}

#main-section {
    display: flex;
    flex-direction: column;
    align-items: center;
    width: 100%;
}

#me-links > div, #me-links > div > ul {
    padding: 0;
    text-align: center;
}
#me-links > div ul {
    display: inline-block;
}
#me-links > div {
    margin-top: 1em;
}

#me-links p {
    text-align: center;
    padding-bottom: 0;
}

#me-links li {
    list-style-type: none;
    display: inline;
}

#me-links li:not(:last-child):after {
    content: " • ";
}

.source-link {
    color: #222;
    display: block;
    text-align: center;
    margin-top: 5rem;
}

h1 {
    margin: 0;
    margin-top: 0.25em;
}

.stream {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(12rem, 1fr));
    gap: 1rem;
    margin-top: 0.5rem;
}

.stream.mini {
    display: inline-block;
}

.stream.mini > .stream-item {
    display: block;
    max-width: 15rem;
}

.stream.mini .stream-item-date, .stream.mini h2 {
    display: inline;
}

.stream-item {
    max-width: 20rem;
    border: 2px solid gray;
    border-radius: 0.5rem;
    padding: 0.25rem;
    /* create new context */
    position: relative;
    text-align: center;
    overflow: hidden;
    max-height: 16rem;
    background: rgba(255,255,255,0.65);
}

.stream.mini .stream-item {
    border: none;
    max-width: unset;
    text-align: unset;
    display: list-item;
    list-style-position: inside;
}
.stream.mini .stream-item > div {
    display: inline;
}
.stream.mini .stream-item .stream-item-type {
    display: none;
}
.stream.mini .stream-item h2 {
    font-size: 100%;
    font-weight: 400;
}
.stream.mini .stream-item a:not(.stream-more > a) {
    font-weight: bold;
}

.things-done {
    list-style-position: inside;
    padding-left: 0;
}
.things-done > li {
    padding: 4px;
}
.things-done a {
    font-weight: bold;
}

.stream-item-thumb-wrapper {
    display: flex;
    align-items: center;
    flex-direction: column;
}

.stream-item-type {
    margin: 0;
    padding: 0;
    line-height: 1;
    text-align: center;
    font-family: monospace;
    font-size: 110%;
}

.stream-item h2 {
    margin: 0;
    text-align: center;
    font-size: 1.27rem;
}

.stream-item-date {
    text-align: center;
    margin-bottom: 0.25rem;
}

.stream-item.featured {
    border-color: #939300;
    background: #ffffe4;
}

.fstar {
    display: inline;
    margin: 0;
    position: absolute;
    top: 0.2rem;
    left: 0.2rem;
}

li > ul {
    padding-bottom: 0;
}

#avatar {
    border-radius: 2rem;
    margin-bottom: 0;
    margin-top: 0.5rem;
}

.highlight > pre {
    margin: 0;
}

a.playground {
    font-size: 1rem;
    margin: 0;
}

#about {
    max-width: 58rem;
}

#TableOfContents {
    background: rgb(231, 231, 231);
    border: 1px solid gray;
    margin-top: 1em;
    margin-bottom: 1em;
    width: max-content;
    margin-right: 1em;
    padding-right: 1em;
    padding-top: 1em;
    float: left;
}

/* https://stackoverflow.com/questions/4098195/can-ordered-list-produce-result-that-looks-like-1-1-1-2-1-3-instead-of-just-1 */

#TableOfContents ul {
    counter-reset: item;
    padding-inline-start: 1em;
    margin-block-start: 0;
    margin-block-end: 0;
}

#TableOfContents li {
    display: block;
}

#TableOfContents li:before {
    content: counters(item, ".") ". ";
    counter-increment: item;
}

blockquote {
    border-left: 4px solid gray;
    background: #eee;
    margin: 0;
    padding: 0;
    padding-left: 0.5em;
    padding-right: 0.5em;
    margin-bottom: 1em;
}

blockquote > p:last-child {
    padding-bottom: 0;
}

.related-posts .stream-item {
    display: inline-block;
}

#topbar {
    background: #e7e7e7;
    border-bottom: 1px solid #c2c2c2;
    padding: 0.5rem;
    font-family: sans-serif;
    margin: -0.5rem -0.5rem 0 -0.5rem;
    font-size: 1rem;
}

#metop {
    display: flex;
    flex-direction: row;
    font-family: sans-serif;
    max-width: 60em;
    margin-bottom: 2em;
    gap: 2em;
}

#metop-left {
    display: flex;
    justify-content: center;
    align-items: center;
    flex-direction: column;
}

#metop-right {
    font-size: 1.3em;
}

#me-links {
    margin-top: 1em;
}

#avatar {
    box-shadow: 0px 0px 20px 0px black;
    display: inline;
}

/* on the homepage, the spinning octahedron (/avatar/oct.js) replaces the avatar when the "oct" class is set. The hidden
   avatar's link keeps its place in the layout, so nothing around it moves, and the picture isn't rendered, so (being
   loading="lazy") it isn't downloaded unless the gem goes away; the gem is --oct big (oct.js reads it), centered on the
   avatar's spot, and overflows it */
#oct-box {
    --oct: 224px;
    display: inline-block;
    position: relative;
    margin-top: 0.5rem;
}

#oct-box #avatar {
    display: block;
    margin-top: 0;
}

#oct, #oct-still, #oct-hit, #sparks {
    display: none;
}

.oct #oct-box > a {
    display: block;
    width: 160px;
    height: 160px;
    visibility: hidden;
}

.oct #oct-box #avatar {
    display: none;
}

/* nudged (which moves nothing else) so the gem clears the top bar and the window's left edge */
.oct #oct-box {
    left: 16px;
    top: 16px;
}

/* a soft haze in the gem's colors behind it, under the page's text */
.oct #oct-box::before {
    content: "";
    position: absolute;
    left: calc(50% - var(--oct) / 2);
    top: calc(50% - var(--oct) / 2);
    width: var(--oct);
    height: var(--oct);
    border-radius: 50%;
    background: conic-gradient(#e700ce, #a400e8, #4500e7, #00e7e7, #2fe700, #e7cf00, #e700ce);
    filter: blur(30px);
    opacity: 0.38;
    pointer-events: none;
    z-index: -1;
}

/* the canvas is bigger than the gem, so a popped or charged gem has room to grow. Until the gem is first hovered or
   touched, a picture of the canvas's first frame (oct-still.webp, see oct.js) sits in its place */
.oct #oct, .oct #oct-still {
    display: block;
    position: absolute;
    left: calc(50% - var(--oct) * 0.75);
    top: calc(50% - var(--oct) * 0.75);
    width: calc(var(--oct) * 1.5);
    height: calc(var(--oct) * 1.5);
    pointer-events: none;
    z-index: 1;
}

.oct #oct-hit {
    display: block;
    position: absolute;
    left: calc(50% - var(--oct) * 0.4);
    top: calc(50% - var(--oct) * 0.4);
    width: calc(var(--oct) * 0.8);
    height: calc(var(--oct) * 0.8);
    border-radius: 50%;
    cursor: grab;
    touch-action: none;
    user-select: none;
    -webkit-user-select: none;
    -webkit-tap-highlight-color: transparent;
    -webkit-touch-callout: none;
    z-index: 2;
}

#oct-hit.drag {
    cursor: grabbing;
}

/* the gem's sparks fly over the page, under the gem */
.oct #sparks {
    display: block;
    position: fixed;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    pointer-events: none;
    image-rendering: pixelated;
    z-index: 0;
}

#me-links {
    line-height: 1.8;
}

#about-summary {
    font-family: sans-serif;
    font-size: 150%;
}

.byline-avatar {
    display: inline;
    margin: 0;
    vertical-align: top;
}

.dia {
    display: flex;
    line-height: 1;
    gap: 0.5em;
    margin-bottom: 1em;
}

.dia > img.dia-img {
    display: inline;
    height: 4em;
    margin: 0;
}

.dia-text {
    display: inline-block;
    line-height: 1.5;
    background: rgb(224, 224, 224);
    border: 2px solid gray;
    padding: 0.5em;
    height: min-content;
    border-radius: 0.75em;
}

dl {
    margin-top: 0;
}

.rel-list {
    list-style: none;
    padding: 0;
}

#meta {
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    width: 100%;
}

#meta a, #ai-info a {
    text-decoration: none;
}

#meta a:hover {
    text-decoration: underline;
}

#meta > .meta-other {
    text-align: right;
}

.meta-other > #license-info {
    margin-top: 1rem;
}

#ai-info {
    margin-top: 1em;
    color: #121212;
}

#comments h2 {
    margin-bottom: 0.5em;
}

.comment {
    margin-bottom: 1em;
    border-left: 1px dashed black;
    padding: 0.25em;
    padding-left: 0.5em;
}

.comment-meta {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.4em;
}

.comment-avatar {
    width: 1.5em;
    height: 1.5em;
    border-radius: 50%;
}

.comment-author {
    font-weight: bold;
}

.comment-meta a {
    text-decoration: none;
}

.comment-meta a:hover {
    text-decoration: underline;
}

.comment-author-badge {
    background: #1d3557;
    color: #fff;
    border-radius: 4px;
    padding: 0.05em 0.4em;
    font-size: 80%;
}

.comment-date {
    color: #555;
    font-size: 90%;
}

.comment-text {
    margin-top: 0.2em;
    white-space: pre-wrap;
    overflow-wrap: break-word;
}

.comment-html {
    margin-top: 0.2em;
    overflow-wrap: break-word;
}

.comment-html > :last-child {
    padding-bottom: 0;
    margin-bottom: 0;
}

.comment-html ol {
    margin: 0;
    padding-bottom: 1rem;
}

/* LessWrong footnotes: keep the note on the same line as its ^ back-link. */
.comment-html li > div,
.comment-html li > div > p:first-child {
    display: inline;
}

.comment-html li > div {
    margin-left: 0.3em;
}

.comment-html img {
    max-width: 100%;
    height: auto;
}

.comment-html :is(h1, h2, h3, h4, h5, h6) {
    font-size: 1em;
}

.comment-html summary > * {
    display: inline;
}

/* Wide tables scroll inside the comment instead of widening the page. */
.comment-html table {
    display: block;
    overflow-x: auto;
    border-collapse: collapse;
    margin-bottom: 1rem;
}

.comment-html :is(td, th) {
    border: 1px solid #ccc;
    padding: 0.2em 0.4em;
}

.comment-html :is(td, th) > p {
    padding-bottom: 0;
}

.list-date {
    width: 9em;
    display: inline-block;
}

details {
    border: 1px solid rgb(70, 70, 70);
    background: rgb(241, 241, 241);
    padding: 0.5em;
    margin-bottom: 1em;
}

details > summary {
    cursor: pointer;
}

details:not([open]) > summary::after {
    content: "(click to expand)";
    font-size: 0.85em;
    opacity: 0.5;
    margin-left: 0.4em;
}

.sidenote {
    border: 1px solid rgb(70, 70, 70);
    background: rgb(241, 241, 241);
    padding: 1em 0.75em 0;
    margin: 1em 0;
    position: relative;
}

.sidenote > :last-child {
    margin-bottom: 0;
}

.sidenote-label {
    position: absolute;
    top: -0.7em;
    left: 0.75em;
    background: rgb(241, 241, 241);
    padding: 0 0.4em;
    font-style: italic;
    font-size: 0.9em;
    color: rgb(70, 70, 70);
}

.post-cta {
    border: 1px solid rgb(50, 100, 140);
    background: rgb(234, 243, 250);
    padding: 1em 0.75em 0.75em;
    margin: 0.75em 0 1em;
    position: relative;
}

.post-cta-label {
    position: absolute;
    top: -0.7em;
    left: 0.75em;
    background: rgb(234, 243, 250);
    padding: 0 0.4em;
    font-weight: bold;
    font-size: 0.9em;
    color: rgb(50, 100, 140);
}

.post-cta > p:last-of-type {
    margin-bottom: 0;
}

.post-cta-lastmod {
    margin-top: 0.5em;
    font-size: 0.8em;
    color: rgb(100, 120, 140);
    font-style: italic;
}

ol.spec-list {
    margin-top: 0;
    counter-reset: item;
    list-style-type: none;
}

ol.spec-list > li:before {
    content: attr(data-prefix) '.' counter(item, decimal) '. ';
    counter-increment: item;
}

#blog-posts > summary {
    cursor: pointer;
}

#blog-posts[open] {
    cursor: unset;
    background: white;
}

summary h2 {
    display: inline;
}

/* #verbose-slider[value="-1"] ~ .stream > .stream-item[data-verbose="0"],
#verbose-slider[value="-1"] ~ .stream > .stream-item[data-verbose="1"],
#verbose-slider[value="0"]  ~ .stream > .stream-item[data-verbose="1"] 
{
    display: none;
} */

.cw {
    background-color: rgb(253, 255, 243);
    border: 1.5px solid rgb(184, 120, 0);
    padding: 0.5em;
    margin-bottom: 1em;
}

@media (max-width: 900px) {
    #metop {
        flex-direction: column;
        margin-bottom: 1em;
        gap: 0;
    }
    #metop-left {
        display: block;
    }
    #me-links, #me-links > div {
        margin-top: 0;
    }
    #me-links p {
        margin-top: 0.5em;
    }
    #me-links > div, #me-links > div > ul, #me-links p, .h-card {
        text-align: left;
    }
    #on-this-site {
        display: none;
    }
}

@media (max-width: 47rem) {
    #main-section {
        /* don't try to center, causes some text to go off screen */
        display: block;
    }
    #meta {
        display: block;
    }
    #content img {
        position: relative;
        left: -8px; /* body margin */
        width: calc(100% + 8px * 2);
    }
}

@media (max-width: 470px) {
    .stream {
        display: block;
    }
    .stream-item {
        width: 100%;
        max-width: unset;
        margin-bottom: 1rem;
        box-sizing: border-box;
        height: unset;
        padding-left: 0;
        padding-right: 0;
        padding-bottom: 0;
    }
    .stream-item h2 {
        padding-left: 0.25rem;
        padding-right: 0.25rem;
    }
    .stream-item img:not(.fstar) {
        margin-bottom: 0;
        width: 100%;
        height: 100%;
    }
    .stream.mini .stream-item {
        list-style-position: unset;
        display: block;
        margin-bottom: 0.25em;
    }
    .stream.mini .stream-item h2 {
        padding: 0;
        margin: 0;
    }
}