:root {
    color-scheme: light;
}

body.flab-shell {
    --flab-ink: #111827;
    --flab-paper: #f7f8f5;
    --flab-panel: #ffffff;
    --flab-line: #d8ddd5;
    --flab-graphite: #3b3f46;
    --flab-muted: #6b7280;
    --flab-blue: #2b7fff;
    --flab-amber: #f5b700;
    --flab-mint: #42d9a3;
    --flab-red: #c2413a;
    --flab-code: #101722;
    --flab-code-line: #243244;
    --flab-radius: 8px;
    --flab-shadow: 0 18px 48px rgba(17, 24, 39, 0.10);
    margin: 0;
    min-height: 100vh;
    background:
        repeating-linear-gradient(0deg, rgba(17, 24, 39, 0.035) 0, rgba(17, 24, 39, 0.035) 1px, transparent 1px, transparent 32px),
        repeating-linear-gradient(90deg, rgba(17, 24, 39, 0.025) 0, rgba(17, 24, 39, 0.025) 1px, transparent 1px, transparent 32px),
        var(--flab-paper);
    color: var(--flab-ink);
    font-family: Inter, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
    line-height: 1.6;
}

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

.flab-shell a {
    color: inherit;
}

.flab-shell img {
    max-width: 100%;
    height: auto;
}

.flab-skip {
    position: fixed;
    z-index: 1000;
    top: 0.75rem;
    left: 0.75rem;
    transform: translateY(-150%);
    padding: 0.7rem 1rem;
    border: 2px solid var(--flab-blue);
    border-radius: var(--flab-radius);
    background: var(--flab-panel);
    color: var(--flab-ink);
}

.flab-skip:focus {
    transform: translateY(0);
}

.flab-shell :focus-visible {
    outline: 3px solid var(--flab-blue);
    outline-offset: 3px;
}

.flab-header {
    position: sticky;
    z-index: 50;
    top: 0;
    border-bottom: 1px solid rgba(17, 24, 39, 0.12);
    background: rgba(247, 248, 245, 0.96);
    backdrop-filter: blur(14px);
}

.flab-header__inner,
.flab-main,
.flab-footer__inner {
    width: min(1180px, calc(100vw - 40px));
    margin-inline: auto;
}

.flab-header__inner {
    display: flex;
    align-items: center;
    gap: 1rem;
    min-height: 72px;
}

.flab-brand {
    display: inline-flex;
    align-items: baseline;
    gap: 0.45rem;
    text-decoration: none;
    white-space: nowrap;
}

.flab-logo-img {
    display: block;
    max-height: 42px;
    width: auto;
}

.flab-brand__name {
    font-family: "IBM Plex Sans Condensed", Inter, sans-serif;
    font-size: 1.2rem;
    font-weight: 700;
}

.flab-brand__lab {
    padding: 0.1rem 0.45rem;
    border: 1px solid var(--flab-line);
    border-radius: var(--flab-radius);
    color: var(--flab-graphite);
    font-family: "JetBrains Mono", monospace;
    font-size: 0.78rem;
}

.flab-menu-toggle {
    display: none;
    align-items: center;
    gap: 0.55rem;
    min-height: 44px;
    padding: 0.55rem 0.8rem;
    border: 1px solid var(--flab-line);
    border-radius: var(--flab-radius);
    background: var(--flab-panel);
    color: var(--flab-ink);
    font: 600 0.9rem Inter, sans-serif;
}

.flab-menu-toggle__mark {
    display: inline-block;
    width: 1rem;
    height: 0.7rem;
    border-top: 2px solid currentColor;
    border-bottom: 2px solid currentColor;
    position: relative;
}

.flab-menu-toggle__mark::before {
    content: "";
    position: absolute;
    top: 50%;
    left: 0;
    width: 100%;
    border-top: 2px solid currentColor;
    transform: translateY(-50%);
}

.flab-nav {
    margin-left: auto;
}

