:root {
   --ground:#1B1022;
   --ground-elevated:#24162E;
   --ground-card:#2D1C3A;
   --ground-overlay:rgba(27, 16, 34, 0.88);
   --ground-translucent:rgba(27, 16, 34, 0.72);
   --ground-solid-fallback:#1B1022;

   --ink:#F5F2F7;
   --ink-soft:#C9BFD1;
   --ink-dim:#9E8FA8;

   --violet-mid:#583272;
   --violet-rule:#3D244F;
   --violet-deep:#140B1A;

   --accent:#D4FF32;
   --accent-hover:#E2FF6B;
   --accent-active:#B5DC20;
   --accent-muted:rgba(212, 255, 50, 0.12);
   --accent-border:rgba(212, 255, 50, 0.35);

   --status-success-bg:rgba(45, 106, 79, 0.25);
   --status-success-border:#40916C;
   --status-success-ink:#D8F3DC;

   --status-error-bg:rgba(186, 24, 27, 0.25);
   --status-error-border:#E5383B;
   --status-error-ink:#FFCCD5;

   --zazo-d48:"Cinzel", "Times New Roman", serif;
   --zazo-612:"Rubik", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
   --zazo-70e:"Space Mono", "Courier New", monospace;

   --fs-2xs:clamp(0.6875rem, 0.65rem + 0.15vw, 0.75rem);
   --fs-xs:clamp(0.75rem, 0.71rem + 0.18vw, 0.8125rem);
   --fs-sm:clamp(0.875rem, 0.82rem + 0.24vw, 0.9375rem);
   --fs-base:clamp(1rem, 0.94rem + 0.28vw, 1.0625rem);
   --fs-md:clamp(1.125rem, 1.04rem + 0.38vw, 1.25rem);
   --fs-lg:clamp(1.3125rem, 1.18rem + 0.58vw, 1.5625rem);
   --fs-xl:clamp(1.625rem, 1.42rem + 0.92vw, 2.0625rem);
   --fs-2xl:clamp(2rem, 1.7rem + 1.35vw, 2.625rem);
   --fs-display:clamp(2.35rem, 1.95rem + 1.8vw, 3.5rem);
   --fs-number:clamp(3rem, 2.4rem + 2.7vw, 4.75rem);

   --lh-solid:1;
   --lh-tight:1.12;
   --lh-snug:1.26;
   --lh-base:1.62;
   --lh-loose:1.78;

   --tracking-tight:-0.02em;
   --tracking-normal:0em;
   --tracking-wide:0.05em;
   --tracking-widest:0.12em;

   --space-3xs:0.25rem;
   --space-2xs:0.375rem;
   --space-xs:0.5rem;
   --space-sm:0.75rem;
   --space-md:1rem;
   --space-lg:1.5rem;
   --space-xl:2.25rem;
   --space-2xl:3.25rem;
   --space-3xl:4.75rem;
   --space-4xl:6.5rem;

   --container-max:1240px;
   --container-pad:clamp(1rem, 3.5vw, 2.75rem);
   --prose-max:68ch;

   --header-height-full:70px;
   --header-height-condensed:56px;
   --scroll-pad:72px;

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

   --border-hairline:1px solid var(--violet-rule);
   --border-mid:1px solid var(--violet-mid);
   --border-bold:2px solid var(--violet-mid);
   --border-accent:1px solid var(--accent);

   --shadow-sm:0 2px 8px rgba(10, 4, 14, 0.4);
   --shadow-md:0 6px 20px rgba(10, 4, 14, 0.55);
   --shadow-lg:0 14px 40px rgba(10, 4, 14, 0.75);
   --shadow-accent:0 0 24px rgba(212, 255, 50, 0.22);

   --ease-out:cubic-bezier(0.16, 1, 0.3, 1);
   --ease-in-out:cubic-bezier(0.65, 0, 0.35, 1);
   --ease-letterpress:cubic-bezier(0.2, 0, 0.1, 1);

   --dur-rapid:140ms;
   --dur-base:220ms;
   --dur-flow:360ms;
   --dur-slow:600ms;

   --spine-width:3px;
   --spine-color-base:var(--violet-rule);
   --spine-color-fill:var(--accent);
}

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

