@layer stageshow{.ss-tabs{border-bottom:1px solid var(--ss-line);gap:18px;display:flex;position:relative}.ss-tabs__tab{color:var(--ss-text);padding-bottom:9px;font-size:12.5px;font-weight:500;transition:color .2s}.ss-tabs__tab[data-on]{color:var(--ss-text-strong)}.ss-tabs__bar{background:var(--ss-text-strong);transform-origin:0 0;width:1px;height:2px;transition:transform .35s cubic-bezier(.22,1,.36,1);position:absolute;bottom:-1px;left:0}.ss-tabs:not([data-placed]) .ss-tabs__bar{transition:none}}
@layer stageshow{.ss-collapse{opacity:0;grid-template-rows:0fr;transition:grid-template-rows .42s cubic-bezier(.4,0,.2,1) 50ms,opacity .42s cubic-bezier(0,.8,.5,1);display:grid}.ss-collapse:not([data-open]){pointer-events:none}.ss-collapse[data-open]{opacity:1;grid-template-rows:1fr;transition:grid-template-rows .46s cubic-bezier(.4,0,.2,1),opacity .24s ease-out .15s}.ss-collapse[data-solid],.ss-collapse[data-solid][data-open]{opacity:1}.ss-collapse__inner{min-height:0;overflow:clip}.ss-collapse[data-reveal=clip]>.ss-collapse__inner{flex-direction:column;justify-content:center;display:flex}.ss-collapse[data-reveal=clip][data-tall]>.ss-collapse__inner{justify-content:flex-start}.ss-collapse[data-reveal=clip][data-tall][data-open]{transition:grid-template-rows .46s cubic-bezier(.4,0,.2,1),opacity .24s ease-out .3s}.ss-collapse[data-open]:not([data-moving])>.ss-collapse__inner,.ss-collapse[data-reveal=drop]>.ss-collapse__inner{overflow:visible}.ss-collapse[data-reveal=drop]>.ss-collapse__inner>*{will-change:transform;transition:transform .3s;transform:translateY(-10px)}.ss-collapse[data-reveal=drop][data-from=below]>.ss-collapse__inner>*{transform:translateY(10px)}.ss-collapse[data-reveal=drop][data-open]>.ss-collapse__inner>*{transition:transform .6s cubic-bezier(.22,1,.36,1) .2s;transform:none}.ss-collapse[data-reveal=drop][data-open]{transition:grid-template-rows .5s cubic-bezier(.45,0,.2,1),opacity .3s .24s}}
@layer stageshow{.ss-count{font-variant-numeric:tabular-nums;white-space:nowrap;align-items:baseline;display:inline-flex}.ss-count__char{display:inline-block}.ss-count__text{clip-path:inset(50%);white-space:nowrap;width:1px;height:1px;position:absolute;overflow:hidden}.ss-count__unit{margin-left:var(--ss-count-unit-gap,.08em);display:inline-block}.ss-count__unit[data-space]{margin-left:.28em}.ss-count__digit{vertical-align:baseline;height:1em;line-height:1;display:inline-block;overflow:hidden;-webkit-mask-image:linear-gradient(#0000,#000 8% 92%,#0000);mask-image:linear-gradient(#0000,#000 8% 92%,#0000)}.ss-count__strip{will-change:transform;flex-direction:column;transition-property:transform;transition-timing-function:cubic-bezier(.3,.75,.1,1);display:flex}.ss-count__strip>span{text-align:left;height:1em;line-height:1;display:block}.ss-count[data-snap] .ss-count__strip{transition:none}@media (prefers-reduced-motion:reduce){.ss-count__strip{transition:none}}}
@layer stageshow{.ss-states{place-items:center;display:inline-grid}.ss-states__item{opacity:0;filter:blur(2px);will-change:transform;grid-area:1/1;align-items:center;gap:6px;transition:opacity .15s,filter .15s,transform 0s .15s;display:inline-flex;transform:translateY(4px)}.ss-states__item[data-on]{opacity:1;filter:none;transition:opacity .25s ease-out 70ms,filter .25s ease-out 70ms,transform .3s cubic-bezier(.22,1,.36,1) 70ms;transform:translate(0,0)}.ss-states[data-align=start]{justify-items:start}.ss-states[data-align=end]{justify-items:end}.ss-states[data-reduced]>.ss-states__item{filter:none;transition:opacity .12s;transform:translate(0,0)}}
@layer stageshow{.ss-swap{vertical-align:top;display:inline-block;position:relative;overflow:clip visible}.ss-swap[data-swapping]{-webkit-mask-image:linear-gradient(90deg,#000 calc(100% - 8px),#0000);mask-image:linear-gradient(90deg,#000 calc(100% - 8px),#0000)}.ss-swap__in,.ss-swap__out{text-box:inherit;width:max-content;max-width:100%;display:block}.ss-swap__out{animation:forwards ss-swap-out;position:absolute;top:0;left:0}.ss-swap__in{animation:cubic-bezier(.25,.8,.25,1) both ss-swap-in}@keyframes ss-swap-out{to{opacity:0;filter:blur(2px)}}@keyframes ss-swap-in{0%,30%{opacity:0;filter:blur(2px)}to{opacity:1;filter:none}}@media (prefers-reduced-motion:reduce){.ss-swap__in,.ss-swap__out{animation-duration:1ms!important}}}
@layer stageshow{:where(.ss-window){--ss-lights-y:19px;--ss-dot:9px;position:relative}.ss-window{background:var(--ss-canvas);border-radius:var(--ss-radius-window);box-shadow:var(--ss-shadow-window);flex-direction:column;display:flex;overflow:hidden}.ss-window__bar{height:38px;padding:0 calc(var(--ss-lights-y) - var(--ss-dot) / 2);background:var(--ss-chrome);box-shadow:inset 0 -1px 0 var(--ss-line);flex-shrink:0;align-items:center;gap:6px;display:flex}.ss-window__lights{flex-shrink:0;gap:6px;display:flex}.ss-window__dot{width:var(--ss-dot);height:var(--ss-dot);border-radius:50%;box-shadow:inset 0 0 0 .5px #0000001f}.ss-window__dot:first-child{background:#ff5f57}.ss-window__dot:nth-child(2){background:#febc2e}.ss-window__dot:nth-child(3){background:#28c840}.ss-window__url{background:var(--ss-ink-1);min-width:0;color:var(--ss-text-faint);white-space:nowrap;text-overflow:ellipsis;border-radius:6px;flex:1;margin-left:8px;padding:4px 10px;font-size:10.5px;line-height:1.4;overflow:hidden}.ss-window[data-url-shape=pill] .ss-window__url{border-radius:999px;padding-inline:12px}.ss-window__body{flex:1;min-height:0;position:relative}.ss-window[data-lights=grey] .ss-window__dot{box-shadow:none;background:#bac8da80}}
@layer stageshow{.ss-fit{width:100%;margin-inline:auto;position:relative;overflow:clip}.ss-stage{--ss-canvas:#f6f5f4;--ss-surface:#fff;--ss-chrome:#fff;--ss-ink-1:#0000000a;--ss-line:#0000000f;--ss-text:#7a7a7d;--ss-text-strong:#262628;--ss-text-faint:#9a9a9d;--ss-shadow-window:0 0 0 1px #0000000f, 0 4px 16px #00000014;--ss-radius-window:12px;--ss-font:system-ui, -apple-system, sans-serif;--ss-mono:"SF Mono", "SFMono-Regular", ui-monospace, Consolas, monospace;transform-origin:0 0;font-family:var(--ss-font);-webkit-font-smoothing:antialiased;-webkit-user-select:none;user-select:none;letter-spacing:normal;word-spacing:normal;text-align:start;text-indent:0;text-transform:none;white-space:normal;color:#000;font-size:16px;font-style:normal;font-weight:400;line-height:normal;position:absolute;top:0;left:0}.ss-stage [data-instant],.ss-stage[data-instant] *,.ss-stage [data-instant] *,.ss-stage [data-instant]:before,.ss-stage [data-instant]:after,.ss-stage [data-instant] :before,.ss-stage [data-instant] :after,.ss-stage[data-instant] :before,.ss-stage[data-instant] :after{transition:none!important}.ss-stage[data-still] *,.ss-stage[data-still] :before,.ss-stage[data-still] :after{transition:none!important;animation:none!important}.ss-stage[data-offscreen],.ss-stage[data-offscreen] *,.ss-stage[data-offscreen] :before,.ss-stage[data-offscreen] :after{transition:none!important;animation-play-state:paused!important}.ss-stage[data-placing] *,.ss-stage[data-placing] :before,.ss-stage[data-placing] :after{transition:none!important}.ss-stage *,.ss-stage :before,.ss-stage :after{box-sizing:border-box}.ss-stage[data-hit] *{pointer-events:auto!important}}:where(.ss-stage) :is(svg,img):not(html):not(body){max-width:none}
@layer stageshow{.ss-cursor{z-index:100;pointer-events:none;will-change:transform;transition:opacity .25s;position:absolute;top:0;left:0}.ss-cursor__press{transform-origin:0 0;transition:transform .26s cubic-bezier(.22,1,.36,1);display:grid}.ss-cursor[data-pressed=true] .ss-cursor__press{transition:transform 80ms ease-out;transform:scale(.9)}.ss-cursor__glyph{opacity:0;grid-area:1/1;transition:transform .2s,opacity .2s;transform:scale(0)}.ss-cursor__glyph[data-active=true]{opacity:1;transform:scale(1)}.ss-cursor__glyph svg{filter:drop-shadow(0 1px 2px #0000004d);display:block}.ss-stage[data-theme=dark] .ss-cursor{--ss-cursor-line:#fff;--ss-cursor-edge:#000000bf}.ss-stage[data-hit] :is(.ss-cursor,.ss-cursor *){pointer-events:none!important}}
.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}