@layer vars{:root {
    
    --color-black:                  oklch(1% 0.01 0);
    --color-nearblack:              oklch(25% 0.01 0);
    --color-grey-700:               oklch(38% 0 0);
    --color-grey-600:               oklch(49% 0 0);
    --color-grey-500:               oklch(60% 0 0);
    --color-grey-400:               oklch(71% 0 0);
    --color-grey-300:               oklch(80% 0 0);
    --color-grey-200:               oklch(89% 0 0);
    --color-grey-100:               oklch(95% 0 0);
    --color-nearwhite:              oklch(98% 0 0);
    --color-white:                  oklch(100% 0 0);
    --color-red:                    oklch(65% 0.2 24);
    --color-yellow:                 oklch(65% 0.12 80);
    --color-green:                  oklch(65% 0.19 138);
    --color-blue:                   oklch(65% 0.16 247);

    
    --color-black-60:               oklch(0% 0 0 / 0.6);
    --color-black-40:               oklch(0% 0 0 / 0.4);
    --color-black-20:               oklch(0% 0 0 / 0.2);
    --color-black-10:               oklch(0% 0 0 / 0.1);
    --color-white-20:               oklch(100% 0 0 / 0.2);
    --color-white-10:               oklch(100% 0 0 / 0.1);

    
    --color-brand:                  var(--color-nearblack);
    --color-brand-alt:              var(--color-grey-500);
    --color-brand-light:            var(--color-grey-300);
    --color-brand-dark:             var(--color-grey-700);

    
    --color-text:                   var(--color-black);
    --color-text-bg:                var(--color-white);
    --color-text-meta:              var(--color-grey-600);
    --color-headings:               var(--color-nearblack);
    --color-code:                   var(--color-nearblack);

    
    --color-link:                   var(--color-brand);
    --color-link-visited:           var(--color-brand);
    --color-link-hover:             var(--color-brand-alt);
    --color-link-active:            var(--color-red);
    --color-link-inverted:          var(--color-white);
    --color-link-visited-inverted:  var(--color-white);
    --color-link-hover-inverted:    var(--color-white);
    --color-link-active-inverted:   var(--color-red);

    
    --color-button:                 var(--color-brand);
    --color-button-hover:           var(--color-brand-alt);
    --color-button-text:            var(--color-white);
    --color-button-text-hover:      var(--color-white);
    --color-button-disabled:        var(--color-grey-400);

    
    --color-border:                 var(--color-brand);
    --color-border-light:           var(--color-brand-light);
    --color-border-dark:            var(--color-brand-dark);

    
    --color-header-bg:              var(--color-white);
    --color-body-bg:                var(--color-white);
    --color-footer-bg:              var(--color-white);
    --color-backdrop:               var(--color-grey-100);

    
    --color-mobile-menu:            var(--color-brand);
    --color-mobile-menu-cover:      var(--color-black-20);

    
    --color-accent:                 var(--color-brand);

    
    --color-row-header:             transparent;
    --color-row-odd:                var(--color-nearwhite);
    --color-row-even:               transparent;

    
    --color-info:                   var(--color-blue);
    --color-info-bg:                oklch(from var(--color-blue) 100% 0.03 h);
    --color-success:                 var(--color-green);
    --color-success-bg:              oklch(from var(--color-green) 100% 0.03 h);
    --color-warning:                var(--color-yellow);
    --color-warning-bg:             oklch(from var(--color-yellow) 100% 0.03 h);
    --color-error:                  var(--color-red);
    --color-error-bg:               oklch(from var(--color-red) 100% 0.03 h);

    
    --color-highlight:              var(--color-brand-alt);
    --color-mark-highlight:         var(--color-red);
  }
}@layer fonts{}@layer vars{:root {
    

    
    --max-content-width: 1111px;

    
    --max-page-width: var(--max-content-width);

    
    --base-line-height: 1.5;

    
    --heading-line-height: 1.3;

    
    --base-font-size: 18;

    
    --fs-xxxxl: clamp(2.4881rem, calc(1.8896rem + 2.9924vw), 4.2088rem);
    --fs-xxxl: clamp(2.0738rem, calc(1.6968rem + 1.8848vw), 3.1575rem);
    --fs-xxl: clamp(1.7281rem, calc(1.5053rem + 1.1141vw), 2.3688rem);
    --fs-xl: clamp(1.44rem, calc(1.3228rem + 0.5859vw), 1.7769rem);
    --fs-l: clamp(1.2rem, calc(1.1537rem + 0.2315vw), 1.3331rem);
    --fs-m: 1rem;
    --fs-s: 0.889rem;
    --fs-xs: 0.778rem;

    

    

    
    --emojis:         'Apple Color Emoji', 'Segoe UI Emoji', 'Segoe UI Symbol', 'Noto Color Emoji';

    
    --system-ui:       system-ui, sans-serif;

    
    --ui-serif:       ui-serif, Charter, 'Bitstream Charter', 'Sitka Text', Cambria, serif;
    --transitional:   Charter, 'Bitstream Charter', 'Sitka Text', Cambria, serif;
    --old:            'Iowan Old Style', 'Palatino Linotype', 'URW Palladio L', P052, serif;
    --slab:           Rockwell, 'Rockwell Nova', 'Roboto Slab', 'DejaVu Serif', 'Sitka Small', serif;
    --antique:        Superclarendon, 'Bookman Old Style', 'URW Bookman', 'URW Bookman L', 'Georgia Pro', Georgia, serif;
    --didone:         Didot, 'Bodoni MT', 'Noto Serif Display', 'URW Palladio L', P052, Sylfaen, serif;

    
    --ui-sans-serif:  ui-sans-serif, system-ui, sans-serif;
    --humanist:       Seravek, 'Gill Sans Nova', Ubuntu, Calibri, 'DejaVu Sans', source-sans-pro, sans-serif;
    --geometric:      Avenir, Montserrat, Corbel, 'URW Gothic', source-sans-pro, sans-serif;
    --classical:      Optima, Candara, 'Noto Sans', source-sans-pro, sans-serif;
    --neo:            Inter, Roboto, 'Helvetica Neue', 'Arial Nova', 'Nimbus Sans', Arial, sans-serif;
    --industrial:     Bahnschrift, 'DIN Alternate', 'Franklin Gothic Medium', 'Nimbus Sans Narrow', sans-serif-condensed, sans-serif;
    --futura:         Futura, Montserrat, Corbel, 'URW Gothic', source-sans-pro, sans-serif;

    
    --ui-rounded:      ui-rounded, 'Hiragino Maru Gothic ProN', Quicksand, Comfortaa, Manjari, 'Arial Rounded MT', 'Arial Rounded MT Bold', Calibri, source-sans-pro, sans-serif;

    
    --ui-monospace:    ui-monospace, 'Cascadia Code', 'Source Code Pro', Menlo, Consolas, 'DejaVu Sans Mono', monospace;
    

    
    --ff-body: var(--ui-serif);
    --ff-headings: var(--ui-sans-serif);
    --ff-alt: var(--system-ui);
    --ff-monospace: var(--ui-monospace);

    
    --fw-headings: 700;
    --fw-bolder: 900;
    --fw-bold: 700;
    --fw-medium: 500;
    --fw-normal: 400;
    --fw-light: 300;
    --fw-lighter: 200;

    
    --spacing-xxl: calc(3rem * var(--base-line-height));
    --spacing-xl: calc(2rem * var(--base-line-height));
    --spacing-l: calc(1.5rem * var(--base-line-height));
    --spacing-m: calc(1rem * var(--base-line-height));
    --spacing-s: calc(0.75rem * var(--base-line-height));
    --spacing-xs: calc(0.5rem * var(--base-line-height));
    --spacing-xxs: calc(0.3rem * var(--base-line-height));

    
    --radius-xl: 1rem;
    --radius-l: 0.75rem;
    --radius-m: 0.5rem;
    --radius-s: 0.3rem;
    --radius-xs: 0.125rem;

    
    --breakout: calc(5px + 1.5625vw);

    
    --gutters: calc(5px + 1.5625vw);
    --gutters-reverse: calc(0px - (5px + 1.5625vw));

    
    --indent-amount: 2rem;

    
    --max-line-width: 70ch;

    
    --print-font-size: 12pt;
  }
}@layer zen{body {
    background-color: var(--color-backdrop);
  }

  .page {
    background-color: var(--color-body-bg);
  }

  .footer {
    border-block-start: 2px solid var(--color-border);
  }

  

  th,
  label,
  legend,
  figcaption {
    font-size: var(--fs-s);
  }

  .language-selector,
  .footer {
    font-size: var(--fs-xs);
  }

  

  th,
  label,
  legend,
  .main-menu,
  .header,
  .footer {
    color: var(--color-headings);
    font-family: var(--ff-headings);
  }

  th,
  label {
    font-weight: var(--fw-headings);
  }

  

  article,
  aside {
    & > ul {
      display: table;
      list-style: none;
      padding: 0;

      & > li {
        display: table-row;

        &::before {
          padding-inline-end: var(--spacing-xs);
          display: table-cell;
          content: '\2981';
          font-size: var(--fs-s);
        }
      }
    }

    & > ol {
      display: table;
      list-style: none;
      padding: 0;

      & > li {
        display: table-row;
        counter-increment: table-ol;

        &::before {
          padding-inline-end: var(--spacing-xs);
          display: table-cell;
          content: counter(table-ol) '.';
          font-size: var(--fs-s);
          text-align: end;
        }
      }
    }
  }

  article {
    .submitted,
    .tags {
      @media (min-width: 666px) {
        display: inline-block;
        padding-inline-end: 1rem;
      }
    }

    code {
      font-size: var(--fs-xs);
      overflow-wrap: break-word;
    }

    pre {
      border-radius: var(--radius-xs);
      padding: 5px;
      border: 1px solid var(--color-border-light);
      background-color: var(--color-text-bg);
      overflow: auto;
      max-height: 300px;

      &.chroma {
        max-height: initial;
        overflow-x: scroll;
      }

      & > code {
        display: inline-block;
        white-space: pre;
      }
    }
  }

  .content-dates {
    text-align: end;
  }

  .repository-links {
    justify-content: end;
    align-items: center;

    svg {
      order: 1;
    }
  }

  

  .main-menu {
    a {
      display: block;
      background-color: var(--color-button);
      color: var(--color-button-text);
      padding: 2px 8px;
      text-decoration: none;

      &:hover,
      &:focus {
        background-color: var(--color-button-hover);
      }

      &:active,
      &[aria-current] {
        text-decoration: underline;
      }
    }
  }

  

  .search-text {
    font-size: var(--fs-l);
  }

  

  [data-codeblock] {
    position: relative;

    & > pre {
      padding-block-start: 1lh;
    }
  }

  .codebutton {
    position: absolute;
    inset-inline-end: 1rem;
    background: unset;
    border: unset;
    text-shadow: unset;
    font-size: var(--fs-l);
    color: var(--color-border);
    rotate: 90deg;
    cursor: pointer;

    & > span {
      pointer-events: none;
    }

    &:hover,
    &:focus-visible,
    &:active {
      scale: 1.15;
    }
  }

  .flash-item {
    animation: --flash 500ms ease-in-out 1ms;
  }

  @keyframes --flash {
    50% {
      border-color: var(--color-warning);
      background-color: var(--color-warning-bg);
    }
  }
}@layer base{html {
    
    font-family: var(--ff-body);

    
    font-size: calc(var(--base-font-size) / 16 * 100%);

    
    color: var(--color-text);
  }

  body {
    
    line-height: var(--base-line-height);

    
    accent-color: var(--color-accent);
  }
}@layer base{form {
    
    margin-block: 0 var(--spacing-m);
  }

  input,
  textarea,
  select {
    margin-block: 0 var(--spacing-m);
  }

  label {
    font-weight: var(--fw-bold);

    
    &:has(+ input),
    &:has(+ textarea){
      display: block;
    }

    
    &:has(+ :required) {
      &::after {
        content: '*';
        color: var(--color-mark-highlight);
      }
    }
  }

  
  input,
  textarea {
    &:user-valid {
      border-color: var(--color-success);
      border-style: solid;
      background-color: var(--color-success-bg);
    }

    &:focus:user-valid {
      border-color: transparent;
    }

    &:user-invalid {
      border-color: var(--color-error);
      border-style: solid;
      background-color: var(--color-error-bg);
    }

    &:focus:user-invalid {
      border-color: transparent;
      background-color: var(--color-warning-bg);
    }
  }

  
  input,
  label,
  textarea,
  select {
    max-width: var(--max-line-width);
  }

  fieldset {
    border: 1px solid var(--color-border);
  }

  
  [type='email'],
  [type='password'],
  [type='range'],
  [type='search'],
  [type='url'] {
    width: min(20em, 100%);
  }

  
  [type='text'],
  textarea {
    width: min(30em, 100%);
  }

  
  textarea:not([rows]) {
    min-height: 7lh;
  }
}@layer base{blockquote {
    
    margin-block: 0 var(--spacing-m);

    
    text-wrap: pretty;

    
    margin-inline: var(--indent-amount);

    
    max-width: var(--max-line-width);
  }

  

  dl,
  ol,
  ul,
  menu {
    
    margin-block: 0 var(--spacing-m);
  }

  dt {
    font-weight: var(--fw-bold);
  }

  dd {
    margin: 0;
    margin-inline-start: var(--indent-amount);

    
    text-wrap: pretty;
  }

  ol,
  ul,
  menu {
    padding: 0;
    padding-inline-start: var(--indent-amount);

    
    ol,
    ul,
    menu {
      margin: 0;
    }
  }

  li {
    
    text-wrap: pretty;

    
    .main & {
      max-width: var(--max-line-width);
    }
  }

  

  hr {
    
    margin-block: var(--spacing-m);
    border: 0;
    border-block-start: 1px solid var(--color-border);
    height: 0;
  }

  

  p {
    
    margin-block: 0 var(--spacing-m);

    
    text-wrap: pretty;

    
    .main & {
      max-width: var(--max-line-width);
    }
  }

  

  pre {
    
    margin-block: 0 var(--spacing-m);
    font-family: var(--ff-monospace);
  }

  

  
  code:not([data-lang]),
  kbd,
  samp {
    color: var(--color-code);
  }
}@layer base{h1,
  h2,
  h3,
  h4,
  h5,
  h6 {
    margin-block: 1.5em .5em;
    color: var(--color-headings);
    font-family: var(--ff-headings);
    font-weight: var(--fw-headings);
    line-height: var(--heading-line-height);
    text-wrap: balance;

    
    & + & {
      margin-block-start: .75em;
    }

    
    .main & {
      max-width: var(--max-line-width);
    }
  }

  h1 {
    
    margin-block-start: var(--spacing-m);
    margin-block-end: var(--spacing-xs);
    font-size: var(--fs-xxl);
    letter-spacing: -.01em;
  }

  h2 {
    font-size: var(--fs-xl);
    letter-spacing: -.01em;
  }

  h3 {
    font-size: var(--fs-l);
    letter-spacing: -.01em;
  }

  h4 {
    font-size: var(--fs-m);
  }

  h5 {
    font-size: var(--fs-s);
  }

  h6 {
    font-size: var(--fs-xs);
  }
}@layer base{figure,
  img {
    &.image {
      --image-padding: .75rem;

      @media (min-width: 666px) {
        &.center {
          margin-inline: auto;
        }

        &.left {
          padding-inline-end: var(--image-padding);
          padding-block-end: var(--image-padding);
          margin: 0;
          float: left;
          clear: both;
        }

        &.right {
          padding-inline-start: var(--image-padding);
          padding-block-end: var(--image-padding);
          margin: 0;
          float: right;
          clear: both;
        }
      }
    }
  }

  figure {
    
    margin-block: 0 var(--spacing-m);

    &.image {
      figcaption {
        padding-block-start: var(--image-padding);
        contain: inline-size;

        
        max-width: var(--max-line-width);

        
        text-wrap: pretty;

        @media (min-width: 666px) {
          padding-block-start: 0;
        }

        p {
          margin: 0;
        }
      }

      @media (min-width: 666px) {
        inline-size: fit-content;

        &.left {
          figcaption {
            padding-inline-end: var(--image-padding);
            padding-block-end: var(--image-padding);
          }
        }

        &.right {
          figcaption {
            padding-inline-start: var(--image-padding);
            padding-block-end: var(--image-padding);
          }
        }
      }
    }

    &.podcast {
      audio {
        width: 95%;
      }
    }
  }

  img {
    &.image {
      
      margin-block: 0 var(--spacing-m);
    }
  }
}@layer base{a {
    color: var(--color-link);
  }

  
  :visited {
    color: var(--color-link-visited);
  }

  a:hover,
  a:focus {
    color: var(--color-link-hover);
  }

  a:active {
    color: var(--color-link-active);
  }

  
  
  [aria-current] {
    text-decoration: none;
  }

  
  @media (prefers-reduced-motion: no-preference) {
    :has(:target) {
      scroll-behavior: smooth;
      scroll-padding-block-start: var(--gutters);
    }
  }

  .link-nav {
    a {
      text-decoration: none;

      &:hover,
      &:focus {
        text-decoration: underline;
      }
    }
  }

  
  .link-inverted {
    a {
      &:link {
        color: var(--color-link-inverted);
      }

      &:visited {
        color: var(--color-link-visited-inverted);
      }

      &:hover,
      &:focus {
        color: var(--color-link-hover-inverted);
      }

      &:active {
        color: var(--color-link-active-inverted);
      }
    }
  }
}@layer base{table {
    
    margin-block: 0 var(--spacing-m);

    
    border-collapse: collapse;

    
    width: 100%;
  }

  td,
  th {
    
    padding: 0;

    
    vertical-align: text-top;
  }

  th {
    
    vertical-align: bottom;
  }

  caption,
  th {
    
    text-align: start;
  }
}@layer components{.anchor {
    --anchor-gap: .5rem;
    --anchor-opacity: .4;

    display: grid;
    grid-template-columns: auto auto;
    justify-content: start;
    align-items: baseline;
    gap: var(--anchor-gap);

    a {
      opacity: 0;
      text-decoration: none;
      width: fit-content;
    }

    &:has(:focus-visible),
    &:hover {
      a {
        opacity: var(--anchor-opacity);

        &:focus-visible,
        &:hover {
          opacity: 1;
        }
      }
    }
  }

  p:has(+ .anchor) {
    margin-block-end: 0;
  }
}@layer components{.box {
    
    margin-block: var(--spacing-m);
    padding: var(--spacing-xs);
    border: 5px solid var(--color-border);

    .box__title,
    .title {
      margin-block-start: 0;
    }

    & > * {
      &:first-child {
        margin-block-start: 0;
      }

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

  .box--highlight {
    border-color: var(--color-highlight);
  }

  .box--fit {
    width: fit-content;
  }

  .box--gutter {
    padding-inline: var(--gutters);
  }

  .box--inverted {
    background: var(--color-border);
    color: var(--color-text-bg);

    
    * {
      color: var(--color-text-bg);
    }

    a {
      &:link {
        color: var(--color-link-inverted);
      }

      &:visited {
        color: var(--color-link-visited-inverted);
      }

      &:hover,
      &:focus {
        color: var(--color-link-hover-inverted);
      }

      &:active {
        color: var(--color-link-active-inverted);
      }
    }
  }
}@layer components{.button,
  [type='button'],
  [type='submit'] {
    
    display: inline-block;
    font-family: var(--ff-headings);
    text-decoration: none;
    text-align: center;
    width: fit-content;
    padding: .2rem 1rem;

    
    cursor: pointer;
    color: var(--color-button-text);
    text-shadow: var(--color-button) 0 1px 0;
    background: linear-gradient(var(--color-button), var(--color-button-hover));
    border: 1px solid var(--color-button-hover);
    border-radius: var(--radius-s);

    &:hover,
    &:focus-visible,
    &:active {
      
      text-decoration: none;
      color: var(--color-button-text-hover);
      text-shadow: var(--color-button-hover) 0 1px 0;
      background: linear-gradient(var(--color-button-hover), var(--color-button));
    }

    &:active {
      box-shadow: inset 2px 2px 5px var(--color-black-40);
    }
  }

  .button--small {
    font-size: var(--fs-xs);
    padding: .2rem .75rem;
  }

  .button--alt {
    color: var(--color-button-text-hover);
    background: var(--color-button-hover);

    &:hover,
    &:focus-visible,
    &:active {
      color: var(--color-button-text);
      background: var(--color-button);
    }
  }

  .button--outline {
    color: var(--color-button);
    background: var(--color-button-text);
  }

  .button--accept {
    border-color: var(--color-success);
  }

  .button--decline {
    border-color: var(--color-warning);
  }

  
  .button,
  [type='button'],
  [type='submit'] {
    &:disabled {
      background-color: var(--color-grey-200);
      border: 1px solid var(--color-button-disabled);
      background-image: none;
      text-shadow: none;
      cursor: default;
      color: var(--color-button-disabled);

      &:hover,
      &:focus,
      &:active {
        
        color: var(--color-button-disabled);
        text-decoration: none;
      }
    }
  }

  
  input:not(:only-of-type),
  textarea {
    & + [type='submit'] {
      display: block;
    }
  }

  
  @media (min-width: 666px) {
    input:only-of-type {
      &:has(+ [type='submit']) {
        margin-inline-end: .5rem;
      }
    }
  }
}@layer components{.cards {
    --grid-group-column-min: 200px;
    --grid-group-gap: 1.5rem;

    display: grid;
    gap: var(--grid-group-gap);

    grid-template-columns: repeat(auto-fit, minmax(min(var(--grid-group-column-min), 100%), 1fr));

    
    margin-block: var(--spacing-m);
  }

  .card {
    padding: var(--spacing-xs);
    border: 1px solid var(--color-border);

    & > * {
      &:first-child {
        margin-block-start: 0;
      }

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

  .card--highlight {
    border-color: var(--color-highlight);
  }

  .card--featured {
    grid-row: span 2;
    grid-column: span 2;
  }

  .card--gutter {
    padding-inline: var(--gutters);
  }

  .card--inverted {
    background: var(--color-border);
    color: var(--color-text-bg);

    a {
      &:link {
        color: var(--color-link-inverted);
      }

      &:visited {
        color: var(--color-link-visited-inverted);
      }

      &:hover,
      &:focus {
        color: var(--color-link-hover-inverted);
      }

      &:active {
        color: var(--color-link-active-inverted);
      }
    }
  }
}@layer components{.grid-center {
    display: grid;
    place-items: center;
  }

  .text-center {
    text-align: center;
  }

  .margin-center {
    margin-inline: auto;
  }
}@layer components{.clearfix {
    &::before {
      content: '';
      display: table;
    }

    &::after {
      content: '';
      display: table;
      clear: both;
    }
  }
}@layer components{.cookieconsent {
    display: flex;
    flex-flow: wrap;
    justify-content: center;
    gap: .5rem;
    position: sticky;
    bottom: 0;
    width: 100%;
    padding: var(--spacing-xs);
    color: var(--color-warning);
    background-color: var(--color-warning-bg);
    border-block-start: 4px solid var(--color-warning);
    font-size: var(--fs-s);
    transform: translateY(100vh);
    transition: all 130ms ease-out;
    z-index: 99;

    .cookieconsent__actions {
      display: flex;
      gap: .5rem;
    }

    &[hidden] {
      display: none;
    }
  }

  [data-cookieconsentopen] {
    transform: translateY(0);
  }
}@layer components{.disabled {
    
    cursor: default;
    color: var(--color-button-disabled);

    &:hover,
    &:focus,
    &:active {
      
      color: var(--color-button-disabled);
      text-decoration: none;
    }
  }
}@layer components{.flex-group {
    --flex-gap: calc(var(--base-line-height) * 1rem);

    display: flex;
    gap: var(--flex-gap);
    flex-wrap: wrap;

    & > * {
      flex: 1;
    }
  }

  @media (min-width: 666px) {
    .flex-group--2 > * {
      flex-basis: calc(100% / 2 - var(--flex-gap));
      flex-grow: 0;
    }

    .flex-group--3 > * {
      flex-basis: calc(100% / 3 - var(--flex-gap));
      flex-grow: 0;
    }

    .flex-group--4 > * {
      flex-basis: calc(100% / 4 - var(--flex-gap));
      flex-grow: 0;
    }

    .flex-group--5 > * {
      flex-basis: calc(100% / 5 - var(--flex-gap));
      flex-grow: 0;
    }

    .flex-group--6 > * {
      flex-basis: calc(100% / 6 - var(--flex-gap));
      flex-grow: 0;
    }

    .flex-group--grow > * {
      flex-grow: 1;
    }
  }
}@layer components{.flex-inline {
    --flex-inline-gap: .5rem;

    display: flex;
    flex-wrap: wrap;
    gap: var(--flex-inline-gap);
    padding: 0;
    text-align: start;

    .flex-inline__item,
    li {
      list-style: none;
    }
  }

  .flex-inline--inline {
    display: inline-flex;
  }
}@layer components{.footer {
    padding-block: var(--gutters);
    background-color: var(--color-footer-bg);
    text-align: center;

    p {
      margin: 0;
    }
  }
}@layer components{.grid-group {
    --grid-group-column-min: 200px;
    --grid-group-gap: 1.5rem;

    display: grid;
    gap: var(--grid-group-gap);

    grid-template-columns: repeat(auto-fit, minmax(min(var(--grid-group-column-min), 100%), 1fr));
  }

  .grid-group--fill {
    grid-template-columns: repeat(auto-fill, minmax(min(var(--grid-group-column-min), 100%), 1fr));
  }

  .grid-group--100 {
    --grid-group-column-min: 100px;
  }

  .grid-group--150 {
    --grid-group-column-min: 150px;
  }

  .grid-group--200 {
    --grid-group-column-min: 200px;
  }

  .grid-group--250 {
    --grid-group-column-min: 250px;
  }

  .grid-group--300 {
    --grid-group-column-min: 300px;
  }

  .grid-group--350 {
    --grid-group-column-min: 350px;
  }

  .grid-group--400 {
    --grid-group-column-min: 400px;
  }

  .grid-group--500 {
    --grid-group-column-min: 500px;
  }

  .grid-group--600 {
    --grid-group-column-min: 600px;
  }
}@layer components{.grid-stack {
    display: grid;

    & > * {
      grid-column: 1 / 2;
      grid-row: 1 / 2;
    }
  }
}@layer components{.header {
    --header-gap: var(--spacing-s);

    padding-block: min(var(--gutters), var(--spacing-m));
    display: flex;
    flex-direction: column;
    gap: var(--header-gap);
    background-color: var(--color-header-bg);

    @media (min-width: 666px) {
      flex-direction: row;
      align-items: center;
    }

    
    .header__logo {
      width: fit-content;
    }

    
    .header__logo-image {
      vertical-align: bottom;
    }

    
    .header__site-name {
      margin: 0;
      line-height: 1;
    }

    
    .header__site-link {
      &:link,
      &:visited {
        color: var(--color-text);
        text-decoration: none;
      }

      &:hover,
      &:focus {
        text-decoration: underline;
      }
    }

    
    .header__region {
      @media (min-width: 666px) {
        margin-inline-start: auto;
      }
    }
  }
}@layer components{.hidden {
    display: none;
  }

  .js-hidden {
    html.js & {
      display: none;
    }
  }

  .nojs-hidden {
    html.nojs & {
      display: none;
    }
  }
}@layer components{.icon-inline {
    .icon-link {
      opacity: 0;
      transition: all 130ms ease-in;
      text-decoration: none;
    }

    &:focus-visible,
    &:hover {
      .icon-link {
        opacity: .3;

        &:focus-visible,
        &:hover {
          opacity: 1;
        }
      }
    }

    svg {
      display: inline;
      vertical-align: middle;
    }
  }
}@layer components{.language-selector {
    display: flex;
  }

  .language-icon {
    margin-inline-end: var(--spacing-xs);
    fill: var(--color-text);
  }
}@layer components{.ul-straight-left {
    display: table;
    list-style: none;
    padding: 0;

    & > li {
      display: table-row;

      &::before {
        padding-inline-end: var(--spacing-xs);
        display: table-cell;
        content: '\2981';
        font-size: var(--fs-s);
      }
    }
  }

  .ol-straight-left {
    display: table;
    list-style: none;
    padding: 0;

    & > li {
      display: table-row;
      counter-increment: table-ol;

      &::before {
        padding-inline-end: var(--spacing-xs);
        display: table-cell;
        content: counter(table-ol) '.';
        font-size: var(--fs-s);
        text-align: end;
      }
    }
  }

  .ul-straight-left--off {
    display: block;
    list-style: inherit;

    & > li {
      display: list-item;

      &::before {
        content: '';
        display: inline;
        padding: inherit;
      }
    }
  }
}@layer components{.message {
    padding: .5rem;
    outline-width: 2px;
    outline-style: solid;
    width: 95%;

    &.success {
      background-color: var(--color-success-bg);
      color: var(--color-success);
      outline-color: var(--color-success);
    }

    &.info {
      background-color: var(--color-info-bg);
      color: var(--color-info);
      outline-color: var(--color-info);
    }

    &.warning {
      background-color: var(--color-warning-bg);
      color: var(--color-warning);
      outline-color: var(--color-warning);
    }

    &.error {
      background-color: var(--color-error-bg);
      color: var(--color-error);
      outline-color: var(--color-error);
    }
  }

  .message--highlight {
    animation: 2s ease-in-out infinite --outline-highlight;
  }

  @keyframes --outline-highlight {
    50% {
      outline-width: .3rem;
    }
  }
}@layer components{.meta {
    font-family: var(--ff-headings);
    font-size: var(--fs-xs);
    color: var(--color-text-meta);
  }
}@layer components{.overlay {
    --color-overlay: var(--color-black-20);
    --color-overlay2: var(--color-black-10);
    border-image: linear-gradient(var(--color-overlay), var(--color-overlay2)) fill 1;
  }
}@layer components{.pagination,
  .pager {
    --flex-inline-gap: .5rem;

    display: flex;
    flex-wrap: wrap;
    gap: var(--flex-inline-gap);
    padding: 0;
    text-align: start;

    
    margin-block: var(--spacing-m);
    justify-content: center;

    a {
      text-decoration: none;

      &:hover,
      &:focus {
        text-decoration: underline;
      }
    }

    .pager__item,
    .page-link {
      padding-inline: 2px;
    }

    .page-item {
    }

    .active {
      font-weight: var(--fw-bold);
    }

    .disabled {
      .page-link {
        
        cursor: default;
        color: var(--color-button-disabled);

        &:hover,
        &:focus,
        &:active {
          
          color: var(--color-button-disabled);
          text-decoration: none;
        }
      }
    }
  }
}@layer components{.responsive-video {
    --aspect-ratio: 9 / 16; 

    position: relative;
    padding-block-end: calc(var(--aspect-ratio) * 100%); 
    padding-block-start: 25px; 
    height: 0;

    iframe,
    .responsive-video__embed {
      position: absolute;
      inset-block-start: 0;
      inset-inline-start: 0;
      width: 100%;
      height: 100%;
    }
  }

  .responsive-video--4-3 {
    --aspect-ratio: 3 / 4; 
  }
}@layer components{.mt--xxl {
    margin-block-start: var(--spacing-xxl);
  }

  .mt--xl {
    margin-block-start: var(--spacing-xl);
  }

  .mt--l {
    margin-block-start: var(--spacing-l);
  }

  .mt--m {
    margin-block-start: var(--spacing-m);
  }

  .mt--s {
    margin-block-start: var(--spacing-s);
  }

  .mt--xs {
    margin-block-start: var(--spacing-xs);
  }

  .mt--xxs {
    margin-block-start: var(--spacing-xxs);
  }

  .mt--0 {
    margin-block-start: 0;
  }

  .mb--xxl {
    margin-block-end: var(--spacing-xxl);
  }

  .mb--xl {
    margin-block-end: var(--spacing-xl);
  }

  .mb--l {
    margin-block-end: var(--spacing-l);
  }

  .mb--m {
    margin-block-end: var(--spacing-m);
  }

  .mb--s {
    margin-block-end: var(--spacing-s);
  }

  .mb--xs {
    margin-block-end: var(--spacing-xs);
  }

  .mb--xxs {
    margin-block-end: var(--spacing-xxs);
  }

  .mb--0 {
    margin-block-end: 0;
  }

  .mx--xxl {
    margin-block: var(--spacing-xxl);
  }

  .mx--xl {
    margin-block: var(--spacing-xl);
  }

  .mx--l {
    margin-block: var(--spacing-l);
  }

  .mx--m {
    margin-block: var(--spacing-m);
  }

  .mx--s {
    margin-block: var(--spacing-s);
  }

  .mx--xs {
    margin-block: var(--spacing-xs);
  }

  .mx--xxs {
    margin-block: var(--spacing-xxs);
  }

  .mx--0 {
    margin-block: 0;
  }
}@layer components{.zebra-table {
    --table-cell-padding: .5rem;

    @media (max-width: 666px) {
      --table-cell-padding: .3rem;
    }

    th,
    td {
      padding: var(--table-cell-padding);
    }

    thead {
      tr {
        background-color: var(--color-row-header);
      }
    }

    tbody {
      tr {
        &:nth-child(odd) {
          background-color: var(--color-row-odd);
        }

        &:nth-child(even) {
          background-color: var(--color-row-even);
        }
      }
    }
  }

  .responsive-table {
    --table-gap: .5rem;

    @media (max-width: 666px) {
      th {
        display: none;
      }

      td {
        display: grid;
        gap: var(--table-gap);
        grid-template-columns: 12ch auto;

        &::before {
          content: attr(aria-label) ':';
          font-weight: var(--fw-bold);
        }

        &:first-of-type {
          padding-block-start: var(--table-gap);
        }

        &:last-of-type {
          padding-block-end: var(--table-gap);
        }
      }
    }
  }
}@layer components{.tags {
    ul {
      margin-block: 0;
    }
  }
}@layer components{.visually-hidden {
    &:not(:focus, :active) {
      position: absolute;
      clip-path: inset(50%);
      height: 1px;
      width: 1px;
      margin: 0;
      overflow: hidden;
      white-space: nowrap;
    }
  }
}@layer components{.wrap-any {
    overflow-wrap: anywhere;
  }

  .wrap-word {
    overflow-wrap: break-word;
  }
}@layer layout{.layout__page {
    max-width: var(--max-page-width);

    @media (min-width: 666px) {
      margin-inline: auto;
      min-height: 100vh;
      min-height: 100svh;
    }
  }

  .layout__header,
  .layout__footer,
  .layout__main,
  .layout__navigation,
  .layout__first-sidebar,
  .layout__second-sidebar,
  .layout__page-top,
  .layout__page-bottom,
  .layout__cookieconsent {
    padding-inline: var(--gutters);
    min-width: 0;  
  }

  
  .layout__navigation > * {
    max-width: var(--max-content-width);

    @media (min-width: 666px) {
      margin-inline: auto;
    }
  }

  .layout__main,
  .layout__grid {
    display: grid;

    grid-template-columns:
      [stretch-start] minmax(var(--gutters), 1fr)
      [breakout-start] minmax(0, var(--breakout))
      [content-start] min(calc(100% - var(--gutters) * 2), var(--max-content-width)) [content-end]
      minmax(0, var(--breakout)) [breakout-end]
      minmax(var(--gutters), 1fr) [stretch-end];

    padding-inline: 0;

    
    height: fit-content;

    & > :not(.breakout, .stretch) {
      grid-column: content;
    }

    & > .breakout {
      grid-column: breakout;
    }

    & > .stretch {
      grid-column: stretch;
      padding-inline: var(--gutters);
    }
  }

  
  .layout__page {
    display: grid;
    grid-template-areas: 'head'
                         'nav'
                         'top'
                         'main'
                         'side1'
                         'side2'
                         'bottom'
                         'foot'
                         'notice';
    grid-template-rows: auto
                        auto
                        auto
                        1fr
                        auto
                        auto
                        auto
                        auto
                        auto;
    grid-template-columns: 1fr;
  }

  @media (min-width: 999px) {
    .layout__page {
      grid-template-rows: auto
                          auto
                          auto
                          1fr
                          auto
                          auto
                          auto;
    }

    .layout__sidebar-first {
      grid-template-areas: 'head head'
                           'nav nav'
                           'side1 top'
                           'side1 main'
                           'side1 bottom'
                           'foot foot'
                           'notice notice';
      grid-template-columns: 1fr
                             2fr;
    }

    .layout__sidebar-second {
      grid-template-areas: 'head head'
                           'nav nav'
                           'top side2'
                           'main side2'
                           'bottom side2'
                           'foot foot'
                           'notice notice';
      grid-template-columns: 2fr
                             1fr;
    }

    .layout__sidebar-two {
      grid-template-areas: 'head head head'
                           'nav nav nav'
                           'side1 top side2'
                           'side1 main side2'
                           'side1 bottom side2'
                           'foot foot foot'
                           'notice notice notice';
      grid-template-columns: 1fr
                             2fr
                             1fr;
    }
  }

  .layout__header {
    grid-area: head;
  }

  .layout__navigation {
    grid-area: nav;
  }

  .layout__page-top {
    grid-area: top;
  }

  .layout__main {
    grid-area: main;
  }

  .layout__first-sidebar {
    grid-area: side1;
  }

  .layout__second-sidebar {
    grid-area: side2;
  }

  .layout__page-bottom {
    grid-area: bottom;
  }

  .layout__footer {
    grid-area: foot;
  }

  .layout__cookieconsent {
    grid-area: notice;
  }
}@layer reset{*,
  *::before,
  *::after {
    box-sizing: border-box;
  }

  :root {
    
    interpolate-size: allow-keywords;
  }

  
  @view-transition {
    navigation: auto;
  }

  html {
    
    -webkit-text-size-adjust: none;
    text-size-adjust: none;

    
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
  }

  

  body {
    
    margin: 0;
    padding: 0;

    
    
    min-height: 100vh;
  }

  

  img,
  svg,
  picture,
  audio,
  video,
  canvas,
  iframe,
  embed,
  object {
    display: block;
  }

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

  figure {
    margin-inline: 0;
  }

  

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

  [type='search'] {
    @media (min-width: 666px) {
      
      -webkit-appearance: textfield;
    }
  }

  

  code,
  kbd,
  samp {
    font-family: var(--ff-monospace);
  }

  

  td,
  math,
  time[datetime*=':'] {
    font-variant-numeric: tabular-nums lining-nums;
  }
}