/* pedroot.cloud
   plain css, no preprocessor. plex is self-hosted in /fonts. */
@font-face{font-family:Plex;src:url(/fonts/ibm-plex-sans-latin-400-normal.woff2)format("woff2");font-weight:400;font-display:swap}
@font-face{font-family:Plex;src:url(/fonts/ibm-plex-sans-latin-500-normal.woff2)format("woff2");font-weight:500;font-display:swap}
@font-face{font-family:PlexM;src:url(/fonts/ibm-plex-mono-latin-400-normal.woff2)format("woff2");font-weight:400;font-display:swap}

:root{
  --bg:#09090b; --card:#0e0e11; --fg:#fafafa; --mut:#8b8b93; --dim:#5a5a62;
  --bd:#1e1e23; --bd2:#2a2a31; --ok:#4ade80; --run:#e5b567; --read:#cbcbd3;
  --sans:Plex,ui-sans-serif,system-ui,-apple-system,"Segoe UI",sans-serif;
  --mono:PlexM,ui-monospace,"SF Mono",Menlo,monospace;
  --wrap:640px;
}
*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{
  margin:0;min-height:100vh;background:var(--bg);color:var(--fg);
  font:400 13px/1.6 var(--sans);-webkit-font-smoothing:antialiased;
  display:flex;flex-direction:column;
}
a{color:inherit;text-decoration:none}
.mono{font-family:var(--mono);font-variant-numeric:tabular-nums}
:focus-visible{outline:1.5px solid var(--run);outline-offset:3px;border-radius:4px}
.skip{position:absolute;left:-9999px}
.skip:focus{left:16px;top:12px;z-index:9;background:var(--card);border:1px solid var(--bd2);
  padding:8px 14px;border-radius:8px}

/* pixel grid */
.px{display:grid;grid-template-columns:repeat(3,4px);gap:1.5px;flex:0 0 auto}
.px i{display:block;width:4px;height:4px;background:var(--fg);border-radius:1px;opacity:.15}
.px i.on{animation:pixel-on 650ms ease-in-out infinite}
.px.idle i{opacity:.09;animation:none}
@keyframes pixel-on{0%,100%{opacity:.12}50%{opacity:1}}

/* shimmer label */
.shim{
  background-image:linear-gradient(90deg,var(--mut) 35%,var(--fg) 50%,var(--mut) 65%);
  background-size:200% 100%;-webkit-background-clip:text;background-clip:text;
  color:transparent;font-weight:500;animation:shimmer-text 1.4s linear infinite;
}
@keyframes shimmer-text{0%{background-position:200% 0}100%{background-position:-200% 0}}

/* header */
.head{
  position:sticky;top:0;z-index:20;display:flex;align-items:center;gap:14px;
  padding:14px max(20px,calc((100vw - var(--wrap))/2));
  background:color-mix(in srgb,var(--bg) 88%,transparent);backdrop-filter:blur(10px);
  border-bottom:1px solid var(--bd);
}
.head-l{display:flex;align-items:center;gap:10px}
.brand{font-weight:500;font-size:13.5px;letter-spacing:-.005em}
.head-r{margin-left:auto;display:flex;align-items:center;gap:18px}
.run-id{font-size:11.5px;color:var(--dim)}
.head-mail{font-size:11.5px;color:var(--mut);border-bottom:1px solid transparent;transition:color .15s,border-color .15s}
.head-mail:hover{color:var(--fg);border-bottom-color:var(--bd2)}

/* stage */
.stage{flex:1;width:100%;max-width:var(--wrap);margin:0 auto;padding:38px 20px 30px}

.q-box{
  display:flex;gap:10px;align-items:baseline;border:1px solid var(--bd);background:var(--card);
  border-radius:9px;padding:13px 15px;font-size:13px;color:var(--mut);margin-bottom:26px;
}
.caret-mark{color:var(--dim);font-size:12px;flex:0 0 auto}

/* run rail */
.rail{list-style:none;margin:0;padding:0 0 0 26px;position:relative}
.rail::before{content:"";position:absolute;left:5px;top:9px;bottom:12px;width:1px;
  background:var(--bd2);opacity:0;transition:opacity .4s}
.rail.has::before{opacity:1}

.st{position:relative;padding-bottom:22px;opacity:0;transform:translateY(5px);
  animation:step-in .34s cubic-bezier(.2,.8,.3,1) forwards}
@keyframes step-in{to{opacity:1;transform:none}}
.st:last-child{padding-bottom:8px}

.node{position:absolute;left:-26px;top:3px;width:11px;height:11px;border-radius:50%;
  border:1px solid var(--bd2);background:var(--bg);transition:background .3s,border-color .3s,box-shadow .3s}
