/* ETIENNE SEAN — BUILD LIBRARY
   Public knowledge layer. Brand-faithful, crawlable, fast and portable. */

body.guide-page{
  background:
    radial-gradient(circle at 78% 12%,rgba(242,29,47,.14),transparent 22%),
    radial-gradient(circle at 18% 46%,rgba(115,184,255,.035),transparent 20%),
    var(--void);
}
body.guide-page:before{opacity:.78}
.guide-shell{min-height:100vh}
.guide-topbar{position:sticky;top:0;z-index:80;border-bottom:1px solid var(--line);background:rgba(6,7,8,.88);backdrop-filter:blur(20px)}
.guide-topbar .topbar-inner{height:72px}
.guide-nav{display:flex;align-items:center;gap:20px;font-size:.84rem;color:var(--steel)}
.guide-nav a{position:relative}
.guide-nav a:hover,.guide-nav a[aria-current="page"]{color:var(--white)}
.guide-nav a[aria-current="page"]:after{content:"";position:absolute;left:0;right:0;bottom:-10px;height:2px;background:var(--signal);box-shadow:0 0 16px rgba(242,29,47,.45)}
.guide-cta{min-height:42px;padding:0 14px;font-size:.78rem}
.guide-hero{padding:92px 0 54px;border-bottom:1px solid var(--line);overflow:hidden;position:relative}
.guide-hero:after{content:"";position:absolute;right:-9vw;top:4%;width:min(520px,52vw);aspect-ratio:1;border:1px solid rgba(242,29,47,.12);border-radius:50%;box-shadow:0 0 90px rgba(242,29,47,.06);pointer-events:none}
.guide-hero-grid{display:grid;grid-template-columns:minmax(0,1.28fr) minmax(280px,.72fr);gap:64px;align-items:end;position:relative;z-index:1}
.guide-breadcrumb{display:flex;flex-wrap:wrap;align-items:center;gap:8px;color:var(--steel-dim);font:700 .66rem/1.4 var(--mono);letter-spacing:.09em;text-transform:uppercase;margin-bottom:22px}
.guide-breadcrumb a:hover{color:var(--white)}
.guide-breadcrumb i{color:var(--signal);font-style:normal}
.guide-hero h1{font-size:clamp(3.2rem,6.7vw,6.4rem);max-width:930px;margin:14px 0 22px}
.guide-hero .lede{max-width:830px}
.guide-meta{display:flex;flex-wrap:wrap;gap:10px;margin-top:28px}
.guide-meta span{border:1px solid var(--line);background:rgba(255,255,255,.025);padding:8px 11px;border-radius:999px;color:var(--steel);font:700 .62rem/1 var(--mono);letter-spacing:.08em;text-transform:uppercase}
.guide-signal{border:1px solid rgba(242,29,47,.22);background:linear-gradient(160deg,rgba(242,29,47,.075),rgba(13,16,19,.86) 54%);border-radius:var(--radius);padding:24px;box-shadow:var(--shadow)}
.guide-signal .signal-top{display:flex;align-items:center;justify-content:space-between;gap:14px;border-bottom:1px solid var(--line);padding-bottom:14px;margin-bottom:16px}
.guide-signal .signal-dot{width:9px;height:9px;border-radius:50%;background:var(--signal);box-shadow:0 0 22px rgba(242,29,47,.7)}
.guide-signal strong{font-family:var(--display);font-size:1.18rem}
.guide-signal ol{margin:0;padding-left:20px;color:#d9e0e6}
.guide-signal li{padding:7px 0}
.guide-layout{display:grid;grid-template-columns:minmax(0,1fr) 270px;gap:60px;padding:64px 0 94px}
.guide-article{min-width:0}
.guide-article section{padding:34px 0;border-bottom:1px solid var(--line)}
.guide-article section:first-child{padding-top:0}
.guide-article section:last-child{border-bottom:0}
.guide-article h2{font-size:clamp(2.1rem,4vw,3.4rem);margin-bottom:18px}
.guide-article h3{font-size:1.48rem;margin-top:28px}
.guide-article p,.guide-article li{font-size:1.04rem;line-height:1.78;color:#d9e0e6}
.guide-article strong{color:var(--white)}
.guide-article ul,.guide-article ol{padding-left:22px}
.guide-article li{margin:10px 0}
.guide-article a:not(.btn){color:#ff6b72;text-decoration:underline;text-decoration-color:rgba(242,29,47,.4);text-underline-offset:3px}
.guide-article a:not(.btn):hover{color:var(--white)}
.guide-callout{margin:26px 0;border-left:3px solid var(--signal);background:rgba(242,29,47,.055);padding:20px 22px;border-radius:0 14px 14px 0}
.guide-callout p{margin:0}
.guide-code{margin:24px 0;border:1px solid var(--line);background:#050607;border-radius:16px;overflow:hidden}
.guide-code-head{display:flex;align-items:center;justify-content:space-between;padding:11px 15px;border-bottom:1px solid var(--line);font:700 .61rem/1 var(--mono);letter-spacing:.08em;text-transform:uppercase;color:var(--steel-dim)}
.guide-code pre{margin:0;padding:20px;white-space:pre-wrap;overflow-wrap:anywhere;font:500 .84rem/1.65 var(--mono);color:#dce3ea}
.guide-checklist{display:grid;gap:10px;margin:22px 0}
.guide-check{display:grid;grid-template-columns:28px 1fr;gap:12px;align-items:start;border:1px solid var(--line);background:rgba(255,255,255,.02);border-radius:12px;padding:14px 15px}
.guide-check b{display:grid;place-items:center;width:28px;height:28px;border:1px solid rgba(242,29,47,.34);color:var(--signal);border-radius:8px;font:800 .68rem/1 var(--mono)}
.guide-check span{color:#dce3ea;line-height:1.55}
.guide-aside{position:relative}
.guide-sticky{position:sticky;top:98px}
.guide-toc{border:1px solid var(--line);background:rgba(13,16,19,.82);border-radius:18px;padding:19px}
.guide-toc .kicker{display:block;margin-bottom:12px}
.guide-toc a{display:block;border-left:1px solid var(--line);padding:8px 0 8px 12px;color:var(--steel);font-size:.84rem}
.guide-toc a:hover{color:var(--white);border-left-color:var(--signal)}
.guide-mini-cta{margin-top:14px;border:1px solid rgba(242,29,47,.22);background:rgba(242,29,47,.055);border-radius:18px;padding:18px}
.guide-mini-cta p{font-size:.84rem;margin:8px 0 14px}
.guide-library-hero{padding-bottom:68px}
.guide-library-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:16px}
.guide-card{display:flex;flex-direction:column;min-height:280px;border:1px solid var(--line);background:linear-gradient(160deg,rgba(255,255,255,.025),rgba(13,16,19,.72));border-radius:20px;padding:26px;transition:transform .22s ease,border-color .22s ease,background .22s ease}
.guide-card:hover{transform:translateY(-3px);border-color:rgba(242,29,47,.28);background:linear-gradient(160deg,rgba(242,29,47,.055),rgba(13,16,19,.82))}
.guide-card .guide-number{color:var(--signal);font:800 .64rem/1 var(--mono);letter-spacing:.1em;text-transform:uppercase}
.guide-card h2{font-size:clamp(1.9rem,3vw,2.8rem);margin:26px 0 12px}
.guide-card p{margin-bottom:24px}
.guide-card .guide-link{margin-top:auto;color:var(--white);font:900 .82rem/1 var(--display)}
.guide-cluster{padding:80px 0}
.guide-cluster-head{display:flex;align-items:end;justify-content:space-between;gap:28px;margin-bottom:30px}
.guide-cluster-head h2{max-width:700px;margin:0}
.guide-next{padding:72px 0;border-top:1px solid var(--line);background:rgba(255,255,255,.012)}
.guide-next-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:14px;margin-top:28px}
.guide-next a{border:1px solid var(--line);border-radius:16px;padding:18px;min-height:138px;background:rgba(255,255,255,.018)}
.guide-next a:hover{border-color:rgba(242,29,47,.3);background:rgba(242,29,47,.04)}
.guide-next small{display:block;color:var(--signal);font:800 .6rem/1 var(--mono);letter-spacing:.08em;text-transform:uppercase;margin-bottom:12px}
.guide-next strong{font-family:var(--display);font-size:1.1rem;line-height:1.1}
.guide-footer{border-top:1px solid var(--line);padding:28px 0 36px}
.guide-footer .footer-grid{align-items:center}
.guide-footer-links{display:flex;gap:16px;flex-wrap:wrap;color:var(--steel);font-size:.8rem}
.guide-footer-links a:hover{color:var(--white)}
html.guide-motion .guide-reveal{opacity:0;translate:0 16px;transition:opacity .55s cubic-bezier(.22,.78,.22,1),translate .7s cubic-bezier(.22,.78,.22,1)}
html.guide-motion .guide-reveal.guide-visible{opacity:1;translate:0 0}
@media(max-width:900px){
  .guide-hero-grid,.guide-layout{grid-template-columns:1fr}
  .guide-hero-grid{gap:32px}
  .guide-layout{gap:30px}
  .guide-aside{order:-1}
  .guide-sticky{position:static}
  .guide-toc{display:none}
  .guide-mini-cta{margin-top:0}
  .guide-library-grid{grid-template-columns:1fr}
}
@media(max-width:680px){
  .guide-topbar .topbar-inner{height:64px}
  .guide-nav a:not(.guide-cta){display:none}
  .guide-hero{padding:68px 0 40px}
  .guide-hero h1{font-size:clamp(2.75rem,14.4vw,4.6rem);line-height:.9}
  .guide-hero-grid{gap:24px}
  .guide-signal{padding:18px}
  .guide-layout{padding:42px 0 70px}
  .guide-article section{padding:28px 0}
  .guide-article p,.guide-article li{font-size:1rem;line-height:1.68}
  .guide-library-grid{gap:12px}
  .guide-card{min-height:0;padding:22px}
  .guide-next-grid{grid-template-columns:1fr}
  .guide-cluster{padding:58px 0}
  .guide-cluster-head{display:block}
  .guide-footer .footer-grid{gap:16px}
}
@media(prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  html.guide-motion .guide-reveal{opacity:1!important;translate:0 0!important;transition:none!important}
  .guide-card,.btn{transition:none!important}
}