/* Shared look of the work pages: the same palette as the catalog pages. */
:root { color-scheme: dark; --bg: #02030a; --ink: #eef3ff; --dim: rgba(222, 232, 255, .7); --faint: rgba(222, 232, 255, .42); --line: rgba(160, 200, 255, .18); --glow: #9fe8ff; --gold: #ffd28a; --ok: #39ff9f; }
* { box-sizing: border-box; }
body { background: var(--bg); color: var(--ink); margin: 0; font: 300 1rem/1.6 "Space Grotesk", ui-sans-serif, system-ui, -apple-system, "Segoe UI", sans-serif; }
main { max-width: 56rem; margin: 0 auto; padding: 40px 16px 80px; }
a { color: var(--glow); }
h1 { font-weight: 400; font-size: clamp(1.9rem, 5.5vw, 2.8rem); line-height: 1.12; letter-spacing: -.02em; margin: .4rem 0 1rem; }
h2 { font-weight: 500; font-size: 1.3rem; margin: 2.6rem 0 .5rem; }
h3 { font-weight: 500; font-size: 1.05rem; margin: 1.6rem 0 .4rem; }
p, li, td { color: var(--dim); }
strong, b, th { color: var(--ink); font-weight: 500; }
.k { font: 400 .72rem/1.4 "JetBrains Mono", ui-monospace, Menlo, monospace; letter-spacing: .24em; text-transform: uppercase; color: var(--gold); margin: 0; }
.top { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; gap: .6rem 1rem; font: 400 .74rem/1.4 "JetBrains Mono", ui-monospace, Menlo, monospace; letter-spacing: .14em; text-transform: uppercase; }
.top a { color: var(--dim); text-decoration: none; }
.top a:hover { color: var(--ink); }
.langs button { cursor: pointer; background: transparent; color: var(--ink); border: 1px solid var(--line); border-radius: 999px; padding: .3rem .7rem; font: inherit; letter-spacing: .1em; }
.langs button[aria-pressed="true"] { border-color: var(--gold); }
.lead { font-size: 1.08rem; color: var(--ink); }
.tag { display: inline-block; font: 400 .66rem/1.4 "JetBrains Mono", ui-monospace, Menlo, monospace; letter-spacing: .16em; text-transform: uppercase; color: var(--gold); border: 1px solid rgba(255, 210, 138, .35); border-radius: 999px; padding: .15rem .6rem; }
.card { border: 1px solid var(--line); border-radius: 14px; padding: 1rem 1.1rem; margin: 1rem 0; background: rgba(8, 12, 28, .7); }
.card > :first-child { margin-top: 0; }
.card > :last-child { margin-bottom: 0; }
.big { font: 400 clamp(1.6rem, 5vw, 2.4rem)/1.1 "JetBrains Mono", ui-monospace, Menlo, monospace; color: var(--ok); margin: 0 0 .4rem; }
.m { font-family: "JetBrains Mono", ui-monospace, Menlo, monospace; font-size: .84rem; color: var(--faint); word-break: break-all; }
.scroll { overflow-x: auto; }
table { border-collapse: collapse; width: 100%; font-size: .9rem; }
td, th { border-bottom: 1px solid var(--line); padding: .5rem .45rem; text-align: left; vertical-align: top; }
th { font-weight: 500; }
td.adapt { color: var(--ink); }
pre { background: rgba(8, 12, 28, .9); border: 1px solid var(--line); border-radius: 10px; padding: .8rem 1rem; overflow-x: auto; font: .82rem/1.5 "JetBrains Mono", ui-monospace, Menlo, monospace; color: var(--ink); }
footer { margin-top: 3rem; border-top: 1px solid var(--line); padding-top: 1rem; font-size: .85rem; color: var(--faint); }
html:not([data-lang="es"]) [lang="es"] { display: none !important; }
html[data-lang="es"] [lang="en"] { display: none !important; }