@charset "UTF-8";
:root {
  --container-width: 62.5rem;
  --prose-width: 46rem;
  --section-spacing: 3.5em;
  --container-spacing: 2.5em;
  --box-spacing: 2em;
  --primary-spacing: 1em;
  --space-3xs: 0.25rem;
  --space-2xs: 0.5rem;
  --space-xs:  0.75rem;
  --space-s:   1rem;
  --space-m:   1.5rem;
  --space-l:   2rem;
  --space-xl:  3rem;
  --radius-s: 0.25rem;
  --radius-m: 0.5rem;
  --border-subtle: 1px solid var(--clr-neutral-300);
  /* Conservative fallback for the height of the sticky top navbar.
     The actual measured height is published by static/js/navbar-height.js
     and overrides this value on load. Other sticky elements (e.g.
     .param-table thead) read --navbar-height to park flush below it. */
  --navbar-height: 5rem; }

html {
  scroll-padding-top: 100px; }

body {
  display: flex;
  flex-direction: column;
  min-height: 100vh; }

.chroma .lntable pre, .chroma .lntable pre code {
  padding: 0;
  margin: 0; }

.chroma .lntable pre {
  border: 0; }

code {
  padding: 0.2em;
  margin: 0;
  background-color: var(--clr-neutral-100);
  border-radius: 3px;
  font-family: 'JetBrainsMono', monospace;
  font-size: 80%;
  word-break: break-word; }

pre code {
  display: block;
  padding: 1em;
  background-color: transparent;
  line-height: 2;
  overflow-x: auto; }

pre {
  white-space: pre;
  -webkit-hyphens: none;
  -ms-hyphens: none;
  hyphens: none;
  position: relative;
  border-radius: 3px; }

.main-inner {
  margin-block: var(--container-spacing); }
  .main-inner :is(.article, .download, .community, .development) > p {
    margin: 1.5em 0; }
  .main-inner :is(.article, .download, .community, .development) li {
    margin: 1em 0; }
  .main-inner :is(.article, .download, .community, .development):is(h2, h3, h4) {
    margin-top: 3rem; }

/* barlow-latin-100 */
@font-face {
  font-family: "Barlow";
  font-style: normal;
  font-weight: 100;
  font-display: swap;
  src: local(""), url("../fonts/barlow-latin-100.woff") format("woff"); }

/* barlow-latin-100 */
@font-face {
  font-family: "Barlow";
  font-style: italic;
  font-weight: 100;
  font-display: swap;
  src: local(""), url("../fonts/barlow-latin-100italic.woff") format("woff"); }

/* barlow-latin-200 */
@font-face {
  font-family: "Barlow";
  font-style: normal;
  font-weight: 200;
  font-display: swap;
  src: local(""), url("../fonts/barlow-latin-200.woff") format("woff"); }

/* barlow-latin-200 */
@font-face {
  font-family: "Barlow";
  font-style: italic;
  font-weight: 200;
  font-display: swap;
  src: local(""), url("../fonts/barlow-latin-200italic.woff") format("woff"); }

/* barlow-latin-300 */
@font-face {
  font-family: "Barlow";
  font-style: normal;
  font-weight: 300;
  font-display: swap;
  src: local(""), url("../fonts/barlow-latin-300.woff") format("woff"); }

/* barlow-latin-300 */
@font-face {
  font-family: "Barlow";
  font-style: italic;
  font-weight: 300;
  font-display: swap;
  src: local(""), url("../fonts/barlow-latin-300italic.woff") format("woff"); }

/* barlow-latin-400 */
@font-face {
  font-family: "Barlow";
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: local(""), url("../fonts/barlow-latin-400.woff") format("woff"); }

/* barlow-latin-400 */
@font-face {
  font-family: "Barlow";
  font-style: italic;
  font-weight: 400;
  font-display: swap;
  src: local(""), url("../fonts/barlow-latin-400italic.woff") format("woff"); }

/* barlow-latin-500 */
@font-face {
  font-family: "Barlow";
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: local(""), url("../fonts/barlow-latin-500.woff") format("woff"); }

/* barlow-latin-500 */
@font-face {
  font-family: "Barlow";
  font-style: italic;
  font-weight: 500;
  font-display: swap;
  src: local(""), url("../fonts/barlow-latin-500italic.woff") format("woff"); }

/* barlow-latin-600 */
@font-face {
  font-family: "Barlow";
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: local(""), url("../fonts/barlow-latin-600.woff") format("woff"); }

/* barlow-latin-600 */
@font-face {
  font-family: "Barlow";
  font-style: italic;
  font-weight: 600;
  font-display: swap;
  src: local(""), url("../fonts/barlow-latin-600italic.woff") format("woff"); }

/* barlow-latin-700 */
@font-face {
  font-family: "Barlow";
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: local(""), url("../fonts/barlow-latin-700.woff") format("woff"); }

/* barlow-latin-700 */
@font-face {
  font-family: "Barlow";
  font-style: italic;
  font-weight: 700;
  font-display: swap;
  src: local(""), url("../fonts/barlow-latin-700italic.woff") format("woff"); }

/* barlow-latin-800 */
@font-face {
  font-family: "Barlow";
  font-style: normal;
  font-weight: 800;
  font-display: swap;
  src: local(""), url("../fonts/barlow-latin-800.woff") format("woff"); }

/* barlow-latin-800 */
@font-face {
  font-family: "Barlow";
  font-style: italic;
  font-weight: 800;
  font-display: swap;
  src: local(""), url("../fonts/barlow-latin-800italic.woff") format("woff"); }

/* barlow-latin-900 */
@font-face {
  font-family: "Barlow";
  font-style: normal;
  font-weight: 900;
  font-display: swap;
  src: local(""), url("../fonts/barlow-latin-900.woff") format("woff"); }

/* barlow-latin-900 */
@font-face {
  font-family: "Barlow";
  font-style: italic;
  font-weight: 900;
  font-display: swap;
  src: local(""), url("../fonts/barlow-latin-900italic.woff") format("woff"); }

/* jetbrains-mono-500 */
@font-face {
  font-family: "JetbrainsMono";
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: local(""), url("../fonts/jetbrains-mono-500.woff") format("woff"); }

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

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

ul[role='list'],
ol[role='list'] {
  list-style: none; }

html:focus-within {
  scroll-behavior: smooth; }

body {
  min-height: 100vh;
  text-rendering: optimizeSpeed;
  line-height: 1.5; }

a:not([class]) {
  text-decoration-skip-ink: auto; }

img,
picture {
  max-width: 100%;
  display: inline-block; }

input,
button,
textarea,
select {
  font: inherit;
  display: inline-block; }

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