.flab-menu-list {
    display: flex;
    align-items: center;
    gap: 0.35rem;
    margin: 0;
    padding: 0;
    list-style: none;
}

.flab-menu-list a,
.flab-menu-list span,
.flab-blog-link {
    display: inline-flex;
    align-items: center;
    min-height: 40px;
    padding: 0.55rem 0.7rem;
    border-radius: var(--flab-radius);
    color: var(--flab-graphite);
    font: 600 0.88rem Inter, sans-serif;
    text-decoration: none;
}

.flab-menu-list a:hover,
.flab-menu-list .is-active a,
.flab-menu-list a.is-active {
    background: var(--flab-ink);
    color: var(--flab-paper);
}

.flab-blog-link {
    border: 1px solid var(--flab-line);
    background: rgba(255, 255, 255, 0.7);
    white-space: nowrap;
}

.flab-blog-link:hover {
    border-color: var(--flab-blue);
    color: var(--flab-blue);
}

.flab-main {
    padding-block: 1.25rem 5rem;
}

.flab-runline,
.flab-article-runline,
.flab-card__meta,
.flab-card__foot {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem 0.75rem;
    align-items: center;
    font-family: "JetBrains Mono", monospace;
    font-size: 0.78rem;
    color: var(--flab-muted);
}

.flab-runline {
    margin-block: 1.25rem 1.6rem;
    padding: 0.75rem 0;
    border-block: 1px solid rgba(17, 24, 39, 0.12);
}

.flab-layout {
    display: block;
}

.flab-layout__main,
.flab-layout__main > * {
    min-width: 0;
    max-width: 100%;
}

.flab-layout--rail {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 280px;
    gap: 2rem;
    align-items: start;
}

.flab-layout__rail {
    position: sticky;
    top: 96px;
}

.flab-module-band {
    margin-block: 2rem;
}

.flab-module,
.flab-rail-card,
.flab-empty,
.flab-patterns__panel,
.flab-mini-grid article {
    border: 1px solid var(--flab-line);
    border-radius: var(--flab-radius);
    background: rgba(255, 255, 255, 0.82);
}

.flab-module {
    padding: 1.25rem;
}

.flab-module__title {
    margin: 0 0 0.75rem;
    font: 700 1rem "IBM Plex Sans Condensed", Inter, sans-serif;
}

.flab-hero {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(360px, 0.72fr);
    gap: 1.5rem;
    align-items: stretch;
    min-height: 430px;
    margin-bottom: 4rem;
}

.flab-hero__copy,
.flab-latest-panel,
.flab-terminal {
    border: 1px solid var(--flab-line);
    border-radius: var(--flab-radius);
    background: rgba(255, 255, 255, 0.82);
    box-shadow: var(--flab-shadow);
}

.flab-hero__copy {
    display: flex;
    flex-direction: column;
    justify-content: center;
    padding: clamp(2rem, 4vw, 4rem);
}

.flab-kicker {
    margin: 0 0 0.75rem;
    color: var(--flab-blue);
    font-family: "JetBrains Mono", monospace;
    font-size: 0.78rem;
    font-weight: 700;
    text-transform: uppercase;
}

.flab-hero h1,
.flab-section-head h1,
.flab-article-hero h1 {
    max-width: 12ch;
    margin: 0;
    color: var(--flab-ink);
    font-family: "IBM Plex Sans Condensed", Inter, sans-serif;
    font-size: clamp(3rem, 7vw, 6.7rem);
    font-weight: 700;
    line-height: 0.95;
}

.flab-hero__copy > p:not(.flab-kicker) {
    max-width: 650px;
    margin: 1.2rem 0 0;
    color: var(--flab-graphite);
    font-size: 1.15rem;
}

.flab-hero__actions,
.flab-card__actions,
.flab-rail-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 0.65rem;
    margin-top: 1.4rem;
}

