/* zimra-fdms — shared design system: tokens, base, ambient, nav, code chrome, footer */
:root{
  --bg:#040b1b; --panel:#081226; --panel2:#0a1730;
  --ink:#eef2fa; --dim:rgba(238,242,250,.56); --faint:rgba(238,242,250,.30);
  --hair:rgba(148,180,255,.10); --hair2:rgba(148,180,255,.18);
  --blue:#2f7de1; --blue-hi:#5aa2ff; --blue-dim:rgba(47,125,225,.13);
  --gold:#cd982d; --gold-hi:#e7b84f; --gold-dim:rgba(205,152,45,.12);
  --nav-bg:rgba(6,14,31,.62);
  --card-edge:linear-gradient(160deg,rgba(148,180,255,.14),rgba(148,180,255,.04) 40%,rgba(148,180,255,.02));
  --card-face:linear-gradient(180deg,var(--panel2),var(--panel));
  --card-inset:inset 0 1px 0 rgba(148,180,255,.07);
  --numeral:rgba(148,180,255,.28);
  --pill-ink:#071022;
  --goko:radial-gradient(40rem 22rem at 85% 0%,rgba(205,152,45,.13),transparent 60%),radial-gradient(30rem 20rem at 0% 100%,rgba(47,125,225,.12),transparent 60%),linear-gradient(180deg,#0a1428,#071022);
  --orb-blue:rgba(47,125,225,.20); --orb-gold:rgba(205,152,45,.10); --orb-blue2:rgba(47,125,225,.12);
  --gridline:rgba(148,180,255,.033); --grain-op:.05;
  --ease:cubic-bezier(.32,.72,0,1);
  --font-d:'Bricolage Grotesque',sans-serif; --font-b:'Instrument Sans',sans-serif; --font-m:'JetBrains Mono',monospace;
}
:root[data-theme="light"]{
  --bg:#f4f7fd; --panel:#ffffff; --panel2:#f8faff;
  --ink:#091430; --dim:rgba(9,20,48,.62); --faint:rgba(9,20,48,.40);
  --hair:rgba(12,36,84,.10); --hair2:rgba(12,36,84,.18);
  --blue:#1f66c9; --blue-hi:#2375d5; --blue-dim:rgba(35,117,213,.10);
  --gold:#a97a1a; --gold-hi:#b98a1e; --gold-dim:rgba(169,122,26,.10);
  --nav-bg:rgba(255,255,255,.72);
  --card-edge:linear-gradient(160deg,rgba(12,36,84,.16),rgba(12,36,84,.06) 40%,rgba(12,36,84,.04));
  --card-face:linear-gradient(180deg,#ffffff,#f7f9fe);
  --card-inset:inset 0 1px 0 rgba(255,255,255,.9), 0 18px 40px -24px rgba(9,20,48,.18);
  --numeral:rgba(12,36,84,.25);
  --pill-ink:#f4f7fd;
  --goko:radial-gradient(40rem 22rem at 85% 0%,rgba(169,122,26,.10),transparent 60%),radial-gradient(30rem 20rem at 0% 100%,rgba(35,117,213,.10),transparent 60%),linear-gradient(180deg,#ffffff,#f2f6fe);
  --orb-blue:rgba(35,117,213,.14); --orb-gold:rgba(169,122,26,.08); --orb-blue2:rgba(35,117,213,.09);
  --gridline:rgba(12,36,84,.045); --grain-op:.035;
}
*{margin:0;padding:0;box-sizing:border-box}
html{scroll-behavior:smooth}
html,body{background:var(--bg)}
body{color:var(--ink);font-family:var(--font-b);-webkit-font-smoothing:antialiased;overflow-x:hidden;
  transition:background .6s var(--ease),color .6s var(--ease)}
::selection{background:rgba(47,125,225,.3)}
::-webkit-scrollbar{width:10px}
::-webkit-scrollbar-track{background:var(--bg)}
::-webkit-scrollbar-thumb{background:var(--hair2);border-radius:99px;border:2px solid var(--bg)}

/* ambient */
.mesh{position:fixed;inset:-20%;z-index:0;pointer-events:none}
.orb{position:absolute;border-radius:50%;filter:blur(90px);opacity:.55;transition:background .6s var(--ease)}
.orb-a{width:44rem;height:30rem;top:-6rem;right:-8rem;background:radial-gradient(closest-side,var(--orb-blue),transparent)}
.orb-b{width:34rem;height:26rem;top:38%;left:-12rem;background:radial-gradient(closest-side,var(--orb-gold),transparent)}
.orb-c{width:50rem;height:32rem;bottom:-10rem;left:30%;background:radial-gradient(closest-side,var(--orb-blue2),transparent)}
.grid-lines{position:fixed;inset:0;z-index:0;pointer-events:none;
  background-image:linear-gradient(var(--gridline) 1px,transparent 1px),linear-gradient(90deg,var(--gridline) 1px,transparent 1px);
  background-size:72px 72px;
  -webkit-mask-image:radial-gradient(80rem 60rem at 50% 0%,#000 30%,transparent 75%);
          mask-image:radial-gradient(80rem 60rem at 50% 0%,#000 30%,transparent 75%);}
.grain{position:fixed;inset:0;z-index:70;pointer-events:none;opacity:var(--grain-op);mix-blend-mode:overlay;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='200' height='200'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='3'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E")}
:root[data-theme="light"] .grain{mix-blend-mode:multiply}
#progress{position:fixed;top:0;left:0;height:2px;width:100%;z-index:80;transform-origin:0 50%;transform:scaleX(0);
  background:linear-gradient(90deg,var(--blue),var(--gold))}
.no-gsap #headline .w>span{transform:none!important}

.wrap{position:relative;z-index:1;max-width:76rem;margin:0 auto;padding:0 1.5rem}

/* theme-aware images */
.only-dark{display:block}.only-light{display:none}
:root[data-theme="light"] .only-dark{display:none}
:root[data-theme="light"] .only-light{display:block}

/* kickers — git/terminal flavoured labels */
/* wrap between items, never inside one: on a 360px phone "Node 18+" broke over two lines */
.kicker{display:flex;flex-wrap:wrap;align-items:center;gap:.25rem .6rem;white-space:nowrap;
  font-family:var(--font-m);font-size:.74rem;letter-spacing:.06em;color:var(--dim)}
.kicker .dot{width:.5rem;height:.5rem;border-radius:99px;background:var(--blue-hi);
  box-shadow:0 0 10px var(--blue-hi);animation:pulse 2.6s ease-in-out infinite}
@keyframes pulse{50%{opacity:.35}}
.kicker b{color:var(--ink);font-weight:500}
.kicker .sep{color:var(--faint)}
.sk{font-family:var(--font-m);font-size:.74rem;letter-spacing:.06em;color:var(--dim)}
.sk i{font-style:normal;color:var(--blue-hi);margin-right:.5rem}
.sk.gold i{color:var(--gold-hi)}

/* nav */
.navwrap{position:fixed;top:1.25rem;left:0;right:0;z-index:50;display:flex;justify-content:center;pointer-events:none}
.navwrap nav{position:relative;pointer-events:auto;
  display:flex;align-items:center;gap:.95rem;padding:.55rem .6rem .55rem 1.2rem;
  width:min(1120px,calc(100vw - 3rem));
  background:var(--nav-bg);backdrop-filter:blur(18px) saturate(1.4);-webkit-backdrop-filter:blur(18px) saturate(1.4);
  border:1px solid var(--hair);border-radius:999px;white-space:nowrap;
  box-shadow:0 12px 40px -18px rgba(4,11,27,.5), inset 0 1px 0 rgba(255,255,255,.06)}
.navwrap nav .mark{width:1.7rem;height:1.7rem;border-radius:.5rem;object-fit:cover}
.navwrap nav .brand{font-family:var(--font-d);font-weight:600;font-size:.95rem;color:var(--ink);text-decoration:none;display:flex;align-items:center;gap:.6rem}
.navwrap nav .brand i{font-style:normal;color:var(--blue-hi)}
.navwrap nav .links{display:flex;gap:1.7rem;margin-inline:auto}
.navwrap nav .links a{position:relative;color:var(--dim);text-decoration:none;font-size:.86rem;font-weight:600;padding:.2rem 0;transition:color .45s var(--ease)}
.navwrap nav .links a::after{content:"";position:absolute;left:0;bottom:-2px;height:1px;width:100%;background:var(--blue-hi);
  transform:scaleX(0);transform-origin:100% 50%;transition:transform .5s var(--ease)}
.navwrap nav .links a:hover{color:var(--ink)}
.navwrap nav .links a:hover::after{transform:scaleX(1);transform-origin:0 50%}
.pillbtn{display:inline-flex;align-items:center;gap:.55rem;background:var(--ink);color:var(--pill-ink);text-decoration:none;
  padding:.45rem .5rem .45rem 1rem;border-radius:999px;font-weight:700;font-size:.84rem;
  transition:transform .5s var(--ease),background .6s var(--ease),color .6s var(--ease)}
.pillbtn:active{transform:scale(.96)}
.pillbtn>i{font-size:1.05rem;line-height:1}
.pillbtn .orb2{width:1.55rem;height:1.55rem;border-radius:999px;background:rgba(127,127,127,.18);
  display:flex;align-items:center;justify-content:center;font-size:.72rem;transition:transform .5s var(--ease)}
.pillbtn:hover .orb2{transform:translate(2px,-2px)}
.tt{position:relative;width:2.2rem;height:2.2rem;border-radius:999px;border:1px solid var(--hair2);
  background:transparent;cursor:pointer;color:var(--dim);display:flex;align-items:center;justify-content:center;
  transition:color .4s var(--ease),border-color .4s var(--ease),transform .4s var(--ease)}
.tt:hover{color:var(--ink);border-color:var(--blue-hi)}
.tt:active{transform:scale(.9)}
.tt i{position:absolute;font-size:1rem;transition:opacity .5s var(--ease),transform .6s var(--ease)}
.tt .i-sun{opacity:0;transform:rotate(-90deg) scale(.5)}
.tt .i-moon{opacity:1}
:root[data-theme="light"] .tt .i-sun{opacity:1;transform:rotate(0) scale(1)}
:root[data-theme="light"] .tt .i-moon{opacity:0;transform:rotate(90deg) scale(.5)}
/* burger + mobile menu */
.burger{display:none;position:relative;width:2.2rem;height:2.2rem;border-radius:999px;border:1px solid var(--hair2);
  background:transparent;cursor:pointer;align-items:center;justify-content:center;flex:none}
.burger span{position:absolute;left:.6rem;right:.6rem;height:1.5px;background:var(--ink);border-radius:2px;
  transition:transform .55s var(--ease),top .55s var(--ease)}
.burger span:nth-child(1){top:.84rem}
.burger span:nth-child(2){top:1.3rem}
.menu-open .burger span:nth-child(1){top:1.07rem;transform:rotate(45deg)}
.menu-open .burger span:nth-child(2){top:1.07rem;transform:rotate(-45deg)}
#mmenu{position:fixed;inset:0;z-index:45;display:flex;flex-direction:column;justify-content:center;
  padding:0 2rem;background:var(--nav-bg);backdrop-filter:blur(30px) saturate(1.6);-webkit-backdrop-filter:blur(30px) saturate(1.6);
  opacity:0;pointer-events:none;transition:opacity .5s var(--ease)}
.menu-open #mmenu{opacity:1;pointer-events:auto}
#mmenu a{font-family:var(--font-d);font-weight:600;font-size:clamp(1.9rem,8.5vw,2.7rem);letter-spacing:-.02em;
  color:var(--ink);text-decoration:none;padding:.6rem 0;display:flex;align-items:center;gap:1rem;
  border-bottom:1px solid var(--hair);opacity:0;transform:translateY(2rem);
  transition:opacity .6s var(--ease),transform .6s var(--ease)}
#mmenu a i{font-size:1.25rem;color:var(--blue-hi)}
#mmenu a .no{font-family:var(--font-m);font-size:.68rem;color:var(--faint);margin-left:auto;letter-spacing:.1em}
.menu-open #mmenu a{opacity:1;transform:none}
.menu-open #mmenu a:nth-child(1){transition-delay:.07s}
.menu-open #mmenu a:nth-child(2){transition-delay:.13s}
.menu-open #mmenu a:nth-child(3){transition-delay:.19s}
.menu-open #mmenu a:nth-child(4){transition-delay:.25s}
.menu-open #mmenu a:nth-child(5){transition-delay:.31s}
body.menu-open{overflow:hidden}
@media(max-width:900px){
  .navwrap nav .links{display:none}
  .burger{display:flex}
  .navwrap{top:.9rem;padding:0 .9rem}
  .navwrap nav{width:100%;justify-content:flex-start;gap:.55rem;padding-left:.9rem}
  .navwrap nav .pillbtn{display:none}
  /* brand stays left; the counter, theme and burger cluster on the right */
  .navwrap nav .ghstats{order:2;margin-left:auto}
  /* flex:none, or on a tight row the toggle is the item that gives way: 8px wide at 320px */
  .navwrap nav .tt{order:3;flex:none}
  .navwrap nav .burger{order:4}
  /* Both controls paint at 2.2rem, which is under the 44px a finger needs. The
     bar positions inside .burger are tuned to that size, so grow the hit area
     with a pseudo-element instead of the button. */
  .tt::after,.burger::after{content:"";position:absolute;left:50%;top:50%;
    transform:translate(-50%,-50%);width:2.75rem;height:2.75rem;border-radius:999px}
  /* footer links sit 16px tall in a row; padding gives them a real strip to hit */
  .foot .links a{display:inline-block;padding:.875rem 0;margin-left:1.25rem}
}

/* code chrome — shared */
.term,.codewin{border-radius:1.1rem;overflow:hidden;background:#071022;
  border:1px solid rgba(148,180,255,.14);position:relative;
  box-shadow:0 24px 60px -28px rgba(4,11,27,.75), inset 0 1px 0 rgba(148,180,255,.08)}
.term::before,.codewin::before{content:"";position:absolute;top:0;left:10%;right:10%;height:1px;
  background:linear-gradient(90deg,transparent,rgba(90,162,255,.55),transparent)}
.term{margin-top:2rem;max-width:29rem}
.term-bar{display:flex;align-items:center;gap:.45rem;padding:.65rem 1rem;
  border-bottom:1px solid rgba(148,180,255,.1);background:rgba(148,180,255,.03)}
.term-bar span{width:.6rem;height:.6rem;border-radius:99px;background:#182746;flex:none;transition:background .4s var(--ease)}
/* the three dots above are bare spans — the language badge must opt out of their sizing */
.term-bar span.lang{width:auto;height:auto;background:none}
.term:hover .term-bar span:nth-child(1),.codewin:hover .term-bar span:nth-child(1){background:#ff5f57}
.term:hover .term-bar span:nth-child(2),.codewin:hover .term-bar span:nth-child(2){background:#febc2e}
.term:hover .term-bar span:nth-child(3),.codewin:hover .term-bar span:nth-child(3){background:#28c840}
.term-bar b{margin-left:.6rem;font-family:var(--font-m);font-weight:400;font-size:.7rem;color:rgba(238,242,250,.35);letter-spacing:.06em}
.term-bar .lang{margin-left:auto;font-family:var(--font-m);font-size:.6rem;letter-spacing:.14em;
  color:#5aa2ff;background:rgba(47,125,225,.14);border:1px solid rgba(90,162,255,.25);
  border-radius:.4rem;padding:.16rem .5rem;text-transform:uppercase}
.term-body{display:flex;align-items:center;justify-content:space-between;gap:1rem;padding:.85rem 1.05rem;font-family:var(--font-m);font-size:.88rem}
.term-body .ps{color:#e7b84f}
.term-body .cmd{color:#eef2fa}
.term-body .caret{display:inline-block;width:.55em;height:1.1em;background:#5aa2ff;vertical-align:text-bottom;margin-left:2px;animation:blink 1.1s steps(1) infinite}
@keyframes blink{50%{opacity:0}}
.copybtn{border:1px solid rgba(148,180,255,.2);cursor:pointer;background:transparent;color:rgba(238,242,250,.55);
  border-radius:.6rem;padding:.4rem .75rem;font-family:var(--font-b);font-size:.68rem;font-weight:700;
  letter-spacing:.1em;text-transform:uppercase;transition:all .45s var(--ease);white-space:nowrap}
.copybtn:hover{border-color:#5aa2ff;color:#5aa2ff}
.copybtn.ok{border-color:#cd982d;color:#e7b84f}
.term-bar .copybtn{margin-left:.6rem;padding:.3rem .6rem;font-size:.62rem;flex:none}
.term-bar b{flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.term-bar .lang{flex:none}
@media(max-width:900px){
  /* Copy and the tab switches paint about 23px tall. The bar around them is 45px,
     so the hit area can claim the full bar height and still stay inside .codewin,
     which clips anything wider. */
  .copybtn,.code-tab{position:relative}
  .copybtn::after,.code-tab::after{content:"";position:absolute;left:50%;top:50%;
    transform:translate(-50%,-50%);width:100%;height:2.75rem;min-width:2.75rem}
}

.codewin pre{padding:1rem 0 1.15rem;overflow-x:auto;counter-reset:cl}
.codewin code{font-family:var(--font-m);font-size:.83rem;line-height:1.9;color:#c7d3ec;display:block;min-width:max-content}
.ln{display:block;position:relative;padding:0 1.4rem 0 3.5rem;counter-increment:cl;border-left:2px solid transparent}
.ln::before{content:counter(cl);position:absolute;left:0;width:2.5rem;text-align:right;
  color:rgba(199,211,236,.22);font-size:.7rem;line-height:inherit;user-select:none}
.ln.hl{background:rgba(47,125,225,.09);border-left-color:#2f7de1}
.ln.hl::before{color:#5aa2ff}
.tk{color:#6fb3ff}.ts{color:#e7b84f}.tc{color:rgba(199,211,236,.38)}.tf{color:#9ecbff}.tn{color:#eef2fa}
/* footer */
footer{padding:2.5rem 0 2rem;border-top:1px solid var(--hair);margin-top:2rem}
.foot{display:flex;flex-wrap:wrap;justify-content:space-between;align-items:center;gap:1.25rem}
.foot img{width:8rem}
.foot .links a{color:var(--dim);text-decoration:none;margin-left:1.5rem;font-size:.84rem;font-weight:600;transition:color .4s var(--ease)}
.foot .links a:hover{color:var(--ink)}
.foot .fine{width:100%;margin-top:1.5rem;color:var(--faint);font-size:.76rem;line-height:1.65;max-width:64ch;font-weight:500}
@media(prefers-reduced-motion:reduce){*{animation:none!important;transition:none!important}}

/* ==================== github live counter (both headers) ==================== */
/* One glass capsule, two segments. Stays display:none until real numbers land, */
/* so a rate-limited or offline fetch leaves no hole in the nav.                */
.ghstats{display:none;align-items:center;flex:none;position:relative;overflow:hidden;
  padding:.2rem .26rem;border-radius:999px;
  border:1px solid rgba(231,184,79,.46);
  background:linear-gradient(118deg,rgba(231,184,79,.22),rgba(90,162,255,.17) 62%,rgba(231,184,79,.10));
  box-shadow:0 10px 28px -18px rgba(231,184,79,.75), inset 0 1px 0 rgba(255,255,255,.08)}
.ghstats.ready{display:inline-flex;animation:ghin .75s var(--ease) both}
@keyframes ghin{from{opacity:0;transform:translateY(-6px) scale(.94)}to{opacity:1;transform:none}}
:root[data-theme="light"] .ghstats{border-color:rgba(200,144,26,.5);
  background:linear-gradient(118deg,rgba(200,144,26,.24),rgba(35,117,213,.16) 62%,rgba(200,144,26,.10));
  box-shadow:0 10px 28px -18px rgba(200,144,26,.6), inset 0 1px 0 rgba(255,255,255,.5)}

/* a glint sweeps the capsule every few seconds so it reads as live, not static */
.ghstats::after{content:"";position:absolute;top:0;bottom:0;left:-45%;width:36%;pointer-events:none;
  background:linear-gradient(100deg,transparent,rgba(255,255,255,.26),transparent);
  animation:ghsheen 5.5s var(--ease) infinite}
@keyframes ghsheen{0%,74%{left:-45%}100%{left:118%}}

.ghstat{display:inline-flex;align-items:center;gap:.5rem;flex:none;text-decoration:none;
  position:relative;z-index:1;padding:.26rem .62rem;border-radius:999px;
  transition:background .45s var(--ease),transform .45s var(--ease)}
.ghstat:hover{background:rgba(127,127,127,.14)}
.ghstat:active{transform:scale(.95)}
.gh-div{width:1px;align-self:stretch;margin:.32rem 0;flex:none;position:relative;z-index:1;background:var(--hair2)}

.gh-n{display:inline-flex;align-items:baseline;gap:.36rem;line-height:1}
/* monospace + tabular figures: the capsule cannot twitch while the number counts up */
.gh-n .num{font-family:var(--font-m);font-weight:700;font-size:.86rem;color:var(--ink);
  font-variant-numeric:tabular-nums;letter-spacing:-.02em}
.gh-n em{font-family:var(--font-m);font-style:normal;font-weight:600;font-size:.56rem;
  letter-spacing:.15em;text-transform:uppercase}
.ghstat.stars .gh-n em{color:#f0c76a}
.ghstat.forks .gh-n em{color:var(--blue-hi)}
:root[data-theme="light"] .ghstat.stars .gh-n em{color:#9a6c0c}

.gh-star{width:1.02rem;height:1.02rem;flex:none;fill:#e7b84f;
  filter:drop-shadow(0 0 7px rgba(231,184,79,.55));
  transition:transform .6s var(--ease),filter .6s var(--ease)}
.ghstat.stars:hover .gh-star{transform:rotate(72deg) scale(1.2);filter:drop-shadow(0 0 11px rgba(231,184,79,.95))}
:root[data-theme="light"] .gh-star{fill:#c8901a;filter:drop-shadow(0 0 7px rgba(200,144,26,.45))}
.ghstat.forks i{font-size:1rem;line-height:1;color:var(--blue-hi);transition:transform .55s var(--ease)}
.ghstat.forks:hover i{transform:translateY(-1px) scale(1.16)}

/* a refetch that lands on a new number pulses that segment */
.ghstat.bumped{animation:ghbump .8s var(--ease)}
@keyframes ghbump{0%{transform:scale(1)}28%{transform:scale(1.14)}100%{transform:scale(1)}}

@media(max-width:900px){
  /* keep it visible on mobile, but drop the labels and stop the glint */
  .ghstats.ready{display:inline-flex}
  .ghstats::after{animation:none;display:none}
  .gh-n em{display:none}
  .ghstat{padding:.24rem .5rem;gap:.4rem}
}
@media(max-width:560px){
  /* stars alone earn the space on a small phone */
  .gh-div,.ghstat.forks{display:none}
}
@media(max-width:359px){
  /* Below 360px the brand, stars, toggle and burger no longer fit in the pill, and the burger
     is the one that has to stay reachable. */
  .navwrap nav .ghstats.ready{display:none}
  .navwrap nav .tt{margin-left:auto}
}

/* mobile menu numbering is a counter, so a hidden entry never leaves a gap in the sequence */
#mmenu{counter-reset:mm}
#mmenu a:not([hidden]) .no::before{counter-increment:mm;content:"0" counter(mm)}