.st.run .node{border-color:var(--run);box-shadow:0 0 0 3px rgba(229,181,103,.13)}
.st.done .node{background:var(--ok);border-color:var(--ok);opacity:.85;box-shadow:none}

.st-top{display:flex;align-items:center;gap:10px;min-height:18px}
.st-t{font-size:13px;color:var(--fg)}
.st.done .st-t{color:var(--fg)}
.st-d{margin-left:auto;font-family:var(--mono);font-size:11.5px;color:var(--dim);
  font-variant-numeric:tabular-nums;flex:0 0 auto}

.st-body{font-size:12.5px;color:var(--mut);margin-top:6px;max-width:54ch;line-height:1.75}
.st-body a{color:var(--fg);border-bottom:1px solid var(--bd2)}
.st-body a:hover{border-bottom-color:var(--mut)}
.st-out{margin-top:8px;border-left:1px solid var(--bd2);padding:4px 0 4px 13px;
  font-family:var(--mono);font-size:11.5px;color:var(--dim);line-height:1.95}
.st-out b{color:var(--mut);font-weight:400}
.st-list{margin:8px 0 0;padding:0;list-style:none}
.st-list li{border-bottom:1px solid var(--bd)}
.st-list .row{display:flex;gap:12px;align-items:baseline;padding:6px 0}
.st-list li:last-child{border-bottom:0}
.st-list .k{font-family:var(--mono);font-size:11px;color:var(--dim);flex:0 0 auto}
.st-list .v{font-size:12.5px;color:var(--mut)}
.st-list .m{margin-left:auto;font-family:var(--mono);font-size:11px;color:var(--dim);flex:0 0 auto}

/* prompt */
.prompt{display:flex;align-items:center;gap:10px;margin-top:10px;
  border:1px solid var(--bd);background:var(--card);border-radius:9px;padding:11px 14px;
  transition:border-color .2s}
.prompt:focus-within{border-color:var(--bd2)}
#ask{flex:1;min-width:0;background:transparent;border:0;outline:0;padding:0;
  color:var(--fg);font:400 13px var(--sans);caret-color:var(--run)}
#ask::placeholder{color:var(--dim)}
.enter{background:transparent;border:0;color:var(--dim);font-size:12px;cursor:pointer;
  padding:2px 4px;transition:color .15s}
.enter:hover{color:var(--fg)}

.chips{display:flex;flex-wrap:wrap;gap:7px;margin-top:14px}
.chips button{
  background:transparent;border:1px solid var(--bd);border-radius:999px;
  padding:5px 12px;font:400 12px var(--sans);color:var(--mut);cursor:pointer;
  transition:border-color .15s,color .15s,background .15s}
.chips button:hover{border-color:var(--bd2);color:var(--fg);background:var(--card)}

/* footer */
.foot{display:flex;gap:16px;flex-wrap:wrap;
  padding:18px max(20px,calc((100vw - var(--wrap))/2));
  border-top:1px solid var(--bd);font-size:10.5px;letter-spacing:.09em;color:var(--dim)}
.foot-r{margin-left:auto;display:flex;gap:16px}
.foot a{transition:color .15s}
.foot a:hover{color:var(--mut)}

.ns{max-width:var(--wrap);margin:0 auto;padding:48px 20px;color:var(--mut)}
.ns h1{color:var(--fg);font-size:18px;font-weight:500}
.ns a{color:var(--fg);border-bottom:1px solid var(--bd2)}

/* 404 */
.page{max-width:var(--wrap);margin:0 auto;padding:96px 20px;flex:1}
.page .big{font-family:var(--mono);font-size:64px;color:var(--fg);margin:0 0 10px;line-height:1}
.page a{color:var(--mut);border-bottom:1px solid var(--bd2)}

@media (max-width:560px){
  .head{gap:10px}
  .run-id{display:none}
  .stage{padding-top:26px}
  .foot{font-size:10px;gap:10px}
  .foot-r{gap:12px}
}
@media (prefers-reduced-motion:reduce){
  *{animation:none!important;transition:none!important}
  .px i{opacity:.4}
  .st{opacity:1;transform:none}
  .shim{color:var(--fg);background:none;-webkit-text-fill-color:currentColor}
}

/* blog */
.blog{flex:1;width:100%;max-width:var(--wrap);margin:0 auto;padding:40px 20px 60px}
.back{display:inline-block;font-family:var(--mono);font-size:11.5px;color:var(--dim);
  margin-bottom:34px;transition:color .15s}
.back:hover{color:var(--mut)}

