:root {
   --ground: #e9edf1;
   --surface: #dadee3;
   --surface-2: #c7ccd2;
   --line: #a5aaae;
   --ink-soft: #4a4d51;
   --ink: #27292b;
   --accent: #20626b;
   --accent-ink: #ffffff;

   --accent-hover: #256770;
   --accent-active: #1c535a;
   --accent-tint: rgba(28, 95, 105, 0.11);
   --error: #8c2626;
   --error-bg: #f3e6e6;
   --scrim: rgba(39, 41, 43, 0.56);
   --header-glass: rgba(233, 237, 241, 0.92);
   --dock-bg: rgba(218, 222, 227, 0.97);

   --tani-e9d: "Bitter", "Bitter Fallback", Georgia, serif;
   --tani-b6f: "Source Sans 3", "Source Sans 3 Fallback", system-ui, -apple-system, sans-serif;
   --tani-cd5: "IBM Plex Mono", "IBM Plex Mono Fallback", ui-monospace, SFMono-Regular, monospace;

   --text-xs: clamp(0.75rem, 0.72rem + 0.14vw, 0.8125rem);
   --text-sm: clamp(0.875rem, 0.84rem + 0.16vw, 0.9375rem);
   --text-base: clamp(1rem, 0.96rem + 0.2vw, 1.09375rem);
   --text-lg: clamp(1.125rem, 1.04rem + 0.38vw, 1.3125rem);
   --text-xl: clamp(1.3125rem, 1.15rem + 0.75vw, 1.75rem);
   --text-2xl: clamp(1.5rem, 1.24rem + 1.3vw, 2.25rem);
   --text-3xl: clamp(1.75rem, 1.3rem + 2.1vw, 3.15rem);

   --leading-tight: 1.08;
   --leading-snug: 1.22;
   --leading-normal: 1.6;
   --leading-relaxed: 1.72;

   --space-1: 0.25rem;
   --space-2: 0.5rem;
   --space-3: 0.75rem;

   --space-4: 1rem;
   --space-5: 1.5rem;

   --space-6: 2rem;
   --space-7: 3rem;
   --space-8: 4.5rem;
   --space-9: 6rem;
   --gutter: clamp(1rem, 3vw, 3rem);

   --radius: 2px;
   --control-h: 48px;
   --border-thin: 1px solid var(--line);
   --border-strong: 2px solid var(--ink);
   --border-accent: 2px solid var(--accent);

   --shadow-card: 0 1px 2px rgba(39, 41, 43, 0.06), 0 10px 26px rgba(39, 41, 43, 0.07);
   --shadow-lift: 0 2px 6px rgba(39, 41, 43, 0.1), 0 14px 32px rgba(39, 41, 43, 0.12);
   --shadow-dock: 0 -4px 18px rgba(39, 41, 43, 0.08);

   --rail-w: 264px;
   --dock-h: 64px;
   --measure: 65ch;
   --content-max: 1120px;

   --dur-fast: 140ms;
   --dur-base: 220ms;
   --dur-slow: 420ms;
   --ease-out: cubic-bezier(0.22, 1, 0.36, 1);
   --ease-in-out: cubic-bezier(0.65, 0, 0.35, 1);
}

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

html {
   background-color: var(--ground);
   color: var(--ink);
   -webkit-text-size-adjust: 100%;
   scroll-behavior: smooth;
}

body {
   margin: 0;
   padding: 0;
   background-color: var(--ground);
   color: var(--ink);
   font-family: var(--tani-b6f);
   font-size: var(--text-base);
   font-weight: 400;
   line-height: var(--leading-normal);
   overflow-x: clip;
   padding-bottom: calc(var(--dock-h) + env(safe-area-inset-bottom));
}

@media (min-width: 1024px) {
   body {
      padding-bottom: 0;
   }
}

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

h1,
h2,
h3,
h4,
p,
figure,
blockquote,
dl,
dd {
   margin: 0;
}

ul,
ol {
   margin: 0;
   padding: 0;
   list-style: none;
}

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

img {
   height: auto;
}

a {
   color: inherit;
   text-decoration-thickness: 1px;
   text-underline-offset: 0.2em;
}

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

h1,
h2,
h3,
h4 {
   font-family: var(--tani-e9d);
   color: var(--ink);
   font-weight: 700;
   letter-spacing: -0.015em;
   overflow-wrap: break-word;
}

h1 {
   font-size: var(--text-3xl);
   font-weight: 800;
   line-height: var(--leading-tight);
}

h2 {
   font-size: var(--text-2xl);
   line-height: var(--leading-snug);
}

h3 {
   font-size: var(--text-xl);
   line-height: var(--leading-snug);
}

