/* Mismas fuentes y tokens que index.html (ver DESIGN_SYSTEM.md). */
@font-face { font-family: "Recursive Sans"; font-style: oblique 0deg 15deg; font-weight: 300 1000; font-display: swap; src: url("fonts/recursive-sans.woff2") format("woff2-variations"); }
@font-face { font-family: "Recursive Code"; font-style: oblique 0deg 15deg; font-weight: 300 1000; font-display: swap; src: url("fonts/recursive-code.woff2") format("woff2-variations"); }
@font-face { font-family: "Recursive Typed"; font-style: oblique 0deg 15deg; font-weight: 300 1000; font-display: swap; src: url("fonts/recursive-typed.woff2") format("woff2-variations"); }
:root {
  --signal: #ff5a1f; --signal-50: #fff5ef; --signal-200: #ffccb2;
  --paper: #f7f7f5; --sheet: #ffffff; --ink: #1d2230; --ink-soft: #615955;
  --rule: #f0dfd5; --rule-strong: #a8806c; --carbon: #2a3ca6;
  --font-sans: "Recursive Sans", ui-sans-serif, system-ui, sans-serif;
  --font-code: "Recursive Code", ui-monospace, "SF Mono", Menlo, monospace;
  --font-typed: "Recursive Typed", ui-monospace, "SF Mono", Menlo, monospace;
  --r-md: 3px; --r-xl: 6px;
  --shadow-sheet: 0 1px 0 0 var(--rule), 0 14px 34px -18px rgb(29 34 48 / 0.45);
}
* { box-sizing: border-box; }
::selection { background: var(--signal-200); color: var(--ink); }
body { margin: 0; background: var(--paper); color: var(--ink); font: 16px/1.65 var(--font-sans); -webkit-font-smoothing: antialiased; }
a { color: inherit; }
svg { display: block; }
.wrap { max-width: 1180px; margin: 0 auto; padding: 0 24px; }
:focus-visible { outline: 2px solid #8c2f0c; outline-offset: 3px; border-radius: 2px; }

.nav .wrap { display: flex; align-items: center; gap: 24px; height: 64px; }
.brand { display: flex; align-items: center; gap: 10px; text-decoration: none; }
.brand svg { width: 30px; height: 30px; }
.wordmark { display: flex; align-items: baseline; gap: 6px; }
.wordmark b { font: 750 19px/1 var(--font-code); letter-spacing: -0.035em; }
.wordmark span { font: 15px/1 var(--font-typed); color: var(--carbon); }
.back { margin-left: auto; font: 500 13.5px/1 var(--font-code); text-decoration: none; padding: 9px 12px; border-radius: var(--r-md); color: var(--ink-soft); }
.back:hover { color: var(--ink); background: var(--signal-50); }
.lang { font: 600 12.5px/1 var(--font-code); letter-spacing: 0.04em; text-decoration: none; padding: 9px 10px; border: 1px solid var(--rule); border-radius: var(--r-md); color: var(--ink-soft); }
.lang:hover { color: var(--ink); border-color: var(--rule-strong); }

main { padding: 48px 0 40px; }
.doc { max-width: 760px; margin: 0 auto; background: var(--sheet); border: 1px solid var(--rule); border-radius: var(--r-xl); box-shadow: var(--shadow-sheet); padding: 44px 48px 40px; }
h1 { margin: 0; font: 800 clamp(32px, 5vw, 46px)/1.05 var(--font-code); letter-spacing: -0.045em; }
.meta { margin: 12px 0 0; font: 13px var(--font-code); color: var(--ink-soft); }
.tldr { margin: 28px 0 8px; padding: 16px 20px; background: var(--signal-50); border-left: 3px solid var(--signal); border-radius: var(--r-md); }
.tldr p { margin: 0; }
h2 { margin: 36px 0 8px; font: 700 20px/1.25 var(--font-code); letter-spacing: -0.025em; }
p, li { color: #353a48; }
ul { padding-left: 20px; }
li + li { margin-top: 6px; }
code { font: 0.92em var(--font-code); background: var(--paper); border: 1px solid var(--rule); border-radius: var(--r-md); padding: 1px 5px; }

footer { padding: 20px 0 50px; font: 13px var(--font-code); color: var(--ink-soft); text-align: center; }
footer a { text-decoration: none; }
footer a:hover { color: var(--ink); }

@media (max-width: 640px) {
  .wrap { padding: 0 16px; }
  main { padding-top: 16px; }
  .doc { padding: 28px 20px; }
}