html {
   background-color:var(--ground);
   color:var(--ink);
   font-family:var(--zazo-612);
   font-size:16px;
   line-height:var(--lh-base);
   text-size-adjust:100%;
   -webkit-text-size-adjust:100%;
   -webkit-font-smoothing:antialiased;
   -moz-osx-font-smoothing:grayscale;
   scroll-behavior:smooth;
   scroll-padding-block-start:var(--scroll-pad);
   overflow-x:hidden;
}

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

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

button {
   background:none;
   border:none;
   cursor:pointer;
}

.grid > *,
.flex > *,
.container > *,
[class*="__grid"] > *,
[class*="__row"] > * { min-width:0; }

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

iframe {
   max-width:100%;
   border:none;
}

a {
   color:inherit;
   text-decoration:underline;
   text-decoration-thickness:1px;
   text-underline-offset:3px;
   transition:color var(--dur-rapid) var(--ease-letterpress);
}

a:hover { color:var(--accent); }

a:focus-visible {
   outline:2px solid var(--accent);
   outline-offset:3px;
   border-radius:var(--radius-xs);
}

ul,
ol { list-style:none; }

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

::selection {
   background-color:var(--accent);
   color:var(--ground);
}

h1,
h2,
h3,
h4,
h5,
h6 {
   font-family:var(--zazo-d48);
   font-weight:700;
   line-height:var(--lh-snug);
   color:var(--ink);
   letter-spacing:var(--tracking-wide);
   text-wrap:balance;
   overflow-wrap:break-word;
   word-break:normal;
}

h1 {
   font-size:var(--fs-display);
   line-height:var(--lh-tight);
   letter-spacing:var(--tracking-normal);
   font-weight:900;
}

h2 {
   font-size:var(--fs-2xl);
   line-height:var(--lh-snug);
   letter-spacing:var(--tracking-wide);
}

h3 {
   font-size:var(--fs-xl);
   line-height:var(--lh-snug);
   letter-spacing:var(--tracking-normal);
}

h4 {
   font-size:var(--fs-lg);
   line-height:var(--lh-snug);
}

h5 {
   font-size:var(--fs-md);
   line-height:var(--lh-snug);
}

h6 {
   font-size:var(--fs-base);
   font-family:var(--zazo-70e);
   text-transform:uppercase;
   letter-spacing:var(--tracking-wide);
}

p {
   margin-block-end:var(--space-md);
   color:var(--ink-soft);
   max-width:var(--prose-max);
}

p:last-child { margin-block-end:0; }

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

em,
i { font-style:italic; }

small {
   font-size:var(--fs-sm);
   color:var(--ink-dim);
}

hr {
   border:none;
   border-top:1px solid var(--violet-rule);
   margin-block:var(--space-2xl);
}

blockquote {
   border-left:2px solid var(--accent);
   padding-left:var(--space-md);
   margin-block:var(--space-lg);
   font-style:italic;
   color:var(--ink);
}

code,
kbd,
samp {
   font-family:var(--zazo-70e);
   font-size:0.9em;
   background-color:var(--ground-card);
   padding:0.15em 0.4em;
   border:1px solid var(--violet-rule);
   border-radius:var(--radius-xs);
   color:var(--ink);
}

pre {
   font-family:var(--zazo-70e);
   font-size:var(--fs-sm);
   background-color:var(--ground-card);
   border:1px solid var(--violet-rule);
   padding:var(--space-md);

   overflow-x:auto;
   max-width:100%;
   margin-block:var(--space-md);

}

pre code {
   background:none;
   border:none;
   padding:0;
}