.flab-button,
.flab-code-copy {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 42px;
    padding: 0.65rem 0.9rem;
    border: 1px solid var(--flab-line);
    border-radius: var(--flab-radius);
    background: var(--flab-panel);
    color: var(--flab-ink);
    font: 700 0.9rem Inter, sans-serif;
    text-decoration: none;
    cursor: pointer;
}

.flab-button:hover,
.flab-code-copy:hover {
    border-color: var(--flab-blue);
    color: var(--flab-blue);
}

.flab-button--primary {
    border-color: var(--flab-blue);
    background: var(--flab-blue);
    color: #ffffff;
}

.flab-button--primary:hover {
    background: #125fd3;
    color: #ffffff;
}

.flab-terminal {
    align-self: stretch;
    display: flex;
    flex-direction: column;
    width: 100%;
    min-width: 0;
    overflow: hidden;
    background: var(--flab-code);
    color: #dbe7f3;
}

.flab-terminal__bar,
.flab-code-head {
    display: flex;
    justify-content: space-between;
    gap: 1rem;
    padding: 0.8rem 1rem;
    border-bottom: 1px solid rgba(255, 255, 255, 0.14);
    color: #a6b6c8;
    font-family: "JetBrains Mono", monospace;
    font-size: 0.78rem;
}

.flab-terminal pre,
.flab-code-block pre {
    flex: 1;
    min-width: 0;
    margin: 0;
    overflow: auto;
    padding: 1.2rem;
    color: #e6edf5;
    font: 0.9rem/1.75 "JetBrains Mono", monospace;
}

.flab-terminal pre code,
.flab-code-block pre code {
    white-space: pre-wrap;
    overflow-wrap: anywhere;
}

.flab-latest-panel {
    align-self: stretch;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    padding: clamp(1.25rem, 2.5vw, 2rem);
}

.flab-latest-panel__head h2 {
    margin: 0;
    font-family: "IBM Plex Sans Condensed", Inter, sans-serif;
    font-size: clamp(1.9rem, 3.2vw, 3rem);
    line-height: 1;
}

.flab-latest-list {
    display: grid;
    gap: 0.75rem;
    margin: 1.4rem 0 0;
    padding: 0;
    list-style: none;
}

.flab-latest-list a {
    display: grid;
    gap: 0.55rem;
    padding: 0.95rem;
    border: 1px solid rgba(59, 63, 70, 0.14);
    border-radius: var(--flab-radius);
    background: rgba(247, 248, 245, 0.74);
    text-decoration: none;
}

.flab-latest-list .flab-badge {
    justify-self: start;
}

.flab-latest-list a:hover {
    border-color: rgba(43, 127, 255, 0.52);
}

.flab-latest-list strong {
    font-family: "IBM Plex Sans Condensed", Inter, sans-serif;
    font-size: 1.18rem;
    line-height: 1.15;
}

.flab-latest-list a > span:last-child,
.flab-latest-panel__empty {
    color: var(--flab-muted);
    font: 0.78rem "JetBrains Mono", monospace;
}

.flab-section-head {
    margin-bottom: 1.5rem;
}

.flab-section-head--row {
    display: flex;
    justify-content: space-between;
    gap: 1rem;
    align-items: end;
}

.flab-section-head h1,
.flab-section-head h2,
.flab-patterns h2 {
    margin: 0;
    color: var(--flab-ink);
    font-family: "IBM Plex Sans Condensed", Inter, sans-serif;
    font-weight: 700;
    line-height: 1;
}

.flab-section-head h2,
.flab-patterns h2 {
    font-size: clamp(2rem, 4vw, 3.35rem);
}

.flab-section-head__text,
.flab-section-head__note {
    max-width: 720px;
    margin: 0.75rem 0 0;
    color: var(--flab-graphite);
}

.flab-section-head__note {
    font-family: "JetBrains Mono", monospace;
    font-size: 0.8rem;
}

.flab-card-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 1rem;
}

