:root { color-scheme: dark; --bg:#0b0d10; --surface:#12151a; --border:#252a33; --text:#e7e9ee; --muted:#8a93a3; --accent:#7c93ff; --code:#0e1115; --mono: ui-monospace, "SF Mono", Menlo, Consolas, monospace; }
:root[data-theme="light"] { color-scheme: light; --bg:#f6f7f9; --surface:#fff; --border:#e1e5ea; --text:#14181f; --muted:#5f6a7a; --accent:#3b5bdb; --code:#f1f3f6; }
@media (prefers-color-scheme: light) { :root:not([data-theme="dark"]) { color-scheme: light; --bg:#f6f7f9; --surface:#fff; --border:#e1e5ea; --text:#14181f; --muted:#5f6a7a; --accent:#3b5bdb; --code:#f1f3f6; } }
* { box-sizing:border-box; }
body { margin:0; background:var(--bg); color:var(--text); font:15px/1.7 Inter, system-ui, -apple-system, "Segoe UI", Roboto, sans-serif; -webkit-font-smoothing:antialiased; }
a { color:var(--accent); }
header.bar { display:flex; align-items:center; gap:16px; height:56px; padding:0 24px; border-bottom:1px solid var(--border); position:sticky; top:0; background:color-mix(in srgb, var(--bg) 88%, transparent); backdrop-filter:blur(10px); }
.brand { display:flex; align-items:center; gap:10px; font-weight:600; color:var(--text); text-decoration:none; }
.logo { width:22px; height:22px; border-radius:6px; background:linear-gradient(135deg, var(--accent), #b48cff); display:grid; place-items:center; color:#fff; font:700 12px var(--mono); }
.spacer { flex:1; }
.lang button { font:inherit; font-size:13px; height:28px; padding:0 10px; border:1px solid var(--border); background:var(--surface); color:var(--muted); cursor:pointer; }
.lang button:first-child { border-radius:6px 0 0 6px; } .lang button:last-child { border-radius:0 6px 6px 0; border-left:none; }
.lang button[aria-pressed="true"] { color:var(--text); background:var(--code); }
main { max-width:760px; margin:0 auto; padding:48px 24px 72px; }
h1 { font-size:32px; line-height:1.15; letter-spacing:-.03em; margin:0 0 6px; }
h2 { font-size:18px; letter-spacing:-.01em; margin:36px 0 8px; padding-top:20px; border-top:1px solid var(--border); }
p, li { color:color-mix(in srgb, var(--text) 88%, var(--muted)); }
.updated { color:var(--muted); font-size:13px; margin:0 0 28px; }
ul { padding-left:20px; } li { margin:4px 0; }
code { font:13px var(--mono); background:var(--code); border:1px solid var(--border); border-radius:4px; padding:1px 5px; }
table { width:100%; border-collapse:collapse; font-size:14px; margin:12px 0; }
th, td { text-align:left; vertical-align:top; padding:9px 12px; border:1px solid var(--border); }
th { background:var(--surface); font-size:12px; text-transform:uppercase; letter-spacing:.04em; color:var(--muted); }
.note { background:var(--surface); border:1px solid var(--border); border-left:3px solid var(--accent); border-radius:6px; padding:12px 14px; margin:18px 0; font-size:14px; }
footer.site { border-top:1px solid var(--border); padding:20px 24px; color:var(--muted); font-size:12px; display:flex; gap:16px; justify-content:center; flex-wrap:wrap; }
footer.site a { color:var(--muted); }
html[data-lang="es"] [lang="en"], html[data-lang="en"] [lang="es"] { display:none; }
@media (max-width:560px) { main { padding:32px 16px 56px; } h1 { font-size:26px; } table { display:block; overflow-x:auto; } }