/* Sections below the hero. Tokens, header and hero live in the homepage <style>. */

.lb-band { background: var(--band); }
.lb-section { padding: 64px 0 72px; }
.lb-flink { padding: 80px 0; }
.lb-about { padding: 72px 0; border-top: 1px solid var(--line-header); }

.lb-kicker-row,
.lb-head-row {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-end;
    justify-content: space-between;
    gap: 16px 32px;
    margin-bottom: 28px;
}
.lb-head-row { align-items: flex-end; }
.lb-cluster-note,
.lb-flow-note {
    margin: 0;
    font-family: var(--font-diagram-mono);
    font-size: 13px;
    color: var(--muted);
}
.lb-section h2 { margin: 0 0 8px; font-size: 38px; line-height: 1.12; }
.lb-kafka .lb-head-row h2 { margin: 0; }
.lb-flink h2 { font-size: 44px; }
.lb-dir h2,
.lb-tail h2 { font-size: 34px; }
.lb-lede {
    max-width: 640px;
    margin: 8px 0 0;
    font-size: 17px;
    line-height: 1.6;
    color: var(--body);
}
.lb-comment {
    margin: 0 0 8px;
    font-family: var(--font-mono);
    font-size: 12px;
    color: var(--teal);
}

.lb-actions { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 22px; }

