/* 2do.work's public pages (docs, privacy, support): the kit's colors and type, set
   for reading. kit.css comes first for the tokens and the font. */
* { box-sizing: border-box; }
html { background: var(--k-app-bg-end); }
body {
    margin: 0;
    min-height: 100vh;
    background: linear-gradient(180deg, var(--k-app-bg) 0%, var(--k-app-bg-end) 70%) fixed;
    color: var(--k-text);
    font: 500 15px/1.65 var(--k-font);
}
.p-top {
    display: flex;
    align-items: center;
    gap: 18px;
    max-width: 860px;
    margin: 0 auto;
    padding: 22px 20px;
}
/* the rail's upright wordmark, laid flat */
.p-top > a:first-child { position: relative; display: block; flex: none; width: 74px; height: 34px; }
.p-top > a:first-child img { position: absolute; left: 50%; top: 50%; width: 32px; height: auto; transform: translate(-50%, -50%) rotate(-90deg); }
.p-top nav { display: flex; flex-wrap: wrap; gap: 6px; margin-left: auto; }
.p-top nav a {
    padding: 6px 12px;
    border-radius: 10px;
    color: var(--k-muted);
    font-size: 13px;
    font-weight: 700;
    text-decoration: none;
}
.p-top nav a:hover { background: var(--k-glass); color: var(--k-text); }
.p-top nav a.is-on { background: var(--k-lime); color: var(--k-on-lime); }
main { max-width: 860px; margin: 0 auto; padding: 18px 20px 90px; }
h1 { margin: 10px 0 6px; font: 800 34px/1.15 var(--k-font); letter-spacing: -.02em; }
.p-lead { margin: 0 0 6px; max-width: 62ch; color: #c9d3c6; font-size: 17px; }
.p-meta { margin: 0 0 34px; color: var(--k-faint); font-size: 13px; }
h2 { margin: 42px 0 10px; font: 700 21px/1.25 var(--k-font); letter-spacing: -.01em; }
h3 { margin: 24px 0 6px; font: 700 16px/1.3 var(--k-font); color: #c9d3c6; }
p, li { max-width: 70ch; color: #b9c4b6; }
a { color: var(--k-lime); }
strong { color: var(--k-text); }
ul, ol { padding-left: 22px; }
li { margin: 4px 0; }
code {
    padding: 1px 6px;
    border-radius: 6px;
    background: var(--k-solid);
    color: #dfe1dc;
    font: 500 13px/1.5 ui-monospace, Consolas, monospace;
}
pre {
    overflow-x: auto;
    padding: 12px 14px;
    border-radius: 12px;
    background: var(--k-solid);
    color: #dfe1dc;
    font: 500 13px/1.55 ui-monospace, Consolas, monospace;
}
table { width: 100%; border-collapse: collapse; margin: 10px 0 4px; font-size: 14px; }
th, td { padding: 9px 10px; border-bottom: 1px solid rgba(255, 255, 255, .06); text-align: left; vertical-align: top; }
th { color: #6f6a72; font: 700 11px/1.3 var(--k-font); text-transform: uppercase; letter-spacing: .07em; }
td { color: #b9c4b6; }
td code { white-space: nowrap; }
.p-tag { display: inline-block; padding: 1px 8px; border-radius: 6px; font: 700 11px/1.6 var(--k-font); }
.p-read { background: rgba(93, 179, 132, .14); color: #9fd3b4; }
.p-write { background: rgba(201, 162, 74, .14); color: #e0c57f; }
.p-card { margin: 14px 0; padding: 16px 18px; border-radius: 14px; background: #1d1e1d80; }
.p-card p { margin: 0 0 6px; }
.p-card p:last-child { margin: 0; }
footer { max-width: 860px; margin: 0 auto; padding: 0 20px 40px; color: var(--k-faint); font-size: 13px; }
footer a { color: var(--k-muted); }
@media (max-width: 640px) {
    h1 { font-size: 28px; }
    .p-top nav { width: 100%; margin-left: 0; }
    table, thead, tbody, tr, th, td { font-size: 13px; }
}