@property --mesh-x1 {
   syntax:"<percentage>";
   inherits:false;
   initial-value:20%;
}

@property --mesh-y1 {
   syntax:"<percentage>";
   inherits:false;
   initial-value:25%;
}

@property --mesh-x2 {
   syntax:"<percentage>";
   inherits:false;
   initial-value:80%;
}

@property --mesh-y2 {
   syntax:"<percentage>";
   inherits:false;
   initial-value:75%;
}

@property --mesh-angle {
   syntax:"<angle>";
   inherits:false;
   initial-value:135deg;
}

:root {
   --ground:#141414;
   --surface:#1c1c1c;
   --surface-raised:#242424;
   --surface-overlay:rgba(28, 28, 28, 0.94);
   --rule:#333333;
   --rule-light:#444444;
   --text:#ededed;
   --text-muted:#9a9a9a;
   --text-dim:#6e6e6e;
   --signal:#ff4d00;
   --signal-hover:#ff6a26;
   --signal-dim:rgba(255, 77, 0, 0.14);
   --signal-border:rgba(255, 77, 0, 0.35);

   --zilu-87e:"Cinzel", Georgia, "Times New Roman", serif;
   --zilu-c2d:"Outfit", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
   --zilu-604:"JetBrains Mono", SFMono-Regular, Consolas, monospace;

   --sidebar-w:20rem;
   --header-mobile-h:4.25rem;
   --content-max-w:88rem;

   --ease-out:cubic-bezier(0.16, 1, 0.3, 1);
   --ease-in-out:cubic-bezier(0.65, 0, 0.35, 1);
   --dur-fast:160ms;
   --dur-med:280ms;
   --dur-slow:480ms;

   --radius-none:0px;
   --radius-xs:2px;
   --radius-sm:4px;

   --step--1:clamp(0.8125rem, 0.79rem + 0.12vw, 0.875rem);
   --zilu-934:clamp(0.9375rem, 0.9rem + 0.2vw, 1.0625rem);
   --zilu-c99:clamp(1.125rem, 1.05rem + 0.38vw, 1.3125rem);
   --zilu-3de:clamp(1.35rem, 1.22rem + 0.65vw, 1.6875rem);
   --zilu-f3b:clamp(1.6875rem, 1.48rem + 1.05vw, 2.25rem);
   --zilu-920:clamp(2.125rem, 1.8rem + 1.62vw, 3rem);
   --zilu-9ca:clamp(2.6875rem, 2.18rem + 2.54vw, 4rem);

   --space-3xs:0.25rem;
   --space-2xs:0.5rem;
   --space-xs:0.75rem;
   --space-sm:1rem;
   --space-md:1.5rem;
   --space-lg:2rem;
   --space-xl:3rem;
   --space-2xl:4.5rem;
   --space-3xl:6rem;
}

*, *::before, *::after {
   box-sizing:border-box;
   margin:0;
   padding:0;
}

html {
   -webkit-text-size-adjust:100%;
   tab-size:4;
   scroll-behavior:smooth;

   color-scheme:dark;
}

body {
   background-color:var(--ground);
   color:var(--text);
   font-family:var(--zilu-c2d);
   font-size:var(--zilu-934);

   line-height:1.6;
   font-weight:400;
   min-height:100vh;
   text-rendering:optimizeLegibility;
   -webkit-font-smoothing:antialiased;
   -moz-osx-font-smoothing:grayscale;
   overflow-x:hidden;
}

img, picture, svg, video {
   display:block;
   max-width:100%;
   height:auto;
}

input, button, textarea, select {
   font:inherit;
   color:inherit;
}

button {
   background:none;
   border:none;
   cursor:pointer;
   text-align:inherit;
}

a {
   color:inherit;
   text-decoration:none;
}

ul, ol { list-style:none; }

h1, h2, h3, h4 {
   font-family:var(--zilu-87e);
   font-weight:700;
   line-height:1.15;
   color:var(--text);
   letter-spacing:0.02em;
   text-wrap:balance;
}

h1 { font-size:var(--zilu-920); }

h2 { font-size:var(--zilu-f3b); }

h3 { font-size:var(--zilu-3de); }

h4 { font-size:var(--zilu-c99); }

p, li, dd { max-width:65ch; }

p + p { margin-top:1em; }

strong, b {
   font-weight:600;
   color:#ffffff;
}

small { font-size:var(--step--1); }

code, kbd, samp, pre {
   font-family:var(--zilu-604);
   font-size:0.9em;
}

address { font-style:normal; }

hr {
   border:0;
   border-top:1px solid var(--rule);
   margin:var(--space-xl) 0;
}