/* Kafka diagram */
.lb-kafka {
    --lb-card-h: 112px;
    --lb-spine: 10px;
}
.lb-diagram {
    display: flex;
    align-items: center;
    min-width: 0;
}
.lb-producer {
    width: 240px;
    flex: none;
    align-self: center;
    background: var(--bg);
    border: 1.5px solid var(--topic-active-border);
    border-radius: 12px;
    padding: 20px 18px;
}
.lb-producer-type {
    margin: 0;
    font-family: var(--font-diagram-mono);
    font-size: 12px;
    line-height: 1.45;
    color: var(--producer-text);
}
.lb-producer h3 {
    margin: 8px 0;
    font-size: 28px;
    letter-spacing: 0;
    line-height: 1.15;
}
.lb-bio { margin: 0; font-size: 13.5px; line-height: 1.5; color: var(--body); }
.lb-acks {
    margin: 14px 0 0;
    padding-top: 12px;
    border-top: 1px dashed var(--card-border);
    font-family: var(--font-mono);
    font-size: 11px;
    color: var(--muted);
}
.lb-feed {
    position: relative;
    z-index: 1;
    width: 64px;
    flex: none;
    align-self: center;
    height: 10px;
    margin-right: calc(var(--lb-spine) / -2);
}
.lb-feed .lb-line { width: 100%; }
.lb-topics {
    position: relative;
    display: flex;
    flex: 1;
    flex-direction: column;
    gap: 14px;
    min-width: 0;
}
.lb-topics::before {
    content: "";
    position: absolute;
    left: 0;
    top: calc(var(--lb-card-h) / 2);
    bottom: calc(var(--lb-card-h) / 2);
    width: var(--lb-spine);
    background-image: radial-gradient(circle, #7E93A4 1.6px, transparent 1.9px);
    background-size: var(--lb-spine) 10px;
    background-repeat: repeat-y;
    background-position: center top;
}
.lb-row {
    display: flex;
    align-items: center;
    min-width: 0;
}
.lb-tick {
    position: relative;
    z-index: 1;
    width: 46px;
    height: 10px;
    flex: none;
    box-sizing: border-box;
    padding-left: var(--lb-spine);
}
.lb-tick .lb-line { width: 100%; }
.lb-tick::before {
    content: "";
    position: absolute;
    left: calc((var(--lb-spine) - 6px) / 2);
    top: 50%;
    z-index: 2;
    width: 6px;
    height: 6px;
    margin-top: -3px;
    border-radius: 50%;
    background: var(--dot-idle);
}
.lb-row.is-active .lb-tick::before {
    left: calc((var(--lb-spine) - 9px) / 2);
    width: 9px;
    height: 9px;
    margin-top: -4.5px;
    background: var(--topic-active-border);
    box-shadow: 0 0 0 3px rgba(247, 154, 94, 0.28);
}
.lb-kafka button.lb-topic {
    display: flex;
    flex: 1 1 0;
    flex-direction: column;
    align-items: stretch;
    width: 0;
    height: var(--lb-card-h);
    min-width: 0;
    margin: 0;
    padding: 14px 16px;
    box-sizing: border-box;
    font: inherit;
    text-align: left;
    color: inherit;
    cursor: pointer;
    appearance: none;
    background: var(--bg);
    border: 1.5px solid var(--line);
    border-radius: 12px;
    box-shadow: none;
}
.lb-row.is-active .lb-topic,
.lb-row.is-active .lb-topic:hover {
    background: var(--topic-active-bg);
    border: 1.5px solid var(--topic-active-border);
}
.lb-row:not(.is-active) .lb-topic:hover {
    background: var(--bg);
    border-color: var(--line);
}
.lb-topic-kicker {
    display: flex;
    justify-content: space-between;
    gap: 12px;
    font-family: var(--font-diagram-mono);
    font-size: 12px;
}
.lb-topic-slug { flex: none; color: var(--teal-deep); }
.lb-topic-meta {
    flex: 1;
    min-width: 0;
    overflow: hidden;
    color: var(--muted);
    text-align: right;
    white-space: nowrap;
    text-overflow: ellipsis;
}
.lb-topic-title {
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
    overflow: hidden;
    margin-top: 4px;
    font-family: var(--font-diagram);
    font-weight: 600;
    font-size: 18px;
    line-height: 1.25;
    color: var(--ink);
    letter-spacing: 0;
}
.lb-records {
    display: flex;
    flex-wrap: nowrap;
    align-items: center;
    gap: 4px;
    margin-top: auto;
}
.lb-sq {
    width: 14px;
    height: 14px;
    border-radius: 3px;
    background: var(--record-idle);
}
.lb-records[data-show="10"] .lb-sq:nth-child(n+11):not(.lb-new),
.lb-records[data-show="9"] .lb-sq:nth-child(n+10):not(.lb-new),
.lb-records[data-show="8"] .lb-sq:nth-child(n+9):not(.lb-new),
.lb-records[data-show="7"] .lb-sq:nth-child(n+8):not(.lb-new),
.lb-records[data-show="4"] .lb-sq:nth-child(n+5):not(.lb-new) { display: none; }
.lb-sq.lb-new { background: var(--record-new-idle); }
.lb-row.is-active .lb-sq { background: var(--record-active); }
.lb-row.is-active .lb-sq.lb-new { background: var(--record-new); }
.lb-append {
    margin-left: 6px;
    font-family: var(--font-mono);
    font-size: 11px;
    font-style: italic;
    color: var(--muted);
}
.lb-pollconn {
    position: relative;
    display: block;
    flex: 0 0 136px;
    width: 136px;
    height: 10px;
    min-width: 136px;
    box-sizing: border-box;
    padding: 0 12px;
}
.lb-poll-label {
    position: absolute;
    left: 0;
    right: 0;
    bottom: calc(100% + 5px);
    font-family: var(--font-mono);
    font-size: 11px;
    line-height: 1;
    text-align: center;
    color: var(--muted);
}
.lb-row.is-active .lb-poll-label { color: var(--producer-text); }
.lb-line {
    position: relative;
    display: flex;
    align-items: center;
    width: 100%;
    height: 10px;
}
.lb-dots {
    display: block;
    width: 100%;
    height: 10px;
    background-image: radial-gradient(circle, #7E93A4 1.6px, transparent 1.9px);
    background-size: 10px 10px;
    background-repeat: repeat-x;
    background-position: left center;
}
.lb-packet {
    position: absolute;
    top: 50%;
    left: 0;
    width: 8px;
    height: 8px;
    margin-top: -4px;
    border-radius: 50%;
    background: var(--topic-active-border);
    box-shadow: 0 0 0 3px rgba(247, 154, 94, 0.28);
    opacity: 0;
}
.lb-dot,
.lb-drop { background: var(--dot-idle); }

.lb-group {
    display: flex;
    flex: none;
    flex-direction: column;
    justify-content: center;
    width: 240px;
    height: 96px;
    min-width: 0;
    box-sizing: border-box;
    padding: 12px 16px;
    background: var(--group-idle-bg);
    border: 0;
    border-radius: 12px;
    text-decoration: none;
    color: var(--ink-diagram);
}
.lb-row.is-active .lb-group {
    background: var(--group-active);
    border-color: transparent;
    color: var(--ink-diagram);
}
.lb-group-id {
    display: block;
    font-family: var(--font-diagram-mono);
    font-size: 11px;
    opacity: .8;
}
.lb-group-goal {
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
    overflow: hidden;
    margin-top: 4px;
    font-family: var(--font-diagram);
    font-weight: 600;
    font-size: 15px;
    letter-spacing: 0;
    line-height: 1.25;
}

.lb-browse { display: none; }

.lb-poll {
    margin-top: 32px;
    padding: 20px 22px;
    background: var(--dark);
    border-radius: var(--radius-card);
    overflow-x: auto;
    color: var(--dark-text);
    font-family: var(--font-diagram-mono);
    font-size: 13px;
}
.lb-poll-line { margin: 0; white-space: nowrap; }
.lb-poll-comment { color: var(--dark-orange); }
.lb-poll-live { margin: 8px 0 14px; color: var(--dark-muted); }
.lb-poll-live .lb-live { color: var(--dark-late); }
.lb-poll-short { display: none; }
.lb-record {
    display: grid;
    grid-template-columns: 250px 140px minmax(0, 1fr) 60px;
    gap: 8px;
    align-items: center;
    min-height: 36px;
    color: var(--dark-text);
    text-decoration: none;
}
.lb-record:hover .lb-rec-title { text-decoration: underline; }
.lb-rec-loc,
.lb-rec-go { color: var(--dark-teal); }
.lb-rec-key { color: var(--dark-orange); }
.lb-rec-title {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    font-family: var(--font-body);
}
.lb-rec-empty { margin: 0; color: var(--dark-muted); }

/* Flink */
.lb-job {
    margin-top: 28px;
    padding: 24px;
    background: var(--dark);
    border-radius: 14px;
    color: var(--dark-text);
}
.lb-job-status {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    gap: 8px 16px;
    margin: 0 0 18px;
    font-family: var(--font-diagram-mono);
    font-size: 12px;
    color: var(--dark-muted);
}
.lb-run { color: var(--dark-green); }
.lb-job-status .lb-live,
.lb-job-foot .lb-live { color: var(--dark-green); }
.lb-job-foot { display: none; margin: 14px 0 0; font-family: var(--font-diagram-mono); font-size: 12px; color: var(--dark-muted); }
.lb-ops {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 44px minmax(0, 1fr) 44px minmax(0, 1fr) 44px minmax(0, 1fr) 44px minmax(0, 1fr);
    align-items: stretch;
}
.lb-op {
    display: flex;
    flex-direction: column;
    min-width: 0;
    padding: 14px;
    background: var(--dark-card);
    border: 1px solid var(--dark-card-border);
    border-radius: var(--radius-card);
}
.lb-op-kind {
    font-family: var(--font-diagram-mono);
    font-size: 11px;
    color: var(--dark-teal);
}
.lb-op-name {
    margin-top: 4px;
    font-family: var(--font-diagram);
    font-weight: 600;
    font-size: 15px;
    color: #fff;
    letter-spacing: 0;
}
.lb-op-detail {
    margin-top: 6px;
    font-family: var(--font-diagram-mono);
    font-size: 11px;
    color: var(--dark-muted);
    line-height: 1.4;
}
.lb-op-detail-short { display: none; }
.lb-op-bar { display: flex; gap: 3px; margin-top: auto; padding-top: 12px; }
.lb-op-bar i {
    flex: 1;
    height: 5px;
    border-radius: 2px;
    background: var(--record-active);
}
.lb-op-state {
    margin-top: 6px;
    font-family: var(--font-diagram-mono);
    font-size: 10.5px;
    color: var(--dark-muted);
}
.lb-conn {
    position: relative;
    align-self: center;
    height: 0;
    border-top: 2px dotted var(--dark-line);
}
.lb-conn .lb-drop { display: none; }
.lb-conn .lb-dot { background: var(--dark-orange); }

.lb-track-wrap { margin-top: 26px; padding-top: 16px; border-top: 1px solid var(--dark-card-border); }
.lb-track-cap,
.lb-legend {
    display: flex;
    justify-content: space-between;
    gap: 12px;
    margin: 0 0 8px;
    font-family: var(--font-diagram-mono);
    font-size: 11px;
    color: var(--dark-muted);
}
.lb-legend { margin: 10px 0 0; flex-wrap: wrap; justify-content: flex-start; gap: 8px 16px; }
.lb-track {
    position: relative;
    height: 56px;
    background: var(--dark-track);
    border-radius: 8px;
    overflow: hidden;
}
.lb-window {
    position: absolute;
    top: 0;
    bottom: 0;
    left: 30%;
    width: 40%;
    background: var(--dark-window);
    border-left: 1px solid var(--dark-line);
    border-right: 1px solid var(--dark-line);
}
.lb-event {
    position: absolute;
    width: 9px;
    height: 9px;
    border-radius: 50%;
    background: var(--dark-teal);
}
.lb-event.is-late { background: var(--dark-late); }
.lb-watermark {
    position: absolute;
    top: 0;
    bottom: 0;
    left: 64%;
    border-left: 2px dashed var(--dark-orange);
}
.lb-watermark span {
    position: absolute;
    top: 4px;
    left: 6px;
    font-family: var(--font-diagram-mono);
    font-size: 10px;
    color: var(--dark-orange);
    white-space: nowrap;
}
.lb-glyph {
    display: inline-block;
    width: 8px;
    height: 8px;
    margin-right: 6px;
    border-radius: 50%;
    background: var(--dark-teal);
    vertical-align: 0;
}
.lb-glyph--late { background: var(--dark-late); }
.lb-glyph--mark { width: 0; height: 10px; border-radius: 0; border-left: 2px dashed var(--dark-orange); background: none; vertical-align: -1px; }
.lb-glyph--bar { width: 3px; height: 10px; border-radius: 2px; background: var(--dark-green); vertical-align: -1px; }

.lb-concepts {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
    gap: 16px;
    margin-top: 28px;
}
.lb-concept { padding: 20px; }
.lb-concept-kicker {
    margin: 0;
    font-family: var(--font-mono);
    font-size: 12px;
    color: var(--teal);
}
.lb-concept h3 { margin: 8px 0; font-size: 24px; line-height: 1.2; }
.lb-concept p { margin: 0; font-size: 14px; line-height: 1.55; color: var(--body); }

/* Directory */
.lb-scroll { overflow-x: auto; }
.lb-dir table { width: 100%; min-width: 860px; border-collapse: collapse; }
.lb-dir th,
.lb-dir td { padding: 16px; text-align: left; vertical-align: top; border-bottom: 1px solid var(--line); }
.lb-dir thead th {
    background: var(--band);
    font-family: var(--font-mono);
    font-size: 11px;
    font-weight: 500;
    letter-spacing: .08em;
    text-transform: uppercase;
    color: var(--muted);
}
.lb-dir tbody th { font-weight: 600; color: var(--ink); }
.lb-dir td { color: var(--body); font-size: 15px; line-height: 1.45; }
.lb-dir a { font-family: var(--font-mono); font-size: 13px; color: var(--serif-accent); text-decoration: none; }
.lb-dir a:hover { text-decoration: underline; }

/* Tail */
.lb-tail h2 { margin-bottom: 16px; }
.lb-console { background: var(--panel); overflow: hidden; }
.lb-console-head {
    margin: 0;
    padding: 14px 18px;
    border-bottom: 1px solid var(--line);
    font-family: var(--font-mono);
    font-size: 13px;
    color: var(--muted);
}
.lb-lesson {
    display: grid;
    grid-template-columns: 110px 170px minmax(0, 1fr) 80px;
    gap: 8px;
    align-items: baseline;
    padding: 12px 18px;
    border-top: 1px solid var(--line-soft);
    text-decoration: none;
    color: inherit;
}
.lb-lesson:hover .lb-lesson-title { text-decoration: underline; }
.lb-lesson-date,
.lb-vis { font-family: var(--font-mono); font-size: 12px; color: var(--muted); }
.lb-vis { font-size: 11px; text-align: right; }
.lb-lesson-tag { font-family: var(--font-mono); font-size: 12px; color: var(--teal); }
.lb-lesson-title { font-size: 14px; color: var(--ink); }
.lb-console-foot { margin: 0; padding: 12px 18px 16px; }
.lb-console-foot a { font-family: var(--font-mono); font-size: 13px; color: var(--serif-accent); text-decoration: none; }
.lb-console-foot a:hover { text-decoration: underline; }

/* About + newsletter */
.lb-split {
    display: flex;
    flex-wrap: wrap;
    gap: 36px 48px;
    align-items: flex-start;
}
.lb-split-copy { flex: 1 1 420px; max-width: 640px; }
.lb-about h2 { margin: 0 0 12px; font-size: 40px; }
.lb-about .lb-lede { margin: 0; }
.lb-text-links { display: flex; flex-wrap: wrap; gap: 16px 24px; margin-top: 18px; }
.lb-text-links a { color: var(--serif-accent); text-decoration: none; font-weight: 500; }
.lb-text-links a:hover { text-decoration: underline; }
.lb-news {
    flex: 1 1 340px;
    max-width: 480px;
    padding: 28px;
    border-radius: 14px;
}
.lb-news h3 { margin: 0 0 8px; font-size: 30px; line-height: 1.15; }
.lb-news p { margin: 0 0 16px; color: var(--body); line-height: 1.55; }
.lb-field { display: block; margin-bottom: 8px; font-size: 14px; font-weight: 500; color: var(--ink); }
.lb-form-row { display: flex; gap: 8px; align-items: center; }
.lb-form-row input {
    flex: 1;
    min-width: 0;
    height: 46px;
    padding: 0 14px;
    border: 1px solid var(--card-border);
    border-radius: var(--radius-pill);
    background: var(--bg);
    color: var(--ink);
    font: inherit;
}
.lb-form-msg { display: none; margin: 10px 0 0; font-size: 14px; }
.lb-form.loading .lb-msg-loading,
.lb-form.success .lb-msg-success,
.lb-form.error .lb-msg-error,
.lb-form.error [data-members-error] { display: block; }
.lb-msg-success { color: var(--teal-deep); }
.lb-msg-error { color: var(--accent-red); }

/* Footer */
.lb-footer {
    background: var(--footer-bg);
    border-top: 1px solid var(--line);
    padding: 48px 0 28px;
}
.lb-footer-grid {
    display: grid;
    grid-template-columns: minmax(220px, 1.4fr) repeat(4, minmax(0, 1fr));
    gap: 28px 24px;
}
.lb-footer-brand {
    margin: 0;
    font-family: var(--font-serif);
    font-size: 28px;
    color: var(--ink);
    letter-spacing: -0.01em;
}
.lb-footer-cmd {
    margin: 8px 0 14px;
    font-family: var(--font-mono);
    font-size: 13px;
    color: var(--muted);
}
.lb-footer-social { display: flex; flex-wrap: wrap; gap: 8px 16px; }
.lb-footer-social a { color: var(--body); text-decoration: none; }
.lb-footer-social a:hover { color: var(--serif-accent); }
body.lb-home .lb-footer h2 {
    margin: 0 0 10px;
    font-family: var(--font-mono);
    font-size: 11px;
    font-weight: 500;
    letter-spacing: .08em;
    text-transform: uppercase;
    line-height: 1.4;
    color: var(--muted);
}
body.lb-home .lb-producer h3 { font-size: 28px; letter-spacing: 0; line-height: 1.15; }
body.lb-home .lb-news h3 { font-size: 30px; line-height: 1.15; }
.lb-footer ul { margin: 0; padding: 0; list-style: none; }
.lb-footer li { margin: 0 0 8px; }
.lb-footer li a { color: var(--body); text-decoration: none; font-size: 14px; }
.lb-footer li a:hover { color: var(--serif-accent); }
.lb-footer-mobile { display: none; }
.lb-footer-base {
    margin: 28px 0 0;
    padding-top: 16px;
    border-top: 1px solid var(--line);
    color: var(--muted);
    font-size: 13px;
}

@media (max-width: 1100px) {
    .lb-producer { width: 180px; padding: 16px; }
    .lb-feed { width: 40px; }
    .lb-tick { width: 28px; }
    .lb-group { width: 190px; }
    .lb-pollconn { flex-basis: 96px; width: 96px; min-width: 96px; padding: 0 8px; }
    .lb-footer-grid { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
}

@media (max-width: 600px) {
    .lb-section { padding: 36px 0 40px; }
    .lb-flink,
    .lb-about { padding: 36px 0 40px; }
    .lb-section h2,
    .lb-flink h2,
    .lb-about h2 { font-size: 30px; }
    .lb-dir h2,
    .lb-tail h2 { font-size: 28px; }
    .lb-about h2 { font-size: 32px; }
    .lb-lede { font-size: 16px; }
    .lb-comment { font-size: 11px; }

    .lb-bio { font-size: 13px; }
    body.lb-home .lb-producer h3 { font-size: 24px; }
    body.lb-home .lb-news h3 { font-size: 24px; }
    .lb-diagram { flex-direction: column; align-items: stretch; }
    .lb-producer { width: 100%; }
    .lb-feed {
        width: 10px;
        height: 28px;
        margin: 10px 0 10px 28px;
    }
    .lb-feed .lb-line { width: 8px; height: 28px; }
    .lb-topics { margin-left: 28px; }
    .lb-topics::before { display: none; }
    .lb-row { flex-direction: column; align-items: stretch; gap: 6px; }
    .lb-tick { display: none; }
    .lb-kafka button.lb-topic { width: 100%; height: auto; }
    .lb-topic-title { min-height: 0; font-size: 16px; }
    .lb-group-goal { min-height: 0; }
    .lb-sq { width: 11px; height: 11px; }
    .lb-pollconn {
        align-items: flex-start;
        flex: none;
        min-width: 0;
        width: 100%;
        padding: 2px 0 2px 18px;
    }
    .lb-pollconn .lb-line { width: 8px; height: 28px; }
    .lb-feed .lb-dots,
    .lb-pollconn .lb-dots {
        width: 8px;
        height: 28px;
        margin-top: 0;
        background-size: 8px 12px;
        background-repeat: repeat-y;
    }
    .lb-packet { left: 0; top: 0; }
    .lb-group { width: 100%; height: auto; }
    .lb-browse { display: block; margin: 18px 0 0; text-align: left; }
    .lb-browse a { color: var(--serif-accent); font-weight: 600; text-decoration: none; }
    .lb-poll { padding: 14px; }
    .lb-poll-code,
    .lb-poll-long { display: none; }
    .lb-poll-short { display: inline; }
    .lb-poll-live { margin-bottom: 8px; }
    .lb-record {
        display: block;
        padding: 8px 0;
        min-height: 44px;
    }
    .lb-record:nth-child(n+4) { display: none; }
    .lb-rec-go { float: right; }
    .lb-rec-title {
        display: block;
        clear: both;
        white-space: normal;
        font-size: 13.5px;
        font-family: var(--font-body);
    }
    .lb-rec-key { margin-left: 8px; }

    .lb-flink h2 { font-size: 30px; }
    .lb-actions .lb-btn--red { width: 100%; height: 48px; }
    .lb-actions .lb-btn--outline { display: none; }
    .lb-job { padding: 16px; }
    .lb-job-status-long,
    .lb-op-bar,
    .lb-op-state,
    .lb-op-detail-long,
    .lb-track-wrap { display: none; }
    .lb-job-foot { display: block; }
    .lb-ops { display: flex; flex-direction: column; }
    .lb-op {
        flex-direction: row;
        justify-content: space-between;
        align-items: center;
        gap: 12px;
    }
    .lb-op-detail-short { display: block; text-align: right; }
    .lb-conn {
        height: 18px;
        width: 2px;
        margin-left: 22px;
        border-top: 0;
        border-left: 2px dotted var(--dark-line);
        align-self: flex-start;
    }
    .lb-conn .lb-dot { display: none; }
    .lb-conn .lb-drop { display: block; background: var(--dark-orange); }
    .lb-concepts--hide-mobile { display: none; }
    .lb-concepts--carousel {
        display: flex;
        overflow-x: auto;
        scroll-snap-type: x mandatory;
        gap: 12px;
    }
    .lb-concepts--carousel .lb-concept { flex: 0 0 85%; scroll-snap-align: start; }

    .lb-dir table { min-width: 0; }
    .lb-dir thead { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }
    .lb-dir table,
    .lb-dir tbody,
    .lb-dir tr,
    .lb-dir th,
    .lb-dir td { display: block; width: auto; }
    .lb-dir tr { padding: 8px 0; border-bottom: 1px solid var(--line); }
    .lb-dir th,
    .lb-dir td { border: 0; padding: 4px 16px; }
    .lb-dir tbody th { font-family: var(--font-serif); font-size: 22px; font-weight: 400; }
    .lb-dir td { color: var(--muted); font-size: 14px; }

    .lb-lesson { display: block; padding: 12px 16px; }
    .lb-lessons .lb-lesson:nth-child(n+5) { display: none; }
    .lb-lesson-date,
    .lb-lesson-tag { font-size: 12px; }
    .lb-lesson-title { display: block; margin-top: 2px; font-size: 14.5px; }
    .lb-vis { display: none; }

    .lb-news h3 { font-size: 24px; }
    .lb-form-row { flex-direction: column; align-items: stretch; }
    .lb-form-row .lb-btn { width: 100%; height: 48px; }

    .lb-footer { padding: 32px 0 24px; }
    .lb-footer-grid { display: none; }
    .lb-footer-brand { font-size: 24px; }
    .lb-footer-mobile {
        display: grid;
        grid-template-columns: 1fr 1fr;
        gap: 0 16px;
        margin-top: 8px;
    }
    .lb-footer-mobile a {
        display: flex;
        align-items: center;
        min-height: 44px;
        color: var(--body);
        text-decoration: none;
    }
}
@media (max-width: 760px) {
    .lb-diagram { flex-direction: column; align-items: stretch; }
    .lb-producer { width: 100%; }
    .lb-feed {
        width: 10px;
        height: 28px;
        margin: 10px 0 10px 28px;
    }
    .lb-feed .lb-line { width: 8px; height: 28px; }
    .lb-topics { margin-left: 28px; }
    .lb-topics::before { display: none; }
    .lb-row { flex-direction: column; align-items: stretch; gap: 6px; }
    .lb-tick { display: none; }
    .lb-kafka button.lb-topic { width: 100%; height: auto; }
    .lb-topic-title,
    .lb-group-goal { min-height: 0; }
    .lb-pollconn {
        display: flex;
        flex-direction: column;
        align-items: flex-start;
        flex: none;
        height: auto;
        min-width: 0;
        width: 100%;
        padding: 2px 0 2px 18px;
    }
    .lb-poll-label { position: static; bottom: auto; text-align: left; }
    .lb-pollconn .lb-line { width: 8px; height: 28px; }
    .lb-feed .lb-dots,
    .lb-pollconn .lb-dots {
        width: 8px;
        height: 28px;
        margin-top: 0;
        background-size: 8px 12px;
        background-repeat: repeat-y;
    }
    .lb-packet { left: 0; top: 0; margin-top: 0; }
    .lb-group { width: 100%; height: auto; }
}
@media (prefers-reduced-motion: reduce) {
    .lb-feed .lb-packet,
    .lb-row.is-active .lb-packet { opacity: 1; left: calc(100% - 8px); }
}