/* Identity Bytes Labs : shared base for the Foundations guides.
   Dark hero band only; white reading body. Each page sets --acc and adds
   its own layout on top of these tokens. */
:root{
  --night:#16142e;--night-2:#211e41;
  --violet:#5c5cbf;--violet-ink:#3b3b85;--violet-soft:#ecebff;--violet-glow:#9696ff;
  --coral:#ff5c7a;--coral-ink:#b81c40;--coral-soft:#ffe9ee;
  --mint:#4dee75;--mint-ink:#157a35;--mint-soft:#e4fbe9;
  --amber:#ffb547;--amber-ink:#8a5500;--amber-soft:#fff3df;
  --sky:#48b7ff;--sky-ink:#0b5f9a;--sky-soft:#e3f2ff;
  --ink:#1f1d33;--muted:#5d5b75;--line:#e7e6ef;--paper:#ffffff;--paper-2:#f8f8fc;
  --font-display:'Unbounded','Segoe UI',Verdana,sans-serif;
  --font-body:'Inter','Segoe UI',Roboto,Helvetica,Arial,sans-serif;
  --font-mono:'JetBrains Mono','Cascadia Mono',Consolas,monospace;
  --ease:cubic-bezier(.25,.1,.25,1);
  --shadow:0 2px 4px rgba(33,30,65,.05),0 12px 30px rgba(33,30,65,.07);
  --acc:var(--violet);--acc-ink:var(--violet-ink);--acc-soft:var(--violet-soft);
}
*{box-sizing:border-box;}
html{scroll-behavior:smooth;background:var(--paper);}
body{margin:0;background:var(--paper);color:var(--ink);font-family:var(--font-body);font-size:16.5px;line-height:1.72;-webkit-font-smoothing:antialiased;}
.wrap{max-width:1160px;margin:0 auto;padding-left:max(24px,env(safe-area-inset-left,0px));padding-right:max(24px,env(safe-area-inset-right,0px));}
:focus-visible{outline:3px solid var(--acc);outline-offset:3px;}
a{color:var(--acc-ink);text-underline-offset:3px;}
a:hover{color:var(--ink);}
p{margin:0 0 14px;}
ul,ol{margin:0 0 14px;padding-left:22px;}
li{margin:5px 0;}
strong,b{font-weight:600;}
code,pre,kbd{font-family:var(--font-mono);}
code{font-size:.88em;background:var(--violet-soft);color:var(--violet-ink);padding:1px 6px;}
pre{background:var(--night-2);color:#f0f0fa;border-left:3px solid var(--mint);padding:16px 18px;overflow:auto;font-size:13.5px;line-height:1.65;margin:14px 0 18px;}
pre code{background:none;color:inherit;padding:0;font-size:inherit;}
pre .c{color:#9a97c4;}
pre .k{color:#9696ff;}
pre .s{color:#4dee75;}

/* Hero */
.ghero{position:relative;overflow:hidden;background:var(--night);color:#fff;padding-block:64px 70px;isolation:isolate;}
.ghero:before{content:"";position:absolute;inset:0;z-index:-1;background:
  radial-gradient(circle at 8% 25%,var(--glow-1,rgba(92,92,191,.55)),transparent 44%),
  radial-gradient(circle at 92% 80%,var(--glow-2,rgba(72,183,255,.28)),transparent 42%),
  repeating-linear-gradient(45deg,rgba(150,150,255,.05) 0 1px,transparent 1px 58px),
  repeating-linear-gradient(-45deg,rgba(150,150,255,.05) 0 1px,transparent 1px 58px);}
.ghero:after{content:"";position:absolute;left:0;right:0;bottom:0;height:3px;background:var(--acc);}
.crumbs{display:flex;gap:10px;align-items:center;flex-wrap:wrap;font-size:12px;font-weight:600;letter-spacing:1.3px;text-transform:uppercase;color:rgba(255,255,255,.7);margin-bottom:20px;}
.crumbs a{color:rgba(255,255,255,.7);text-decoration:none;}
.crumbs a:hover{color:#fff;}
.crumbs .num{color:var(--night);background:var(--acc);padding:2px 8px;letter-spacing:.8px;}
.ghero h1{font-family:var(--font-display);font-weight:400;font-size:clamp(30px,4.8vw,54px);line-height:1.08;letter-spacing:-.4px;margin:0 0 18px;max-width:20ch;text-wrap:balance;}
.ghero h1 em{font-style:normal;color:var(--acc);}
.ghero .lede{font-size:18px;line-height:1.6;color:rgba(255,255,255,.8);max-width:64ch;margin:0;}
.gmeta{display:flex;gap:10px;flex-wrap:wrap;margin-top:26px;}
.gmeta span{font-size:12.5px;font-weight:500;color:#fff;border:1px solid rgba(255,255,255,.28);padding:5px 12px;}
.gmeta span b{color:var(--acc);font-weight:600;}

/* Headings in body */
.g-h2{font-family:var(--font-display);font-weight:400;font-size:clamp(23px,2.6vw,30px);line-height:1.2;letter-spacing:-.2px;margin:0 0 16px;text-wrap:balance;}
.g-h3{font-size:18px;font-weight:600;margin:26px 0 8px;color:var(--ink);}
.kick{display:inline-block;font-size:11.5px;font-weight:600;letter-spacing:1.4px;text-transform:uppercase;color:var(--acc-ink);margin-bottom:10px;}
.muted{color:var(--muted);}

/* Callouts */
.callout{padding:16px 20px;margin:18px 0;border-left:3px solid var(--c,var(--acc));background:var(--s,var(--acc-soft));font-size:15.5px;}
.callout>b:first-child{display:block;font-size:11.5px;letter-spacing:1px;text-transform:uppercase;color:var(--i,var(--acc-ink));margin-bottom:4px;}
.callout p:last-child{margin:0;}
.callout.plain{--c:var(--mint);--s:var(--paper-2);--i:var(--mint-ink);}
.callout.warn{--c:var(--coral);--s:var(--coral-soft);--i:var(--coral-ink);}
.callout.tip{--c:var(--amber);--s:var(--amber-soft);--i:var(--amber-ink);}
.callout.info{--c:var(--sky);--s:var(--sky-soft);--i:var(--sky-ink);}

/* Tables */
.tbl{overflow-x:auto;margin:16px 0 20px;border:1px solid var(--line);}
.tbl table{width:100%;border-collapse:collapse;font-size:14.5px;min-width:560px;}
.tbl th{background:var(--night-2);color:#fff;font-size:11.5px;font-weight:600;letter-spacing:.8px;text-transform:uppercase;text-align:left;padding:11px 14px;}
.tbl td{padding:11px 14px;border-top:1px solid var(--line);vertical-align:top;}
.tbl tbody tr:nth-child(even){background:var(--paper-2);}
.tbl td:first-child{font-weight:600;}

/* Diagrams */
.fig{margin:20px 0 24px;border:1px solid var(--line);background:var(--paper-2);padding:16px;overflow-x:auto;}
.fig svg{display:block;width:100%;height:auto;min-width:600px;}
.fig figcaption{font-size:13px;color:var(--muted);margin-top:10px;}

/* Next / pager */
.pager{display:grid;grid-template-columns:1fr 1fr;gap:14px;margin-top:56px;}
.pager a{display:block;text-decoration:none;color:var(--ink);border:1px solid var(--line);padding:16px 20px;background:var(--paper);transition:box-shadow 500ms var(--ease),border-color 350ms var(--ease);}
.pager a:hover{box-shadow:var(--shadow);border-color:var(--acc);}
.pager small{display:block;font-size:11px;font-weight:600;letter-spacing:1px;text-transform:uppercase;color:var(--muted);}
.pager span{display:block;margin-top:4px;font-family:var(--font-display);font-size:15px;}
.pager .r{text-align:right;}

footer.gf{margin-top:80px;background:var(--paper-2);border-top:1px solid var(--line);padding-block:30px;}
.gf .wrap{display:flex;justify-content:space-between;gap:20px;flex-wrap:wrap;font-size:13px;color:var(--muted);}
.gf strong{font-family:var(--font-display);font-weight:400;font-size:15px;color:var(--ink);letter-spacing:1px;}
.spectrum{height:4px;background:linear-gradient(90deg,var(--violet),var(--sky),var(--mint),var(--amber),var(--coral));}

@media(max-width:700px){
  body{font-size:16px;}
  .ghero{padding-block:46px 54px;}
  .pager{grid-template-columns:1fr;}
  .pager .r{text-align:left;}
}
@media(prefers-reduced-motion:reduce){*,*:before,*:after{transition:none!important;animation:none!important;scroll-behavior:auto!important;}}