/* plain on purpose. one mono font, one column, links that look like links. */

:root { --bg: #0c0c0c; --fg: #e8e6e1; --muted: #8b887f; --link: #a48cf2; --term: #121212; --pi-border: #ad8732; --pi-footer: #7d7d7d; }
* { box-sizing: border-box; }
html { background: var(--bg); color: var(--fg); -webkit-text-size-adjust: 100%; }
body { margin: 0; font: 15px/1.7 ui-monospace, "SF Mono", Menlo, monospace; }
main { max-width: 680px; margin: 0 auto; padding: 24px 16px 64px; }
a { color: var(--link); }
b { font-weight: 600; }
h1 { font-size: 1.6rem; line-height: 1.3; font-weight: 600; margin: 2.5rem 0 1rem; }
h2 { font-size: 1rem; font-weight: 600; margin: 2.5rem 0 0.5rem; }
h2::before { content: "## "; color: var(--muted); }
.top { margin: 0; color: var(--muted); }
.small { color: var(--muted); font-size: 0.85rem; }
.sig { margin-top: 3rem; }
code { font: inherit; color: #d6c39a; }
pre { background: #161616; border: 1px solid #262626; border-radius: 4px; padding: 0.7rem 0.9rem; overflow-x: auto; }
pre code { color: var(--fg); }
ul { padding-left: 1.2rem; }
li { margin: 0.3rem 0; }

/* the terminal window, so you see what it really looks like */
.term { margin-top: 1.5rem; border: 1px solid #2e2e2e; border-radius: 10px; overflow: hidden; background: var(--term); }
.term-bar { position: relative; height: 28px; display: flex; align-items: center; gap: 7px; padding: 0 11px; background: #1c1c1c; border-bottom: 1px solid #262626; }
.term-bar i { width: 11px; height: 11px; border-radius: 50%; background: #ff5f57; }
.term-bar i:nth-child(2) { background: #febc2e; }
.term-bar i:nth-child(3) { background: #28c840; }
.term-bar span { position: absolute; left: 0; right: 0; text-align: center; font: 12px -apple-system, system-ui, sans-serif; color: #9a9a9a; pointer-events: none; }
.term video { display: block; width: 100%; height: auto; }
.term-body { padding: 14px 14px 12px; font-size: 12px; line-height: 1.6; color: var(--pi-footer); }
.term-body canvas { display: block; width: 100%; height: 3.4rem; margin: 0.4rem 0 0.8rem; }
.editor { border-top: 1px solid var(--pi-border); border-bottom: 1px solid var(--pi-border); padding: 0.3rem 0; margin-bottom: 0.4rem; }
.cursor { display: inline-block; width: 0.6em; height: 1.1em; vertical-align: -0.2em; background: var(--fg); }
.footer-line { display: flex; justify-content: space-between; gap: 1rem; white-space: nowrap; overflow: hidden; }
.footer-line.fg { color: var(--fg); }
@media (max-width: 560px) { .footer-line span:nth-child(2) { display: none; } }