@view-transition {
   navigation:auto;
}


:root {
   --ground:#E9EDF1;
   --surface:#DFE4EA;
   --surface-alt:#CED6E0;
   --ink:#0F1722;
   --ink-muted:#3A4B5F;
   --line:#7F93A8;
   --accent:#079;
   --accent-hover:#005C77;
   --accent-hazard:#B45309;
   --accent-hazard-hover:#92400E;
   --ink-dark:#0B1118;
   --ink-dark-surface:#141E28;
   --ink-dark-muted:#CBD5E1;
   --white:#FFF;
   --danger:#DC2626;
   --success:#16A34A;


   --kugi-26f:"Saira Condensed", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
   --kugi-0ae:"Roboto Slab", Georgia, serif;
   --kugi-c43:"JetBrains Mono", "SFMono-Regular", Consolas, monospace;


   --fs-xs:clamp(0.72rem, 0.7rem + 0.1vw, 0.78rem);
   --fs-sm:clamp(0.82rem, 0.8rem + 0.15vw, 0.9rem);
   --fs-base:clamp(0.95rem, 0.92rem + 0.2vw, 1.05rem);
   --fs-md:clamp(1.1rem, 1.05rem + 0.35vw, 1.25rem);
   --fs-lg:clamp(1.3rem, 1.2rem + 0.6vw, 1.55rem);
   --fs-xl:clamp(1.65rem, 1.45rem + 1.1vw, 2.1rem);
   --fs-2xl:clamp(2.1rem, 1.8rem + 1.8vw, 3rem);
   --fs-3xl:clamp(2.8rem, 2.3rem + 2.8vw, 4.2rem);
   --fs-hero:clamp(3.6rem, 2.8rem + 4.8vw, 7.2rem);


   --lh-tight:1.08;
   --lh-snug:1.25;

   --lh-base:1.62;
   --lh-relaxed:1.78;


   --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:6.5rem;
   --space-gutter:clamp(1rem, 4vw, 2.5rem);


   --container-max:1280px;
   --container-narrow:860px;
   --container-ledger:1040px;


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


   --ease-industrial:cubic-bezier(0.2, 0.0, 0.2, 1.0);
   --ease-snap:cubic-bezier(0.16, 1.0, 0.3, 1.0);
   --dur-rapid:140ms;
   --dur-moderate:240ms;
   --dur-deliberate:420ms;


   --shadow-subtle:0 1px 2px rgba(15, 23, 34, 0.08);
   --shadow-panel:0 4px 16px rgba(15, 23, 34, 0.10);
   --shadow-elevated:0 12px 32px rgba(11, 17, 24, 0.16);
   --shadow-inner:inset 0 1px 2px rgba(15, 23, 34, 0.12);


   --z-base:1;
   --z-nav:50;
   --z-header:100;
   --z-banner:120;
   --z-chat:140;

   --z-modal:200;
}


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


html {
   font-size:16px;
   background-color:var(--ground);
   color:var(--ink);
   text-rendering:optimizeLegibility;
   -webkit-font-smoothing:antialiased;
   -moz-osx-font-smoothing:grayscale;
   scroll-behavior:smooth;
   scroll-padding-top:5rem;
   overflow-x:hidden;
}


body {
   min-height:100vh;
   display:flex;
   flex-direction:column;
   background-color:var(--ground);
   color:var(--ink);
   font-family:var(--kugi-0ae);
   font-size:var(--fs-base);
   line-height:var(--lh-base);
   overflow-x:hidden;
}


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


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


table {
   border-collapse:collapse;
   width:100%;
}


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


h1,
h2,
h3,
h4,
h5,
h6 {
   font-family:var(--kugi-26f);
   font-weight:700;
   line-height:var(--lh-tight);
   text-transform:uppercase;
   letter-spacing:0.02em;
   color:var(--ink);
}


h1 {
   font-size:var(--fs-3xl);
   font-weight:800;
   letter-spacing:0.01em;
}


h2 {
   font-size:var(--fs-2xl);
   font-weight:700;
}