.mono {
   font-family:var(--zazo-70e);
   letter-spacing:-0.01em;
}

.section-opener {
   margin-block-end:var(--space-xl);
   border-bottom:1px solid var(--violet-rule);
   padding-bottom:var(--space-lg);
}

.display-num {
   font-family:var(--zazo-70e);
   font-size:var(--fs-number);

   font-weight:700;
   line-height:var(--lh-solid);
   color:var(--ink);
   display:block;
   margin-block-end:var(--space-xs);
   letter-spacing:-0.03em;
}

.display-num__accent { color:var(--accent); }

.display-num__unit {
   font-size:var(--fs-md);
   font-family:var(--zazo-612);
   font-weight:500;
   color:var(--ink-soft);
   margin-left:0.35rem;
   letter-spacing:var(--tracking-normal);
   vertical-align:baseline;
}

.opener-text,
.section-opener__text {
   font-size:var(--fs-lg);
   font-family:var(--zazo-612);
   font-weight:500;
   color:var(--ink);
   line-height:var(--lh-snug);
   max-width:58ch;
   margin-block-end:0;
}

.opener-rule,
.section-opener__rule {
   height:1px;
   background-color:var(--violet-rule);
   width:100%;
   margin-top:var(--space-md);
}

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

.container--narrow { max-width:860px; }

.container--wide { max-width:1400px; }

.prose-container { max-width:var(--prose-max); }

.luku588 {
   width:100%;
   overflow-x:auto;
   -webkit-overflow-scrolling:touch;
   margin-block:var(--space-lg);
}

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

.skip-link {
   position:absolute;
   top:-120px;
   left:1rem;
   background:var(--accent);
   color:var(--ground);
   padding:0.75rem 1.25rem;
   z-index:9999;
   font-family:var(--zazo-70e);
   font-size:var(--fs-sm);
   text-decoration:none;
   font-weight:700;
   border:1px solid var(--ground);
   transition:top var(--dur-rapid) var(--ease-out);
}

.skip-link:focus-visible {
   top:1rem;
   outline:2px solid var(--ink);
   outline-offset:3px;
}

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

.scroll-spine {
   position:fixed;
   top:0;
   left:0;
   width:var(--spine-width);
   height:100vh;
   background:var(--spine-color-base);
   z-index:900;
   pointer-events:none;
}

.scroll-spine__fill {
   width:100%;
   height:0%;
   background:var(--spine-color-fill);
   transition:height var(--dur-rapid) linear;
}

.site-frame {
   display:flex;
   flex-direction:column;
   min-height:100vh;
   width:100%;
   position:relative;
}

#main {
   flex:1 0 auto;
   width:100%;
   display:flex;
   flex-direction:column;
}

a.site-nav__link {
   overflow-wrap:normal !important;
   word-break:normal !important;
   white-space:nowrap !important;
}

.flow > * + * { margin-block-start:var(--space-md); }

.stack {
   display:flex;
   flex-direction:column;
   justify-content:flex-start;
}

.stack > * + * { margin-block-start:var(--space-md); }

.cluster {
   display:flex;
   flex-wrap:wrap;
   gap:var(--space-md);
   align-items:center;
}

.repel {
   display:flex;
   flex-wrap:wrap;
   justify-content:space-between;
   align-items:center;
   gap:var(--space-md);
}

.grid-auto {
   display:grid;
   grid-template-columns:repeat(auto-fit, minmax(280px, 1fr));
   gap:var(--space-lg);
}

.text-accent { color:var(--accent); }

.text-dim { color:var(--ink-dim); }

.text-soft { color:var(--ink-soft); }

.bg-ground-elevated { background-color:var(--ground-elevated); }

.bg-ground-card { background-color:var(--ground-card); }

.border-rule { border:1px solid var(--violet-rule); }

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

   .scroll-spine__fill { transition:none !important; }
}