.flab-card {
    display: flex;
    flex-direction: column;
    min-height: 340px;
    overflow: hidden;
    border: 1px solid var(--flab-line);
    border-radius: var(--flab-radius);
    background: rgba(255, 255, 255, 0.88);
    box-shadow: 0 10px 28px rgba(17, 24, 39, 0.06);
    transition: transform 160ms ease, border-color 160ms ease, box-shadow 160ms ease;
}

.flab-card:hover {
    transform: translateY(-3px);
    border-color: rgba(43, 127, 255, 0.55);
    box-shadow: var(--flab-shadow);
}

.flab-card__media {
    display: block;
    aspect-ratio: 16 / 9;
    overflow: hidden;
    background: #e8ede7;
}

.flab-card__media img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

.flab-card__body {
    display: flex;
    flex: 1;
    flex-direction: column;
    padding: 1.1rem;
}

.flab-card__title {
    margin: 0.85rem 0 0;
    font-family: "IBM Plex Sans Condensed", Inter, sans-serif;
    font-size: 1.42rem;
    line-height: 1.08;
}

.flab-card__title a {
    text-decoration: none;
}

.flab-card__title a:hover {
    color: var(--flab-blue);
}

.flab-card__excerpt {
    display: -webkit-box;
    -webkit-line-clamp: 3;
    -webkit-box-orient: vertical;
    overflow: hidden;
    margin: 0.85rem 0 0;
    color: var(--flab-graphite);
}

.flab-stack {
    display: flex;
    flex-wrap: wrap;
    gap: 0.4rem;
    margin-top: 1rem;
}

.flab-stack span {
    display: inline-flex;
    align-items: center;
    min-height: 28px;
    padding: 0.25rem 0.5rem;
    border: 1px solid rgba(59, 63, 70, 0.16);
    border-radius: var(--flab-radius);
    background: rgba(247, 248, 245, 0.9);
    color: var(--flab-graphite);
    font: 600 0.75rem "JetBrains Mono", monospace;
}

.flab-card__foot {
    margin-top: auto;
    padding-top: 1.2rem;
}

.flab-badge {
    display: inline-flex;
    align-items: center;
    min-height: 28px;
    padding: 0.25rem 0.55rem;
    border: 1px solid currentColor;
    border-radius: var(--flab-radius);
    color: var(--flab-blue);
    font: 700 0.75rem "JetBrains Mono", monospace;
}

.flab-status--stable {
    color: #047857;
}

.flab-status--draft,
.flab-status--needs-review {
    color: #a16207;
}

.flab-status--legacy,
.flab-status--deprecated {
    color: var(--flab-red);
}

.flab-status-note {
    max-width: 720px;
    margin: 0.85rem 0 0;
    color: var(--flab-muted);
    font: 0.85rem "JetBrains Mono", monospace;
}

.flab-archive-strip {
    margin-top: 2rem;
    padding: 1.2rem;
    border: 1px solid var(--flab-line);
    border-radius: var(--flab-radius);
    background: rgba(255, 255, 255, 0.82);
}

.flab-archive-strip__head {
    display: flex;
    align-items: end;
    justify-content: space-between;
    gap: 1rem;
}

.flab-archive-strip__head h2 {
    margin: 0;
    font-family: "IBM Plex Sans Condensed", Inter, sans-serif;
    font-size: clamp(1.7rem, 3vw, 2.5rem);
    line-height: 1;
}

.flab-archive-strip__head p:not(.flab-kicker) {
    max-width: 420px;
    margin: 0;
    color: var(--flab-muted);
}

.flab-archive-list {
    display: grid;
    gap: 0.55rem;
    margin: 1rem 0 0;
    padding: 0;
    list-style: none;
}

.flab-archive-link {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    min-height: 58px;
    padding: 0.75rem 0.9rem;
    border: 1px solid rgba(59, 63, 70, 0.14);
    border-radius: var(--flab-radius);
    background: rgba(247, 248, 245, 0.68);
    text-decoration: none;
}