h4 {
   font-size: var(--text-lg);
   line-height: var(--leading-snug);
}

p {
   max-width: var(--measure);
}

p + p {
   margin-top: var(--space-4);
}

small,
.caption {
   font-size: var(--text-sm);
   color: var(--ink-soft);
}

.mono,
.tabular,
time,
data {
   font-family: var(--tani-cd5);
   font-variant-numeric: tabular-nums;
}

.tabular-nums {
   font-variant-numeric: tabular-nums;
}

.lede {
   font-size: var(--text-lg);
   line-height: var(--leading-normal);
   color: var(--ink-soft);
   max-width: 56ch;
}

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

.prose {
   max-width: var(--measure);
   font-size: var(--text-base);
   line-height: var(--leading-relaxed);
   color: var(--ink);
}

.prose h2 {
   margin-top: var(--space-7);
   margin-bottom: var(--space-3);
}

.prose h3 {
   margin-top: var(--space-6);
   margin-bottom: var(--space-2);
}

.prose p + p,
.prose ul + p,
.prose ol + p {
   margin-top: var(--space-4);
}

.prose ul,
.prose ol {
   margin-top: var(--space-4);
   margin-bottom: var(--space-4);
   padding-inline-start: 1.35rem;
}

.prose ul {
   list-style: square;
}

.prose ol {
   list-style: decimal;
}

.prose li + li {
   margin-top: var(--space-2);
}

.prose a {
   color: var(--accent);
   font-weight: 600;
   text-decoration: underline;
   transition: color var(--dur-fast) var(--ease-out);
}

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

.prose a:focus-visible {
   outline: 2px solid var(--accent);
   outline-offset: 2px;
}

.prose strong {
   font-weight: 700;
   color: var(--ink);
}

.prose code {
   font-family: var(--tani-cd5);
   font-size: 0.9em;
   background-color: var(--surface);
   border: var(--border-thin);
   border-radius: var(--radius);
   padding: 0.1em 0.35em;
}

.site-shell {
   display: flex;
   flex-direction: column;
   min-height: 100vh;
   min-height: 100svh;
}

@media (min-width: 1024px) {
   .site-shell {
      display: flex;
      flex-direction: column;
      min-height: 100vh;
      min-height: 100svh;
   }
}

.site-main {
   min-width: 0;
   display: flex;
   flex-direction: column;
}

.site-main:focus {
   outline: none;
}

.content-wrap {
   width: 100%;
   max-width: var(--content-max);
   padding-inline: var(--gutter);
}

.section-block {
   padding-block: clamp(2.5rem, 5vw, 4.75rem);
   padding-inline: var(--gutter);
}

.section-block--surface {

   background-color: var(--surface);
   border-top: var(--border-thin);
   border-bottom: var(--border-thin);
}

.section-inner {
   width: 100%;
   max-width: var(--content-max);
   min-width: 0;
}

.stack-xs > * + * {
   margin-top: var(--space-2);
}

.stack-sm > * + * {
   margin-top: var(--space-3);
}

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

.stack-lg > * + * {
   margin-top: var(--space-7);
}

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

.icon {
   display: inline-block;
   width: 1.15em;
   height: 1.15em;
   flex-shrink: 0;
   fill: none;
   stroke: currentColor;
   stroke-width: 1.85;
   stroke-linecap: square;
   stroke-linejoin: miter;
}

.grid-2 {
   display: grid;
   grid-template-columns: minmax(0, 1fr);
   gap: var(--space-5);
}

@media (min-width: 768px) {
   .grid-2 {
      grid-template-columns: repeat(2, minmax(0, 1fr));
      gap: var(--space-6);
   }
}

.rule-top {
   border-top: var(--border-thin);
   padding-top: var(--space-6);
}

.rule-bottom {
   border-bottom: var(--border-thin);
   padding-bottom: var(--space-6);
}

.lano681 {
   width: 100%;
   overflow-x: auto;
   -webkit-overflow-scrolling: touch;
   border: var(--border-thin);
   border-radius: var(--radius);
   background-color: var(--ground);
}

@media (prefers-reduced-motion: reduce) {
   html {
      scroll-behavior: auto;
   }

   *,
   *::before,
   *::after {
      animation-duration: 0.01ms !important;
      animation-iteration-count: 1 !important;
      transition-duration: 0.01ms !important;
   }
}

@media print {
   body {
      background-color: #ffffff;
      color: #000000;
      padding-bottom: 0;
   }

   .site-rail,
   .mobile-dock,
   .dock-drawer,
   .cookie-banner,
   .chat-launcher,
   .chat-panel {
      display: none !important;
   }
}