h3 {
   font-size:var(--fs-xl);
   font-weight:700;
}


h4 {
   font-size:var(--fs-lg);
   font-weight:600;
}


h5 {
   font-size:var(--fs-md);
   font-weight:600;
}


h6 {
   font-size:var(--fs-base);
   font-weight:600;
}


p {
   margin-bottom:var(--space-sm);
   color:var(--ink-muted);
}


p:last-child {
   margin-bottom:0;
}


strong,
b {
   font-weight:600;
   color:var(--ink);
}


small {
   font-size:var(--fs-xs);
   line-height:var(--lh-snug);
}


ul,
ol {
   padding-left:var(--space-md);
   margin-bottom:var(--space-sm);
   color:var(--ink-muted);
}


li {
   margin-bottom:var(--space-2xs);
}


li::marker {
   color:var(--accent);
}


blockquote {
   border-left:3px solid var(--accent);
   padding:var(--space-sm) var(--space-md);
   margin:var(--space-md) 0;
   background-color:var(--surface);
   font-style:italic;
   color:var(--ink);
}


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


hr {
   border:0;
   height:1px;
   background-color:var(--line);
   margin:var(--space-xl) 0;
}


.skip-link {
   position:absolute;
   top:-100px;
   left:var(--space-sm);
   z-index:1000;
   padding:var(--space-xs) var(--space-sm);
   background-color:var(--ink-dark);
   color:var(--white);
   font-family:var(--kugi-c43);
   font-size:var(--fs-sm);
   font-weight:600;
   text-transform:uppercase;
   letter-spacing:0.05em;
   border:1px solid var(--accent);
   transition:top var(--dur-rapid) var(--ease-snap);
}


.skip-link:focus {
   top:var(--space-sm);
   outline:2px solid var(--accent);
   outline-offset:2px;
}


.container {
   width:100%;
   max-width:var(--container-max);
   margin-inline:auto;
   padding-inline:var(--space-gutter);
}


.container-narrow {
   width:100%;
   max-width:var(--container-narrow);
   margin-inline:auto;
   padding-inline:var(--space-gutter);
}


.container-ledger {
   width:100%;
   max-width:var(--container-ledger);
   margin-inline:auto;
   padding-inline:var(--space-gutter);
}


.visually-hidden {
   position:absolute !important;
   width:1px !important;
   height:1px !important;
   padding:0 !important;
   margin:-1px !important;

   overflow:hidden !important;
   clip:rect(0, 0, 0, 0) !important;
   white-space:nowrap !important;
   border:0 !important;
}


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


.mono {
   font-family:var(--kugi-c43);
}


.display {
   font-family:var(--kugi-26f);
   text-transform:uppercase;
}


.prose {
   font-family:var(--kugi-0ae);
   font-size:var(--fs-base);
   line-height:var(--lh-relaxed);
   color:var(--ink-muted);
}


.prose h1,
.prose h2,
.prose h3,
.prose h4 {
   margin-top:var(--space-lg);
   margin-bottom:var(--space-xs);
   color:var(--ink);
}


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


.prose p {
   margin-bottom:var(--space-md);
}


.prose ul,
.prose ol {
   margin-bottom:var(--space-md);
}


.prose a {
   color:#079;
   text-decoration:underline;
   text-underline-offset:3px;
   text-decoration-thickness:1px;
}


.prose a:hover {
   color:var(--accent-hover);
   text-decoration-thickness:2px;
}


.site-header {
   view-transition-name:site-header-brand;
}


.site-nav {
   view-transition-name:main-navigation;
}


@media (prefers-reduced-motion: no-preference) {
   ::view-transition-old(root) {
      animation:200ms var(--ease-industrial) both vt-fade-out;
   }
   ::view-transition-new(root) {
      animation:260ms var(--ease-industrial) both vt-fade-in;
   }


   @keyframes vt-fade-out {
      from { opacity: 1; }
      to { opacity: 0; }
   }


   @keyframes vt-fade-in {
      from { opacity: 0; }
      to { opacity: 1; }
   }
}


@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;
   }
}