:focus-visible {
   outline:2px solid var(--signal);
   outline-offset:3px;
}

.skip-link {
   position:fixed;
   top:1rem;
   left:1rem;
   z-index:1000;
   background-color:var(--signal);
   color:#ffffff;
   padding:0.75rem 1.25rem;
   font-family:var(--zilu-604);
   font-size:var(--step--1);
   font-weight:500;
   text-transform:uppercase;
   letter-spacing:0.06em;
   transform:translateY(-160%);
   transition:transform var(--dur-fast) var(--ease-out);
   box-shadow:0 4px 16px rgba(0, 0, 0, 0.4);
}

.skip-link:focus { transform:translateY(0); }

.sr-only {
   position:absolute;
   width:1px;
   height:1px;
   padding:0;
   margin:-1px;
   overflow:hidden;
   clip:rect(0, 0, 0, 0);
   white-space:nowrap;
   border-width:0;
}

.site-shell {
   display:flex;
   min-height:100vh;
   position:relative;
}

.site-main {
   flex:1 1 auto;
   min-width:0;
   background-color:var(--ground);
   position:relative;
   z-index:1;
}

@media (min-width: 1024px) {

   .site-main { margin-left:var(--sidebar-w); }
}

.container {
   width:100%;
   max-width:var(--content-max-w);
   margin-left:auto;
   margin-right:auto;
   padding-left:clamp(1.25rem, 3vw, 3rem);
   padding-right:clamp(1.25rem, 3vw, 3rem);
}

.prose {
   font-family:var(--zilu-c2d);
   font-size:var(--zilu-934);
   line-height:1.7;
   color:var(--text-muted);
}

.prose h2, .prose h3, .prose h4 {
   color:var(--text);
   margin-top:1.8em;
   margin-bottom:0.6em;
}

.prose h2:first-child,
.prose h3:first-child,
.prose h4:first-child { margin-top:0; }

.prose p { color:var(--text-muted); }

.prose strong { color:var(--text); }

.prose a {
   color:var(--text);
   text-decoration:underline;
   text-decoration-color:var(--signal);
   text-underline-offset:3px;
   transition:color var(--dur-fast) var(--ease-out);
}

.prose a:hover { color:var(--signal-hover); }

.prose ul, .prose ol {
   margin:1.25em 0;
   padding-left:1.5em;
}

.prose ul { list-style:disc; }

.prose ol { list-style:decimal; }

.prose li { margin-top:0.5em; }

.prose li::marker { color:var(--signal); }

.mesh-canvas {
   position:relative;
   overflow:hidden;
   background-color:var(--ground);
   background-image:
      radial-gradient(circle at var(--mesh-x1) var(--mesh-y1), rgba(255, 77, 0, 0.08) 0%, transparent 55%),
      radial-gradient(circle at var(--mesh-x2) var(--mesh-y2), rgba(36, 36, 36, 0.9) 0%, transparent 65%),
      conic-gradient(from var(--mesh-angle) at 50% 50%, rgba(20, 20, 20, 1) 0deg, rgba(28, 28, 28, 1) 180deg, rgba(20, 20, 20, 1) 360deg);
   animation:meshDrift 34s linear infinite alternate;
}

@keyframes meshDrift {
   0% {
      --mesh-x1:18%;
      --mesh-y1:22%;
      --mesh-x2:82%;
      --mesh-y2:78%;
      --mesh-angle:120deg;
   }
   50% {
      --mesh-x1:32%;
      --mesh-y1:40%;
      --mesh-x2:68%;
      --mesh-y2:60%;
      --mesh-angle:210deg;
   }
   100% {
      --mesh-x1:22%;
      --mesh-y1:30%;
      --mesh-x2:76%;
      --mesh-y2:70%;
      --mesh-angle:300deg;
   }
}

.icon {
   width:1.25em;
   height:1.25em;
   display:inline-block;
   fill:currentColor;
   vertical-align:-0.2em;
   flex-shrink:0;
}

.mono-tag {
   display:inline-flex;
   align-items:center;
   gap:0.5rem;
   font-family:var(--zilu-604);
   font-size:var(--step--1);
   color:var(--signal);
   letter-spacing:0.08em;
   text-transform:uppercase;
   font-weight:500;
}

@media (prefers-reduced-motion: reduce) {
   *, *::before, *::after {
      animation-duration:0.01ms !important;
      animation-iteration-count:1 !important;
      transition-duration:0.01ms !important;
      scroll-behavior:auto !important;
   }
   .mesh-canvas { animation:none !important; }
}