html { color-scheme: dark; }
html, body { margin: 0; background: #000; color: #e6e6e6; min-height: 100%; }
body { font: 400 13px/1.65 "Fira Code", ui-monospace, monospace; -webkit-font-smoothing: antialiased; }
@font-face { font-family: "Fira Code"; font-weight: 400; src: url(/assets/fonts/fira-code-latin-400-normal.woff2) format("woff2"); }
@font-face { font-family: "Fira Code"; font-weight: 500; src: url(/assets/fonts/fira-code-latin-500-normal.woff2) format("woff2"); }
@font-face { font-family: "Saira XC"; font-weight: 600; src: url(/assets/fonts/saira-extra-condensed-latin-600-normal.woff2) format("woff2"); }

/* same terminal box as the animated documents on the home page */
.lg-wrap { min-height: 100vh; display: grid; place-items: center; padding: 4vh 4vw; box-sizing: border-box; }
.lg-frame { position: relative; width: min(780px, 100%); max-height: 92vh; display: flex; flex-direction: column; background: #020202; border: 1px solid #ffffffcc; box-shadow: 0 0 28px #ffffff22, inset 0 0 40px #ffffff08; animation: lg-open 0.5s cubic-bezier(0.3, 0.7, 0.2, 1) both; }
@keyframes lg-open { 0% { transform: scale(1, 0.004); } 100% { transform: scale(1, 1); } }
.lg-bar { display: flex; justify-content: space-between; align-items: center; background: #e8e8e8; color: #000; font: 600 12px "Saira XC", sans-serif; letter-spacing: 0.16em; padding: 8px 14px; clip-path: polygon(0 0, 100% 0, 98% 100%, 0 100%); flex: none; }
.lg-x { color: #000; text-decoration: none; font: 600 11px "Saira XC", sans-serif; letter-spacing: 0.16em; padding: 4px 6px; }
.lg-x:hover, .lg-x:focus-visible { background: #000; color: #fff; outline: none; }
.lg-body { padding: 18px 24px 24px; overflow: auto; }
.lg-body h1 { font: 600 22px/1.1 "Saira XC", sans-serif; letter-spacing: 0.22em; color: #fff; margin: 4px 0 4px; }
.lg-date { color: #8e8e8e; font-size: 12px; margin: 0 0 8px; }
.lg-body h2 { font: 500 13px/1.65 "Fira Code", monospace; letter-spacing: 0.14em; color: #fff; margin: 1.25em 0 0; }
.lg-body p { margin: 0; min-height: 1.65em; }
.lg-body a { color: #fff; text-underline-offset: 3px; }
.lg-foot { margin-top: 2.2em; padding-top: 14px; border-top: 1px solid #ffffff33; font-size: 12px; color: #8e8e8e; display: flex; gap: 18px; flex-wrap: wrap; }
.lg-foot a { color: #cfcfcf; }
.lg-foot a:hover, .lg-foot a:focus-visible { color: #000; background: #fff; outline: none; text-decoration: none; }
@media (prefers-reduced-motion: reduce) { .lg-frame { animation: none; } }