@font-face{
  font-family:"Source Serif"; font-weight:400 700; font-style:normal;
  font-display:swap; src:url(serif-latin.woff2) format("woff2");
  unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD;
}
@font-face{
  font-family:"Source Serif"; font-weight:400 700; font-style:normal;
  font-display:swap; src:url(serif-latin-ext.woff2) format("woff2");
  unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF;
}
@font-face{
  font-family:"Plex Sans"; font-weight:400 600; font-style:normal;
  font-display:swap; src:url(plex-latin.woff2) format("woff2");
  unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD;
}
@font-face{
  font-family:"Plex Sans"; font-weight:400 600; font-style:normal;
  font-display:swap; src:url(plex-latin-ext.woff2) format("woff2");
  unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF;
}
:root{
  /* Mirrors CLAUDE.md §8 in the product repository, same as the site's
     front page and the Slint application. Change it there first. */
  --forest:#1c4034; --forest-2:#142f27; --forest-line:#2c5849;
  --paper:#fbfcfb; --base:#f3f6f3; --elevated:#eaeee9; --rule:#d7ddd8;
  --ink:#16211c; --ink-soft:#55625b; --ink-faint:#8a958e;
  --teal:#177e6b; --teal-dark:#3fa992; --seal:#8c2130;
  --serif:"Source Serif",Georgia,"Times New Roman",serif;
  --sans:"Plex Sans",system-ui,-apple-system,"Segoe UI",sans-serif;
  --mono:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;
  color-scheme:light;
}
*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%; scroll-behavior:smooth}
body{margin:0; background:var(--paper); color:var(--ink);
     font-family:var(--sans); font-size:17px; line-height:1.65;
     -webkit-font-smoothing:antialiased}
:focus-visible{outline:2px solid var(--teal); outline-offset:3px}
a{color:var(--teal); text-decoration:none}
a:hover{text-decoration:underline}
.wrap{max-width:1080px; margin:0 auto; padding:0 24px}