.flab-archive-link:hover {
    border-color: rgba(43, 127, 255, 0.52);
}

.flab-archive-link__title {
    min-width: 0;
    font-weight: 700;
}

.flab-archive-link__meta {
    display: flex;
    flex: 0 0 auto;
    flex-wrap: wrap;
    align-items: center;
    justify-content: flex-end;
    gap: 0.45rem 0.65rem;
    color: var(--flab-muted);
    font: 0.76rem "JetBrains Mono", monospace;
}

.flab-patterns {
    display: grid;
    grid-template-columns: 0.9fr 1.1fr;
    gap: 1rem;
    margin-top: 4rem;
}

.flab-patterns__panel,
.flab-mini-grid article,
.flab-empty {
    padding: 1.3rem;
}

.flab-mini-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 1rem;
}

.flab-mini-grid article {
    min-height: 150px;
}

.flab-mini-grid span {
    display: block;
    margin-bottom: 0.75rem;
    color: var(--flab-blue);
    font: 700 0.75rem "JetBrains Mono", monospace;
}

.flab-mini-grid strong {
    display: block;
    font-size: 1rem;
    line-height: 1.35;
}

.flab-article-hero {
    max-width: 920px;
    margin-bottom: 2rem;
}

.flab-article-hero h1 {
    max-width: 16ch;
    font-size: clamp(2.6rem, 6vw, 5.2rem);
}

.flab-article-runline {
    margin-top: 1.2rem;
}

.flab-article-grid {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 280px;
    gap: 2rem;
    align-items: start;
}

.flab-article-grid--single {
    grid-template-columns: minmax(0, 900px);
}

.flab-article-main {
    min-width: 0;
}

.flab-article-image {
    margin: 0 0 1.5rem;
    overflow: hidden;
    border: 1px solid var(--flab-line);
    border-radius: var(--flab-radius);
    background: var(--flab-panel);
}

.flab-article-image img {
    width: 100%;
    display: block;
}

.flab-article-body {
    max-width: 840px;
    color: var(--flab-ink);
}

.flab-article-body h2,
.flab-article-body h3 {
    margin: 2.2rem 0 0.85rem;
    font-family: "IBM Plex Sans Condensed", Inter, sans-serif;
    line-height: 1.1;
}

.flab-article-body h2 {
    font-size: 2rem;
}

.flab-article-body h3 {
    font-size: 1.45rem;
}

.flab-article-body p,
.flab-article-body li {
    color: var(--flab-graphite);
}

.flab-article-body a {
    color: var(--flab-blue);
    font-weight: 700;
}

.flab-article-body pre {
    overflow: auto;
    margin: 1.3rem 0;
    padding: 1rem;
    border-radius: var(--flab-radius);
    background: var(--flab-code);
    color: #e6edf5;
    font: 0.88rem/1.7 "JetBrains Mono", monospace;
}

.flab-article-body code {
    font-family: "JetBrains Mono", monospace;
}

.flab-article-body :not(pre) > code {
    padding: 0.1rem 0.3rem;
    border-radius: 4px;
    background: rgba(43, 127, 255, 0.10);
    color: #164ca3;
}

.flab-code-block {
    overflow: hidden;
    margin: 1.4rem 0;
    border: 1px solid rgba(255, 255, 255, 0.14);
    border-radius: var(--flab-radius);
    background: var(--flab-code);
}

.flab-code-block pre {
    margin: 0;
    border-radius: 0;
}

.flab-code-copy {
    min-height: 32px;
    padding: 0.3rem 0.55rem;
    border-color: rgba(255, 255, 255, 0.18);
    background: transparent;
    color: #dbe7f3;
    font-family: "JetBrains Mono", monospace;
    font-size: 0.76rem;
}

.flab-side-rail {
    position: sticky;
    top: 96px;
    display: grid;
    gap: 0.85rem;
}