:root {
  --clr-primary-100: #a0bfee;
  --clr-primary-200: #6396e3;
  --clr-primary-300: #3376db;
  --clr-primary-400: #2263c3;
  --clr-primary-500: #1c51a0;
  --clr-secondary-100: #ffccbd;
  --clr-secondary-200: #ffa98f;
  --clr-secondary-300: #ff8a66;
  --clr-secondary-400: #ff6e42;
  --clr-secondary-500: #ff5724;
  --clr-neutral-100: whitesmoke;
  --clr-neutral-200: #ededed;
  --clr-neutral-300: #e0e0e0;
  --clr-neutral-400: #bdbdbd;
  --clr-neutral-500: #858585;
  --clr-neutral-600: #525252;
  --clr-neutral-700: #2e2e2e;
  --clr-info-100: #ecf5fe;
  --clr-info-200: #c6e0fa;
  --clr-info-300: #2080df;
  --clr-info-400: #1361ae;
  --clr-info-500: #083868;
  --clr-success-100: #effbf4;
  --clr-success-200: #c4eed5;
  --clr-success-300: #279b57;
  --clr-success-400: #15793f;
  --clr-success-500: #0b5028;
  --clr-warning-100: #fff8e6;
  --clr-warning-200: #fce19c;
  --clr-warning-300: #f59f0a;
  --clr-warning-400: #c26c0a;
  --clr-warning-500: #793c06;
  --clr-danger-100: #fdf1f1;
  --clr-danger-200: #f6cbcb;
  --clr-danger-300: #d92626;
  --clr-danger-400: #b31a1a;
  --clr-danger-500: #730d0d;
  --clr-white: white;
  --clr-black: black;
  --clr-indigo: #293756;
  --clr-bluishGray: #f5fbff;
  --fs-100: 0.25rem;
  --fs-200: 0.55rem;
  --fs-300: 0.85rem;
  --fs-400: 1rem;
  --fs-500: 1.15rem;
  --fs-600: 1.65rem;
  --fs-700: 1.75rem;
  --fs-800: 2rem;
  --fs-900: 2.5rem; }
  @media only screen and (min-width: 40em) {
    :root {
      --fs-100: 0.55rem;
      --fs-200: 0.85rem;
      --fs-300: 1rem;
      --fs-400: 1.15rem;
      --fs-500: 1.45rem;
      --fs-600: 1.75rem;
      --fs-700: 2rem;
      --fs-800: 2.5rem;
      --fs-900: 3rem; } }
/* Background */
.chroma {
  background-color: transparent; }