.blog-list{list-style:none;margin:0;padding:0}
.blog-list li{border-bottom:1px solid var(--bd)}
.blog-list li:last-child{border-bottom:0}
.blog-list a{display:block;padding:20px 0;transition:opacity .15s}
.blog-list a:hover{opacity:.72}
.blog-list time{display:block;font-family:var(--mono);font-size:11px;color:var(--dim);margin-bottom:6px}
.blog-list h2{margin:0 0 6px;font-size:17px;font-weight:500;color:var(--fg)}
.blog-list p{margin:0;font-size:13px;color:var(--mut);max-width:62ch}

article.post{max-width:66ch}
article.post h1{font-size:clamp(23px,3.4vw,30px);font-weight:500;line-height:1.25;
  letter-spacing:-.01em;margin:0 0 10px;color:var(--fg)}
article.post .meta{font-family:var(--mono);font-size:11.5px;color:var(--dim);
  padding-bottom:26px;margin-bottom:30px;border-bottom:1px solid var(--bd)}
article.post h2{font-size:15.5px;font-weight:500;color:var(--fg);margin:36px 0 12px;
  letter-spacing:.005em}
article.post p{font-size:15px;line-height:1.8;color:var(--read);margin:0 0 20px}
article.post .lede{font-size:16.5px;color:var(--fg);line-height:1.7}
article.post ul{margin:0 0 20px;padding:0;list-style:none}
article.post li{font-size:15px;line-height:1.8;color:var(--read);padding-left:20px;position:relative}
article.post li::before{content:"";position:absolute;left:2px;top:12px;width:4px;height:4px;
  border-radius:1px;background:var(--dim)}
article.post a{color:var(--fg);border-bottom:1px solid var(--bd2)}
article.post a:hover{border-bottom-color:var(--mut)}
article.post code{font-family:var(--mono);font-size:13px;background:var(--card);
  border:1px solid var(--bd);border-radius:4px;padding:1px 5px;color:var(--fg)}
article.post pre{background:var(--card);border:1px solid var(--bd);border-radius:8px;
  padding:14px 16px;overflow-x:auto;margin:0 0 20px}
article.post pre code{background:none;border:0;padding:0;font-size:12.5px;line-height:1.7}
.post-end{margin-top:44px;padding-top:22px;border-top:1px solid var(--bd);
  font-family:var(--mono);font-size:11.5px;color:var(--dim)}
.post-end a{color:var(--mut);border-bottom:1px solid var(--bd2)}

/* filas de lista que llevan a algun sitio */
.st-list li.linked .row{margin:0 -10px;padding:8px 10px;border-radius:6px;cursor:pointer;
  transition:background .15s,color .15s}
.st-list li.linked .row:hover{background:var(--card)}
.st-list li.linked .v{color:var(--fg)}
.st-list li.linked .row:hover .v{color:var(--fg)}
.st-list li.linked .m{color:var(--dim);transition:color .15s}
.st-list li.linked .row::after{content:"\2192";font-family:var(--mono);font-size:12px;
  color:var(--dim);opacity:0;transform:translateX(-3px);transition:opacity .15s,transform .15s;
  flex:0 0 auto}
.st-list li.linked .row:hover::after{opacity:1;transform:none}
.st-list li.linked .row:hover .m{color:var(--run)}

/* boton de salida al final de un paso */
.st-cta{display:inline-flex;align-items:center;gap:8px;margin-top:12px;
  border:1px solid var(--bd2);border-radius:999px;padding:6px 14px;
  font-size:12.5px;color:var(--mut);transition:border-color .15s,color .15s,background .15s}
.st-cta:hover{border-color:var(--run);color:var(--fg);background:var(--card)}
.st-cta-arrow{font-family:var(--mono);font-size:12px;transition:transform .15s}
.st-cta:hover .st-cta-arrow{transform:translateX(3px)}

/* enlace de seccion en la cabecera */
.head-nav{font-family:var(--mono);font-size:11.5px;color:var(--dim);margin-left:16px;
  padding-bottom:2px;border-bottom:1px solid transparent;transition:color .15s,border-color .15s}
.head-nav:hover{color:var(--fg);border-bottom-color:var(--bd2)}

/* iconos de contacto en la cabecera */
.head-ico{display:inline-flex;align-items:center;justify-content:center;
  width:26px;height:26px;border-radius:6px;color:var(--dim);
  transition:color .15s,background .15s}
.head-ico:hover{color:var(--fg);background:var(--card)}
.head-ico svg{display:block}
.head-r{gap:14px}
@media (max-width:560px){.head-r{gap:2px}}