.flab-rail-card h2 {
    margin: 0 0 0.75rem;
    font: 700 1rem "IBM Plex Sans Condensed", Inter, sans-serif;
}

.flab-rail-card {
    padding: 1rem;
}

.flab-tags {
    margin-top: 1.5rem;
}

.flab-article-footer {
    display: grid;
    gap: 1.1rem;
    margin-top: 2rem;
    padding-top: 1.5rem;
    border-top: 1px solid rgba(17, 24, 39, 0.12);
}

.flab-related {
    padding: 1rem;
    border: 1px solid var(--flab-line);
    border-radius: var(--flab-radius);
    background: rgba(255, 255, 255, 0.82);
}

.flab-related h2 {
    margin: 0 0 0.8rem;
    font: 700 1.25rem "IBM Plex Sans Condensed", Inter, sans-serif;
}

.flab-related ul {
    display: grid;
    gap: 0.55rem;
    margin: 0;
    padding: 0;
    list-style: none;
}

.flab-related a {
    display: grid;
    gap: 0.25rem;
    padding: 0.65rem 0;
    text-decoration: none;
}

.flab-related a:hover strong {
    color: var(--flab-blue);
}

.flab-related span {
    color: var(--flab-muted);
    font: 0.75rem "JetBrains Mono", monospace;
}

.flab-error {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(300px, 420px);
    gap: 2rem;
    align-items: center;
    min-height: min(680px, calc(100vh - 210px));
    padding: clamp(2rem, 5vw, 4.5rem);
    border: 1px solid var(--flab-line);
    border-radius: var(--flab-radius);
    background:
        linear-gradient(135deg, rgba(43, 127, 255, 0.11), transparent 34%),
        rgba(255, 255, 255, 0.82);
    box-shadow: var(--flab-shadow);
    overflow: hidden;
    overflow-wrap: anywhere;
}

.flab-error > * {
    min-width: 0;
}

.flab-error h1 {
    max-width: 760px;
    margin: 0;
    font-family: "IBM Plex Sans Condensed", Inter, sans-serif;
    font-size: clamp(3.4rem, 9vw, 8rem);
    line-height: 0.88;
}

.flab-error__copy > p:not(.flab-kicker) {
    max-width: 620px;
    margin: 1rem 0 0;
    color: var(--flab-muted);
    font-size: 1.1rem;
}

.flab-error__message {
    font-family: "JetBrains Mono", monospace;
    font-size: 0.85rem;
}

.flab-shell .com-contact,
.flab-shell .contact,
.flab-shell .pd-category-view,
.flab-shell .pd-file-view,
.flab-shell .phocadownload {
    max-width: 920px;
    min-width: 0;
    overflow-wrap: anywhere;
}

.flab-shell .com-contact > h1,
.flab-shell .contact > h1,
.flab-shell .pd-category-view h1,
.flab-shell .pd-file-view h1,
.flab-shell .phocadownload h1 {
    margin: 0 0 1rem;
    font-family: "IBM Plex Sans Condensed", Inter, sans-serif;
    font-size: clamp(2.4rem, 5vw, 4.5rem);
    line-height: 0.98;
}

.flab-shell .com-contact h2,
.flab-shell .contact h2,
.flab-shell .pd-category-view h2,
.flab-shell .pd-file-view h2,
.flab-shell .phocadownload h2 {
    margin: 1.5rem 0 0.75rem;
    font-family: "IBM Plex Sans Condensed", Inter, sans-serif;
    line-height: 1.1;
}

.flab-shell .com-contact__container,
.flab-shell .com-contact__form,
.flab-shell .contact-form,
.flab-shell .contact-address,
.flab-shell .pd-category,
.flab-shell .pd-subcategory,
.flab-shell .pdfile,
.flab-shell .pdtop,
.flab-shell .phocadownload .well,
.flab-shell .phocadownload .card {
    max-width: 100%;
    margin-top: 1rem;
    padding: 1.1rem;
    border: 1px solid var(--flab-line);
    border-radius: var(--flab-radius);
    background: rgba(255, 255, 255, 0.82);
    box-shadow: 0 10px 28px rgba(17, 24, 39, 0.05);
}