nav{background:var(--forest); border-bottom:1px solid var(--forest-line)}
nav .wrap{display:flex; align-items:center; gap:20px; height:64px}
.brand{display:flex; align-items:center; gap:10px; color:#fff}
.brand b{font-family:var(--serif); font-size:19px; font-weight:600;
         letter-spacing:.01em}
nav .sp{flex:1}
nav a{color:#bdd0c8; font-size:15.5px;
       display:inline-flex; align-items:center; min-height:26px}
nav a:hover{color:#fff; text-decoration:underline}

header.page{background:var(--base); border-bottom:1px solid var(--rule);
            padding:56px 0 48px}
header.page h1{font-family:var(--serif); margin:0;
               font-size:clamp(30px,4.4vw,40px); letter-spacing:-.012em;
               font-weight:650}
header.page p{margin:14px 0 0; color:var(--ink-soft); font-size:18px; max-width:56ch}

.layout{display:grid; grid-template-columns:220px 1fr; gap:56px; padding:52px 0 80px}
/* Without this a <pre> or a wide table sets the grid's minimum width and
   pushes the whole page sideways instead of scrolling inside its own box. */
.layout>*{min-width:0}
aside{position:sticky; top:24px; align-self:start}
aside p{font-family:var(--serif); margin:0 0 12px; font-size:17px;
        font-weight:600; color:var(--ink)}
aside a{display:block; padding:6px 0; color:var(--ink-soft); font-size:15.5px}
aside a:hover{color:var(--teal); text-decoration:none}

main h2{font-family:var(--serif); margin:58px 0 14px; font-size:28px;
        letter-spacing:-.012em; font-weight:600;
        scroll-margin-top:24px}
main h2:first-child{margin-top:0}
main h3{font-family:var(--serif); margin:30px 0 8px; font-size:19.5px;
        font-weight:600; letter-spacing:-.012em}
main p{margin:0 0 16px; color:var(--ink-soft); max-width:68ch}
main ul{margin:0 0 16px; padding-left:22px; color:var(--ink-soft); max-width:68ch}
main li{margin:0 0 8px}
main b{color:var(--ink)}

pre{margin:0 0 20px; padding:18px 20px; overflow-x:auto; max-width:100%;
    background:var(--forest-2);
    color:#dbe6e1; border-radius:6px; font-family:var(--mono); font-size:13.5px;
    line-height:1.7}
pre .c{color:#7f9389}
pre .k{color:#5cc7ad}
code{font-family:var(--mono); font-size:.92em; background:var(--base);
     padding:1px 5px; border-radius:3px}
pre code{background:none; padding:0; font-size:inherit}
figure{margin:26px 0 0}
figure img{display:block; width:100%; height:auto; border-radius:6px;
           border:1px solid var(--rule)}
figcaption{margin-top:10px; font-size:14px; color:var(--ink-soft)}

table{width:100%; border-collapse:collapse; margin:0 0 20px; font-size:16px;
      table-layout:fixed}
td code{overflow-wrap:anywhere}
th,td{text-align:left; padding:12px 14px; border-bottom:1px solid var(--rule);
      vertical-align:top}
th{font-family:var(--serif); font-weight:600; background:var(--base)}
td{color:var(--ink-soft)}

.note{border-left:3px solid var(--seal); padding:2px 0 2px 20px; margin:0 0 20px;
      max-width:68ch}
.note p{margin:0 0 10px}
.note p:last-child{margin:0}

footer{background:var(--forest-2); color:#93aaa1; padding:40px 0 52px; font-size:14.5px}
footer a{color:#bdd0c8}

@media (max-width:860px){
  .layout{grid-template-columns:1fr; gap:0; padding-top:36px}
  aside{position:static; margin-bottom:34px; padding-bottom:24px;
        border-bottom:1px solid var(--rule)}
}
@media (max-width:560px){
  .wrap{padding:0 18px}
  h1{font-size:32px}
  main h2{font-size:23px}
  /* Commands stay legible by wrapping rather than scrolling off-screen. */
  pre{padding:14px 16px; font-size:12px; white-space:pre-wrap;
      overflow-wrap:anywhere; overflow-x:visible}
  table{font-size:15px}
  th,td{padding:10px 8px}
}

/* ---- navegación entre las páginas de la documentación ---- */
.layout{padding-bottom:44px}
aside a.aqui{color:var(--teal); font-weight:600}

.mapa{display:grid; grid-template-columns:repeat(2,1fr); gap:14px}
.mapa a{display:block; padding:19px 21px; border:1px solid var(--rule);
        border-radius:8px; background:var(--base)}
.mapa a:hover{border-color:var(--teal); background:#fff; text-decoration:none}
.mapa b{display:block; font-family:var(--serif); font-size:18px;
        color:var(--ink); margin-bottom:6px; font-weight:600}
.mapa span{display:block; color:var(--ink-soft); font-size:15.5px;
           line-height:1.5}

.pasos{display:flex; gap:16px; padding-bottom:76px; flex-wrap:wrap}
.pasos a{flex:1 1 240px; padding:18px 21px; border:1px solid var(--rule);
         border-radius:8px; font-family:var(--serif); font-size:18px;
         font-weight:600; color:var(--ink)}
.pasos a:hover{border-color:var(--teal); text-decoration:none}
.pasos span{display:block; font-family:var(--sans); font-size:13.5px;
            font-weight:400; color:var(--ink-soft); margin-bottom:5px}
.pasos .next{text-align:right}
/* Cuando solo hay «Siguiente», no debe ocupar el ancho entero él solo. */
.pasos .next:only-child{flex:0 1 auto; margin-left:auto}

@media (max-width:700px){
  .mapa{grid-template-columns:1fr}
  .pasos .next{text-align:left}
  .pasos .next:only-child{margin-left:0}
}