.kafka-demo{--kd-canvas:#fff;--kd-dialog:#fff;--kd-scrim:#00000052;--kd-shell:#fafafa;--kd-rule:#1a1a1a1c;--kd-rule-strong:#1a1a1a2f;--kd-control:#1a1a1a34;--kd-selected:#1a1a1a0f;--kd-ghost:#1a1a1a0f;--kd-series:#4a99c3;--kd-success-fill:#dcfce7;--kd-success-text:#166534;--kd-success-dot:#22c55e;width:100%;container-type:inline-size}@supports (color:lab(0% 0 0)){.kafka-demo{--kd-success-fill:lab(96.2253% -13.6498 6.43104);--kd-success-text:lab(37.3273% -33.3579 20.7183)}}.kafka-demo__frame{aspect-ratio:1160/700;min-height:0}.home-v2[data-theme=dark] .kafka-demo{--kd-canvas:#191919;--kd-dialog:#2c2c2c;--kd-scrim:#0000008c;--kd-shell:#191919;--kd-rule:#ffffff1a;--kd-rule-strong:#ffffff2e;--kd-control:#ffffff3d;--kd-selected:#ffffff14;--kd-ghost:#ffffff1a;--kd-series:#4a99c3;--kd-success-fill:#14532d;--kd-success-text:#86efac}@supports (color:lab(0% 0 0)){.home-v2[data-theme=dark] .kafka-demo{--kd-success-fill:lab(30.678% -27.9429 16.3251);--kd-success-text:lab(86.8411% -42.8218 22.6317)}}@container not (min-width:620px){.kafka-demo__frame{aspect-ratio:358/540}}.kafka-demo__frame:has(.ss-stage:not([data-placing])){aspect-ratio:auto}.kafka-demo .ss-stage{--ss-font:var(--hv-sans);--ss-mono:var(--hv-mono);--ss-canvas:var(--kd-canvas);--ss-surface:var(--kd-canvas);--ss-chrome:var(--kd-canvas);--ss-line:var(--kd-rule);--ss-text:var(--hv-ink-secondary);--ss-text-strong:var(--hv-ink);--ss-text-faint:var(--hv-ink-muted);--ss-ink-1:var(--kd-ghost);--ss-shadow-window:none;color:var(--hv-ink);font-family:var(--hv-sans);font-size:var(--text-small-size);font-weight:var(--text-small-weight);letter-spacing:var(--text-small-tracking);-webkit-font-smoothing:antialiased;background:0 0;line-height:1.4;transition:opacity .2s cubic-bezier(.25,.8,.25,1);overflow:hidden}.kafka-demo .ss-stage[data-placing]{opacity:0}.kafka-demo .kd-window{width:100%;height:860px;position:relative}.kafka-demo .kd-window:after{border-radius:inherit;box-shadow:inset 0 0 0 1px var(--kd-rule);content:"";pointer-events:none;z-index:4;position:absolute;inset:0}.kafka-demo .ss-window__dot{background:var(--kd-rule-strong);box-shadow:none}.kafka-demo .kd-sheet{background:var(--kd-canvas);box-shadow:inset 0 0 0 1px var(--kd-rule);border-radius:12px;height:660px;position:relative}.kafka-demo .ss-window__url{justify-content:center;max-width:400px;margin-inline:auto;display:flex}.kafka-demo .kd-url{align-items:center;gap:6px;display:inline-flex}.kafka-demo .kd-body{min-height:0;display:flex;position:relative}.kafka-demo .kd-rail{background:var(--kd-shell);box-shadow:inset -1px 0 0 var(--kd-rule);flex-direction:column;flex:none;align-items:center;gap:4px;width:60px;padding-top:12px;display:flex}.kafka-demo .kd-rail__mark{color:var(--hv-ink);justify-content:center;align-items:center;height:36px;margin-bottom:12px;display:flex}.kafka-demo .kd-rail__mark svg{width:24px;height:24px;display:block}.kafka-demo .kd-rail__item{color:var(--hv-ink-muted);border-radius:10px;justify-content:center;align-items:center;width:36px;height:36px;display:flex}.kafka-demo .kd-rail__item[data-on]{background:var(--kd-selected);color:var(--hv-ink)}.kafka-demo .kd-main{flex-direction:column;flex:1;min-width:0;display:flex}.kafka-demo .kd-page{flex:1;min-height:0;padding:32px 40px 0}.kafka-demo .ss-stage[data-layout=compact] .kd-page{padding:16px 16px 0}.kafka-demo .kd-head{justify-content:space-between;align-items:center;gap:32px;margin-bottom:32px;display:flex}.kafka-demo .ss-stage[data-layout=compact] .kd-head{flex-direction:column;align-items:stretch;gap:12px;margin-bottom:16px}.kafka-demo .kd-head__name{align-items:center;gap:12px;display:flex}.kafka-demo .kd-title{color:var(--hv-ink);font-family:var(--hv-serif);font-size:var(--text-page-title-size);font-weight:var(--text-page-title-weight);letter-spacing:var(--text-page-title-tracking);white-space:nowrap;line-height:40px}.kafka-demo .ss-stage[data-layout=compact] .kd-title{font-size:28px;line-height:32px}.kafka-demo .kd-stats{flex:none;gap:32px;display:flex}.kafka-demo .ss-stage[data-layout=compact] .kd-stats{grid-template-columns:repeat(3,minmax(0,1fr));gap:12px;width:100%;display:grid}.kafka-demo .kd-stat{gap:4px;display:grid}.kafka-demo .kd-stat__label{color:var(--hv-ink-secondary);font-size:var(--text-caption-size);line-height:18px}.kafka-demo .kd-stat__value{color:var(--hv-ink-secondary);font-family:var(--hv-serif);font-variant-numeric:tabular-nums;letter-spacing:-.015em;white-space:nowrap;align-items:baseline;gap:4px;font-size:24px;font-weight:420;line-height:26px;display:flex}.kafka-demo .ss-stage[data-layout=compact] .kd-stat__value{font-size:20px}.kafka-demo .kd-stat__unit{font-family:var(--hv-sans);font-size:var(--text-caption-size);letter-spacing:var(--text-caption-tracking)}.kafka-demo .kd-trend{margin-top:4px;display:block;overflow:visible}.kafka-demo .kd-trend path{fill:none;stroke:var(--kd-series);stroke-linejoin:round;stroke-width:1.5px}.kafka-demo .kd-trend circle{fill:var(--kd-series)}.kafka-demo .kd-trend g,.kafka-demo .kd-trend circle{transition:transform .6s cubic-bezier(.45,0,.1,1)}.kafka-demo .kd-button{box-shadow:inset 0 0 0 1px var(--kd-control);color:var(--hv-ink);font-weight:var(--text-small-strong-weight);white-space:nowrap;border-radius:8px;flex:none;align-items:center;gap:6px;height:32px;padding-inline:12px;transition:background-color .12s ease-out,scale .12s ease-out;display:inline-flex}.kafka-demo .kd-button[data-hover]{background:var(--kd-ghost)}.kafka-demo .kd-button[data-pressed]{scale:.98}.kafka-demo .kd-tabs{border-bottom-color:var(--kd-rule);gap:24px;margin-bottom:32px}.kafka-demo .ss-stage[data-layout=compact] .kd-tabs{gap:20px;margin-bottom:12px}.kafka-demo .kd-tabs .ss-tabs__tab{color:var(--hv-ink-secondary);font-size:var(--text-small-size);font-weight:var(--text-small-strong-weight);padding-bottom:12px;line-height:24px}.kafka-demo .kd-tabs .ss-tabs__tab[data-on]{color:var(--hv-ink)}.kafka-demo .kd-tabs .ss-tabs__bar{background:var(--hv-ink)}.kafka-demo .kd-table{box-shadow:inset 0 0 0 1px var(--kd-rule-strong);border-radius:12px;padding:4px 24px 12px}.kafka-demo .ss-stage[data-layout=compact] .kd-table{padding:4px 12px}.kafka-demo .kd-row{border-top:1px solid var(--kd-rule);align-items:center;column-gap:24px;min-height:64px;padding-block:8px;display:grid}.kafka-demo .kd-row--head{color:var(--hv-ink-muted);white-space:nowrap;border-top:0;min-height:48px;padding-block:0}.kafka-demo .kd-row--topic{grid-template-columns:220px 220px 120px minmax(0,1fr)}.kafka-demo .ss-stage[data-layout=compact] .kd-row{column-gap:8px;min-height:48px}.kafka-demo .ss-stage[data-layout=compact] .kd-row--head{min-height:36px}.kafka-demo .ss-stage[data-layout=compact] .kd-row--topic{grid-template-columns:minmax(0,1fr) 96px}.kafka-demo .kd-mono{font-family:var(--hv-mono);font-size:var(--text-caption-size);letter-spacing:0;white-space:nowrap;line-height:20px}.kafka-demo .kd-muted{color:var(--hv-ink-secondary)}.kafka-demo .kd-row__name{text-overflow:ellipsis;min-width:0;overflow:hidden}.kafka-demo .kd-row__rate{align-items:center;gap:8px;display:flex}.kafka-demo .kd-rate{--ss-count-unit-gap:0;font-variant-numeric:tabular-nums}.kafka-demo .kd-rate .ss-count__char{margin-inline:-.18em}.kafka-demo .ss-stage[data-layout=compact] .kd-row__rate{justify-content:flex-end}.kafka-demo .ss-stage[data-layout=compact] .kd-row--topic.kd-row--head>:nth-child(n+2){text-align:right}.kafka-demo .kd-bars{flex:none;display:block}.kafka-demo .kd-bars__grow>g{transition:transform .6s cubic-bezier(.45,0,.1,1)}.kafka-demo .kd-bars rect{fill:var(--kd-series);opacity:.55;transition:opacity .4s ease-out}.kafka-demo .kd-bars rect[data-last]{opacity:1}.kafka-demo .kd-size{color:var(--hv-ink);white-space:nowrap;gap:0;display:grid}.kafka-demo .kd-row__readers{flex-wrap:wrap;gap:6px;display:flex}.kafka-demo .kd-chip{white-space:nowrap;border-radius:8px;flex:none;align-items:center;gap:6px;padding:3px 10px;line-height:18px;transition:background-color .2s ease-out,color .2s ease-out;display:inline-flex}.kafka-demo .kd-dot{background:currentColor;border-radius:50%;flex:none;width:6px;height:6px;transition:background-color .2s ease-out;display:block}.kafka-demo .kd-chip[data-tone=success]{background:var(--kd-success-fill);color:var(--kd-success-text)}.kafka-demo .kd-chip[data-tone=success] .kd-dot{background:var(--kd-success-dot)}.kafka-demo .kd-toolbar{align-items:center;height:36px;margin-bottom:16px;display:flex}.kafka-demo .kd-toolbar__space{flex:1;align-self:stretch}.kafka-demo .kd-button--primary{background:var(--hv-ink);box-shadow:none;color:var(--kd-canvas)}.kafka-demo .kd-button--primary[data-hover]{background:var(--hv-ink);opacity:.9}.kafka-demo .kd-button--primary[data-off]{opacity:.4}.kafka-demo .kd-bars__grow{transform-box:fill-box;transform-origin:50% 100%;transition:transform .7s cubic-bezier(.25,.8,.25,1);transform:scaleY(0)}.kafka-demo .kd-bars__grow[data-on]{transform:scaleY(1)}.kafka-demo .kd-dialog{pointer-events:none;z-index:3;position:absolute;inset:0;overflow:hidden}.kafka-demo .kd-dialog[data-open]{pointer-events:auto}.kafka-demo .kd-dialog__scrim{background:var(--kd-scrim);opacity:0;transition:opacity .15s ease-out;position:absolute;inset:0}.kafka-demo .kd-dialog[data-open] .kd-dialog__scrim{opacity:1;transition-duration:.2s}.kafka-demo .kd-dialog__card{background:var(--kd-dialog);box-shadow:0 0 0 1px var(--kd-rule), 0 24px 48px -12px #00000040;opacity:0;border-radius:16px;gap:16px;width:440px;padding:24px;transition:opacity .15s ease-out,transform .15s ease-out;display:grid;position:absolute;top:96px;left:50%;transform:translate(-50%,8px)scale(.98)}.kafka-demo .kd-dialog[data-open] .kd-dialog__card{opacity:1;transition:opacity .2s cubic-bezier(.25,.8,.25,1),transform .2s cubic-bezier(.25,.8,.25,1);transform:translate(-50%)scale(1)}.kafka-demo .kd-sheet .kd-dialog__card{width:calc(100% - 32px);top:64px}.kafka-demo .kd-dialog__title{color:var(--hv-ink);font-family:var(--text-title-font);font-size:var(--text-title-size);font-weight:var(--text-title-weight);letter-spacing:var(--text-title-tracking);line-height:var(--text-title-leading)}.kafka-demo .kd-field{gap:8px;display:grid}.kafka-demo .kd-field__label{color:var(--hv-ink);font-weight:var(--text-small-strong-weight)}.kafka-demo .kd-field__box{box-shadow:inset 0 0 0 1px var(--kd-control);border-radius:12px;align-items:center;height:40px;padding-inline:12px;transition:box-shadow .12s ease-out;display:flex}.kafka-demo .kd-field__box[data-focus]{box-shadow:inset 0 0 0 1px var(--hv-ink), 0 0 0 3px var(--kd-ghost)}.kafka-demo .kd-field__box .kd-mono{color:var(--hv-ink);font-size:var(--text-small-size)}.kafka-demo .kd-field__help{color:var(--hv-ink-secondary);font-size:var(--text-caption-size);line-height:18px}.kafka-demo .kd-caret{background:var(--hv-ink);width:1.5px;height:18px;margin-left:1px;display:none}.kafka-demo .kd-field__box[data-focus] .kd-caret{display:block}.kafka-demo .kd-dialog__actions{justify-content:flex-end;gap:12px;margin-top:8px;display:flex}.kafka-demo .kd-dialog__actions .kd-button--primary{justify-content:center;min-width:116px}