.flab-shell .contact-form form,
.flab-shell .contact-form fieldset {
    margin: 0;
    padding: 0;
    border: 0;
    background: transparent;
    box-shadow: none;
}

.flab-shell .contact-form legend {
    margin: 0 0 1rem;
    font: 700 1.1rem "IBM Plex Sans Condensed", Inter, sans-serif;
}

.flab-shell .contact-form .control-group,
.flab-shell .contact-form .mb-3,
.flab-shell .contact-form .form-group {
    display: grid;
    gap: 0.45rem;
    margin-bottom: 1rem;
}

.flab-shell .contact-form label {
    color: var(--flab-graphite);
    font-weight: 700;
}

.flab-shell .contact-form .form-control,
.flab-shell .contact-form input[type="text"],
.flab-shell .contact-form input[type="email"],
.flab-shell .contact-form textarea {
    width: 100%;
    min-height: 44px;
    padding: 0.7rem 0.85rem;
    border: 1px solid var(--flab-line);
    border-radius: var(--flab-radius);
    background: var(--flab-panel);
    color: var(--flab-ink);
    font: 1rem Inter, sans-serif;
}

.flab-shell .contact-form textarea,
.flab-shell .contact-form textarea.form-control {
    min-height: 180px;
    resize: vertical;
}

.flab-shell .contact-form .form-check,
.flab-shell .contact-form .control-group:has(input[type="checkbox"]) {
    display: flex;
    align-items: center;
    gap: 0.65rem;
}

.flab-shell .contact-form input[type="checkbox"] {
    width: 22px;
    height: 22px;
    flex: 0 0 auto;
}

.flab-shell .contact-form .btn,
.flab-shell .contact-form button[type="submit"],
.flab-shell .pd-category-view .btn,
.flab-shell .pd-file-view .btn,
.flab-shell .phocadownload .btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 42px;
    padding: 0.65rem 0.9rem;
    border: 1px solid var(--flab-blue);
    border-radius: var(--flab-radius);
    background: var(--flab-blue);
    color: #ffffff;
    font: 700 0.9rem Inter, sans-serif;
    text-decoration: none;
}

.flab-shell .contact-form .btn:hover,
.flab-shell .contact-form button[type="submit"]:hover,
.flab-shell .pd-category-view .btn:hover,
.flab-shell .pd-file-view .btn:hover,
.flab-shell .phocadownload .btn:hover {
    background: #125fd3;
    color: #ffffff;
}

.flab-shell .contact-form .g-recaptcha {
    max-width: 100%;
    overflow: hidden;
}

.flab-shell .pd-category-view ul,
.flab-shell .pd-file-view ul,
.flab-shell .phocadownload ul {
    padding-left: 1.1rem;
}

.flab-shell .pd-buttons,
.flab-shell .pd-filename,
.flab-shell .pd-title,
.flab-shell .pdfilebox {
    display: flex;
    flex-wrap: wrap;
    gap: 0.65rem;
    align-items: center;
}

.flab-shell .pd-filename,
.flab-shell .pd-title {
    color: var(--flab-ink);
    font-weight: 700;
}

.flab-pagination {
    margin-top: 2rem;
}

.flab-pagination .pagination {
    display: flex;
    flex-wrap: wrap;
    gap: 0.4rem;
    padding: 0;
    list-style: none;
}

.flab-pagination a,
.flab-pagination span {
    display: inline-flex;
    min-height: 40px;
    align-items: center;
    padding: 0.5rem 0.75rem;
    border: 1px solid var(--flab-line);
    border-radius: var(--flab-radius);
    background: var(--flab-panel);
    text-decoration: none;
}

