/* developers.anpheros.com/guides/ — ghidurile pentru developeri (28 sep 2026).
   Aceeași identitate ca pagina platformei (site.css): alb, ardezie, cyan; Bricolage Grotesque pentru
   titluri, Instrument Sans pentru text, IBM Plex Mono pentru cod. Fără JavaScript. */
:root{
  --bg:#ffffff; --mist:#f4f7fb; --line:#e2e8f1;
  --ink:#0e1a33; --ink-2:#4a5673; --ink-3:#8591a8;
  --slate:#44619e; --cyan:#1fc7d9;
  --display:"Bricolage Grotesque","Avenir Next","Segoe UI",system-ui,sans-serif;
  --body:"Instrument Sans","Helvetica Neue","Segoe UI",system-ui,sans-serif;
  --mono:"IBM Plex Mono",ui-monospace,"SF Mono",Menlo,monospace;
  --gutter:clamp(16px,4vw,48px);
}
*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{margin:0; background:var(--bg); color:var(--ink); font:400 16.5px/1.6 var(--body); -webkit-font-smoothing:antialiased}
a{color:var(--slate); text-underline-offset:3px}
a:hover{color:var(--ink)}
:focus-visible{outline:2px solid var(--cyan); outline-offset:3px; border-radius:6px}

.top{position:sticky; top:0; z-index:10; display:flex; align-items:center; justify-content:space-between; gap:16px;
  padding:12px var(--gutter); background:rgba(255,255,255,.92); backdrop-filter:blur(10px); border-bottom:1px solid var(--line)}
.brand{display:flex; align-items:center; gap:10px; text-decoration:none; color:var(--ink); font-weight:600}
.brand img{width:28px; height:28px}
.brand small{font:500 11px/1 var(--mono); letter-spacing:.12em; text-transform:uppercase; color:var(--slate);
  border:1px solid var(--line); border-radius:999px; padding:5px 8px}
.top nav{display:flex; gap:18px; flex-wrap:wrap}
.top nav a{text-decoration:none; color:var(--ink-2); font-weight:500; font-size:15px}
.top nav a:hover{color:var(--ink)}
.top nav a.cta,.start a.cta{background:var(--ink); color:#fff; padding:7px 14px; border-radius:999px; font-weight:600}
.top nav a.cta:hover,.start a.cta:hover{background:var(--slate); color:#fff}
.start{display:flex; align-items:center; justify-content:space-between; gap:16px; flex-wrap:wrap;
  background:var(--mist); border:1px solid var(--line); border-radius:14px; padding:16px 20px; margin:0 0 32px}
.start b{display:block; color:var(--ink); font-size:16px}
.start span{color:var(--ink-2); font-size:15px}
.start a.cta{text-decoration:none; white-space:nowrap; padding:10px 18px}

.layout{display:grid; grid-template-columns:240px minmax(0,1fr); gap:48px; max-width:1180px; margin:0 auto; padding:40px var(--gutter) 64px}
aside ul{list-style:none; margin:0; padding:0; position:sticky; top:84px}
aside li a{display:block; padding:7px 12px; border-radius:10px; text-decoration:none; color:var(--ink-2); font-size:15px}
aside li a:hover{background:var(--mist); color:var(--ink)}
aside li a[aria-current="page"]{background:var(--mist); color:var(--ink); font-weight:600}
aside li.sec{font:500 11px/1 var(--mono); letter-spacing:.12em; text-transform:uppercase; color:var(--ink-3); padding:18px 12px 8px}
aside li.sec:first-child{padding-top:0}

main{min-width:0; max-width:820px}
h1,h2,h3{font-family:var(--display); letter-spacing:-.02em; line-height:1.15; text-wrap:balance}
h1{font-size:clamp(32px,4vw,44px); font-weight:650; margin:0 0 12px}
h2{font-size:26px; font-weight:650; margin:44px 0 12px}
h3{font-size:19px; font-weight:650; margin:28px 0 8px}
p,ul,ol{margin:0 0 14px}
.lead{font-size:18px; color:var(--ink-2); margin-bottom:28px}
code{font:400 .88em/1.5 var(--mono); background:var(--mist); border-radius:6px; padding:.1em .35em; overflow-wrap:anywhere}
pre{background:#0e1a33; color:#e8eef8; border-radius:14px; padding:16px 18px; overflow-x:auto; margin:0 0 18px}
pre code{background:none; padding:0; color:inherit; font-size:13.5px; overflow-wrap:normal}
table{width:100%; border-collapse:collapse; margin:0 0 20px; font-size:14.5px; display:block; overflow-x:auto}
th,td{text-align:left; vertical-align:top; padding:9px 12px; border-bottom:1px solid var(--line)}
th{font-weight:600; background:var(--mist)}
td code,th code{white-space:nowrap; overflow-wrap:normal}

.cards{list-style:none; padding:0; display:grid; grid-template-columns:repeat(auto-fill,minmax(240px,1fr)); gap:14px; margin:0 0 28px}
.cards li{border:1px solid var(--line); border-radius:16px; padding:16px 18px; display:flex; flex-direction:column; gap:6px}
.cards a{text-decoration:none; color:var(--ink); font-size:17px}
.cards span{color:var(--ink-2); font-size:14.5px; line-height:1.5}

.foot{display:flex; flex-wrap:wrap; gap:10px 22px; padding:24px var(--gutter) 40px; border-top:1px solid var(--line);
  max-width:1180px; margin:0 auto; font-size:14px}
.foot a{color:var(--ink-3); text-decoration:none}
.foot a:hover{color:var(--ink)}

@media (max-width:860px){
  .layout{grid-template-columns:1fr; gap:24px; padding-top:24px}
  aside ul{position:static; display:flex; flex-wrap:wrap; gap:6px}
  aside li a{border:1px solid var(--line); padding:6px 12px; font-size:14px}
  aside li.sec{width:100%; padding:10px 2px 2px}
  .top{flex-wrap:wrap; gap:8px 16px}
  .brand small{display:none}
  .top nav{gap:14px}
  .top nav a{font-size:14px}
}