/* Other */
/* Error */
.chroma .err {
  color: #a61717;
  background-color: #e3d2d2; }

/* LineTableTD */
.chroma .lntd {
  vertical-align: top;
  padding: 0;
  margin: 0;
  border: 0; }

/* LineTable */
.chroma .lntable {
  border-spacing: 0;
  padding: 0;
  margin: 0;
  border: 0;
  width: auto;
  overflow: auto;
  display: block; }

/* LineHighlight */
.chroma .hl {
  display: block;
  width: 100%;
  background-color: #ffffcc; }

/* LineNumbersTable */
.chroma .lnt {
  margin-right: 0.4em;
  padding: 0 0.4em 0 0.4em;
  color: #7f7f7f; }

/* LineNumbers */
.chroma .ln {
  margin-right: 0.4em;
  padding: 0 0.4em 0 0.4em;
  color: #7f7f7f; }

/* Keyword */
.chroma .k {
  color: #002D62;
  font-weight: 500; }

/* KeywordConstant */
.chroma .kc {
  color: #000000;
  font-weight: 500; }

/* KeywordDeclaration */
.chroma .kd {
  color: #000000;
  font-weight: 500; }

/* KeywordNamespace */
.chroma .kn {
  color: #000000;
  font-weight: 500; }

/* KeywordPseudo */
.chroma .kp {
  color: #000000;
  font-weight: 500; }

/* KeywordReserved */
.chroma .kr {
  color: #000000;
  font-weight: 500; }

/* KeywordType */
.chroma .kt {
  color: #445588;
  font-weight: 500; }

/* Name */
/* NameAttribute */
.chroma .na {
  color: #008080; }

/* NameBuiltin */
.chroma .nb {
  color: #0086b3; }

/* NameBuiltinPseudo */
.chroma .bp {
  color: #999999; }

/* NameClass */
.chroma .nc {
  color: #445588;
  font-weight: 500; }

/* NameConstant */
.chroma .no {
  color: #008080; }

/* NameDecorator */
.chroma .nd {
  color: #3c5d5d;
  font-weight: 500; }

/* NameEntity */
.chroma .ni {
  color: #800080; }

/* NameException */
.chroma .ne {
  color: #990000;
  font-weight: 500; }

/* NameFunction */
.chroma .nf {
  color: #990000;
  font-weight: 500; }

/* NameFunctionMagic */
/* NameLabel */
.chroma .nl {
  color: #990000;
  font-weight: 500; }

/* NameNamespace */
.chroma .nn {
  color: #555555; }

/* NameOther */
/* NameProperty */
/* NameTag */
.chroma .nt {
  color: #000080; }

/* NameVariable */
.chroma .nv {
  color: #008080; }

/* NameVariableClass */
.chroma .vc {
  color: #008080; }

/* NameVariableGlobal */
.chroma .vg {
  color: #008080; }

/* NameVariableInstance */
.chroma .vi {
  color: #008080; }

/* NameVariableMagic */
/* Literal */
/* LiteralDate */
/* LiteralString */
.chroma .s {
  color: #dd1144; }

/* LiteralStringAffix */
.chroma .sa {
  color: #dd1144; }

/* LiteralStringBacktick */
.chroma .sb {
  color: #dd1144; }

/* LiteralStringChar */
.chroma .sc {
  color: #dd1144; }

/* LiteralStringDelimiter */
.chroma .dl {
  color: #dd1144; }

/* LiteralStringDoc */
.chroma .sd {
  color: #dd1144; }

/* LiteralStringDouble */
.chroma .s2 {
  color: #dd1144; }

/* LiteralStringEscape */
.chroma .se {
  color: #dd1144; }

/* LiteralStringHeredoc */
.chroma .sh {
  color: #dd1144; }

/* LiteralStringInterpol */
.chroma .si {
  color: #dd1144; }

/* LiteralStringOther */
.chroma .sx {
  color: #dd1144; }

/* LiteralStringRegex */
.chroma .sr {
  color: #009926; }

/* LiteralStringSingle */
.chroma .s1 {
  color: #dd1144; }

/* LiteralStringSymbol */
.chroma .ss {
  color: #990073; }

/* LiteralNumber */
.chroma .m {
  color: #009999; }

/* LiteralNumberBin */
.chroma .mb {
  color: #009999; }

/* LiteralNumberFloat */
.chroma .mf {
  color: #009999; }

/* LiteralNumberHex */
.chroma .mh {
  color: #009999; }

/* LiteralNumberInteger */
.chroma .mi {
  color: #009999; }

/* LiteralNumberIntegerLong */
.chroma .il {
  color: #009999; }

/* LiteralNumberOct */
.chroma .mo {
  color: #009999; }

/* Operator */
.chroma .o {
  color: #000000;
  font-weight: 500; }

/* OperatorWord */
.chroma .ow {
  color: #000000;
  font-weight: 500; }

/* Punctuation */
/* Comment */
.chroma .c {
  color: #999988;
  font-style: italic; }

/* CommentHashbang */
.chroma .ch {
  color: #999988;
  font-style: italic; }

/* CommentMultiline */
.chroma .cm {
  color: #999988;
  font-style: italic; }

/* CommentSingle */
.chroma .c1 {
  color: #999988;
  font-style: italic; }

/* CommentSpecial */
.chroma .cs {
  color: #999999;
  font-weight: 500;
  font-style: italic; }

/* CommentPreproc */
.chroma .cp {
  color: #999999;
  font-weight: 500;
  font-style: italic; }

/* CommentPreprocFile */
.chroma .cpf {
  color: #999999;
  font-weight: 500;
  font-style: italic; }

/* Generic */
/* GenericDeleted */
.chroma .gd {
  color: #000000;
  background-color: #ffdddd; }

/* GenericEmph */
.chroma .ge {
  color: #000000;
  font-style: italic; }

/* GenericError */
.chroma .gr {
  color: #aa0000; }

/* GenericHeading */
.chroma .gh {
  color: #999999; }

/* GenericInserted */
.chroma .gi {
  color: #000000;
  background-color: #ddffdd; }

/* GenericOutput */
.chroma .go {
  color: #888888; }

/* GenericPrompt */
.chroma .gp {
  color: #555555; }

/* GenericStrong */
.chroma .gs {
  font-weight: 500; }

/* GenericSubheading */
.chroma .gu {
  color: #aaaaaa; }

/* GenericTraceback */
.chroma .gt {
  color: #aa0000; }

/* GenericUnderline */
.chroma .gl {
  text-decoration: underline; }

/* TextWhitespace */
.chroma .w {
  color: #bbbbbb; }

body {
  font-size: var(--fs-300);
  font-weight: 500;
  font-family: 'Barlow', sans-serif;
  color: var(--clr-indigo); }

h1,
h2,
h3,
h4,
h5 {
  font-stretch: 100%;
  line-height: 1.2;
  font-weight: 700; }

h1,
.h1 {
  font-size: var(--fs-800); }

h2,
.h2 {
  font-size: var(--fs-700); }

h3,
.h3 {
  font-size: var(--fs-600); }

h4,
.h4 {
  font-size: var(--fs-500); }

h5,
.h5 {
  font-size: var(--fs-400); }

small,
.text-small {
  font-size: var(--fs-400); }

strong {
  font-weight: 700; }

a {
  color: var(--clr-primary-200);
  text-decoration: underline; }
  a:hover, a:focus {
    color: var(--clr-primary-300); }

blockquote {
  background-color: rgba(255, 230, 102, 0.3);
  border-left: 9px solid #ffe666;
  padding: 20px 45px 20px 26px;
  margin-block: 1.5em; }

.footer {
  display: flex;
  flex-direction: column;
  align-items: center;
  background-color: var(--clr-primary-500);
  color: var(--clr-white);
  margin-top: auto; }
  .footer__item {
    display: flex;
    flex-wrap: wrap;
    margin-top: var(--container-spacing); }
  .footer .list {
    color: var(--clr-white);
    font-size: 1.05rem;
    margin-inline: var(--box-spacing); }
    .footer .list__head {
      font-weight: 700;
      margin-bottom: 0.25em; }
    .footer .list__link {
      color: var(--clr-white);
      text-decoration: underline; }
  .footer .copyrights {
    text-align: center;
    margin-block: var(--primary-spacing); }

.self-link .header-link {
  opacity: 0; }

.self-link:hover .header-link {
  opacity: 1; }

.navbar {
  display: flex;
  justify-content: space-between;
  align-items: center;
  position: sticky;
  top: 0;
  /* Above .param-table thead (z-index: 1) so the navbar always covers the
     parking band even if --navbar-height under-estimates actual height. */
  z-index: 2;
  padding: var(--primary-spacing) var(--container-spacing);
  box-shadow: 0px 3px 3px rgba(0, 0, 0, 0.15);
  background-color: var(--clr-white); }
  .navbar .logo {
    width: 45px;
    aspect-ratio: 1; }
  .navbar__item {
    display: flex; }
    .navbar__item__link {
      color: var(--clr-indigo);
      text-decoration: underline;
      font-size: 1.05rem;
      font-weight: 500;
      margin-inline: var(--primary-spacing); }
      .navbar__item__link--active {
        color: var(--clr-primary-400); }
      .navbar__item__link:hover {
        color: var(--clr-indigo); }
    @media only screen and (max-width: 65em) {
      .navbar__item {
        display: none; } }
.db {
  display: block; }

.dn {
  display: none; }

.nav-mob {
  position: fixed;
  left: 0;
  right: 0;
  bottom: 0;
  background-color: var(--clr-indigo);
  /* Indent the sub-page rows of the Docs Menu via list-item padding
     rather than `  ` inside the link text. Padding belongs
     to the `<li>` so it does not get caught by the link's underline,
     which would otherwise put a visible underline in front of the
     title text. */
  padding: 1em 2em;
  /* When a mobile dropdown is opened (the toggle removes `.dn`), cap
     its height to the space between the sticky top navbar and the
     fixed button row, and let the inner list scroll. Without the cap
     the Docs Menu with ~25 entries overflows the viewport upward;
     because the parent `.nav-mob` is position: fixed the user cannot
     scroll to reach the top of the list (the page body scrolls
     underneath instead, which moves nothing visible). Without the
     `--navbar-height` term the top of the menu sits under the sticky
     `.navbar` at the top of the viewport and hides the first entries.

     `100dvh` follows the dynamic viewport on mobile so the cap stays
     correct when the browser's address bar shows or hides; `100vh`
     is a fallback for engines that do not yet implement dvh. The
     5rem subtracted matches the intrinsic height of the button row
     below (the same constant used by the body's padding-bottom).
     `--navbar-height` is the measured height of the sticky `.navbar`
     (published by static/js/navbar-height.js, with a 5rem default in
     abstracts/_constants.scss). */ }
  .nav-mob ul,
  .nav-mob li {
    margin: 0;
    padding: 0.5em; }
  .nav-mob li {
    width: 100%;
    display: block;
    text-align: left; }
  .nav-mob .hover-bg-black:hover {
    background-color: var(--clr-black); }
  .nav-mob a {
    text-decoration: underline;
    color: var(--clr-white); }
  .nav-mob .docsmenu__subpage {
    padding-inline-start: 2.5em; }
  .nav-mob .mobilemenu:not(.dn) {
    max-height: calc(100vh - 5rem - var(--navbar-height));
    max-height: calc(100dvh - 5rem - var(--navbar-height));
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
    overscroll-behavior: contain; }
  @media only screen and (min-width: 65em) {
    .nav-mob {
      display: none; } }
@media only screen and (max-width: 65em) {
  body {
    padding-bottom: 5.5rem; } }

.nav-inside {
  display: flex;
  justify-content: space-between;
  width: 100%; }
  .nav-inside .btn {
    border-style: none;
    border: 1px solid var(--clr-white);
    background-color: transparent;
    color: var(--clr-white);
    border-radius: 0;
    width: auto;
    flex: 1 1 auto;
    margin-inline: 0.25em; }

.sidebar {
  background-color: var(--clr-bluishGray);
  width: 20%;
  margin-left: var(--primary-spacing);
  align-self: start;
  position: sticky;
  /* Park below the top navbar so the sidebar header is not hidden when
     the user scrolls. Mirrors the param-table thead behaviour. */
  inset-block-start: var(--navbar-height);
  max-height: calc(100vh - var(--navbar-height));
  overflow-y: auto;
  /* First-level entries: section headings (e.g. "Connect", "Security"). */
  /* Leaf entries: individual pages. */ }
  .sidebar__wrapper {
    padding-inline: var(--primary-spacing); }
  .sidebar__section {
    margin-block: var(--space-s);
    list-style: none;
    /* Active and inactive titles share the same base look. The active
       state only swaps the colour: the template appends `--active` to
       the class name (rather than carrying both classes BEM-style), so
       the modifier needs every property the base has, otherwise the
       title loses its bold + underline when the user lands on the
       section's own page. */ }
    .sidebar__section__title, .sidebar__section__title--active {
      display: block;
      color: var(--clr-indigo);
      font-weight: 700;
      text-decoration: underline;
      padding-block: var(--space-3xs); }
    .sidebar__section__title:hover {
      color: var(--clr-primary-400); }
    .sidebar__section__title--active {
      color: var(--clr-primary-400); }
    .sidebar__section__pages {
      margin: 0;
      padding-inline-start: var(--space-s);
      list-style: none;
      /* Cancel the .article li margin reset that doesn't apply here, but
         also matches the rest of the sidebar's tightness. */ }
      .sidebar__section__pages li {
        margin: 0;
        padding: 0; }
    .sidebar__section--active .sidebar__section__title {
      /* Bold the section title when the current page belongs to it. */
      color: var(--clr-primary-400); }
  .sidebar__links {
    margin: 0;
    padding-block: var(--space-3xs);
    list-style: none; }
    .sidebar__links__link {
      color: var(--clr-indigo);
      text-decoration: underline; }
      .sidebar__links__link:hover {
        color: var(--clr-primary-400); }
      .sidebar__links__link--active {
        color: var(--clr-primary-400);
        font-weight: 700; }
  @media only screen and (max-width: 65em) {
    .sidebar {
      display: none; } }
.badge {
  display: inline-flex;
  align-items: center;
  gap: var(--space-3xs);
  padding: 0.1em 0.5em;
  border-radius: 999px;
  font-size: var(--fs-300);
  font-weight: 600;
  line-height: 1.4;
  white-space: nowrap;
  background: var(--clr-neutral-200);
  color: var(--clr-neutral-700);
  /* Version badges — readable text, never strikethrough. */
  /* Legacy aliases — used outside the param-table (since.html, deprecated.html). */ }
  .badge--since {
    background: var(--clr-success-100);
    color: var(--clr-success-500); }
  .badge--deprecated-in {
    background: var(--clr-warning-100);
    color: var(--clr-warning-500); }
  .badge--hidden-in {
    background: var(--clr-danger-100);
    color: var(--clr-danger-500); }
  .badge--deprecated {
    background: var(--clr-warning-100);
    color: var(--clr-warning-500); }
  .badge--removed {
    background: var(--clr-danger-100);
    color: var(--clr-danger-500); }

/* The .btn classes apply directly to either a `<button>` element or
   an `<a>` used for navigation. Legacy usages where `<a>` sits
   INSIDE a `<button class="btn">` continue to work — the `a` selector
   inherits the same colour / decoration so the rendered look is
   identical regardless of which markup pattern a page uses.

   Hover handling carries an extra responsibility: the global
   `a { color: ...; } a:hover { color: primary-300; ... }` rule in
   base/_typography.scss applies to every `<a>` on the site. With
   the contained button using `<a class="btn--contained">`, the
   default hover would flip text to primary-300 — the same colour as
   the button's own hover background — so the text would visually
   disappear. The button rules below re-pin colour / decoration in
   hover and focus states explicitly. */
.btn {
  border-radius: 100vmax;
  padding: 0.5em var(--primary-spacing);
  border-style: none;
  cursor: pointer;
  transition: 0.25s;
  text-decoration: none;
  display: inline-flex;
  align-items: center;
  font: inherit; }
  .btn:hover, .btn:focus {
    text-decoration: none; }
  @media only screen and (max-width: 40em) {
    .btn {
      font-size: 1.05rem; }
      .btn a {
        font-size: 1.05rem; } }
  .btn--contained, .btn--contained a {
    background-color: var(--clr-primary-400);
    color: var(--clr-white); }
    .btn--contained:hover, .btn--contained:focus, .btn--contained a:hover, .btn--contained a:focus {
      background-color: var(--clr-primary-300);
      color: var(--clr-white); }
  .btn--outlined, .btn--outlined a {
    color: var(--clr-primary-400);
    background-color: transparent;
    border: 1px solid var(--clr-primary-400);
    text-decoration: none; }
  .btn--outlined {
    /* Outlined hover: keep the border so the affordance does not
           visually evaporate; add a quiet tint and slide the arrow. */ }
    .btn--outlined::after {
      content: "›";
      display: inline-block;
      padding-left: 4px;
      transition: transform 0.3s ease-out; }
    .btn--outlined:hover, .btn--outlined:focus {
      color: var(--clr-primary-400);
      background-color: var(--clr-primary-50, #eaf3fc);
      border-color: var(--clr-primary-400); }
      .btn--outlined:hover::after, .btn--outlined:focus::after {
        transform: translateX(4px); }

.card {
  display: flex;
  justify-content: space-between;
  flex-wrap: wrap; }
  .card__item {
    width: 300px;
    box-shadow: 0px 2px 1px -1px rgba(0, 0, 0, 0.2), 0px 1px 1px 0px rgba(0, 0, 0, 0.14), 0px 1px 3px 0px rgba(0, 0, 0, 0.12);
    border-radius: 4px;
    padding: var(--primary-spacing);
    border-top: 4px solid var(--clr-primary-400);
    margin-top: 1em; }
    .card__item > :not(:first-child) {
      margin-top: 0.5em; }
  .card__title {
    font-size: 1.25rem;
    font-weight: 600; }
  .card__subtitle {
    font-weight: 600;
    font-size: .875rem; }
  .card__date {
    margin-left: 0.5em;
    font-weight: 400;
    color: var(--clr-neutral-600);
    font-size: 0.8125rem; }
  .card__desc {
    font-size: .875rem; }
  .card__download {
    display: inline-block;
    line-height: 24px; }
  .card__btn__right {
    float: right;
    border: 0;
    border-radius: 5px;
    padding-inline: 10px;
    color: var(--clr-white);
    background-color: var(--clr-primary-400); }
    .card__btn__right:hover {
      background-color: var(--clr-primary-300); }
  .card .maven {
    display: none; }

.code-tabs {
  margin-block: var(--space-m);
  /* Shrink the container to the widest tab's content rather than
     filling the parent column. On the homepage this keeps the copy
     button (absolute-positioned to the right edge of the panels)
     glued to the snippet instead of stranding it at the page edge.
     On docs pages it gives the same visual: snippets sit at their
     natural width, not stretched. Long lines still cap at parent
     width via max-width and overflow horizontally inside <pre>. */
  width: max-content;
  max-width: 100%;
  border: var(--border-subtle);
  border-radius: var(--radius-m);
  background: var(--clr-neutral-100); }
  .code-tabs__list {
    display: flex;
    flex-wrap: wrap;
    gap: 0;
    margin: 0;
    padding: 0;
    list-style: none;
    border-block-end: var(--border-subtle);
    background: var(--clr-neutral-200);
    border-start-start-radius: var(--radius-m);
    border-start-end-radius: var(--radius-m); }
  .code-tabs__tab {
    margin: 0;
    padding: 0;
    list-style: none; }
  .code-tabs__btn {
    display: inline-block;
    padding: var(--space-2xs) var(--space-m);
    background: transparent;
    border: 0;
    border-block-end: 2px solid transparent;
    cursor: pointer;
    font: inherit;
    font-weight: 500;
    color: var(--clr-neutral-600); }
    .code-tabs__btn[aria-selected="true"] {
      background: var(--clr-neutral-100);
      color: var(--clr-primary-400);
      border-block-end-color: var(--clr-primary-400); }
    .code-tabs__btn:hover {
      color: var(--clr-primary-400); }
    .code-tabs__btn:focus-visible {
      outline: 2px solid var(--clr-primary-300);
      outline-offset: -2px; }
  .code-tabs__panels {
    position: relative; }
  .code-tabs__panel {
    display: none;
    padding: 0;
    /* Reserve room on the right for the absolute-positioned
       `__copy` button so a single-line snippet (Gradle Kotlin /
       Groovy on the homepage) does not run under it. The
       container's `width: max-content` then sizes to
       `widest-line + 5rem`, keeping the button glued to the
       block edge rather than overlapping the code. */ }
    .code-tabs__panel[data-active="true"] {
      display: block; }
    .code-tabs__panel pre {
      margin: 0;
      border-radius: 0;
      padding-inline-end: 5rem; }
  .code-tabs__copy {
    position: absolute;
    inset-block-start: var(--space-2xs);
    inset-inline-end: var(--space-2xs);
    z-index: 1;
    padding: var(--space-3xs) var(--space-xs);
    border: var(--border-subtle);
    border-radius: var(--radius-s);
    background: var(--clr-white);
    cursor: pointer;
    font: inherit;
    font-size: var(--fs-300);
    color: var(--clr-neutral-600);
    line-height: 1;
    /* JS swaps the label text to "Copied" and adds .is-copied for the
       brief confirmation window; mirror with a green tint so the
       feedback is unmissable without an icon swap. */ }
    .code-tabs__copy:hover {
      background: var(--clr-neutral-100);
      color: var(--clr-primary-400); }
    .code-tabs__copy:focus-visible {
      outline: 2px solid var(--clr-primary-300);
      outline-offset: 1px; }
    .code-tabs__copy.is-copied {
      color: var(--clr-success-400, #1f7a3d);
      border-color: var(--clr-success-300, #2d9d57); }
    .code-tabs__copy.is-failed {
      color: var(--clr-danger-400, #b3261e);
      border-color: var(--clr-danger-300, #d9534f); }

.page-meta {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-s);
  margin-block-end: var(--space-m);
  padding-block: var(--space-2xs);
  font-size: var(--fs-300);
  color: var(--clr-neutral-600);
  border-block-end: var(--border-subtle); }
  .page-meta__breadcrumbs {
    flex: 1 1 auto;
    margin: 0;
    padding: 0;
    list-style: none;
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-3xs); }
    .page-meta__breadcrumbs li::after {
      content: "›";
      margin-inline-start: var(--space-3xs);
      color: var(--clr-neutral-400); }
    .page-meta__breadcrumbs li:last-child::after {
      content: ""; }
    .page-meta__breadcrumbs a {
      color: inherit; }
  .page-meta__reviewed, .page-meta__edit {
    display: inline-flex;
    align-items: center;
    gap: var(--space-3xs); }
  .page-meta__edit a {
    color: var(--clr-primary-400);
    text-decoration: underline; }

.pagination {
  display: flex;
  width: 100%;
  text-transform: uppercase;
  font-size: 90%;
  margin-top: var(--box-spacing); }
  .pagination__left {
    width: 50%; }
    .pagination__left__link::before {
      content: "«";
      font-size: var(--fs-300); }
  .pagination__right {
    text-align: right;
    width: 50%; }
    .pagination__right__link::after {
      content: "»";
      font-size: var(--fs-300); }

/* Card-list of child pages rendered at the bottom of a section's
   `_index.md` landing. Gives the reader a continuation path inside
   the section instead of pushing them back to the sidebar. */
.section-children {
  list-style: none;
  margin: var(--space-l) 0 0;
  padding: 0;
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--space-s); }
  @media only screen and (min-width: 40em) {
    .section-children {
      grid-template-columns: repeat(2, 1fr); } }
  .section-children li {
    margin: 0;
    padding: 0; }
  .section-children__link {
    display: block;
    padding: var(--space-s) var(--space-m);
    border: var(--border-subtle);
    border-radius: var(--radius-m);
    color: inherit;
    text-decoration: none;
    transition: border-color 80ms ease, background-color 80ms ease; }
    .section-children__link:hover {
      border-color: var(--clr-primary-300);
      background: var(--clr-neutral-100); }
  .section-children__title {
    display: block;
    color: var(--clr-primary-400);
    font-weight: 600;
    margin-block-end: var(--space-3xs); }
  .section-children__summary {
    display: block;
    color: var(--clr-neutral-600);
    font-size: var(--fs-300);
    line-height: 1.4; }

.release-history-wrap {
  margin-block: var(--space-m);
  /* On narrow viewports the seven columns push past the viewport;
     wrap-scroll keeps row-by-row reading intact without forcing
     line breaks inside individual cells. */ }
  @media only screen and (max-width: 65em) {
    .release-history-wrap {
      overflow-x: auto; } }
.release-history {
  display: table;
  overflow: visible;
  border-collapse: separate;
  border-spacing: 0;
  width: 100%;
  font-size: var(--fs-300);
  /* The line label, version range, ISO release date and the status
     phrase ("Security until 2028-11" etc.) must never wrap: an ISO
     date breaking on a hyphen is jarring, and "42.2.27.jre6" or
     "42.7.0-42.7.4" sliced mid-token is unreadable. */
  /* The active recommended segment of the active line — gets a quiet
     tint so a reader scanning the table lands on it first. */ }
  .release-history th, .release-history td {
    padding: var(--space-2xs) var(--space-s);
    border-block-end: var(--border-subtle);
    vertical-align: top;
    text-align: start; }
  .release-history thead th {
    background: var(--clr-neutral-100);
    font-weight: 600;
    color: var(--clr-neutral-700);
    position: sticky;
    inset-block-start: var(--navbar-height);
    z-index: 1;
    box-shadow: inset 0 -1px 0 var(--clr-neutral-300); }
  .release-history__line, .release-history__range, .release-history__date, .release-history__status {
    white-space: nowrap; }
  .release-history__line code, .release-history__range code {
    font-family: ui-monospace, "JetBrains Mono", Menlo, Consolas, monospace; }
  .release-history__current {
    background: var(--clr-primary-50, var(--clr-neutral-100)); }

/* Search Form
 *
 * The search box is a self-contained popover root: the input and submit
 * button sit on top, the live results dropdown is positioned absolutely
 * below. Width is fixed (not hover-expanded) because live results need
 * a stable target the user can read while typing.
 */
.searchBox {
  position: relative; }
  .searchBox__form {
    display: flex;
    align-items: center;
    background: var(--clr-primary-500);
    height: 45px;
    border-radius: 45px;
    padding: 2.5px 2.5px 2.5px 14px;
    gap: 6px;
    min-width: 240px; }
    @media only screen and (max-width: 65em) {
      .searchBox__form {
        min-width: 0;
        width: 100%; } }
    .searchBox__form:focus-within {
      box-shadow: 0 0 0 3px #a0bfee; }

.searchInput {
  border: none;
  background: none;
  outline: none;
  padding: 0;
  color: var(--clr-white);
  line-height: 40px;
  flex: 1 1 auto;
  min-width: 0;
  font-size: 0.95rem; }
  .searchInput::placeholder {
    color: rgba(255, 255, 255, 0.75); }
  .searchInput::-webkit-search-decoration, .searchInput::-webkit-search-cancel-button, .searchInput::-webkit-search-results-button, .searchInput::-webkit-search-results-decoration {
    -webkit-appearance: none; }

.searchHint {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 22px;
  height: 22px;
  padding: 0 6px;
  border: 1px solid rgba(255, 255, 255, 0.5);
  border-radius: 4px;
  color: var(--clr-white);
  font-family: var(--font-mono, ui-monospace, SFMono-Regular, Menlo, monospace);
  font-size: 0.75rem;
  line-height: 1;
  background: rgba(255, 255, 255, 0.12);
  user-select: none; }
  .searchBox:focus-within .searchHint, .searchInput:not(:placeholder-shown) ~ .searchHint {
    display: none; }
  @media only screen and (max-width: 40em) {
    .searchHint {
      display: none; } }
.searchButton {
  color: var(--clr-white);
  flex: 0 0 auto;
  width: 40px;
  height: 40px;
  border-radius: 50%;
  border: 1px solid var(--clr-white);
  background: var(--clr-primary-500);
  display: flex;
  justify-content: center;
  align-items: center;
  cursor: pointer;
  transition: background 0.2s, color 0.2s;
  padding: 0; }
  .searchButton:hover, .searchBox:focus-within .searchButton {
    background: var(--clr-white); }
    .searchButton:hover svg, .searchBox:focus-within .searchButton svg {
      fill: var(--clr-primary-500); }

/* Live results dropdown */
.searchResults {
  position: absolute;
  top: calc(100% + 6px);
  right: 0;
  width: min(840px, calc(100vw - 2 * var(--container-spacing, 1rem)));
  max-height: min(70vh, 600px);
  overflow-y: auto;
  background: var(--clr-white);
  border-radius: 8px;
  box-shadow: 0 1px 3px rgba(41, 55, 86, 0.12), 0 8px 24px rgba(41, 55, 86, 0.18);
  z-index: 3; }
  .searchResults__list {
    list-style: none;
    margin: 0;
    padding: 6px 0; }
  .searchResults__item {
    margin: 0;
    padding: 0; }
    .searchResults__item.is-active .searchResults__link,
    .searchResults__item .searchResults__link:focus {
      background: var(--clr-primary-100, #eef3fc);
      outline: none; }
  .searchResults__link {
    display: block;
    padding: 10px 16px;
    color: var(--clr-indigo);
    text-decoration: none; }
    .searchResults__link:hover {
      text-decoration: none; }
  .searchResults__title {
    color: var(--clr-indigo);
    font-weight: 600;
    font-size: 1rem;
    line-height: 1.3; }
  .searchResults__snippet {
    color: var(--clr-neutral-600, #525252);
    font-size: 0.875rem;
    line-height: 1.45;
    margin-top: 3px;
    display: -webkit-box;
    -webkit-line-clamp: 3;
    -webkit-box-orient: vertical;
    overflow: hidden; }
  .searchResults__ellipsis {
    color: var(--clr-neutral-500, #858585); }
  .searchResults__empty {
    padding: 16px;
    color: var(--clr-neutral-600, #525252);
    font-size: 0.9rem; }
  .searchResults mark {
    background: #ffe299;
    color: inherit;
    padding: 0 1px;
    border-radius: 2px; }

/* Body-level search-term highlights left behind by search-highlight.js
   after a click from the dropdown. Same hue as the dropdown mark for
   visual continuity, slightly lighter so the underlying prose still reads
   comfortably across whole paragraphs. */
mark.search-hit {
  background: #ffebb8;
  color: inherit;
  padding: 0 1px;
  border-radius: 2px;
  box-decoration-break: clone;
  -webkit-box-decoration-break: clone; }

table {
  border-collapse: collapse;
  font-size: 0.9em;
  display: block;
  overflow-x: auto;
  width: 100%;
  border-collapse: collapse; }
  table th,
  table td {
    border: 2px solid var(--clr-primary-200);
    padding: 12px 15px; }

thead tr {
  background-color: var(--clr-primary-400);
  color: var(--clr-white);
  text-align: left;
  font-weight: 600; }

tbody tr:nth-of-type(even) {
  background-color: var(--clr-neutral-100); }

tbody tr:hover {
  color: var(--clr-secondary-500); }

.toc {
  width: 20%;
  padding-top: 0.1rem;
  align-self: start;
  position: sticky;
  top: 9rem; }
  .toc__head {
    margin-bottom: 0.8em;
    font-weight: 700;
    font-size: 0.9rem; }
  .toc nav {
    border-left: 1px solid var(--clr-neutral-300);
    overflow-y: auto;
    max-height: calc(100vh - 9rem); }
  .toc ul {
    list-style: none;
    font-size: 0.9rem;
    margin: 0.5rem;
    padding: 0;
    padding-left: 0.25rem; }
    .toc ul li:not(last-child) {
      margin-bottom: 0.125em; }
  .toc a {
    text-decoration: underline; }
  @media only screen and (max-width: 65em) {
    .toc {
      display: none; } }
.changelogs {
  /* REL42.x.y — the link target. Monospace + weight 600 makes
       the version column scan as a column even when summary text
       wraps to multiple lines. Link blue per the styling-pass
       discipline (links and CTAs only). */
  /* ISO date — tabular-nums keeps each digit the same advance
       width, so dates column-align even though the font is
       proportional. */ }
  .changelogs__list {
    list-style: none;
    margin: var(--space-l) 0 0;
    padding: 0; }
  .changelogs__entry {
    display: grid;
    grid-template-columns: max-content max-content 1fr;
    gap: var(--space-s) var(--space-m);
    align-items: baseline;
    padding: 0.55em 0;
    border-bottom: 1px solid var(--clr-neutral-200); }
    .changelogs__entry:last-child {
      border-bottom: 0; }
  .changelogs__version {
    font-family: 'JetBrainsMono', monospace;
    font-weight: 600;
    font-size: 0.95rem;
    color: var(--clr-primary-400);
    text-decoration: underline;
    white-space: nowrap; }
  .changelogs__date {
    color: var(--clr-neutral-600);
    font-size: 0.95rem;
    font-variant-numeric: tabular-nums;
    white-space: nowrap; }
  .changelogs__summary {
    color: var(--clr-neutral-700);
    line-height: 1.45; }
  @media only screen and (max-width: 40em) {
    .changelogs {
      /* On narrow screens the summary drops onto its own row
           below the version+date pair so it doesn't squeeze the
           date column. */ }
      .changelogs__entry {
        grid-template-columns: max-content 1fr;
        gap: 0.2em var(--space-s); }
      .changelogs__summary {
        grid-column: 1 / -1; } }
.community ul ::marker {
  content: "👤"; }

.community ul > li {
  padding-left: 0.5em; }

.doc .article {
  width: 100%;
  padding-inline: var(--container-spacing); }
  @media only screen and (min-width: 65em) {
    .doc .article {
      width: 60%; } }
@media only screen and (min-width: 65em) {
  .doc {
    display: flex; } }

.download {
  margin-block: var(--container-spacing); }
  .download p {
    max-width: 100%; }
  .download .past-versions > li {
    padding-left: 0.25em; }
  .download .past-versions__date {
    margin-left: 0.5em;
    color: var(--clr-neutral-600);
    font-size: 0.875em; }

.accordion {
  margin-block: var(--container-spacing); }
  .accordion__item {
    border-bottom: 2px solid var(--clr-primary-200); }
  .accordion__btn {
    position: relative;
    display: block;
    text-align: left;
    width: 100%;
    padding: var(--primary-spacing) 0;
    font-size: var(--fs-400);
    border: none;
    background: none;
    outline: none;
    cursor: pointer; }
    .accordion__btn:hover, .accordion__btn:focus {
      color: var(--clr-primary-200); }
    .accordion__btn__icon {
      display: inline-block;
      position: absolute;
      top: 18px;
      right: 0;
      width: 22px;
      height: 22px;
      border: 2px solid;
      border-radius: 22px; }
      .accordion__btn__icon::before {
        display: block;
        position: absolute;
        content: '';
        top: 9px;
        left: 5px;
        width: 10px;
        height: 2px;
        background: currentColor; }
      .accordion__btn__icon::after {
        display: block;
        position: absolute;
        content: '';
        top: 5px;
        left: 9px;
        width: 2px;
        height: 10px;
        background: currentColor; }
  .accordion__btn[aria-expanded='true'] {
    color: var(--clr-primary-200);
    border-bottom: 2px solid var(--clr-primary-200); }
    .accordion__btn[aria-expanded='true'] .accordion__btn__icon::after {
      width: 0; }
    .accordion__btn[aria-expanded='true'] + .accordion__content {
      opacity: 1;
      max-height: 50em;
      transition: all 200ms linear;
      will-change: opacity, max-height; }
  .accordion__content {
    opacity: 0;
    max-height: 0;
    overflow: hidden;
    transition: opacity 200ms linear, max-height 200ms linear;
    will-change: opacity, max-height; }
    .accordion__content__inner {
      margin: 2em 0;
      font-size: var(--fs-300); }
      .accordion__content__inner li:not(last-child) {
        margin-bottom: 0.5em; }

.home {
  max-width: 70rem;
  margin: var(--box-spacing) auto;
  padding-inline: var(--box-spacing); }
  .home > * {
    margin-bottom: var(--section-spacing); }
  .home h1,
  .home h2 {
    color: var(--clr-primary-400); }
  @media only screen and (min-width: 65em) {
    .home .hero {
      display: flex;
      justify-content: space-between; } }
  @media only screen and (max-width: 65em) {
    .home .hero {
      width: fit-content;
      margin-left: auto;
      margin-right: auto;
      text-align: center;
      align-items: center; } }
.home__decision {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: clamp(1.5rem, 3vw, 2.5rem);
  align-items: start; }
  @media only screen and (min-width: 65em) {
    .home__decision {
      grid-template-columns: minmax(0, 1.15fr) minmax(0, 0.85fr); } }
.hero {
  align-items: center;
  column-gap: 4em;
  /* Elephant illustration stays but no longer dominates the fold;
       the content side is the primary task-flow target. */ }
  .hero__img {
    width: 28%; }
    @media only screen and (max-width: 65em) {
      .hero__img {
        width: 50%; } }
  .hero__content {
    width: 62%;
    /* Title kept under one viewport-line on a typical desktop so
           the install path stays visible above the fold. Previous
           5.4rem forced wrap on most widths. */
    /* Tertiary links: a quiet row of three text links under the
           CTAs, separated by middots. They are not the primary task
           but should be reachable in one click. */
    /* Badge bar: shields.io-style badges. Each one is an
           actionable signal (Maven Central version, Javadoc,
           license, OpenSSF Scorecard) — not decoration. */ }
    @media only screen and (max-width: 65em) {
      .hero__content {
        width: 100%; } }
    .hero__content__head {
      font-size: 3.5rem;
      line-height: 1.15; }
      @media only screen and (max-width: 65em) {
        .hero__content__head {
          font-size: 2.8rem; } }
      @media only screen and (max-width: 40em) {
        .hero__content__head {
          font-size: 2.2rem; } }
    .hero__content__desc {
      font-size: 1.25rem;
      padding-block: 0.5em;
      font-weight: 600;
      line-height: 1.5; }
      @media only screen and (max-width: 65em) {
        .hero__content__desc {
          font-size: 1.05rem; } }
    .hero__content__actions {
      padding-top: 1.5em;
      display: flex;
      column-gap: var(--primary-spacing);
      font-size: 1.25rem; }
      .hero__content__actions a {
        text-decoration: none; }
      @media only screen and (max-width: 65em) {
        .hero__content__actions {
          justify-content: center; } }
    .hero__content__links {
      list-style: none;
      margin: 0;
      padding: 1em 0 0;
      display: flex;
      flex-wrap: wrap;
      gap: 0.25em 1em;
      font-size: 0.95rem;
      color: var(--clr-neutral-600); }
      .hero__content__links li + li::before {
        content: "·";
        margin-inline-end: 1em;
        color: var(--clr-neutral-400); }
      .hero__content__links a {
        color: var(--clr-primary-400);
        text-decoration: underline; }
      @media only screen and (max-width: 65em) {
        .hero__content__links {
          justify-content: center; } }
    .hero__content__badges {
      list-style: none;
      margin: 0;
      padding: 1.25em 0 0;
      display: flex;
      flex-wrap: wrap;
      gap: 0.4em 0.6em; }
      .hero__content__badges img {
        display: block; }
      @media only screen and (max-width: 65em) {
        .hero__content__badges {
          justify-content: center; } }
.quick-install {
  min-width: 0;
  /* Two stacked code-tabs blocks (Maven, Gradle) share one grid
       track sized to the widest block (Maven XML). Without this,
       Gradle hugs its single-line snippet and the right edges step
       — visually noisy under a shared heading. minmax(0, max-content)
       lets the track shrink on narrow viewports (inner <pre>
       overflow-scrolls) while still capping at the natural width. */
  /* Override the component's default `margin-block` and intrinsic
       `width: max-content` so the children stretch to fill the
       shared grid track instead of sizing to their own content. */ }
  .quick-install__head {
    font-size: 1.6rem;
    margin-bottom: var(--space-s);
    line-height: 1.15; }
    @media only screen and (max-width: 65em) {
      .quick-install__head {
        text-align: center; } }
  .quick-install__snippets {
    display: grid;
    grid-template-columns: minmax(0, max-content);
    gap: var(--space-m);
    max-width: 100%; }
    @media only screen and (max-width: 65em) {
      .quick-install__snippets {
        justify-content: center; } }
  .quick-install .code-tabs {
    margin-block: 0;
    width: auto; }

.release {
  min-width: 0;
  /* No box around the release card. The Quick-install block on the
       left already carries the bordered + filled visual treatment
       (its inner code-tabs container), and matching it here forced
       two heavy containers side-by-side with different content
       densities (mono-code vs proportional text) — read messy. The
       release block now flows as open text under its heading; the
       grid spacing on .home__decision still separates it from the
       neighbour. */
  /* Version (left) and date (right), baseline-aligned. On phones
       the row collapses to centred stack. */
  /* Java / PostgreSQL pills. Decorative neutral chips — not
       links, not CTAs. Border and text both neutral; the styling
       pass moved them out of blue. */ }
  .release__head {
    font-size: 1.6rem;
    margin-bottom: var(--space-s);
    line-height: 1.15; }
    @media only screen and (max-width: 65em) {
      .release__head {
        text-align: center; } }
  .release__card {
    padding: 0; }
  .release__primary {
    margin: 0;
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    align-items: baseline;
    gap: 0.4em 1em; }
    @media only screen and (max-width: 65em) {
      .release__primary {
        justify-content: center; } }
  .release__version {
    font-size: 1.7rem;
    font-weight: 600;
    color: var(--clr-neutral-700);
    line-height: 1.15; }
  .release__date {
    color: var(--clr-neutral-600); }
  .release__pills {
    list-style: none;
    margin: 0.7em 0 0;
    padding: 0;
    display: flex;
    flex-wrap: wrap;
    gap: 0.4em 0.6em; }
    .release__pills li {
      display: inline-block;
      padding: 0.25em 0.8em;
      border: 1px solid var(--clr-neutral-300);
      border-radius: 100vmax;
      background: var(--clr-white);
      color: var(--clr-neutral-700);
      font-weight: 500;
      font-size: 0.95rem;
      line-height: 1.3; }
    @media only screen and (max-width: 65em) {
      .release__pills {
        justify-content: center; } }
  .release__summary {
    margin: 0.85em 0 0;
    color: var(--clr-neutral-700);
    line-height: 1.45; }
    @media only screen and (max-width: 65em) {
      .release__summary {
        text-align: center; } }
  .release__sep {
    color: var(--clr-neutral-400);
    margin-inline: 0.15em; }
  .release__actions {
    list-style: none;
    margin: 0.9em 0 0;
    padding: 0;
    display: flex;
    flex-wrap: wrap;
    gap: 0.3em 1.25em; }
    .release__actions a {
      color: var(--clr-primary-400);
      text-decoration: underline; }
    @media only screen and (max-width: 65em) {
      .release__actions {
        justify-content: center;
        text-align: center; } }
  .release__recent {
    margin: 0.9em 0 0 0;
    padding-top: 0.85em;
    border-top: 1px solid var(--clr-neutral-300);
    color: var(--clr-neutral-600); }
    .release__recent a {
      color: var(--clr-primary-400);
      text-decoration: underline;
      font-weight: 500; }
    @media only screen and (max-width: 65em) {
      .release__recent {
        text-align: center; } }
.tasks {
  /* Card-as-link: the whole tile is the click target. No underline
       on the static state; a quiet border colour shift + slight lift
       on hover/focus gives the affordance without competing with the
       cards' role as scannable navigation. */
  /* Tile title: the whole tile is the link target, so the
       title itself isn't the active element — blue would
       miscue. Neutral 700 + weight 600 carries hierarchy without
       competing with CTAs. */ }
  .tasks__head {
    font-size: 1.6rem;
    margin-bottom: var(--space-s);
    line-height: 1.15; }
    @media only screen and (max-width: 65em) {
      .tasks__head {
        text-align: center; } }
  .tasks__grid {
    list-style: none;
    margin: 0;
    padding: 0;
    display: grid;
    gap: var(--space-m);
    grid-template-columns: repeat(3, minmax(0, 1fr)); }
    @media only screen and (max-width: 65em) {
      .tasks__grid {
        grid-template-columns: repeat(2, minmax(0, 1fr)); } }
    @media only screen and (max-width: 40em) {
      .tasks__grid {
        grid-template-columns: minmax(0, 1fr); } }
  .tasks__item {
    margin: 0;
    padding: 0; }
  .tasks__link {
    display: block;
    height: 100%;
    padding: var(--space-m);
    border: var(--border-subtle);
    border-radius: var(--radius-m);
    background: var(--clr-white);
    color: inherit;
    text-decoration: none;
    transition: border-color 0.2s, transform 0.2s; }
    .tasks__link:hover, .tasks__link:focus-visible {
      border-color: var(--clr-primary-300);
      transform: translateY(-1px);
      text-decoration: none; }
    .tasks__link:focus-visible {
      outline: 2px solid var(--clr-primary-300);
      outline-offset: 2px; }
  .tasks__title {
    margin: 0;
    font-size: 1.05rem;
    font-weight: 600;
    color: var(--clr-neutral-700);
    line-height: 1.3; }
  .tasks__desc {
    margin: 0.4em 0 0;
    font-size: 0.95rem;
    color: var(--clr-neutral-600);
    line-height: 1.45; }

.why__head {
  font-size: 1.6rem;
  margin-bottom: var(--space-s);
  line-height: 1.15; }
  @media only screen and (max-width: 65em) {
    .why__head {
      text-align: center; } }
.why__list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: var(--space-s) var(--space-l);
  grid-template-columns: repeat(2, minmax(0, 1fr)); }
  @media only screen and (max-width: 65em) {
    .why__list {
      grid-template-columns: minmax(0, 1fr); } }
  .why__list li {
    margin: 0;
    line-height: 1.5;
    /* Bullet lead — bold + dark neutral. Was blue; moved
               out as part of the styling pass since these are
               prose strongs, not links or CTAs. */ }
    .why__list li strong {
      display: block;
      font-weight: 600;
      color: var(--clr-neutral-700);
      margin-bottom: 0.15em; }

.closing__grid {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: var(--space-s) var(--space-l);
  grid-template-columns: repeat(4, minmax(0, 1fr)); }
  @media only screen and (max-width: 65em) {
    .closing__grid {
      grid-template-columns: repeat(2, minmax(0, 1fr)); } }
  @media only screen and (max-width: 40em) {
    .closing__grid {
      grid-template-columns: minmax(0, 1fr); } }
.closing__item {
  margin: 0;
  padding: 0; }

.closing__link {
  display: block;
  color: inherit;
  text-decoration: none;
  /* Item label — neutral by default; turns blue on hover
           or keyboard focus, mirroring the link-affordance rule
           used elsewhere in the site. The whole `<a>` is the
           target, so the static blue would over-claim the role. */ }
  .closing__link:hover strong, .closing__link:focus-visible strong {
    color: var(--clr-primary-400); }
  .closing__link:focus-visible {
    outline: 2px solid var(--clr-primary-300);
    outline-offset: 2px;
    border-radius: var(--radius-s); }
  .closing__link strong {
    display: block;
    font-size: 1rem;
    font-weight: 600;
    color: var(--clr-neutral-700);
    line-height: 1.3;
    text-decoration: underline;
    transition: color 0.15s; }
  .closing__link span {
    display: block;
    margin-top: 0.2em;
    font-size: 0.85rem;
    color: var(--clr-neutral-600);
    line-height: 1.4; }

.license {
  margin-block: var(--container-spacing); }
  .license__page {
    padding: var(--primary-spacing);
    border: 2px solid var(--clr-indigo);
    box-shadow: 10px 10px var(--clr-primary-100); }

.security h4 {
  color: var(--clr-primary-500); }

.container {
  padding: 0 1.5rem;
  max-width: var(--container-width);
  margin-inline: auto; }

.flow > * + * {
  margin-top: var(--flow-spacer, 0.75em); }