.flab-footer {
    border-top: 1px solid rgba(17, 24, 39, 0.12);
    background: rgba(255, 255, 255, 0.74);
}

.flab-footer__inner {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    gap: 1rem;
    padding-block: 1.25rem;
    color: var(--flab-graphite);
    font: 0.85rem "JetBrains Mono", monospace;
}

@media (max-width: 1100px) {
    .flab-header__inner {
        flex-wrap: wrap;
        min-height: 64px;
        padding-block: 0.6rem;
    }

    .flab-menu-toggle {
        display: inline-flex;
        margin-left: auto;
    }

    .flab-blog-link {
        order: 3;
    }

    .flab-nav {
        order: 4;
        width: 100%;
        margin-left: 0;
    }

    .flab-has-js .flab-nav {
        display: none;
        padding: 0.6rem;
        border: 1px solid var(--flab-line);
        border-radius: var(--flab-radius);
        background: var(--flab-panel);
        box-shadow: var(--flab-shadow);
    }

    .flab-has-js.flab-nav-open .flab-nav {
        display: block;
    }

    .flab-menu-list {
        align-items: stretch;
        flex-direction: column;
        gap: 0.2rem;
    }

    .flab-menu-list a,
    .flab-menu-list span {
        justify-content: flex-start;
        width: 100%;
        min-height: 48px;
    }

    .flab-card-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .flab-hero,
    .flab-patterns,
    .flab-article-grid,
    .flab-error,
    .flab-layout--rail {
        grid-template-columns: 1fr;
    }

    .flab-side-rail,
    .flab-layout__rail {
        position: static;
    }
}

@media (max-width: 760px) {
    .flab-header__inner,
    .flab-main,
    .flab-footer__inner {
        width: min(100% - 24px, 1180px);
    }

    .flab-header__inner {
        flex-wrap: wrap;
        min-height: 64px;
        padding-block: 0.6rem;
    }

    .flab-menu-toggle {
        display: inline-flex;
        margin-left: auto;
    }

    .flab-blog-link {
        order: 3;
    }

    .flab-nav {
        order: 4;
        width: 100%;
        margin-left: 0;
    }

    .flab-has-js .flab-nav {
        display: none;
        padding: 0.6rem;
        border: 1px solid var(--flab-line);
        border-radius: var(--flab-radius);
        background: var(--flab-panel);
        box-shadow: var(--flab-shadow);
    }

    .flab-has-js.flab-nav-open .flab-nav {
        display: block;
    }

    .flab-menu-list {
        align-items: stretch;
        flex-direction: column;
        gap: 0.2rem;
    }

    .flab-menu-list a,
    .flab-menu-list span {
        justify-content: flex-start;
        width: 100%;
        min-height: 48px;
    }

    .flab-runline {
        margin-top: 0.75rem;
    }

    .flab-hero {
        min-height: 0;
        margin-bottom: 2.5rem;
    }

    .flab-hero__copy {
        padding: 1.5rem;
    }

    .flab-hero h1,
    .flab-section-head h1,
    .flab-article-hero h1 {
        font-size: 3rem;
    }

    .flab-card-grid,
    .flab-mini-grid {
        grid-template-columns: 1fr;
    }

    .flab-card {
        min-height: 0;
    }

    .flab-section-head--row {
        display: block;
    }

    .flab-archive-strip__head,
    .flab-archive-link {
        display: block;
    }

    .flab-archive-strip__head p:not(.flab-kicker),
    .flab-archive-link__meta {
        margin-top: 0.65rem;
    }

    .flab-archive-link__meta {
        justify-content: flex-start;
    }

    .flab-terminal pre,
    .flab-code-block pre,
    .flab-article-body pre {
        font-size: 0.82rem;
    }

}

@media (prefers-reduced-motion: reduce) {
    .flab-card,
    .flab-shell * {
        scroll-behavior: auto !important;
        transition-duration: 0.01ms !important;
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
    }
}