/*! GENERATED by scripts/build_css_bundle.py from bundle.manifest.txt (issue #90) — DO NOT EDIT. Edit the per-component sources + manifest, then rerun the build. */
html { font-family: var(--kw-font-body); -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; color: var(--kw-fg); background: var(--kw-bg); } body { font-family: var(--kw-font-body); color: var(--kw-fg); background: transparent; min-height: 100vh; } .kw-bg { position: fixed; inset: 0; overflow: hidden; pointer-events: none; z-index: -1; } .kw-bg__ring { position: absolute; border-radius: 50%; border: 1px dashed rgba(77, 96, 251, 0.30); } .kw-bg__glow { position: absolute; border-radius: 50%; filter: blur(120px); opacity: 0.5; } .kw-bg__comet { position: absolute; opacity: 0.7; } .above { position: relative; z-index: 1; } @media print { .kw-bg { display: none; } } * { scrollbar-width: thin; scrollbar-color: var(--kw-scrollbar-thumb) transparent; } *::-webkit-scrollbar { width: 10px; height: 10px; } *::-webkit-scrollbar-track { background: transparent; } *::-webkit-scrollbar-thumb { background: var(--kw-scrollbar-thumb); border-radius: 8px; border: 2px solid transparent; background-clip: padding-box; } *::-webkit-scrollbar-thumb:hover { background: var(--kw-scrollbar-thumb-hover); } *::-webkit-scrollbar-corner { background: transparent; } :focus-visible { outline: 2px solid var(--kw-focus-ring); outline-offset: 2px; border-radius: 2px; } details > summary { list-style: none; } details > summary::-webkit-details-marker { display: none; } .htmx-indicator { opacity: 0; transition: opacity 200ms; } .htmx-request .htmx-indicator { opacity: 1; } .htmx-request.htmx-indicator { opacity: 1; } .spinner { width: 1em; height: 1em; border: 2px solid currentColor; border-inline-end-color: transparent; border-radius: 50%; display: inline-block; animation: kw-spin 0.6s linear infinite; } @keyframes kw-spin { to { transform: rotate(360deg); } } .kw-ico { color: currentColor; stroke-width: 1.75; vertical-align: middle; flex-shrink: 0; } .kw-ico--gold { color: var(--kw-signal-gold); } [data-lucide] { display: inline-block; vertical-align: middle; } svg.lucide { stroke-width: 1.75; } [dir="rtl"] .kw-ico--flip { transform: scaleX(-1); } .kw-arr { display: inline-block; } [dir="rtl"] .kw-arr { transform: scaleX(-1); } [dir="rtl"] select { background-position: left 0.5rem center; padding-right: 0.75rem; padding-left: 2.5rem; } [dir="rtl"] select:where([multiple]), [dir="rtl"] select:where([size]:not([size="1"])) { padding-left: 0.75rem; } .kw-container { max-width: var(--kw-width-content); margin-inline: auto; padding-inline: var(--kw-space-8); width: 100%; }.kw-public { display: flex; flex-direction: column; } .kw-public__main { padding-top: 2rem; padding-bottom: 3rem; } .kw-layout-with-sidebar { display: flex; flex-direction: column; gap: 2rem; } @media (min-width: 1024px) { .kw-layout-with-sidebar { flex-direction: row; align-items: flex-start; } .kw-layout-with-sidebar__content { flex: 1; min-width: 0; } } .kw-detail-body { display: grid; grid-template-columns: 1fr; gap: 2rem; } @media (min-width: 1024px) { .kw-detail-body { grid-template-columns: minmax(0, 1fr) 320px; } } .kw-detail-body__article { display: flex; flex-direction: column; gap: 1.5rem; min-width: 0; } .kw-detail-body__rail { display: flex; flex-direction: column; gap: 1rem; } .kw-admin-shell { display: flex; align-items: flex-start; min-height: 100vh; background: var(--kw-bg); } .kw-admin-main { flex: 1; min-width: 0; } .kw-admin-main__inner { max-width: none; margin: 0; padding: 2rem var(--kw-space-8); } .kw-admin-topbar { position: sticky; top: 0; z-index: 5; display: flex; align-items: center; gap: 1rem; height: 62px; padding: 0 var(--kw-space-8); background: var(--kw-bg-elevated); border-bottom: 1px solid var(--kw-border-color); } .kw-admin-topbar__crumbs { display: flex; align-items: center; gap: 8px; font-family: var(--kw-font-mono); font-size: 13px; color: var(--kw-fg-subtle); } .kw-admin-topbar__crumbs .kw-ico { color: var(--kw-fg-subtle); } .kw-admin-topbar__here { color: var(--kw-fg); font-weight: 600; } .kw-admin-topbar .langpicker { margin-inline-start: auto; } .kw-admin-topbar .kw-btn-primary--sm { flex-shrink: 0; } .kw-section { background: var(--kw-surface); border: 1px solid var(--kw-border-color); border-radius: 12px; padding: 1.5rem; box-shadow: var(--kw-shadow-card); } html.dark .kw-section { -webkit-backdrop-filter: blur(34px); backdrop-filter: blur(34px); } .kw-section__title { font-size: 1rem; font-weight: 700; color: var(--kw-fg); margin: 0 0 1rem 0; } .kw-section__lede { font-size: 0.875rem; color: var(--kw-fg-muted); margin: 0 0 1rem 0; line-height: 1.6; } .kw-section__body { font-size: 0.875rem; color: var(--kw-fg); line-height: 1.6; } .kw-table { width: 100%; border-collapse: collapse; font-size: 0.875rem; } .kw-table thead { background: var(--kw-bg-subtle); color: var(--kw-fg-muted); } .kw-table thead th { text-align: start; padding: 0.625rem 0.75rem; font-family: var(--kw-font-mono); font-size: 0.75rem; font-weight: 600; text-transform: uppercase; letter-spacing: 0.04em; } .kw-table tbody tr { border-top: 1px solid var(--kw-border-soft); } .kw-table tbody tr:hover { background: var(--kw-bg-subtle); } .kw-table td { padding: 0.75rem; color: var(--kw-fg); vertical-align: middle; } .kw-row-ico { display: inline-flex; align-items: center; gap: 0.6875rem; } .kw-chip-ico { flex-shrink: 0; width: 30px; height: 30px; display: grid; place-items: center; border-radius: var(--kw-radius-sm); color: var(--kw-blue); background: #EAEDFB; border: 1px solid #CBD2F4; } html.dark .kw-chip-ico { color: var(--kw-soft-lavender); background: rgba(77, 96, 251, 0.16); border-color: rgba(77, 96, 251, 0.40); } .kw-pill { display: inline-flex; align-items: center; gap: 0.25rem; font-family: var(--kw-font-mono); font-size: 0.75rem; padding: 0.125rem 0.5rem; border-radius: var(--kw-radius-pill); border: 1px solid; font-weight: 600; } .kw-pill--ok { color: #1B8E5A; background: #E6F7EF; border-color: #B6E6CF; } .kw-pill--err { color: #C23434; background: #FDECEC; border-color: #F4C4C4; } .kw-pill--info { color: var(--kw-blue); background: #EAEDFB; border-color: #CBD2F4; } .kw-pill--warn { color: var(--kw-yellow-ink); background: #FEF6DC; border-color: #F6E0A0; } .kw-pill--beta { color: #6B43C9; background: #F1ECFB; border-color: #DDD0F4; } .kw-pill--neutral { color: var(--kw-fg-muted); background: var(--kw-bg-subtle); border-color: var(--kw-border-color); } html.dark .kw-pill--ok { color: #36C588; background: rgba(43,182,115,0.14); border-color: rgba(43,182,115,0.35); } html.dark .kw-pill--err { color: #FF8A8A; background: rgba(229,69,69,0.12); border-color: rgba(229,69,69,0.34); } html.dark .kw-pill--info { color: var(--kw-soft-lavender); background: rgba(77,96,251,0.16); border-color: rgba(77,96,251,0.40); } html.dark .kw-pill--warn { color: var(--kw-signal-gold); background: rgba(253,202,19,0.12); border-color: rgba(253,202,19,0.32); } html.dark .kw-pill--beta { color: #B79AF2; background: rgba(131,82,232,0.14); border-color: rgba(131,82,232,0.34); } .kw-sev { display: inline-flex; align-items: center; gap: 5px; font-family: var(--kw-font-mono); font-size: 10.5px; font-weight: 700; letter-spacing: 0.04em; text-transform: uppercase; padding: 2px 9px; border-radius: var(--kw-radius-pill); border: 1px solid; } .kw-sev--info { color: #5566D6; background: rgba(77,96,251,0.10); border-color: rgba(77,96,251,0.26); } .kw-sev--warning { color: var(--kw-yellow-ink); background: #FEF6DC; border-color: #F6E0A0; } .kw-sev--error { color: #C23434; background: #FDECEC; border-color: #F4C4C4; } .kw-sev--critical { color: #fff; background: var(--kw-red); border-color: var(--kw-red); } html.dark .kw-sev--info { color: #9DA8F5; } html.dark .kw-sev--warning { color: var(--kw-signal-gold); background: rgba(253,202,19,0.10); border-color: rgba(253,202,19,0.3); } html.dark .kw-sev--error { color: #FF8A8A; background: rgba(229,69,69,0.12); border-color: rgba(229,69,69,0.34); } .kw-sev-row--critical td { background: rgba(229,69,69,0.05); } .kw-sev-row--critical td:first-child { box-shadow: inset 3px 0 0 var(--kw-red); } .kw-link { color: var(--kw-link); text-decoration: none; font-weight: 500; } .kw-link:hover { color: var(--kw-link-hover); text-decoration: underline; } button.kw-link { border: 0; background: none; cursor: pointer; font: inherit; padding: 0; } .kw-page-header { margin-bottom: 1.5rem; } .kw-page-header__title { font-size: 1.5rem; font-weight: 700; letter-spacing: -0.02em; color: var(--kw-fg); margin: 0; } .kw-page-header__lede { font-size: 0.875rem; color: var(--kw-fg-muted); margin: 0.25rem 0 0 0; } .kw-page-header--row { display: flex; align-items: baseline; justify-content: space-between; gap: 1rem; flex-wrap: wrap; } .kw-page-header--row-top { align-items: flex-start; } .kw-strong { font-weight: 600; color: var(--kw-fg); } .kw-acard { display: flex; flex-direction: column; } .kw-acard--error { border-color: var(--kw-red); background: color-mix(in srgb, var(--kw-red) 6%, var(--kw-surface)); } .kw-acard__error-title { font-weight: 600; color: var(--kw-red); } .kw-acard__error-msg { font-family: var(--kw-font-mono); font-size: 0.75rem; color: var(--kw-red); margin-top: 0.25rem; } .kw-acard__head { display: flex; align-items: flex-start; justify-content: space-between; gap: 0.75rem; } .kw-acard__titlewrap { min-width: 0; } .kw-acard__title { font-weight: 700; color: var(--kw-fg); font-size: 1rem; } .kw-acard__id { font-family: var(--kw-font-mono); font-size: 0.75rem; color: var(--kw-fg-muted); margin-top: 0.125rem; } .kw-acard__badges { display: flex; flex-direction: column; align-items: flex-end; gap: 0.25rem; } .kw-acard__summary { margin: 0.75rem 0; flex: 1; } .kw-acard__specs { display: flex; flex-direction: column; gap: 0.375rem; } .kw-acard__spec { display: flex; align-items: flex-start; gap: 0.5rem; font-size: 0.75rem; } .kw-acard__spec-label { color: var(--kw-fg-muted); width: 5rem; flex-shrink: 0; } .kw-acard__chips { display: flex; flex-wrap: wrap; gap: 0.25rem; } .kw-acard__op { color: var(--kw-link); } .kw-acard__footer { margin-top: 1rem; padding-top: 1rem; border-top: 1px solid var(--kw-border-color); display: flex; justify-content: flex-end; } .kw-acard__view { display: inline-flex; align-items: center; gap: 0.25rem; } .kw-grid-cards { display: grid; grid-template-columns: 1fr; gap: 1rem; } @media (min-width: 768px) { .kw-grid-cards { grid-template-columns: repeat(2, 1fr); } } @media (min-width: 1200px) { .kw-grid-cards { grid-template-columns: repeat(3, 1fr); } } .kw-catalog .kw-grid-cards { grid-template-columns: repeat(auto-fill, minmax(420px, 1fr)); } .kw-catalog .kw-card__tagline { -webkit-line-clamp: 3; } .kw-grid-cards--two { display: grid; gap: 1rem; grid-template-columns: 1fr; } @media (min-width: 768px) { .kw-grid-cards--two { grid-template-columns: repeat(2, 1fr); } } .kw-grid-cards--four { display: grid; gap: 1rem; grid-template-columns: 1fr; } @media (min-width: 768px) { .kw-grid-cards--four { grid-template-columns: repeat(2, 1fr); } } @media (min-width: 1024px) { .kw-grid-cards--four { grid-template-columns: repeat(4, 1fr); } } .kw-section--flush { padding: 0; } .kw-mono-sm { font-family: var(--kw-font-mono); font-size: 0.75rem; } .kw-muted { color: var(--kw-fg-muted); } .kw-filter-label { display: block; font-family: var(--kw-font-mono); font-size: 11px; color: var(--kw-fg-muted); text-transform: uppercase; letter-spacing: 0.04em; } .kw-meta-label { font-family: var(--kw-font-mono); color: var(--kw-fg-muted); font-size: 0.6875rem; text-transform: uppercase; letter-spacing: 0.06em; } .kw-field { width: 100%; padding: 0.375rem 0.5rem; background: var(--kw-bg-elevated); color: var(--kw-fg); border: 1px solid var(--kw-border-color); border-radius: var(--kw-radius-md); font-size: 0.875rem; } .kw-field:focus { outline: none; border-color: var(--kw-blue); } html.dark .kw-field { background: rgba(77,96,251,0.06); border-color: rgba(77,96,251,0.20); color: #fff; } .kw-right { text-align: end; } .kw-mono { font-family: var(--kw-font-mono); } .kw-policy-preview__item { border-inline-start: 2px solid #93c5fd; padding-inline-start: 0.5rem; } .kw-table__empty { text-align: center; color: var(--kw-fg-muted); padding: 1.25rem; } .kw-detail-row { display: flex; justify-content: space-between; } .kw-detail-row--gap { gap: 0.5rem; } .kw-detail-row__k { color: var(--kw-fg-muted); } .kw-detail-row__v { font-family: var(--kw-font-mono); margin: 0; } .kw-metric__value { font-family: var(--kw-font-mono-num); font-size: 2rem; font-weight: 400; color: var(--kw-fg); } .kw-metric__label { font-family: var(--kw-font-mono); font-size: 0.875rem; color: var(--kw-fg-muted); margin-top: 0.125rem; }.kw-btn-primary, .kw-btn-secondary, .kw-btn-gold, .kw-btn-danger { display: inline-flex; align-items: center; justify-content: center; gap: 0.5rem; font-family: var(--kw-font-headline); font-weight: 500; font-size: 0.9375rem; letter-spacing: -0.01em; padding: 0.6875rem 1.125rem; border-radius: var(--kw-radius-md); border: 1px solid transparent; text-decoration: none; white-space: nowrap; cursor: pointer; transition: 160ms ease; width: 100%; min-width: 200px; } .kw-btn-primary { background: var(--kw-blue); color: var(--kw-white); border-color: var(--kw-blue); box-shadow: 0 1px 2px rgba(74, 86, 175, 0.25); } .kw-btn-primary:hover { background: var(--kw-blue-hover); border-color: var(--kw-blue-hover); } .kw-btn-secondary { background: var(--kw-bg-elevated); color: var(--kw-fg); border-color: var(--kw-border-color); } .kw-btn-secondary:hover { background: var(--kw-bg-subtle); } html.dark .kw-btn-primary { color: #fff; background: var(--kw-glass-fill); border-color: rgba(77, 96, 251, 0.40); -webkit-backdrop-filter: blur(40px); backdrop-filter: blur(40px); box-shadow: inset 0 0 60px rgba(197, 185, 246, 0.18), inset 0 0 16px rgba(77, 96, 251, 0.30), 0 0 28px rgba(77, 96, 251, 0.22); } html.dark .kw-btn-primary:hover { border-color: rgba(77, 96, 251, 0.65); box-shadow: inset 0 0 70px rgba(197, 185, 246, 0.24), 0 0 36px rgba(77, 96, 251, 0.34); } html.dark .kw-btn-secondary { color: #fff; background: transparent; border-color: rgba(255, 255, 255, 0.20); } html.dark .kw-btn-secondary:hover { border-color: rgba(255, 255, 255, 0.45); background: rgba(255, 255, 255, 0.04); } .kw-btn-gold { background: var(--kw-signal-gold); color: #2A1E00; border-color: var(--kw-signal-gold); } .kw-btn-gold:hover { filter: brightness(1.05); } .kw-btn-danger { background: var(--kw-red); color: #fff; border-color: var(--kw-red); } .kw-btn-danger:hover { filter: brightness(0.93); } html.dark .kw-btn-danger { background: rgba(229, 69, 69, 0.16); border-color: rgba(229, 69, 69, 0.50); color: #FF9D9D; box-shadow: inset 0 0 16px rgba(229, 69, 69, 0.22); } html.dark .kw-btn-danger:hover { background: rgba(229, 69, 69, 0.26); border-color: rgba(229, 69, 69, 0.75); color: #fff; } .kw-btn-primary--sm { width: auto; min-width: 0; font-size: 0.875rem; padding: 0.375rem 0.875rem; }.kw-topnav { position: sticky; top: 0; z-index: 50; padding: 18px var(--kw-space-8); width: 100%; } .kw-topnav__inner { max-width: var(--kw-width-content); width: 100%; margin: 0 auto; display: flex; align-items: center; gap: 20px; padding: 8px 10px 8px 18px; border-radius: var(--kw-radius-pill); background: rgba(77, 96, 251, 0.06); border: 1px solid rgba(77, 96, 251, 0.20); -webkit-backdrop-filter: blur(40px); backdrop-filter: blur(40px); box-shadow: inset 0 0 16px rgba(77, 96, 251, 0.18); } .kw-topnav__brand { display: flex; align-items: center; gap: 10px; font-weight: 700; font-size: 1.05rem; color: #fff; text-decoration: none; } .kw-topnav__brand img { height: 22px; display: block; } .kw-topnav__brand-text { color: #fff; } .kw-topnav__brand-text--muted { font-family: var(--kw-font-mono); font-size: 11px; font-weight: 500; color: var(--kw-muted-lavender); padding-inline-start: 10px; margin-inline-start: 2px; border-inline-start: 1px solid rgba(255, 255, 255, 0.18); } .kw-topnav__brand-mark { width: 30px; height: 30px; border-radius: var(--kw-radius-md); background: linear-gradient(135deg, #4D60FB, #8352E8); color: #fff; font-weight: 700; display: inline-flex; align-items: center; justify-content: center; } .kw-topnav__nav { display: flex; align-items: center; gap: 2px; margin-inline-start: 8px; } .kw-topnav__link { font-family: var(--kw-font-headline); font-weight: 500; font-size: 14px; color: #fff; padding: 8px 14px; border-radius: var(--kw-radius-pill); text-decoration: none; transition: background 150ms; } .kw-topnav__link:hover { background: rgba(77, 96, 251, 0.12); } .kw-topnav__link--active { background: rgba(77, 96, 251, 0.18); } .kw-topnav__actions { margin-inline-start: auto; display: flex; align-items: center; gap: 10px; } .kw-topnav__chip { display: inline-flex; align-items: center; gap: 6px; font-family: var(--kw-font-mono); font-size: 12px; color: var(--kw-muted-lavender); padding: 6px 12px; border-radius: var(--kw-radius-pill); background: rgba(147, 156, 229, 0.10); border: 1px solid rgba(77, 96, 251, 0.18); text-decoration: none; } .kw-topnav__chip--link:hover { color: #fff; background: rgba(77, 96, 251, 0.18); } .kw-topnav__avatar-form { display: inline-flex; margin: 0; } .kw-topnav__avatar { width: 34px; height: 34px; border-radius: 50%; display: grid; place-items: center; font-family: var(--kw-font-headline); font-weight: 600; font-size: 13px; color: #fff; background: linear-gradient(135deg, #4D60FB, #8352E8); border: 0; padding: 0; cursor: pointer; } .kw-topnav__avatar:hover { filter: brightness(1.12); } @keyframes kwChipPop { 0% { opacity: 0; transform: scale(.82); } 60% { opacity: 1; transform: scale(1.04); } 100% { opacity: 1; transform: scale(1); } } .kw-topnav__menu { position: relative; display: none; } .kw-topnav__burger { display: inline-flex; align-items: center; justify-content: center; width: 38px; height: 38px; padding: 0; cursor: pointer; border-radius: var(--kw-radius-pill); background: rgba(147, 156, 229, 0.10); border: 1px solid rgba(77, 96, 251, 0.18); color: #fff; transition: 150ms ease; } .kw-topnav__burger:hover { background: rgba(77, 96, 251, 0.18); border-color: rgba(77, 96, 251, 0.55); } .kw-topnav__menu[data-open] .kw-topnav__burger { background: rgba(77, 96, 251, 0.18); border-color: var(--kw-blue); } .kw-topnav__burger .kw-ico { width: 18px; height: 18px; } .kw-topnav__burger-panel { position: absolute; top: calc(100% + 10px); inset-inline-end: 0; z-index: 60; min-width: 240px; max-width: calc(100vw - 2rem); display: flex; flex-direction: column; gap: 2px; padding: 8px; border-radius: var(--kw-radius-lg); opacity: 0; visibility: hidden; transform: translateY(-4px); transition: opacity 150ms ease, transform 150ms ease, visibility 150ms; background: rgba(13, 15, 49, 0.96); border: 1px solid rgba(77, 96, 251, 0.30); box-shadow: 0 24px 60px rgba(0, 0, 0, 0.55), inset 0 0 40px rgba(197, 185, 246, 0.10); -webkit-backdrop-filter: blur(34px); backdrop-filter: blur(34px); } .kw-topnav__menu[data-open] .kw-topnav__burger-panel { opacity: 1; visibility: visible; transform: none; } .kw-topnav__burger-link { display: flex; align-items: center; gap: 10px; width: 100%; text-align: start; font-family: var(--kw-font-headline); font-weight: 500; font-size: 14px; color: #fff; text-decoration: none; cursor: pointer; padding: 10px 12px; border: 0; background: transparent; border-radius: var(--kw-radius-sm); transition: background 120ms; } .kw-topnav__burger-link:hover { background: rgba(77, 96, 251, 0.12); } .kw-topnav__burger-link--active { background: rgba(77, 96, 251, 0.18); } .kw-topnav__burger-link .kw-ico { width: 16px; height: 16px; flex-shrink: 0; } .kw-topnav__burger-cttool { padding: 4px 6px; }.kw-sidebar { width: 260px; flex-shrink: 0; display: flex; flex-direction: column; gap: var(--kw-space-6); } .kw-sidebar__head { display: flex; align-items: baseline; justify-content: space-between; padding-bottom: var(--kw-space-3); border-bottom: 1px solid var(--kw-border-color); } .kw-sidebar__heading { font-size: 0.9375rem; font-weight: 700; color: var(--kw-fg); margin: 0; } .kw-sidebar__clear { font-family: var(--kw-font-headline); font-size: 0.75rem; font-weight: 600; color: var(--kw-link); text-decoration: none; cursor: pointer; } .kw-sidebar__clear:hover { color: var(--kw-link-hover); text-decoration: underline; } .kw-sidebar__group h3 { font-family: var(--kw-font-mono); font-size: 0.6875rem; font-weight: 500; letter-spacing: 0.04em; text-transform: uppercase; color: var(--kw-fg-subtle); margin: 0 0 var(--kw-space-3) 0; } .kw-sidebar__search { display: none; width: 100%; box-sizing: border-box; font-size: 0.8125rem; color: var(--kw-fg); background: var(--kw-bg-elevated); border: 1px solid var(--kw-border-color); border-radius: var(--kw-radius-md); padding: 0.375rem 0.5rem; margin-bottom: var(--kw-space-3); } html.dark .kw-sidebar__search { background: rgba(77, 96, 251, 0.06); border-color: rgba(77, 96, 251, 0.20); } .kw-sidebar__search:focus { outline: 0; border-color: var(--kw-blue); box-shadow: 0 0 0 3px color-mix(in srgb, var(--kw-blue) 15%, transparent); } .kw-catalog.js .kw-sidebar__search { display: block; } .kw-sidebar__scroll { max-height: 13.5rem; overflow-y: auto; padding-inline-end: 0.25rem; margin-inline-end: -0.25rem; } .kw-sidebar__option { display: flex; align-items: center; gap: 0.625rem; padding: 0.3125rem 0.625rem; border-radius: var(--kw-radius-sm); cursor: pointer; font-size: 0.875rem; color: var(--kw-fg-muted); } .kw-sidebar__option:hover { color: var(--kw-fg); } .kw-sidebar__option[hidden] { display: none !important; } html.dark .kw-sidebar__option:hover { background: rgba(77, 96, 251, 0.08); color: #fff; } .kw-sidebar__option-label { text-transform: capitalize; } .kw-sidebar__option:hover .kw-sidebar__option-label { color: inherit; } .kw-sidebar__dot { width: 8px; height: 8px; border-radius: 2px; flex-shrink: 0; } .kw-sidebar__dot--available { background: #2BB673; box-shadow: 0 0 6px rgba(43,182,115,0.55); } .kw-sidebar__dot--beta { background: var(--kw-blue); box-shadow: 0 0 6px rgba(77,96,251,0.55); } .kw-sidebar__dot--coming_soon { background: var(--kw-signal-gold, #FDCA13); box-shadow: 0 0 6px rgba(253,202,19,0.55); } .kw-sidebar__dot--roadmap { background: var(--kw-fg-subtle); } .kw-sidebar__count { margin-inline-start: auto; font-family: var(--kw-font-mono); font-size: 0.6875rem; color: var(--kw-fg-subtle); } .kw-sidebar__chips { display: flex; flex-wrap: wrap; gap: 0.5rem; } .kw-sidebar__chip { padding: 0.375rem 0.75rem; font-family: var(--kw-font-mono); font-size: 0.75rem; font-weight: 500; background: var(--kw-bg-subtle); border: 1px solid var(--kw-border-color); color: var(--kw-fg-muted); border-radius: var(--kw-radius-pill); cursor: pointer; transition: background 150ms; } .kw-sidebar__chip:hover { background: var(--kw-border-color); } .kw-sidebar__chip--active { background: var(--kw-blue); color: var(--kw-white); border-color: var(--kw-blue); } .kw-sidebar__select { width: 100%; background: var(--kw-bg-elevated); border: 1px solid var(--kw-border-color); border-radius: var(--kw-radius-md); font-size: 0.875rem; color: var(--kw-fg); padding: 0.5rem 0.75rem; } html.dark .kw-sidebar__select { background: rgba(77, 96, 251, 0.06); border-color: rgba(77, 96, 251, 0.20); color: #fff; } .kw-adminnav { width: 256px; flex-shrink: 0; background: var(--kw-deep-space); color: #fff; display: flex; flex-direction: column; position: sticky; top: 0; height: 100vh; align-self: flex-start; overflow-y: auto; --kw-scrollbar-thumb: rgba(255, 255, 255, 0.16); --kw-scrollbar-thumb-hover: rgba(255, 255, 255, 0.30); } .kw-adminnav__brand { padding: 1.25rem 1.25rem 0.5rem; display: flex; align-items: center; gap: 0.625rem; text-decoration: none; } .kw-adminnav__brand img { height: 20px; display: block; } .kw-adminnav__brand-tag { font-family: var(--kw-font-mono); font-size: 10px; color: var(--kw-muted-lavender); padding-inline-start: 9px; border-inline-start: 1px solid rgba(255, 255, 255, 0.18); } .kw-adminnav__brand-mark { width: 30px; height: 30px; border-radius: var(--kw-radius-md); background: linear-gradient(135deg, #4D60FB, #8352E8); color: #fff; display: flex; align-items: center; justify-content: center; font-weight: 700; font-size: 0.875rem; } .kw-adminnav__brand-label .kw-eyebrow { font-family: var(--kw-font-mono); font-size: 10px; text-transform: uppercase; letter-spacing: 0.08em; color: var(--kw-muted-lavender); } .kw-adminnav__brand-label .kw-title { font-size: 0.875rem; font-weight: 600; color: #fff; margin-top: 2px; } .kw-adminnav__nav { padding: 0.75rem; flex: 1; display: flex; flex-direction: column; gap: 2px; font-size: 0.875rem; } .kw-adminnav__nav form { margin: 0; } button.kw-adminnav__exit { border: 0; background: none; cursor: pointer; font: inherit; width: 100%; text-align: start; } .kw-adminnav__link { display: flex; align-items: center; justify-content: space-between; padding: 0.5625rem 0.75rem; color: rgba(221, 214, 251, 0.72); text-decoration: none; border-radius: var(--kw-radius-sm); font-family: var(--kw-font-headline); transition: background 150ms, color 150ms; } .kw-adminnav__link:hover { background: rgba(77, 96, 251, 0.10); color: #fff; } .kw-adminnav__link--active { background: rgba(77, 96, 251, 0.20); color: #fff; box-shadow: inset 0 0 14px rgba(77, 96, 251, 0.20); } .kw-adminnav__link--active:hover { background: rgba(77, 96, 251, 0.24); } .kw-adminnav__link-left { display: flex; align-items: center; gap: 0.6875rem; } .kw-adminnav__count { font-family: var(--kw-font-mono); font-size: 11px; padding: 1px 7px; border-radius: var(--kw-radius-pill); font-weight: 500; background: rgba(77, 96, 251, 0.30); color: #fff; } .kw-adminnav__link--active .kw-adminnav__count { background: rgba(255, 255, 255, 0.2); color: #fff; } .kw-adminnav__divider { margin: 0.75rem 0; border: 0; border-top: 1px solid rgba(255, 255, 255, 0.10); } .kw-adminnav__exit { font-size: 0.8125rem; color: rgba(221, 214, 251, 0.72); text-decoration: none; padding: 0.5625rem 0.75rem; display: inline-flex; align-items: center; gap: 0.6875rem; border-radius: var(--kw-radius-sm); } .kw-adminnav__exit:hover { color: #fff; background: rgba(77, 96, 251, 0.10); } .kw-adminnav__section { font-family: var(--kw-font-mono); font-size: 11px; letter-spacing: 0.02em; font-weight: 500; color: var(--kw-muted-lavender); padding: 0.875rem 0.75rem 0.25rem 0.75rem; } .kw-adminnav__status { margin: 0 0.75rem 0.5rem; padding: 0.625rem 0.75rem; border-radius: var(--kw-radius-md); background: rgba(77, 96, 251, 0.08); border: 1px solid rgba(77, 96, 251, 0.20); box-shadow: inset 0 0 22px rgba(197, 185, 246, 0.12); } .kw-adminnav__status-label { font-family: var(--kw-font-mono); font-size: 10px; text-transform: uppercase; letter-spacing: 0.06em; color: var(--kw-muted-lavender); } .kw-adminnav__status-chips { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 8px; } .kw-adminnav__status-chip { display: inline-flex; align-items: center; gap: 5px; font-family: var(--kw-font-mono); font-size: 10px; padding: 3px 8px; border-radius: var(--kw-radius-pill); background: rgba(43, 182, 115, 0.16); color: #7DE0B0; } .kw-adminnav__status-dot { width: 5px; height: 5px; border-radius: 50%; background: #36C588; box-shadow: 0 0 6px #36C588; } .kw-adminnav__profile { margin: 0.5rem 0.75rem 0.875rem; padding: 0.625rem 0.75rem; border-radius: var(--kw-radius-md); background: rgba(255, 255, 255, 0.04); border: 1px solid rgba(255, 255, 255, 0.10); display: flex; align-items: flex-start; gap: 0.625rem; } .kw-adminnav__profile-avatar { width: 34px; height: 34px; flex-shrink: 0; border-radius: 50%; background: linear-gradient(135deg, #4D60FB, #8352E8); color: #fff; display: grid; place-items: center; font-size: 0.8125rem; font-weight: 600; } .kw-adminnav__profile-body { min-width: 0; flex: 1; } .kw-adminnav__profile-name { font-size: 0.84375rem; font-weight: 600; color: #fff; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .kw-adminnav__profile-email { font-family: var(--kw-font-mono); font-size: 0.65625rem; color: rgba(221, 214, 251, 0.62); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .kw-adminnav__profile-meta { font-family: var(--kw-font-mono); font-size: 0.6875rem; color: var(--kw-muted-lavender); display: flex; align-items: center; gap: 0.25rem; margin-top: 4px; } .kw-adminnav__profile-tags { display: flex; flex-wrap: wrap; gap: 0.25rem; margin-top: 0.4375rem; } .kw-adminnav__tag { font-family: var(--kw-font-mono); font-size: 9px; font-weight: 600; letter-spacing: 0.02em; padding: 1px 7px; border-radius: var(--kw-radius-pill); background: rgba(255, 255, 255, 0.06); border: 1px solid rgba(255, 255, 255, 0.12); color: var(--kw-muted-lavender); display: inline-flex; align-items: center; gap: 3px; text-transform: uppercase; } .kw-adminnav__tag--sso { background: rgba(43, 182, 115, 0.16); border-color: rgba(43, 182, 115, 0.35); color: #7DE0B0; } .kw-adminnav__tag--dev { background: rgba(253, 202, 19, 0.16); border-color: rgba(253, 202, 19, 0.30); color: var(--kw-signal-gold); } .kw-adminnav__build { padding: 10px 12px 12px; border-top: 1px solid rgba(255, 255, 255, 0.08); } .kw-adminnav__build-label { font-family: var(--kw-font-mono); font-size: 10px; letter-spacing: 0.02em; color: var(--kw-fg-muted); word-break: break-all; } .kw-adminnav__count--pulse { animation: kw-navcount-pulse 600ms ease; } @keyframes kw-navcount-pulse { 0% { transform: scale(1); } 35% { transform: scale(1.35); background: var(--kw-teal); color: #fff; } 100% { transform: scale(1); } } @media (prefers-reduced-motion: reduce) { .kw-adminnav__count--pulse { animation: none; } }.kw-sidebar__option input[type="checkbox"] { position: absolute; opacity: 0; width: 0; height: 0; } .kw-sidebar__option-box { flex-shrink: 0; width: 18px; height: 18px; border-radius: 5px; border: 1.5px solid var(--kw-border-color); background: var(--kw-bg-elevated); display: grid; place-items: center; transition: background 140ms ease, border-color 140ms ease, box-shadow 140ms ease; } html.dark .kw-sidebar__option-box { background: rgba(77, 96, 251, 0.06); border-color: rgba(77, 96, 251, 0.30); } .kw-sidebar__option-box::after { content: ""; width: 10px; height: 10px; opacity: 0; transition: opacity 120ms ease; background-color: #fff; -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='3.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20 6 9 17l-5-5'/%3E%3C/svg%3E") center/contain no-repeat; mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='3.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20 6 9 17l-5-5'/%3E%3C/svg%3E") center/contain no-repeat; } .kw-sidebar__option input[type="checkbox"]:checked + .kw-sidebar__option-box { background: var(--kw-blue); border-color: var(--kw-blue); } html.dark .kw-sidebar__option input[type="checkbox"]:checked + .kw-sidebar__option-box { background: var(--kw-electric-indigo); border-color: var(--kw-electric-indigo); box-shadow: 0 0 10px rgba(77, 96, 251, 0.45); } .kw-sidebar__option input[type="checkbox"]:checked + .kw-sidebar__option-box::after { opacity: 1; } .kw-sidebar__option input[type="checkbox"]:focus-visible + .kw-sidebar__option-box { outline: 2px solid var(--kw-electric-indigo); outline-offset: 2px; }.kw-catalog__form { display: block; } .kw-catalog-toolbar { display: flex; flex-wrap: wrap; align-items: center; gap: 0.75rem; margin-bottom: 1.5rem; } .kw-catalog-toolbar__search { flex: 1 1 320px; min-width: 200px; display: flex; align-items: center; gap: 0.625rem; background: var(--kw-bg-elevated); border: 1px solid var(--kw-border-color); border-radius: var(--kw-radius-pill); padding: 0 1rem; transition: border-color 150ms, box-shadow 150ms; } html.dark .kw-catalog-toolbar__search { background: rgba(77, 96, 251, 0.06); border-color: rgba(77, 96, 251, 0.20); } .kw-catalog-toolbar__search .kw-ico { color: var(--kw-fg-subtle); flex-shrink: 0; } .kw-catalog-toolbar__search:focus-within { border-color: var(--kw-blue); box-shadow: 0 0 0 3px color-mix(in srgb, var(--kw-blue) 15%, transparent); } .kw-catalog-toolbar__input { flex: 1; min-width: 0; border: 0; outline: 0; background: transparent; font-family: var(--kw-font-body); font-size: 0.9375rem; color: var(--kw-fg); padding: 0.6875rem 0; } .kw-catalog-toolbar__input::placeholder { color: var(--kw-fg-subtle); } .kw-catalog-toolbar__right { display: flex; align-items: center; gap: 1rem; margin-inline-start: auto; } .kw-catalog-toolbar__count { font-family: var(--kw-font-mono); font-size: 0.75rem; color: var(--kw-fg-subtle); white-space: nowrap; } .kw-catalog-toolbar__sort { display: inline-flex; align-items: center; gap: 0.5rem; font-family: var(--kw-font-mono); font-size: 0.75rem; color: var(--kw-fg-subtle); white-space: nowrap; } .kw-catalog-toolbar__sort .kw-sidebar__select { width: auto; } .kw-catalog__apply { margin-top: 1.5rem; } .kw-catalog.js .kw-catalog__apply { display: none; } @media (max-width: 640px) { .kw-catalog-toolbar__right { margin-inline-start: 0; width: 100%; flex-wrap: wrap; gap: 0.5rem 0.75rem; justify-content: space-between; } .sortmenu__panel { min-width: 0; max-width: calc(100vw - 2rem); } }.kw-filterbar { display: flex; flex-wrap: wrap; align-items: center; gap: 0.5rem; margin-bottom: var(--kw-space-5); } .kw-filterbar[hidden] { display: none !important; } .kw-fchip { display: inline-flex; align-items: center; gap: 0.375rem; padding: 0.3125rem 0.625rem 0.3125rem 0.75rem; font-family: var(--kw-font-mono); font-size: 0.75rem; font-weight: 500; color: var(--kw-fg); background: var(--kw-bg-subtle); border: 1px solid var(--kw-border-color); border-radius: var(--kw-radius-pill); cursor: pointer; transition: background 150ms, border-color 150ms, color 150ms; animation: kw-fchip-in 180ms cubic-bezier(0.2, 0.7, 0.2, 1); } html.dark .kw-fchip { background: rgba(77, 96, 251, 0.10); border-color: rgba(77, 96, 251, 0.28); color: var(--kw-muted-lavender); } .kw-fchip:hover { border-color: var(--kw-blue); color: var(--kw-fg); } html.dark .kw-fchip:hover { background: rgba(77, 96, 251, 0.20); color: #fff; } .kw-fchip__label { white-space: nowrap; } .kw-fchip__x { font-size: 0.875rem; line-height: 1; opacity: 0.65; } .kw-fchip:hover .kw-fchip__x { opacity: 1; } .kw-fchip--query { font-style: italic; } .kw-fchip--clear { background: none; border-color: transparent; color: var(--kw-link); font-family: var(--kw-font-headline); font-weight: 600; } html.dark .kw-fchip--clear { background: none; border-color: transparent; color: var(--kw-link); } .kw-fchip--clear:hover { color: var(--kw-link-hover); text-decoration: underline; border-color: transparent; } html.dark .kw-fchip--clear:hover { background: none; } @keyframes kw-fchip-in { from { opacity: 0; transform: scale(0.9); } to { opacity: 1; transform: scale(1); } } @media (prefers-reduced-motion: reduce) { .kw-fchip { animation: none; } }.sortmenu { position: relative; } .sortmenu__native { font-family: var(--kw-font-mono); font-size: 12px; padding: 8px 12px; border-radius: var(--kw-radius-pill); background: var(--kw-bg-elevated); border: 1px solid var(--kw-border-color); color: var(--kw-fg); } html.dark .sortmenu__native { background: var(--kw-midnight-navy); color: #fff; border-color: rgba(77, 96, 251, 0.30); } .sortmenu.is-enhanced .sortmenu__native { display: none; } .sortmenu__trigger { display: inline-flex; align-items: center; gap: 8px; cursor: pointer; font-family: var(--kw-font-mono); font-size: 12px; line-height: 1; white-space: nowrap; padding: 9px 12px; border-radius: var(--kw-radius-pill); border: 1px solid var(--kw-border-color); background: var(--kw-bg-subtle); color: var(--kw-fg-muted); transition: 150ms ease; } html.dark .sortmenu__trigger { background: rgba(77, 96, 251, 0.06); border-color: rgba(77, 96, 251, 0.20); color: var(--kw-muted-lavender); } .sortmenu__trigger:hover { border-color: var(--kw-blue); color: var(--kw-fg); } html.dark .sortmenu__trigger:hover { border-color: rgba(77, 96, 251, 0.55); color: #fff; } .sortmenu__trigger [data-lucide] { width: 14px; height: 14px; } .sortmenu__trigger .lead { color: var(--kw-fg-subtle); } .sortmenu__trigger .val { color: var(--kw-fg); } html.dark .sortmenu__trigger .val { color: #fff; } .sortmenu__trigger .chev { margin-inline-start: 2px; transition: transform 160ms ease; opacity: .7; } .sortmenu[data-open] .sortmenu__trigger { border-color: var(--kw-blue); } .sortmenu[data-open] .sortmenu__trigger .chev { transform: rotate(180deg); } .sortmenu__panel { position: absolute; top: calc(100% + 8px); inset-inline-end: 0; z-index: 60; min-width: 220px; padding: 6px; border-radius: var(--kw-radius-lg); opacity: 0; visibility: hidden; transform: translateY(-4px); transition: opacity 150ms ease, transform 150ms ease, visibility 150ms; } html.light .sortmenu__panel { background: #fff; border: 1px solid var(--kw-border-color); box-shadow: 0 16px 44px -12px rgba(11, 14, 36, 0.28); } html.dark .sortmenu__panel { background: rgba(13, 15, 49, 0.96); border: 1px solid rgba(77, 96, 251, 0.30); box-shadow: 0 24px 60px rgba(0, 0, 0, 0.55), inset 0 0 40px rgba(197, 185, 246, 0.10); -webkit-backdrop-filter: blur(34px); backdrop-filter: blur(34px); } .sortmenu[data-open] .sortmenu__panel { opacity: 1; visibility: visible; transform: none; } .sortmenu__menulabel { font-family: var(--kw-font-mono); font-size: 10px; letter-spacing: 0.06em; text-transform: uppercase; color: var(--kw-fg-subtle); padding: 8px 10px 6px; } .sortmenu__item { display: flex; align-items: center; gap: 10px; width: 100%; text-align: start; cursor: pointer; font-family: var(--kw-font-body); font-size: 14px; color: var(--kw-fg-muted); padding: 9px 10px; border: 0; background: transparent; border-radius: var(--kw-radius-sm); transition: background 120ms, color 120ms; } .sortmenu__item:hover { background: var(--kw-bg-subtle); color: var(--kw-fg); } html.dark .sortmenu__item:hover { background: rgba(77, 96, 251, 0.10); color: #fff; } .sortmenu__item.is-active { color: var(--kw-fg); font-weight: 500; } html.dark .sortmenu__item.is-active { color: #fff; } .sortmenu__item .ico { width: 16px; height: 16px; flex-shrink: 0; color: var(--kw-fg-subtle); } .sortmenu__item .label { flex: 1; } .sortmenu__item .check { width: 16px; height: 16px; opacity: 0; color: var(--kw-blue); } html.dark .sortmenu__item .check { color: var(--kw-electric-indigo); } .sortmenu__item.is-active .check { opacity: 1; } .sortmenu__item.is-kbd { background: var(--kw-bg-subtle); } html.dark .sortmenu__item.is-kbd { background: rgba(77, 96, 251, 0.10); }.kw-card { position: relative; display: flex; flex-direction: column; gap: 0.875rem; height: 100%; padding: 20px; border-radius: var(--kw-radius-xl); text-decoration: none; color: inherit; background: var(--kw-surface); border: 1px solid var(--kw-border-color); box-shadow: var(--kw-shadow-card); transition: transform 180ms ease, box-shadow 180ms ease, border-color 180ms ease; overflow: hidden; } html.dark .kw-card { -webkit-backdrop-filter: blur(34px); backdrop-filter: blur(34px); } .kw-card[hidden] { display: none !important; } .kw-card::before { content: ""; position: absolute; top: 0; inset-inline: 0; height: 3px; background: var(--kw-card-accent, var(--kw-blue)); opacity: 0.9; } .kw-card:hover { transform: translateY(-2px); border-color: color-mix(in srgb, var(--kw-card-accent, var(--kw-blue)) 45%, var(--kw-border-color)); } html.dark .kw-card:hover { box-shadow: var(--kw-glow-glass), 0 0 30px -8px var(--kw-card-accent, rgba(77, 96, 251, 0.5)); } html.light .kw-card:hover { box-shadow: var(--kw-shadow-hover); } .kw-card--compliance { --kw-card-accent: var(--kw-cat-compliance); } .kw-card--administrative { --kw-card-accent: var(--kw-cat-administrative); } .kw-card--communication { --kw-card-accent: var(--kw-cat-communication); } .kw-card--documents { --kw-card-accent: var(--kw-cat-documents); } .kw-card--governance { --kw-card-accent: var(--kw-cat-governance); } .kw-card--security { --kw-card-accent: var(--kw-cat-security); } .kw-card--dlp { --kw-card-accent: var(--kw-cat-dlp); } .kw-card--ediscovery { --kw-card-accent: var(--kw-cat-ediscovery); } .kw-card--privacy { --kw-card-accent: var(--kw-cat-privacy); } .kw-card__head { display: flex; align-items: center; justify-content: space-between; gap: 0.625rem; flex-wrap: nowrap; } .kw-card__head-left { display: flex; align-items: center; gap: 0.625rem; min-width: 0; flex: 1 1 auto; } .kw-card__head .kw-cat { display: block; min-width: 0; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; } .kw-card__head .kw-card__status { flex-shrink: 0; } .kw-card__body { display: flex; flex-direction: column; gap: 0.375rem; } .kw-card__icon { position: relative; width: 40px; height: 40px; border-radius: 50%; display: grid; place-items: center; flex-shrink: 0; background: var(--kw-glass-fill); box-shadow: 0 12px 19px rgba(0, 0, 0, 0.16), inset 1.9px 3.81px 15.24px rgba(248, 248, 248, 0.10), inset 0 0 40px rgba(197, 185, 246, 0.15); } .kw-card__icon::before { content: ""; position: absolute; inset: 0; border-radius: inherit; padding: 1px; background: linear-gradient(135deg, rgba(197,185,246,0.45) 0%, rgba(197,185,246,0.01) 38%, rgba(197,185,246,0.01) 64%, rgba(197,185,246,0.12) 100%); -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0); -webkit-mask-composite: xor; mask-composite: exclude; pointer-events: none; } .kw-card__icon > * { position: relative; z-index: 1; } .kw-card__icon .kw-ico { color: #fff; } html.light .kw-card__icon { background: var(--kw-blue); box-shadow: 0 6px 16px -6px rgba(74, 86, 175, 0.55); } .kw-card__title { font-size: 1.125rem; font-weight: 700; letter-spacing: -0.015em; color: var(--kw-fg); margin: 0; line-height: 1.25; } .kw-card__tagline { font-size: 0.875rem; color: var(--kw-fg-muted); display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; margin: 0; } .kw-card__meta { display: flex; align-items: center; flex-wrap: wrap; gap: 0.375rem 0.875rem; font-family: var(--kw-font-mono); font-size: 0.6875rem; color: var(--kw-fg-subtle); } .kw-card__meta-item { display: inline-flex; align-items: center; gap: 0.3125rem; } .kw-card__regs { display: flex; flex-wrap: wrap; gap: 0.375rem; } .kw-card__reg { display: inline-flex; align-items: center; gap: 0.25rem; font-family: var(--kw-font-mono); font-size: 11px; font-weight: 600; letter-spacing: 0.01em; padding: 0.1875rem 0.5rem 0.1875rem 0.4375rem; border-radius: var(--kw-radius-pill); white-space: nowrap; color: color-mix(in srgb, var(--kw-teal) 80%, var(--kw-fg)); background: color-mix(in srgb, var(--kw-teal) 12%, transparent); border: 1px solid color-mix(in srgb, var(--kw-teal) 28%, transparent); } .kw-card__tags { display: flex; flex-wrap: wrap; gap: 0.3125rem; } .kw-card__tag { font-family: var(--kw-font-mono); font-size: 11px; padding: 0.1875rem 0.4375rem; background: var(--kw-bg-subtle); border-radius: var(--kw-radius-sm); color: var(--kw-fg-subtle); } html.dark .kw-card__tag { background: rgba(77, 96, 251, 0.10); color: var(--kw-muted-lavender); border: 1px solid rgba(77, 96, 251, 0.14); } .kw-card__footer { display: flex; align-items: center; justify-content: space-between; padding-top: 0.875rem; border-top: 1px solid var(--kw-border-soft); margin-top: auto; } .kw-card__footer-meta { display: inline-flex; align-items: center; gap: 0.375rem; font-family: var(--kw-font-mono); font-size: 0.6875rem; color: var(--kw-fg-subtle); } .kw-card__footer-actions { display: inline-flex; align-items: center; gap: 0.75rem; } .kw-card__action { display: inline-flex; align-items: center; gap: 0.375rem; font-family: var(--kw-font-headline); font-weight: 500; font-size: 0.875rem; color: var(--kw-fg); text-decoration: none; background: none; border: 0; padding: 0; cursor: pointer; } html.dark .kw-card__action { color: #fff; } .kw-card__action:hover { color: var(--kw-link); } .kw-card__action--secondary { color: var(--kw-fg-muted); font-weight: 600; } .kw-card__status { display: inline-flex; align-items: center; gap: 0.25rem; font-family: var(--kw-font-mono); font-size: 11px; font-weight: 600; padding: 0.1875rem 0.5625rem; border-radius: var(--kw-radius-pill); border: 1px solid; white-space: nowrap; } .kw-card__status--available { background: #E6F7EF; color: #1B8E5A; border-color: #B6E6CF; } .kw-card__status--coming { background: #FEF6DC; color: var(--kw-yellow-ink); border-color: #F6E0A0; } .kw-card__status--roadmap { background: var(--kw-bg-subtle); color: var(--kw-fg-subtle); border-color: var(--kw-border-color); } .kw-card__status--native { background: #EAF2FF; color: #1D4ED8; border-color: #BFDBFE; } html.dark .kw-card__status--available { background: rgba(43,182,115,0.14); color: #36C588; border-color: rgba(43,182,115,0.35); } html.dark .kw-card__status--coming { background: rgba(253,202,19,0.14); color: var(--kw-signal-gold); border-color: rgba(253,202,19,0.35); } html.dark .kw-card__status--roadmap { background: rgba(255,255,255,0.06); color: var(--kw-fg-subtle); border-color: var(--kw-border-soft); } html.dark .kw-card__status--native { background: rgba(59,130,246,0.14); color: #60A5FA; border-color: rgba(59,130,246,0.35); } .kw-card--soon { --kw-card-accent: var(--kw-signal-gold, #FDCA13); } .kw-card--soon::before { opacity: 1; } html.light .kw-card--soon { background: linear-gradient(180deg, #FEF9E7, var(--kw-surface)); border-color: #F1DFA6; } html.dark .kw-card--soon { background: linear-gradient(180deg, rgba(253,202,19,0.10), rgba(253,202,19,0.02)); border-color: rgba(253,202,19,0.30); }.kw-safety-row { display: flex; flex-wrap: wrap; gap: 0.375rem; align-items: center; } .kw-safety-row--nowrap { flex-wrap: nowrap; } .kw-safety { display: inline-flex; align-items: center; gap: 0.25rem; padding: 0.25rem 0.5rem; background: var(--kw-bg-subtle); border: 1px solid var(--kw-border-color); border-radius: var(--kw-radius-pill); font-family: var(--kw-font-mono); font-size: 10px; font-weight: 500; color: var(--kw-fg-muted); } html.dark .kw-safety { background: rgba(77, 96, 251, 0.10); border-color: rgba(77, 96, 251, 0.18); color: var(--kw-muted-lavender); } .kw-safety .kw-ico { color: currentColor; } .kw-safety--lg { padding: 0.375rem 0.625rem; font-size: 0.75rem; }.kw-cat { display: inline-flex; align-items: center; font-family: var(--kw-font-mono); font-size: 11px; font-weight: 500; padding: 0.1875rem 0.5625rem; border-radius: var(--kw-radius-pill); color: color-mix(in srgb, var(--kw-cat-c, var(--kw-blue)) 78%, var(--kw-fg)); background: color-mix(in srgb, var(--kw-cat-c, var(--kw-blue)) 14%, transparent); border: 1px solid color-mix(in srgb, var(--kw-cat-c, var(--kw-blue)) 30%, transparent); } .kw-cat--compliance { --kw-cat-c: var(--kw-cat-compliance); } .kw-cat--administrative { --kw-cat-c: var(--kw-cat-administrative); } .kw-cat--communication { --kw-cat-c: var(--kw-cat-communication); } .kw-cat--documents { --kw-cat-c: var(--kw-cat-documents); } .kw-cat--governance { --kw-cat-c: var(--kw-cat-governance); } .kw-cat--security { --kw-cat-c: var(--kw-cat-security); } .kw-cat--dlp { --kw-cat-c: var(--kw-cat-dlp); } .kw-cat--ediscovery { --kw-cat-c: var(--kw-cat-ediscovery); } .kw-cat--privacy { --kw-cat-c: var(--kw-cat-privacy); } .kw-cat-dot { width: 8px; height: 8px; border-radius: 2px; display: inline-block; flex-shrink: 0; background: var(--kw-cat-c, var(--kw-blue)); } .kw-cat-dot--compliance { --kw-cat-c: var(--kw-cat-compliance); } .kw-cat-dot--administrative { --kw-cat-c: var(--kw-cat-administrative); } .kw-cat-dot--communication { --kw-cat-c: var(--kw-cat-communication); } .kw-cat-dot--documents { --kw-cat-c: var(--kw-cat-documents); } .kw-cat-dot--governance { --kw-cat-c: var(--kw-cat-governance); } .kw-cat-dot--security { --kw-cat-c: var(--kw-cat-security); } .kw-cat-dot--dlp { --kw-cat-c: var(--kw-cat-dlp); } .kw-cat-dot--ediscovery { --kw-cat-c: var(--kw-cat-ediscovery); } .kw-cat-dot--privacy { --kw-cat-c: var(--kw-cat-privacy); }.kw-grade { display: inline-flex; align-items: center; gap: 0.3125rem; font-family: var(--kw-font-mono); font-size: 10px; font-weight: 600; letter-spacing: 0.02em; padding: 0.125rem 0.5rem 0.125rem 0.375rem; border-radius: var(--kw-radius-pill); border: 1px solid; white-space: nowrap; } .kw-grade--compliance { background: #E6F7EF; color: #1B8E5A; border-color: #B6E6CF; } html.dark .kw-grade--compliance { background: rgba(43, 182, 115, 0.12); color: #36C588; border-color: rgba(43, 182, 115, 0.32); } .kw-grade--casual { background: #F1ECFB; color: #6B43C9; border-color: #DDD0F4; } html.dark .kw-grade--casual { background: rgba(131, 82, 232, 0.14); color: #B79AF2; border-color: rgba(131, 82, 232, 0.34); } .kw-grade--lg { font-size: 0.75rem; padding: 0.375rem 0.625rem 0.375rem 0.5rem; } .kw-grade-warning { display: inline-flex; align-items: center; gap: 0.25rem; font-family: var(--kw-font-mono); font-size: 10px; font-weight: 500; padding: 0.125rem 0.5rem; border-radius: var(--kw-radius-pill); background: #FEF6DC; color: var(--kw-yellow-ink); border: 1px solid #F6E0A0; } html.dark .kw-grade-warning { background: rgba(253, 202, 19, 0.10); color: var(--kw-signal-gold); border-color: rgba(253, 202, 19, 0.30); }.kw-hero { padding: 4.5rem var(--kw-space-8) 3.5rem; text-align: center; } .kw-hero__inner { max-width: var(--kw-width-content); margin: 0 auto; display: flex; flex-direction: column; align-items: center; gap: 0; } .kw-hero__eyebrow { display: inline-flex; align-items: center; gap: 0.5rem; padding: 0.375rem 0.875rem; background: rgba(147, 156, 229, 0.13); color: var(--kw-muted-lavender); font-family: var(--kw-font-mono); font-size: 12px; font-weight: 500; border-radius: var(--kw-radius-pill); margin-bottom: 1.625rem; } .kw-hero__dot { width: 6px; height: 6px; border-radius: 50%; background: var(--kw-electric-indigo); box-shadow: 0 0 10px var(--kw-electric-indigo); } .kw-hero__title { font-size: clamp(2.75rem, 6vw, 4.875rem); font-weight: 700; letter-spacing: -0.025em; line-height: 1.05; margin: 0; max-width: 920px; font-family: var(--kw-font-headline); background: linear-gradient(180deg, #fff, var(--kw-muted-lavender)); -webkit-background-clip: text; background-clip: text; color: transparent; } .kw-hero__lede { font-size: 1.125rem; line-height: 1.6; color: var(--kw-fg-muted); max-width: 620px; margin: 1.5rem auto 2.125rem; } .kw-hero__ctas { display: flex; gap: 0.75rem; justify-content: center; flex-wrap: wrap; } .kw-hero__ctas .kw-btn-primary, .kw-hero__ctas .kw-btn-secondary { width: auto; min-width: 0; font-size: 1rem; padding: 0.875rem 1.375rem; } .kw-shero { text-align: start; padding-block: 3.375rem 4rem; } .kw-shero__inner { display: grid; grid-template-columns: minmax(380px, 1fr) minmax(0, 1.05fr); gap: 3rem; align-items: center; max-width: var(--kw-width-content); margin: 0 auto; box-sizing: border-box; } .kw-shero__copy { min-width: 0; display: flex; flex-direction: column; align-items: flex-start; } .kw-shero__title { font-size: 1.0625rem; font-weight: 600; line-height: 1.35; letter-spacing: -0.01em; margin: 0 0 0.75rem; font-family: var(--kw-font-headline); color: var(--kw-muted-lavender); } .kw-shero__sub { font-size: clamp(34px, 3.5vw, 46px); font-weight: 700; line-height: 1.08; letter-spacing: -0.03em; margin: 0; font-family: var(--kw-font-headline); color: var(--kw-fg); } .kw-shero .kw-hero__lede { margin: 1.25rem 0 0; max-width: 33rem; text-align: start; } .kw-rotline { position: relative; display: block; min-height: 2.34em; margin-top: 4px; } .kw-rotline__item { display: block; position: absolute; inset-inline: 0; inset-block-start: 0; white-space: normal; opacity: 0; background: linear-gradient(180deg, #fff, var(--kw-muted-lavender)); -webkit-background-clip: text; background-clip: text; color: transparent; } .kw-rotline__item.is-in { position: relative; opacity: 1; } @media (prefers-reduced-motion: no-preference) { .kw-rotline__item { transform: translateY(48px) scale(0.965); filter: blur(10px); transition: opacity 0.5s ease, transform 0.66s cubic-bezier(0.16, 1, 0.3, 1), filter 0.5s ease; } .kw-rotline__item.is-in { opacity: 1; transform: none; filter: none; } .kw-rotline__item.is-out { opacity: 0; transform: translateY(-36px) scale(0.98); filter: blur(8px); transition-duration: 0.42s; } } .kw-shero__out { display: inline-flex; align-items: center; gap: 0.75rem; margin-top: 1.625rem; padding: 0.75rem 1rem; border-radius: var(--kw-radius-md); background: rgba(77, 96, 251, 0.08); border: 1px solid rgba(77, 96, 251, 0.24); max-width: 100%; box-sizing: border-box; } .kw-shero__live { width: 7px; height: 7px; border-radius: 50%; flex-shrink: 0; background: #36C588; box-shadow: 0 0 9px #36C588; } .kw-shero__out-lbl { font-family: var(--kw-font-mono); font-size: 11px; color: var(--kw-muted-lavender); white-space: nowrap; } .kw-shero__out-name { color: var(--kw-fg); font-weight: 600; font-size: 13px; } .kw-shero__out-val { font-family: var(--kw-font-mono-num); color: var(--kw-signal-gold); font-size: 15px; } .kw-shero__out-vlabel { font-family: var(--kw-font-mono); font-size: 11px; color: var(--kw-fg-subtle); text-transform: lowercase; } .kw-shero .kw-hero__ctas { margin-top: 1.625rem; justify-content: flex-start; } .kw-shero__demo { min-width: 0; } .kw-shero__demo .kw-demo { margin: 0; } @media (max-width: 920px) { .kw-shero { padding-block: 2.25rem 2.75rem; } .kw-shero__inner { grid-template-columns: 1fr; gap: 2rem; } .kw-shero__title { font-size: 1rem; } .kw-shero__sub { font-size: clamp(30px, 7vw, 40px); } .kw-rotline { min-height: 2.5em; } } @media (max-width: 480px) { .kw-shero__out { flex-wrap: wrap; } .kw-shero__out-name, .kw-shero__out-val { white-space: normal; } .kw-shero__sub { font-size: clamp(24px, 8vw, 32px); } }.kw-detail-hero { background: transparent; border-bottom: 1px solid var(--kw-border-color); } .kw-detail-hero__hint { display: inline-flex; align-items: center; gap: 0.375rem; font-size: 0.8125rem; color: var(--kw-fg-muted); } .kw-detail-hero__inner { max-width: var(--kw-width-content); margin: 0 auto; padding: 1.5rem var(--kw-space-8) 2rem var(--kw-space-8); display: flex; flex-direction: column; gap: 2rem; } @media (min-width: 768px) { .kw-detail-hero__inner { flex-direction: row; align-items: flex-start; justify-content: space-between; } } .kw-detail-hero__lhs { display: flex; gap: 1.25rem; flex: 1; min-width: 0; } .kw-detail-hero__icon { position: relative; width: 64px; height: 64px; border-radius: 50%; display: grid; place-items: center; flex-shrink: 0; background: var(--kw-glass-fill); box-shadow: 0 12px 19px rgba(0, 0, 0, 0.16), inset 1.9px 3.81px 15.24px rgba(248, 248, 248, 0.10), inset 0 0 40px rgba(197, 185, 246, 0.15); } .kw-detail-hero__icon::before { content: ""; position: absolute; inset: 0; border-radius: inherit; padding: 1px; background: linear-gradient(135deg, rgba(197,185,246,0.45) 0%, rgba(197,185,246,0.01) 38%, rgba(197,185,246,0.01) 64%, rgba(197,185,246,0.12) 100%); -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0); -webkit-mask-composite: xor; mask-composite: exclude; pointer-events: none; } .kw-detail-hero__icon > * { position: relative; z-index: 1; } .kw-detail-hero__icon .kw-ico { color: #fff; } html.light .kw-detail-hero__icon { background: var(--kw-blue); box-shadow: 0 6px 16px -6px rgba(74, 86, 175, 0.55); } .kw-detail-hero__body { display: flex; flex-direction: column; gap: 0.75rem; min-width: 0; } .kw-detail-hero__title { font-size: 2.5rem; font-weight: 700; letter-spacing: -0.025em; color: var(--kw-fg); margin: 0; line-height: 1.05; font-family: var(--kw-font-headline); } .kw-detail-hero__author { font-size: 0.875rem; color: var(--kw-fg-muted); margin: 0.25rem 0 0 0; } .kw-detail-hero__author strong { color: var(--kw-fg); font-weight: 600; } .kw-detail-hero__desc { font-size: 1.0625rem; color: var(--kw-fg-muted); line-height: 1.6; margin: 0; max-width: 38rem; } .kw-detail-hero__pills { display: flex; flex-wrap: wrap; gap: 0.5rem; margin-top: 0.5rem; } .kw-detail-hero__rhs { display: flex; flex-direction: column; align-items: flex-end; gap: 0.75rem; flex-shrink: 0; min-width: 220px; } .kw-detail-hero__pricing { font-family: var(--kw-font-mono); font-size: 0.75rem; font-weight: 500; color: var(--kw-fg-muted); }.kw-tabs { position: sticky; top: 86px; z-index: 40; border-bottom: 1px solid var(--kw-border-color); } html.dark .kw-tabs { background: rgba(13, 15, 49, 0.72); -webkit-backdrop-filter: blur(20px); backdrop-filter: blur(20px); } html.light .kw-tabs { background: var(--kw-bg-elevated); box-shadow: var(--kw-shadow-sm); } .kw-tabs__inner { max-width: var(--kw-width-content); margin: 0 auto; padding: 0 var(--kw-space-8); display: flex; align-items: center; justify-content: space-between; gap: 1rem; flex-wrap: wrap; } .kw-tabs__list { display: flex; gap: 1.5rem; overflow-x: auto; } .kw-tabs__tab { padding: 0.75rem 0; font-size: 0.875rem; font-weight: 500; color: var(--kw-fg-muted); border-bottom: 2px solid transparent; text-decoration: none; white-space: nowrap; transition: color 150ms, border-color 150ms; } .kw-tabs__tab:hover { color: var(--kw-fg); border-bottom-color: var(--kw-border-color); } .kw-tabs__tab--active { color: var(--kw-fg); font-weight: 600; border-bottom-color: var(--kw-blue); } .kw-tabs__stats { display: flex; align-items: center; gap: 0.25rem; } .kw-tabs__stat { padding: 0 0.875rem; border-inline-end: 1px solid var(--kw-border-color); display: flex; flex-direction: column; line-height: 1.25; } .kw-tabs__stat:last-child { border-inline-end: 0; padding-inline-end: 0; } .kw-tabs__stat-value { font-family: var(--kw-font-mono-num); font-size: 0.8125rem; font-weight: 600; color: var(--kw-fg); } .kw-tabs__stat-label { font-family: var(--kw-font-mono); font-size: 0.625rem; text-transform: uppercase; letter-spacing: 0.04em; color: var(--kw-fg-muted); } #overview, #how-it-works, #permissions, #install { scroll-margin-top: 150px; }.kw-demo { position: relative; border: 1px solid var(--kw-glass-stroke); border-radius: var(--kw-radius-xl); background: var(--kw-glass-fill); box-shadow: var(--kw-glow-glass); -webkit-backdrop-filter: blur(34px); backdrop-filter: blur(34px); padding: 1.375rem; overflow: hidden; max-width: 100%; box-sizing: border-box; } .kw-demo__head { display: flex; align-items: center; gap: 0.875rem; margin-bottom: 1.125rem; } .kw-demo__eyebrow { font-family: var(--kw-font-mono); font-size: 0.75rem; font-weight: 500; letter-spacing: 0.02em; color: var(--kw-muted-lavender); margin: 0 auto 0 0; } .kw-demo__dots, .kw-demo__controls { display: none; } .kw-demo.is-animating .kw-demo__dots { display: inline-flex; gap: 0.5rem; } .kw-demo.is-animating .kw-demo__controls { display: inline-flex; gap: 0.375rem; } .kw-demo__dot { width: 22px; height: 5px; padding: 0; border: none; border-radius: var(--kw-radius-pill); background: rgba(255, 255, 255, 0.16); cursor: pointer; transition: 200ms; } .kw-demo__dot[aria-current="true"] { width: 30px; background: var(--kw-electric-indigo); box-shadow: 0 0 10px rgba(77, 96, 251, 0.6); } .kw-demo__dot:hover { background: rgba(255, 255, 255, 0.3); } .kw-demo__ctrl { display: inline-flex; align-items: center; justify-content: center; width: 32px; height: 32px; border: 1px solid rgba(255, 255, 255, 0.14); border-radius: var(--kw-radius-sm); background: rgba(255, 255, 255, 0.04); color: var(--kw-muted-lavender); cursor: pointer; transition: 150ms; } .kw-demo__ctrl:hover { color: #fff; border-color: rgba(255, 255, 255, 0.34); } .kw-demo__example { margin: 0; } .kw-demo__example:not(.is-active) { display: none; } .kw-demo__example.is-active { display: block; } .kw-demo__stage { min-height: 22rem; } .kw-demo__turn { display: flex; flex-direction: column; gap: 0.4375rem; margin-bottom: 1rem; } .kw-demo__turn--user { align-items: flex-end; } .kw-demo__turn--agent { align-items: flex-start; } .kw-demo__role { display: inline-flex; align-items: center; gap: 0.4375rem; font-family: var(--kw-font-mono); font-size: 0.6875rem; color: var(--kw-fg-subtle); } .kw-demo__bubble { max-width: 88%; border-radius: var(--kw-radius-lg); padding: 0.75rem 0.9375rem; font-size: 0.875rem; line-height: 1.55; } .kw-demo__turn--user .kw-demo__bubble { background: rgba(77, 96, 251, 0.18); border: 1px solid rgba(77, 96, 251, 0.4); color: #fff; border-end-end-radius: var(--kw-radius-sm); box-shadow: inset 0 0 20px rgba(77, 96, 251, 0.18); } .kw-demo__turn--agent .kw-demo__bubble { width: 100%; background: rgba(13, 15, 49, 0.55); border: 1px solid var(--kw-glass-stroke); border-end-start-radius: var(--kw-radius-sm); box-shadow: inset 0 0 30px rgba(197, 185, 246, 0.08); } .kw-demo__prompt { margin: 0; } .kw-demo__blocks { display: flex; flex-direction: column; gap: 0.6875rem; } .kw-demo__say { margin: 0; color: #fff; } .kw-demo__tool { display: inline-flex; align-items: center; gap: 0.5rem; font-family: var(--kw-font-mono); font-size: 0.78125rem; color: var(--kw-muted-lavender); background: rgba(77, 96, 251, 0.10); border: 1px solid rgba(77, 96, 251, 0.18); padding: 0.4375rem 0.6875rem; border-radius: var(--kw-radius-sm); } .kw-demo__tool .kw-ico { color: var(--kw-electric-indigo); } .kw-demo__tool-arrow { color: var(--kw-electric-indigo); font-weight: 700; } .kw-demo__metrics { display: flex; flex-wrap: wrap; gap: 0.625rem; } .kw-demo__metric { display: flex; flex-direction: column; gap: 0.1875rem; padding: 0.6875rem 0.9375rem; border: 1px solid var(--kw-glass-stroke); border-radius: var(--kw-radius-md); background: rgba(77, 96, 251, 0.08); min-width: 5.75rem; } .kw-demo__metric-value { font-family: var(--kw-font-mono-num); font-size: 1.5rem; font-weight: 400; color: #fff; line-height: 1; } .kw-demo__metric-label { font-family: var(--kw-font-mono); font-size: 0.625rem; color: var(--kw-fg-subtle); text-transform: uppercase; letter-spacing: 0.04em; } .kw-demo__metric:first-child { background: rgba(77, 96, 251, 0.16); border-color: rgba(77, 96, 251, 0.5); box-shadow: inset 0 0 22px rgba(197, 185, 246, 0.14); } .kw-demo__metric:first-child .kw-demo__metric-value { color: var(--kw-soft-lavender); text-shadow: var(--kw-glow-text); } .kw-demo__table-wrap { overflow-x: auto; } .kw-demo__table { width: 100%; border-collapse: collapse; font-size: 0.8125rem; } .kw-demo__table th, .kw-demo__table td { text-align: start; padding: 0.5rem 0.625rem; white-space: nowrap; } .kw-demo__table th { font-family: var(--kw-font-mono); font-size: 0.625rem; text-transform: uppercase; letter-spacing: 0.04em; color: var(--kw-fg-subtle); font-weight: 500; border-bottom: 1px solid var(--kw-glass-stroke); } .kw-demo__table td { color: var(--kw-fg-muted); border-bottom: 1px solid rgba(255, 255, 255, 0.06); } .kw-demo__table tbody tr:last-child td { border-bottom: none; } .kw-demo__code { margin: 0; font-family: var(--kw-font-mono); font-size: 0.78125rem; line-height: 1.7; background: var(--kw-deep-space); border: 1px solid var(--kw-glass-stroke); color: var(--kw-soft-lavender); padding: 1rem; border-radius: var(--kw-radius-md); overflow-x: auto; } .kw-demo__callout { display: flex; align-items: center; gap: 0.5625rem; padding: 0.625rem 0.8125rem; border-radius: var(--kw-radius-md); font-size: 0.84375rem; border: 1px solid; } .kw-demo__callout--success { background: rgba(43, 182, 115, 0.12); border-color: rgba(43, 182, 115, 0.35); color: #7DE0B0; } .kw-demo__callout--success .kw-ico { color: #36C588; } .kw-demo__callout--info { background: rgba(77, 96, 251, 0.10); border-color: rgba(77, 96, 251, 0.30); color: var(--kw-muted-lavender); } .kw-demo__callout--warn { background: rgba(253, 202, 19, 0.10); border-color: rgba(253, 202, 19, 0.30); color: var(--kw-signal-gold); } .kw-demo__callout--warn .kw-ico { color: var(--kw-signal-gold); } .kw-demo__provenance { display: flex; align-items: center; gap: 0.25rem; margin-top: 0.875rem; font-family: var(--kw-font-mono); font-size: 0.6875rem; color: var(--kw-fg-subtle); } .kw-demo.is-animating .kw-demo__prompt { white-space: nowrap; overflow: hidden; } .kw-demo.is-animating .kw-demo__turn--agent { opacity: 0; transition: opacity 0.3s ease; } .kw-demo.is-animating .kw-demo__example.show-agent .kw-demo__turn--agent { opacity: 1; } .kw-demo.is-animating .kw-demo__blocks > [data-demo-block] { opacity: 0; transform: translateY(6px); transition: opacity 0.35s ease, transform 0.35s ease; } .kw-demo.is-animating .kw-demo__blocks > [data-demo-block].is-shown { opacity: 1; transform: none; } .kw-demo.is-animating [data-demo-block="table"] tbody tr { opacity: 0; transition: opacity 0.3s ease; } .kw-demo.is-animating [data-demo-block="table"].is-shown tbody tr { opacity: 1; } .kw-demo.is-animating [data-demo-block="table"].is-shown tbody tr:nth-child(1) { transition-delay: 0.04s; } .kw-demo.is-animating [data-demo-block="table"].is-shown tbody tr:nth-child(2) { transition-delay: 0.12s; } .kw-demo.is-animating [data-demo-block="table"].is-shown tbody tr:nth-child(3) { transition-delay: 0.20s; } .kw-demo.is-animating [data-demo-block="table"].is-shown tbody tr:nth-child(4) { transition-delay: 0.28s; } .kw-demo.is-animating [data-demo-block="table"].is-shown tbody tr:nth-child(5) { transition-delay: 0.36s; } .kw-demo.is-animating [data-demo-block="table"].is-shown tbody tr:nth-child(6) { transition-delay: 0.44s; } .kw-demo.is-animating [data-demo-block="table"].is-shown tbody tr:nth-child(7) { transition-delay: 0.52s; } .kw-demo.is-animating [data-demo-block="table"].is-shown tbody tr:nth-child(8) { transition-delay: 0.60s; } .kw-demo__thinking { display: inline-flex; gap: 5px; align-items: center; height: 1rem; position: absolute; } .kw-demo__thinking i { width: 6px; height: 6px; border-radius: 50%; background: var(--kw-muted-lavender); animation: kw-demo-think 1.2s ease-in-out infinite; } .kw-demo__thinking i:nth-child(2) { animation-delay: 0.15s; } .kw-demo__thinking i:nth-child(3) { animation-delay: 0.30s; } @keyframes kw-demo-think { 0%, 100% { opacity: 0.3; transform: translateY(0); } 50% { opacity: 1; transform: translateY(-3px); } } @media (prefers-reduced-motion: reduce) { .kw-demo, .kw-demo * { animation: none !important; transition: none !important; } .kw-demo .kw-demo__turn--agent, .kw-demo .kw-demo__blocks > [data-demo-block], .kw-demo [data-demo-block="table"] tbody tr { opacity: 1 !important; transform: none !important; } .kw-demo .kw-demo__prompt { white-space: normal !important; overflow: visible !important; clip-path: none !important; } } .kw-demo--hero .kw-demo__stage { display: grid; grid-template-columns: minmax(0, 1fr); } .kw-demo--hero .kw-demo__example { grid-area: 1 / 1; min-width: 0; } .kw-demo--hero .kw-demo__example:not(.is-active) { display: block; visibility: hidden; pointer-events: none; } .kw-demo--hero .kw-demo__example + .kw-demo__example { margin-top: 0; padding-top: 0; border-top: none; } .kw-demo--hero .kw-demo__stage { min-height: 22.5rem; } .kw-demo__live { width: 7px; height: 7px; border-radius: 50%; flex-shrink: 0; background: var(--kw-electric-indigo); box-shadow: 0 0 10px var(--kw-electric-indigo); animation: kw-demo-pulse 2s ease-in-out infinite; } .kw-demo--hero .kw-demo__eyebrow { display: inline-flex; align-items: center; gap: 0.5rem; } @keyframes kw-demo-pulse { 0%, 100% { opacity: 0.45; } 50% { opacity: 1; } } .kw-demo__metric--gold .kw-demo__metric-value, .kw-demo--hero .kw-demo__metric:nth-child(2) .kw-demo__metric-value { color: var(--kw-signal-gold); } @media (max-width: 920px) { .kw-demo--hero .kw-demo__stage, .kw-demo--hero.is-animating .kw-demo__stage { min-height: 16.25rem; } } @media (max-width: 480px) { .kw-demo { padding: 0.875rem; } .kw-demo--hero .kw-demo__stage, .kw-demo--hero.is-animating .kw-demo__stage { min-height: 13rem; } .kw-demo__metric-value { font-size: 1.125rem; } .kw-demo__bubble { font-size: 0.8125rem; padding: 0.625rem 0.75rem; } }.kw-rail-card { background: var(--kw-surface); border: 1px solid var(--kw-border-color); border-radius: var(--kw-radius-lg); padding: 1.25rem; box-shadow: var(--kw-shadow-card); } html.dark .kw-rail-card { -webkit-backdrop-filter: blur(34px); backdrop-filter: blur(34px); } .kw-rail-card__head { display: flex; align-items: center; gap: 0.5rem; padding-bottom: 0.75rem; margin-bottom: 1rem; border-bottom: 1px solid var(--kw-border-color); } .kw-rail-card__head .kw-ico { color: var(--kw-fg-muted); } .kw-rail-card__title { font-weight: 600; color: var(--kw-fg); margin: 0; font-size: 0.9375rem; } .kw-scope-list { list-style: none; padding: 0; margin: 0; display: flex; flex-direction: column; gap: 0.75rem; } .kw-scope-list__item { display: flex; align-items: flex-start; gap: 0.625rem; } .kw-scope-list__check { color: var(--kw-teal); flex-shrink: 0; margin-top: 1px; } .kw-scope-list__code { display: block; font-family: var(--kw-font-mono); font-size: 0.75rem; font-weight: 600; color: var(--kw-fg); margin-bottom: 0.125rem; } .kw-scope-list__desc { font-size: 11px; color: var(--kw-fg-muted); line-height: 1.4; margin: 0; }.kw-vendor { background: var(--kw-surface); border: 1px solid var(--kw-border-color); border-radius: var(--kw-radius-lg); padding: 1.25rem; box-shadow: var(--kw-shadow-card); } html.dark .kw-vendor { -webkit-backdrop-filter: blur(34px); backdrop-filter: blur(34px); } .kw-vendor__title { font-weight: 600; color: var(--kw-fg); margin: 0 0 1rem 0; font-size: 0.9375rem; } .kw-vendor__row { display: flex; align-items: center; gap: 0.75rem; margin-bottom: 0.75rem; } .kw-vendor__avatar { width: 40px; height: 40px; border-radius: 50%; background: linear-gradient(135deg, #4A56AF, #8352E8); color: var(--kw-white); display: grid; place-items: center; font-weight: 600; font-size: 1rem; flex-shrink: 0; } .kw-vendor__name { font-weight: 600; font-size: 0.875rem; color: var(--kw-fg); } .kw-vendor__verified { display: inline-flex; align-items: center; gap: 0.25rem; font-family: var(--kw-font-mono); font-size: 11px; font-weight: 500; color: var(--kw-teal); } .kw-vendor__support { font-size: 11px; color: var(--kw-fg-muted); line-height: 1.5; border-top: 1px solid var(--kw-border-color); padding-top: 0.75rem; margin: 0; }.kw-breadcrumb { display: flex; align-items: center; gap: 0.5rem; padding: 0.5rem 0 1.125rem; font-family: var(--kw-font-mono); font-size: 0.8125rem; font-weight: 500; color: var(--kw-fg-subtle); } .kw-breadcrumb__link { color: var(--kw-fg-subtle); text-decoration: none; transition: color 150ms; } .kw-breadcrumb__link:hover { color: var(--kw-link-hover); } .kw-breadcrumb__sep { color: var(--kw-fg-subtle); opacity: 0.6; } .kw-breadcrumb__sep .kw-ico { width: 14px; height: 14px; } .kw-breadcrumb__current { color: var(--kw-fg); }.kw-footer { border-top: 1px solid rgba(77, 96, 251, 0.15); margin-top: 60px; font-size: 0.875rem; color: var(--kw-fg-muted); } .kw-footer__inner { max-width: var(--kw-width-content); margin: 0 auto; padding: 56px var(--kw-space-8) 32px; display: grid; grid-template-columns: 1fr; gap: 2rem; } @media (min-width: 768px) { .kw-footer__inner { grid-template-columns: 1.4fr 1fr 1fr 1fr; } } .kw-footer__brand { font-weight: 700; font-size: 1.125rem; color: #fff; margin-bottom: 0.75rem; } .kw-footer__brand img { display: block; height: 24px; } .kw-footer__col { display: flex; flex-direction: column; gap: 0.5rem; } .kw-footer__heading { font-family: var(--kw-font-mono); font-size: 13px; font-weight: 500; color: var(--kw-muted-lavender); margin-bottom: 4px; } .kw-footer__link { color: var(--kw-fg-muted); text-decoration: none; transition: color 150ms; } .kw-footer__link:hover { color: #fff; text-decoration: underline; } .kw-footer__meta { max-width: var(--kw-width-content); margin: 0 auto; padding: 16px var(--kw-space-8) 28px; border-top: 1px solid rgba(77, 96, 251, 0.1); display: flex; flex-wrap: wrap; gap: 4px 1.25rem; font-family: var(--kw-font-mono); font-size: 12px; color: var(--kw-fg-muted); } .kw-footer__meta-item { white-space: nowrap; } .kw-footer__sha { opacity: 0.85; }.dlg-backdrop { position: fixed; inset: 0; z-index: 200; display: none; align-items: center; justify-content: center; padding: 20px; background: rgba(5, 8, 33, 0.55); -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px); } .dlg-backdrop.is-open { display: flex; } @media (prefers-reduced-motion: no-preference) { .dlg-backdrop.is-open { animation: dlg-fade 160ms ease-out; } } @keyframes dlg-fade { from { opacity: 0; } to { opacity: 1; } } .dlg { position: relative; width: 100%; max-width: 460px; border-radius: var(--kw-radius-xl); padding: 26px; } @media (prefers-reduced-motion: no-preference) { .dlg-backdrop.is-open .dlg { animation: dlg-rise 180ms cubic-bezier(0.2, 0.7, 0.3, 1) both; } } @keyframes dlg-rise { from { transform: translateY(10px) scale(0.99); } to { transform: none; } } .dlg:focus { outline: none; } html.light .dlg { background: #fff; border: 1px solid var(--kw-border-color); box-shadow: 0 30px 80px rgba(11, 14, 36, 0.30); } html.dark .dlg { background: color-mix(in srgb, var(--kw-electric-indigo) 15%, #14163f 85%); border: 1px solid color-mix(in srgb, var(--kw-soft-lavender) 38%, transparent); box-shadow: 0 30px 90px rgba(0, 0, 0, 0.6), inset 0 0 60px color-mix(in srgb, var(--kw-soft-lavender) 18%, transparent), inset 0 0 16px color-mix(in srgb, var(--kw-electric-indigo) 30%, transparent); -webkit-backdrop-filter: blur(36px); backdrop-filter: blur(36px); } html.dark .dlg::before { content: ""; position: absolute; inset: -40px; z-index: -1; pointer-events: none; border-radius: inherit; background: radial-gradient(60% 60% at 0% 0%, color-mix(in srgb, var(--kw-electric-indigo) 55%, transparent), transparent 70%), radial-gradient(60% 60% at 100% 100%, color-mix(in srgb, var(--kw-violet) 50%, transparent), transparent 70%); filter: blur(70px); opacity: 0.55; } .dlg__close { position: absolute; top: 16px; inset-inline-end: 16px; width: 32px; height: 32px; display: grid; place-items: center; border: 0; border-radius: var(--kw-radius-sm); background: transparent; color: var(--kw-fg-subtle); cursor: pointer; transition: 150ms; } .dlg__close:hover { background: var(--kw-bg-subtle); color: var(--kw-fg); } html.dark .dlg__close:hover { background: rgba(255, 255, 255, 0.06); color: #fff; } .dlg__close [data-lucide], .dlg__close svg { width: 18px; height: 18px; } .dlg__orb { position: relative; width: 52px; height: 52px; margin-bottom: 16px; display: grid; place-items: center; overflow: hidden; border-radius: var(--kw-radius-md); background: var(--kw-glass-fill); border: 1px solid var(--kw-glass-stroke); color: #fff; } .dlg__orb::before { content: ""; position: absolute; inset: 0; pointer-events: none; background: linear-gradient(135deg, rgba(221, 214, 251, 0.45), rgba(221, 214, 251, 0)); } .dlg__orb > * { position: relative; } .dlg__orb [data-lucide], .dlg__orb svg { width: 26px; height: 26px; } html.dark .dlg__orb { box-shadow: var(--kw-glow-glass); } html.light .dlg__orb { background: var(--kw-blue); border-color: var(--kw-blue); color: #fff; } html.light .dlg__orb::before { background: linear-gradient(135deg, rgba(255, 255, 255, 0.28), rgba(255, 255, 255, 0)); } .dlg--success .dlg__orb { background: rgba(43, 182, 115, 0.16); border-color: rgba(43, 182, 115, 0.40); box-shadow: inset 0 0 22px rgba(43, 182, 115, 0.18); } .dlg--success .dlg__orb::before { background: linear-gradient(135deg, rgba(125, 224, 176, 0.5), rgba(125, 224, 176, 0)); } .dlg--success .dlg__orb > * { color: #43D693; } html.light .dlg--success .dlg__orb { background: #E6F7EF; border-color: #B6E6CF; box-shadow: none; } html.light .dlg--success .dlg__orb > * { color: #1B8E5A; } .dlg__title { font-size: 21px; font-weight: 700; line-height: 1.25; color: var(--kw-fg); margin: 0; letter-spacing: -0.015em; } .dlg__body { font-size: 14px; line-height: 1.6; color: var(--kw-fg-muted); margin: 8px 0 0; } .dlg__body strong { color: var(--kw-fg); font-weight: 600; } .dlg [hidden] { display: none !important; } .dlg__choices { display: flex; flex-direction: column; gap: 8px; margin-top: 18px; border: 0; padding: 0; } .dlg__choice { display: flex; gap: 11px; align-items: flex-start; padding: 12px 13px; border-radius: var(--kw-radius-md); border: 1px solid var(--kw-border-color); cursor: pointer; transition: 140ms; } html.dark .dlg__choice { border-color: var(--kw-glass-stroke); } .dlg__choice:hover { background: var(--kw-bg-subtle); } html.dark .dlg__choice:hover { background: rgba(77, 96, 251, 0.08); } .dlg__choice:has(input:checked) { border-color: var(--kw-blue); background: color-mix(in srgb, var(--kw-blue) 7%, transparent); } html.dark .dlg__choice:has(input:checked) { border-color: rgba(77, 96, 251, 0.6); background: rgba(77, 96, 251, 0.12); } .dlg__choice input { margin-top: 2px; width: 17px; height: 17px; accent-color: var(--kw-blue); flex-shrink: 0; } .dlg__choice-ico { width: 34px; height: 34px; border-radius: var(--kw-radius-sm); display: grid; place-items: center; flex-shrink: 0; background: var(--kw-bg-subtle); color: var(--kw-fg-muted); } html.dark .dlg__choice-ico { background: rgba(77, 96, 251, 0.12); color: var(--kw-soft-lavender); } .dlg__choice-ico [data-lucide], .dlg__choice-ico svg { width: 17px; height: 17px; } .dlg__choice-txt { display: flex; flex-direction: column; gap: 2px; min-width: 0; } .dlg__choice-title { font-size: 14px; font-weight: 600; color: var(--kw-fg); } .dlg__choice-hint { font-size: 12.5px; color: var(--kw-fg-subtle); line-height: 1.4; } .dlg__next { list-style: none; margin: 18px 0 0; padding: 0; display: flex; flex-direction: column; gap: 10px; } .dlg__next li { display: flex; gap: 12px; align-items: flex-start; padding: 12px 14px; border-radius: var(--kw-radius-md); background: var(--kw-bg-subtle); border: 1px solid var(--kw-border-color); } html.dark .dlg__next li { background: rgba(77, 96, 251, 0.06); border-color: var(--kw-glass-stroke); } .dlg__next .n { width: 24px; height: 24px; border-radius: 50%; display: grid; place-items: center; flex-shrink: 0; font-family: var(--kw-font-mono); font-size: 12px; font-weight: 600; background: var(--kw-blue); color: #fff; } .dlg__next-txt { font-size: 13px; color: var(--kw-fg-muted); line-height: 1.45; } .dlg__next-txt strong { color: var(--kw-fg); font-weight: 600; } .dlg__next code { font-family: var(--kw-font-mono); font-size: 12px; background: var(--kw-bg-elevated); border: 1px solid var(--kw-border-color); padding: 1px 6px; border-radius: 4px; color: var(--kw-fg); } html.dark .dlg__next code { background: var(--kw-deep-space); color: var(--kw-soft-lavender); border-color: var(--kw-glass-stroke); } .dlg__footer { display: flex; justify-content: flex-end; gap: 10px; margin-top: 22px; } .dlg__footer .kw-btn-primary, .dlg__footer .kw-btn-secondary, .dlg__footer .kw-btn-gold, .dlg__footer .kw-btn-danger { width: auto; min-width: 0; font-size: 14px; padding: 10px 16px; } .dlg__footer .kw-btn-primary[disabled], .dlg__footer .kw-btn-gold[disabled], .dlg__footer .kw-btn-danger[disabled] { opacity: 0.45; cursor: not-allowed; pointer-events: none; } @media (max-width: 480px) { .dlg__footer { flex-direction: column-reverse; } .dlg__footer .kw-btn-primary, .dlg__footer .kw-btn-secondary, .dlg__footer .kw-btn-gold, .dlg__footer .kw-btn-danger { width: 100%; justify-content: center; } } .kw-legal-page { max-width: 720px; margin: 0 auto; padding: 8px 0 48px; } .kw-legal-page__meta { font-family: var(--kw-font-mono); font-size: 12px; color: var(--kw-fg-subtle); margin: 4px 0 20px; } .kw-legal-page__body p { margin: 0 0 14px; line-height: 1.6; } .kw-legal-page__ack { margin-top: 24px; padding-top: 16px; border-top: 1px solid var(--kw-border, rgba(255, 255, 255, 0.16)); font-style: italic; color: var(--kw-fg-subtle); }.req-agent__header-actions { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; } .kw-btn-secondary--sm { width: auto; min-width: 0; font-size: 0.875rem; padding: 0.5rem 0.875rem; } .kw-btn-secondary--sm [data-lucide], .kw-btn-secondary--sm svg { width: 15px; height: 15px; } .req-agent__divider { width: 1px; height: 20px; background: var(--kw-border-color); flex-shrink: 0; } .kw-card__request-chip { display: inline-flex; align-items: center; gap: 5px; font-family: var(--kw-font-headline); font-weight: 500; font-size: 12px; color: var(--kw-fg-muted); padding: 6px 12px; border-radius: var(--kw-radius-pill); background: var(--kw-glass-fill-2); border: 1px solid var(--kw-border-color); cursor: pointer; white-space: nowrap; } .kw-card__request-chip:hover { color: var(--kw-fg); border-color: color-mix(in srgb, var(--kw-electric-indigo) 45%, transparent); } .kw-card__request-chip [data-lucide], .kw-card__request-chip svg { width: 12px; height: 12px; } .req-agent__context { display: inline-flex; align-items: center; gap: 8px; margin-top: 14px; padding: 6px 12px; border-radius: var(--kw-radius-pill); background: color-mix(in srgb, var(--kw-electric-indigo) 14%, transparent); border: 1px solid color-mix(in srgb, var(--kw-electric-indigo) 30%, transparent); } .req-agent__context [data-lucide], .req-agent__context svg { width: 12px; height: 12px; color: var(--kw-soft-lavender); } .req-agent__context-text { font-family: var(--kw-font-mono); font-size: 11.5px; color: var(--kw-fg); } .req-agent__context-clear { display: grid; place-items: center; padding: 0; border: 0; background: transparent; color: var(--kw-fg-subtle); cursor: pointer; } .req-agent__context-clear:hover { color: var(--kw-fg); } .req-agent__context-clear [data-lucide], .req-agent__context-clear svg { width: 11px; height: 11px; } .req-agent__field { margin-top: 14px; display: flex; flex-direction: column; gap: 6px; } .req-agent__field:first-of-type { margin-top: 20px; } .req-agent__label { font-size: 12.5px; font-weight: 600; color: var(--kw-fg); } .req-agent__input { padding: 11px 13px; border-radius: var(--kw-radius-md); background: var(--kw-bg-elevated); border: 1px solid var(--kw-border-color); outline: none; color: var(--kw-fg); font-family: var(--kw-font-headline); font-size: 14px; } html.dark .req-agent__input { background: rgba(255, 255, 255, 0.04); } .req-agent__input:focus { border-color: var(--kw-blue); box-shadow: 0 0 0 3px color-mix(in srgb, var(--kw-blue) 15%, transparent); } .req-agent__input::placeholder { color: var(--kw-fg-subtle); } .req-agent__textarea { resize: vertical; line-height: 1.5; } .req-agent__error { margin: 10px 0 0; font-size: 12.5px; color: #FF8A8A; } .req-agent__disclaimer { margin: 14px 0 0; font-size: 12px; line-height: 1.5; color: color-mix(in srgb, var(--kw-muted-lavender) 75%, transparent); } @media (prefers-reduced-motion: no-preference) { .req-agent__orb--pop { animation: reqAgentCheckPop 380ms ease; } } @keyframes reqAgentCheckPop { 0% { opacity: 0; transform: scale(0.6); } 60% { opacity: 1; transform: scale(1.08); } 100% { opacity: 1; transform: scale(1); } }.dlg--wizard { max-width: 560px; padding: 0; position: relative; overflow: visible; } html.dark .dlg--wizard, html.light .dlg--wizard { background: transparent; border: 0; box-shadow: none; -webkit-backdrop-filter: none; backdrop-filter: none; } .kw-iw__panel-scroll { position: relative; overflow-y: auto; max-height: 88vh; border-radius: var(--kw-radius-xl); display: flex; flex-direction: column; background: color-mix(in srgb, var(--kw-electric-indigo) 15%, #14163f 85%); border: 1px solid color-mix(in srgb, var(--kw-soft-lavender) 38%, transparent); box-shadow: 0 30px 90px rgba(0, 0, 0, 0.6), inset 0 0 60px color-mix(in srgb, var(--kw-soft-lavender) 18%, transparent), inset 0 0 16px color-mix(in srgb, var(--kw-electric-indigo) 30%, transparent); -webkit-backdrop-filter: blur(36px); backdrop-filter: blur(36px); } .kw-iw__header { position: sticky; top: 0; z-index: 5; display: flex; align-items: center; gap: 12px; padding: 14px 18px; } .kw-iw__header { background: color-mix(in srgb, var(--kw-electric-indigo) 18%, transparent); border-bottom: 1px solid color-mix(in srgb, var(--kw-soft-lavender) 22%, transparent); -webkit-backdrop-filter: blur(24px); backdrop-filter: blur(24px); } .kw-iw__back { width: 28px; height: 28px; flex-shrink: 0; display: grid; place-items: center; border: 1px solid var(--kw-border-color); border-radius: var(--kw-radius-pill); background: transparent; color: var(--kw-fg-muted); cursor: pointer; transition: 140ms; } html.dark .kw-iw__back { border-color: var(--kw-glass-stroke); } .kw-iw__back:hover { color: var(--kw-fg); background: var(--kw-bg-subtle); } html.dark .kw-iw__back:hover { background: rgba(255, 255, 255, 0.06); } .kw-iw__back [data-lucide], .kw-iw__back svg { width: 15px; height: 15px; } .kw-iw__titles { flex: 1; min-width: 0; } .kw-iw__title { font-size: 14px; font-weight: 600; color: var(--kw-fg); line-height: 1.3; } .kw-iw__subtitle { font-family: var(--kw-font-mono); font-size: 10.5px; margin-top: 2px; color: var(--kw-fg-subtle); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .kw-iw__toolchip { flex-shrink: 0; } .kw-iw__mcpchip { flex-shrink: 0; display: inline-flex; align-items: center; gap: 5px; font-family: var(--kw-font-body); font-weight: 600; font-size: 11px; color: var(--kw-fg-muted); padding: 5px 10px; border-radius: var(--kw-radius-pill); background: var(--kw-bg-subtle); border: 1px solid var(--kw-border-color); cursor: pointer; transition: 140ms; white-space: nowrap; } html.dark .kw-iw__mcpchip { background: color-mix(in srgb, #fff 6%, transparent); border-color: var(--kw-glass-stroke); } .kw-iw__mcpchip:hover { color: var(--kw-fg); border-color: var(--kw-blue); background: color-mix(in srgb, var(--kw-blue) 10%, transparent); } .kw-iw__mcpchip [data-lucide], .kw-iw__mcpchip svg { width: 13px; height: 13px; } .kw-iw__close { position: static; inset: auto; width: 28px; height: 28px; flex-shrink: 0; } .kw-iw__body { padding: 24px 24px 26px; } .kw-iw__step { display: block; } .kw-iw__step .dlg__title { font-size: 19px; } .kw-iw__step .dlg__body { margin-top: 8px; } .kw-iw__pills { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 18px; } .kw-iw__pill { font-family: var(--kw-font-body); font-weight: 600; font-size: 13px; color: var(--kw-fg); padding: 9px 16px; border-radius: var(--kw-radius-pill); background: var(--kw-bg-subtle); border: 1px solid var(--kw-border-color); cursor: pointer; transition: 140ms; } html.dark .kw-iw__pill { background: color-mix(in srgb, #fff 6%, transparent); border-color: color-mix(in srgb, var(--kw-electric-indigo) 28%, transparent); } .kw-iw__pill:hover { border-color: var(--kw-blue); background: color-mix(in srgb, var(--kw-blue) 10%, transparent); } .kw-iw__panel { margin-top: 16px; padding: 14px 16px; border-radius: var(--kw-radius-lg); background: var(--kw-bg-subtle); border: 1px solid var(--kw-border-color); } html.dark .kw-iw__panel { background: rgba(77, 96, 251, 0.06); border-color: var(--kw-glass-stroke); } .kw-iw__doc { font-size: 13px; line-height: 1.7; color: var(--kw-fg-muted); } .kw-iw__doc :first-child { margin-top: 0; } .kw-iw__doc :last-child { margin-bottom: 0; } .kw-iw__doc .kw-doc__list { margin: 0; padding-inline-start: 18px; } .kw-iw__doc li { margin: 0 0 2px; } .kw-iw__doc strong { color: var(--kw-fg); font-weight: 600; } .kw-iw__doc a { color: var(--kw-soft-lavender); } .kw-iw__doc p { margin: 10px 0 0; } .kw-iw__legal-scroll { margin-top: 16px; padding: 14px 16px; max-height: 15rem; overflow-y: auto; border-radius: var(--kw-radius-lg); background: var(--kw-bg-subtle); border: 1px solid var(--kw-border-color); } html.dark .kw-iw__legal-scroll { background: rgba(77, 96, 251, 0.06); border-color: var(--kw-glass-stroke); } .kw-iw__legal-scroll:focus-visible { outline: 2px solid var(--kw-blue); outline-offset: 2px; } .kw-iw__legal-ack, .kw-iw__ack { display: flex; align-items: flex-start; gap: 10px; margin-top: 16px; font-size: 13px; line-height: 1.5; color: var(--kw-fg); cursor: pointer; } .kw-iw__legal-ack input, .kw-iw__ack input { margin-top: 2px; flex-shrink: 0; cursor: pointer; } .kw-iw__updated { display: inline-block; vertical-align: middle; font-family: var(--kw-font-mono); font-size: 10px; letter-spacing: 0.03em; text-transform: uppercase; color: var(--kw-soft-lavender); background: color-mix(in srgb, var(--kw-electric-indigo) 22%, transparent); padding: 2px 8px; border-radius: var(--kw-radius-pill); margin-inline-end: 6px; } .kw-iw__receipt { margin: 18px 0 0; padding-top: 14px; font-size: 11.5px; color: var(--kw-fg-subtle); border-top: 1px solid var(--kw-border-color); } html.dark .kw-iw__receipt { border-color: var(--kw-glass-stroke); } .kw-iw__receipt a { color: var(--kw-soft-lavender); } .kw-iw__disclose { margin: 10px 0 0; padding: 0; background: none; border: 0; cursor: pointer; display: inline-flex; align-items: center; gap: 5px; font-size: 12.5px; color: var(--kw-soft-lavender); } .kw-iw__disclose:hover { color: var(--kw-fg); } .kw-iw__disclose [data-lucide], .kw-iw__disclose svg { width: 12px; height: 12px; } .kw-iw__code { margin-top: 10px; } .kw-iw__cli-omitted { margin: 10px 0 0; font-size: 12px; color: var(--kw-fg-subtle); } .kw-iw__cards { display: flex; gap: 12px; flex-wrap: wrap; margin-top: 18px; } .kw-iw__card { flex: 1 1 200px; min-width: 180px; text-align: left; cursor: pointer; display: flex; flex-direction: column; gap: 8px; padding: 16px; border-radius: var(--kw-radius-xl); background: var(--kw-bg-subtle); border: 1px solid var(--kw-border-color); transition: 140ms; } html.dark .kw-iw__card { background: rgba(77, 96, 251, 0.06); border-color: var(--kw-glass-stroke); } .kw-iw__card:hover { border-color: var(--kw-blue); } .kw-iw__card--rec { border-color: color-mix(in srgb, var(--kw-electric-indigo) 45%, transparent); box-shadow: 0 0 0 1px color-mix(in srgb, var(--kw-electric-indigo) 20%, transparent) inset; } .kw-iw__card-ico { width: 18px; height: 18px; color: var(--kw-fg-muted); } .kw-iw__card-ico--ok { color: #43D693; } .kw-iw__card-title { font-size: 14px; font-weight: 600; color: var(--kw-fg); } .kw-iw__card-title--lg { font-size: 15px; font-weight: 700; } .kw-iw__card-hint { font-size: 12.5px; line-height: 1.5; color: var(--kw-fg-subtle); } .kw-iw__badge { align-self: flex-start; display: inline-flex; align-items: center; gap: 6px; font-family: var(--kw-font-mono); font-size: 10px; letter-spacing: 0.02em; color: var(--kw-fg-subtle); background: rgba(255, 255, 255, 0.05); padding: 3px 8px; border-radius: var(--kw-radius-pill); } .kw-iw__badge--rec { color: var(--kw-soft-lavender); background: color-mix(in srgb, var(--kw-electric-indigo) 18%, transparent); } .kw-iw__seg { display: inline-flex; gap: 2px; margin-top: 16px; padding: 3px; border-radius: var(--kw-radius-pill); background: rgba(255, 255, 255, 0.04); border: 1px solid var(--kw-border-color); } html.dark .kw-iw__seg { border-color: var(--kw-glass-stroke); } .kw-iw__seg-btn { font-family: var(--kw-font-body); font-weight: 500; font-size: 12.5px; padding: 6px 14px; border: 0; border-radius: var(--kw-radius-pill); background: transparent; color: var(--kw-fg-subtle); cursor: pointer; } .kw-iw__seg-btn.is-active { color: var(--kw-fg); background: color-mix(in srgb, var(--kw-electric-indigo) 20%, transparent); } .kw-iw__footnote { margin-top: 16px; font-size: 12.5px; color: var(--kw-fg-subtle); } .kw-iw__footnote a { color: var(--kw-soft-lavender); } .kw-iw__transcript { display: flex; flex-direction: column; gap: 10px; } .kw-iw__turn { display: flex; gap: 8px; align-items: flex-start; } .kw-iw__avatar { width: 22px; height: 22px; flex-shrink: 0; margin-top: 1px; display: grid; place-items: center; border-radius: 50%; background: var(--kw-glass-fill); border: 1px solid var(--kw-glass-stroke); } .kw-iw__avatar--user { background: color-mix(in srgb, var(--kw-electric-indigo) 25%, transparent); border: 0; } .kw-iw__avatar [data-lucide], .kw-iw__avatar svg { width: 12px; height: 12px; color: #fff; } .kw-iw__avatar:not(.kw-iw__avatar--user) [data-lucide] { color: var(--kw-soft-lavender); } .kw-iw__turn-text { margin: 0; font-size: 13px; line-height: 1.5; color: var(--kw-fg-muted); } .kw-iw__turn-text--user { color: var(--kw-fg); font-style: italic; } .kw-iw__actions { display: flex; justify-content: space-between; align-items: center; gap: 12px; margin-top: 20px; flex-wrap: wrap; } .kw-iw__actions .kw-btn-primary { width: auto; min-width: 0; } .kw-iw__later { background: none; border: 0; padding: 0; cursor: pointer; font-size: 13px; color: var(--kw-fg-subtle); text-decoration: underline; } .kw-iw__later:hover { color: var(--kw-fg); } .kw-iw__dl { display: flex; flex-direction: column; align-items: flex-end; gap: 6px; } .kw-iw__dl .kw-btn-primary[disabled] { opacity: 0.45; cursor: not-allowed; } .kw-iw__dl-note { font-size: 11px; color: var(--kw-fg-subtle); max-width: 260px; text-align: end; } .dlg__orb--success { background: rgba(43, 182, 115, 0.16); border-color: rgba(43, 182, 115, 0.40); box-shadow: inset 0 0 22px rgba(43, 182, 115, 0.18); color: #43D693; } .dlg__orb--success::before { background: linear-gradient(135deg, rgba(125, 224, 176, 0.5), rgba(125, 224, 176, 0)); } .dlg__orb--success > * { color: #43D693; } html.light .dlg__orb--success { background: #E6F7EF; border-color: #B6E6CF; box-shadow: none; } html.light .dlg__orb--success > * { color: #1B8E5A; } @media (prefers-reduced-motion: no-preference) { .dlg-backdrop.is-open .dlg__orb--success { animation: checkPop 380ms ease; } } @keyframes checkPop { 0% { opacity: 0; transform: scale(.6); } 60% { opacity: 1; transform: scale(1.08); } 100% { opacity: 1; transform: scale(1); } } @media (max-width: 480px) { .kw-iw__cards { flex-direction: column; } .kw-iw__actions { flex-direction: column-reverse; align-items: stretch; } .kw-iw__actions .kw-btn-primary { width: 100%; justify-content: center; } .kw-iw__dl { align-items: stretch; } .kw-iw__dl-note { text-align: center; max-width: none; } }.kwl-orbit { position: relative; flex-shrink: 0; width: 100%; height: 100%; display: grid; place-items: center; } .kwl-orbit__ring { position: absolute; inset: 0; border-radius: 50%; border: 1.5px solid transparent; } .kwl-orbit__ring--1 { border-block-start-color: var(--kw-electric-indigo); border-inline-end-color: rgba(77,96,251,0.35); animation: kwl-spin 1s linear infinite; } .kwl-orbit__ring--2 { inset: 16%; border-block-start-color: var(--kw-soft-lavender); border-inline-start-color: rgba(221,214,251,0.3); animation: kwl-spin 1.5s linear infinite reverse; } .kwl-orbit__core { width: 30%; height: 30%; border-radius: 50%; background: var(--kw-electric-indigo); box-shadow: 0 0 18px 2px rgba(77,96,251,0.7); animation: kwl-pulse 1.4s ease-in-out infinite; } @keyframes kwl-spin { to { transform: rotate(360deg); } } @keyframes kwl-pulse { 0%,100% { opacity: .55; transform: scale(.82); } 50% { opacity: 1; transform: scale(1); } } @media (prefers-reduced-motion: reduce) { .kwl-orbit__ring--1, .kwl-orbit__ring--2 { animation-duration: 2.4s; } .kwl-orbit__core { animation: none; opacity: .9; } } .kwl-orb { position: relative; display: grid; place-items: center; overflow: hidden; flex-shrink: 0; border-radius: var(--kw-radius-md); background: var(--kw-glass-fill); border: 1px solid var(--kw-glass-stroke); color: #fff; } .kwl-orb::before { content: ""; position: absolute; inset: 0; pointer-events: none; background: linear-gradient(135deg, rgba(221,214,251,0.45), rgba(221,214,251,0)); } .kwl-orb > * { position: relative; } .kwl-orb svg { display: block; } html.dark .kwl-orb { box-shadow: var(--kw-glow-glass); } html.light .kwl-orb { background: var(--kw-blue); border-color: var(--kw-blue); } html.light .kwl-orb::before { background: linear-gradient(135deg, rgba(255,255,255,0.28), rgba(255,255,255,0)); } .kwl-orb--success { background: var(--kw-teal); border-color: var(--kw-teal); box-shadow: 0 6px 16px -6px rgba(43,182,115,0.55); } .kwl-orb--success::before { background: linear-gradient(135deg, rgba(255,255,255,0.4), rgba(255,255,255,0)); } .kwl-orb--success > * { color: #fff; stroke: #fff; } html.light .kwl-orb--success { background: var(--kw-teal); border-color: var(--kw-teal); box-shadow: 0 6px 16px -6px rgba(43,182,115,0.55); } html.light .kwl-orb--success > * { color: #fff; stroke: #fff; } .kwl-orb--gold { background: rgba(253,202,19,0.16); border-color: rgba(253,202,19,0.45); box-shadow: inset 0 0 22px rgba(253,202,19,0.18); } .kwl-orb--gold > * { color: var(--kw-signal-gold); } html.light .kwl-orb--gold { background: #FEF6DC; border-color: #F6E0A0; box-shadow: none; } html.light .kwl-orb--gold > * { color: var(--kw-yellow-ink); } .kwl-splash { position: fixed; inset: 0; z-index: 9000; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 30px; background: var(--kw-deep-space); color: #fff; text-align: center; opacity: 0; transition: opacity 220ms ease; overflow: hidden; } .kwl-splash.is-in { opacity: 1; } .kwl-splash__bg { position: absolute; inset: 0; pointer-events: none; } .kwl-splash__ring { position: absolute; border-radius: 50%; border: 1px dashed rgba(77,96,251,0.35); } .kwl-splash__glow { position: absolute; border-radius: 50%; filter: blur(120px); opacity: .5; } .kwl-splash__inner { position: relative; z-index: 2; display: flex; flex-direction: column; align-items: center; gap: 26px; padding: 0 24px; } .kwl-splash__logo { height: 30px; } .kwl-splash__orbit { width: 76px; height: 76px; } .kwl-splash__title { font-family: var(--kw-font-headline); font-weight: 600; font-size: 22px; letter-spacing: -0.02em; margin: 0; } .kwl-splash__sub { font-family: var(--kw-font-mono); font-size: 12.5px; color: var(--kw-muted-lavender); margin: 9px 0 0; min-height: 1em; } .kwl-splash__dots::after { content: ""; animation: kwl-dots 1.4s steps(1,end) infinite; } @keyframes kwl-dots { 0%{content:"";} 25%{content:"·";} 50%{content:"··";} 75%{content:"···";} } .kwl-splash__bar { position: absolute; inset-block-start: 0; inset-inline: 0; height: 3px; overflow: hidden; z-index: 3; background: rgba(77,96,251,0.16); } .kwl-splash__bar::before { content: ""; position: absolute; inset-block: 0; inset-inline-start: 0; width: 40%; background: linear-gradient(90deg, transparent, var(--kw-electric-indigo), transparent); transform: translateX(-120%); animation: kwl-sweep 1.25s ease-in-out infinite; } @keyframes kwl-sweep { 0%{ transform: translateX(-120%); } 100%{ transform: translateX(350%); } } @media (prefers-reduced-motion: reduce) { .kwl-splash__logo, .kwl-splash__orbit, .kwl-splash__text { animation: none; opacity: 1; } .kwl-splash__bar::before { animation-duration: 3s; } } .kwl-steps__head { display: flex; align-items: center; gap: 14px; margin-bottom: 20px; } .kwl-steps__orbit { width: 44px; height: 44px; } .kwl-steps__orbit svg { width: 22px; height: 22px; } .kwl-steps__titles h3 { font-size: 18px; font-weight: 700; letter-spacing: -0.015em; margin: 0; color: var(--kw-fg); } .kwl-steps__titles p { font-size: 13px; color: var(--kw-fg-muted); margin: 2px 0 0; } .kwl-steps__list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 2px; } .kwl-step { display: flex; align-items: center; gap: 12px; padding: 11px 12px; border-radius: var(--kw-radius-md); font-size: 14px; color: var(--kw-fg-subtle); transition: background 180ms, color 180ms; } .kwl-step__icon { width: 24px; height: 24px; border-radius: 50%; display: grid; place-items: center; flex-shrink: 0; position: relative; border: 1.5px solid var(--kw-border-color); } .kwl-step__icon .kwl-step__glyph { grid-area: 1 / 1; display: grid; place-items: center; line-height: 0; } .kwl-step__icon svg { width: 14px; height: 14px; display: block; } .kwl-step__icon .kwl-mini { position: absolute; inset: -1.5px; border-radius: 50%; border: 1.5px solid transparent; border-top-color: var(--kw-blue); animation: kwl-spin .8s linear infinite; display: none; } .kwl-step__label { flex: 1; } .kwl-step.is-active { color: var(--kw-fg); background: var(--kw-bg-subtle); } html.dark .kwl-step.is-active { background: rgba(77,96,251,0.10); color: #fff; } .kwl-step.is-active .kwl-step__icon { border-color: var(--kw-blue); } .kwl-step.is-active .kwl-mini { display: block; } .kwl-step.is-done { color: var(--kw-fg-muted); } .kwl-step.is-done .kwl-step__icon { border-color: var(--kw-teal); background: var(--kw-teal); } .kwl-step.is-done .kwl-step__icon svg { color: #fff; stroke: #fff; } .kwl-steps__done { display: none; flex-direction: column; align-items: center; text-align: center; gap: 6px; padding: 8px 0 4px; } .kwl-steps__done.is-shown { display: flex; } .kwl-steps__done-orb { width: 52px; height: 52px; margin-bottom: 6px; } .kwl-steps__done-orb svg { width: 28px; height: 28px; } .kwl-steps__done h3 { font-size: 19px; font-weight: 700; margin: 0; color: var(--kw-fg); } .kwl-steps__done p { font-size: 13.5px; color: var(--kw-fg-muted); margin: 2px 0 0; max-width: 340px; } .kwl-steps__foot { display: flex; justify-content: flex-end; gap: 10px; margin-top: 22px; } .kwl-steps__foot .kw-btn-primary, .kwl-steps__foot .kw-btn-secondary { width: auto; min-width: 0; font-size: 14px; padding: 10px 16px; } .kwl-steps__meter { height: 4px; border-radius: 999px; background: var(--kw-bg-subtle); overflow: hidden; margin-top: 18px; } html.dark .kwl-steps__meter { background: rgba(255,255,255,0.08); } .kwl-steps__meter span { display: block; height: 100%; width: 0%; border-radius: 999px; background: linear-gradient(90deg, var(--kw-blue), var(--kw-electric-indigo)); transition: width 420ms ease; } .is-pending { position: relative; color: transparent !important; pointer-events: none; } .is-pending::after { content: ""; position: absolute; inset: 0; margin: auto; width: 16px; height: 16px; border-radius: 50%; border: 2px solid currentColor; border-top-color: transparent; opacity: .9; animation: kwl-spin .7s linear infinite; color: #fff; } .kw-btn-secondary.is-pending::after { color: var(--kw-blue); } html.dark .kw-btn-secondary.is-pending::after { color: #fff; } .kw-btn-gold.is-pending::after { color: #2A1E00; }.estate { display: flex; flex-direction: column; align-items: center; text-align: center; gap: 6px; padding: 56px 24px; } .estate[hidden] { display: none !important; } .estate__title { font-size: 18px; font-weight: 700; color: var(--kw-fg); letter-spacing: -0.01em; } .estate__body { font-size: 14px; color: var(--kw-fg-muted); max-width: 380px; line-height: 1.55; } .estate__actions { display: flex; gap: 10px; margin-top: 16px; flex-wrap: wrap; justify-content: center; } .estate--bordered { border: 1px dashed var(--kw-border-color); border-radius: var(--kw-radius-xl); } html.dark .estate--bordered { border-color: var(--kw-glass-stroke); } .estate__orb { position: relative; width: 60px; height: 60px; margin-bottom: 12px; display: grid; place-items: center; overflow: hidden; border-radius: var(--kw-radius-md); background: var(--kw-glass-fill); border: 1px solid var(--kw-glass-stroke); color: #fff; } .estate__orb::before { content: ""; position: absolute; inset: 0; pointer-events: none; background: linear-gradient(135deg, rgba(221, 214, 251, 0.45), rgba(221, 214, 251, 0)); } .estate__orb > * { position: relative; } .estate__orb [data-lucide], .estate__orb svg { width: 30px; height: 30px; } html.dark .estate__orb { box-shadow: var(--kw-glow-glass); } html.light .estate__orb { background: var(--kw-blue); border-color: var(--kw-blue); color: #fff; } html.light .estate__orb::before { background: linear-gradient(135deg, rgba(255, 255, 255, 0.28), rgba(255, 255, 255, 0)); } .estate__actions .kw-btn-primary, .estate__actions .kw-btn-secondary { width: auto; min-width: 0; } .toast-region { position: fixed; top: 16px; inset-inline-end: 16px; z-index: 300; display: flex; flex-direction: column; gap: 10px; width: 360px; max-width: calc(100vw - 32px); pointer-events: none; } .toast { display: flex; gap: 11px; align-items: flex-start; padding: 13px 14px; border-radius: var(--kw-radius-md); pointer-events: auto; box-shadow: 0 16px 40px -12px rgba(11, 14, 36, 0.4); } @media (prefers-reduced-motion: no-preference) { .toast { animation: kw-toast-in 220ms cubic-bezier(0.2, 0.7, 0.3, 1) both; } [dir="rtl"] .toast { animation-name: kw-toast-in-rtl; } } @keyframes kw-toast-in { from { transform: translateX(12px); } to { transform: none; } } @keyframes kw-toast-in-rtl { from { transform: translateX(-12px); } to { transform: none; } } html.light .toast { background: #fff; border: 1px solid var(--kw-border-color); } html.dark .toast { background: rgba(13, 15, 49, 0.96); border: 1px solid rgba(77, 96, 251, 0.3); -webkit-backdrop-filter: blur(20px); backdrop-filter: blur(20px); } .toast__ico { width: 30px; height: 30px; border-radius: var(--kw-radius-sm); display: grid; place-items: center; flex-shrink: 0; } .toast__ico [data-lucide], .toast__ico svg { width: 17px; height: 17px; } .toast--success .toast__ico { background: rgba(43, 182, 115, 0.16); color: #1B8E5A; } html.dark .toast--success .toast__ico { color: #43D693; } .toast--error .toast__ico { background: rgba(229, 69, 69, 0.14); color: #C23434; } html.dark .toast--error .toast__ico { color: #FF8A8A; } .toast--info .toast__ico { background: rgba(77, 96, 251, 0.14); color: var(--kw-blue); } html.dark .toast--info .toast__ico { color: var(--kw-soft-lavender); } .toast__body { flex: 1; min-width: 0; padding-top: 1px; } .toast__title { font-size: 14px; font-weight: 600; color: var(--kw-fg); } .toast__msg { font-size: 13px; color: var(--kw-fg-muted); margin-top: 2px; line-height: 1.4; } .toast__close { flex-shrink: 0; width: 26px; height: 26px; display: grid; place-items: center; border: 0; border-radius: var(--kw-radius-sm); background: transparent; color: var(--kw-fg-subtle); cursor: pointer; } .toast__close:hover { background: var(--kw-bg-subtle); color: var(--kw-fg); } .toast__close [data-lucide], .toast__close svg { width: 15px; height: 15px; } .toast__accent { width: 3px; align-self: stretch; border-radius: 3px; flex-shrink: 0; } .toast--success .toast__accent { background: var(--kw-teal); } .toast--error .toast__accent { background: var(--kw-red); } .toast--info .toast__accent { background: var(--kw-blue); }.kw-userchip__avatar { display: grid; place-items: center; flex-shrink: 0; width: 28px; height: 28px; border-radius: 50%; background: linear-gradient(135deg, #4A56AF, #8352E8); color: var(--kw-white); font-size: 0.75rem; font-weight: 700; line-height: 1; text-transform: uppercase; } .kw-userchip__avatar--sm { width: 22px; height: 22px; font-size: 0.625rem; } .kw-userchip__avatar--lg { width: 48px; height: 48px; font-size: 1.125rem; } .kw-userchip { display: inline-flex; align-items: center; gap: 0.5rem; min-width: 0; text-decoration: none; color: inherit; } .kw-userchip__body { display: flex; flex-direction: column; min-width: 0; } .kw-userchip__name { font-weight: 600; color: var(--kw-fg); font-size: 0.875rem; line-height: 1.2; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .kw-userchip:hover .kw-userchip__name { text-decoration: underline; } .kw-userchip__sub { font-family: var(--kw-font-mono); font-size: 0.6875rem; color: var(--kw-fg-muted); line-height: 1.3; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .kw-taglist { display: flex; flex-wrap: wrap; gap: 0.25rem; align-items: center; } .kw-userpicker { margin-top: 0.25rem; max-height: 14rem; overflow-y: auto; border: 1px solid var(--kw-border-color); border-radius: var(--kw-radius-md); background: var(--kw-bg-elevated); } .kw-userpicker__row { display: flex; align-items: center; gap: 0.5rem; padding: 0.375rem 0.625rem; cursor: pointer; border-bottom: 1px solid var(--kw-border-soft); } .kw-userpicker__row:last-child { border-bottom: 0; } .kw-userpicker__row:hover { background: var(--kw-bg-subtle); } .kw-userpicker__row input { flex-shrink: 0; accent-color: var(--kw-blue); } .kw-access-editor__cols { display: grid; grid-template-columns: 1fr 1fr; gap: 1rem; } @media (max-width: 768px) { .kw-access-editor__cols { grid-template-columns: 1fr; } } .kw-access-col { border: 1px solid var(--kw-border-color); border-radius: var(--kw-radius-md); background: var(--kw-bg-subtle); padding: 0.5rem 1rem 1rem; margin: 0; min-width: 0; } .kw-access-col--ok { border-inline-start: 3px solid var(--kw-teal); } .kw-access-col--err { border-inline-start: 3px solid var(--kw-red); } .kw-access-col legend { padding: 0 0.25rem; } .kw-access-col__hint { font-size: 0.6875rem; color: var(--kw-fg-muted); margin: 0.25rem 0 0.5rem; } .kw-access-col__label { display: block; font-family: var(--kw-font-mono); font-size: 0.6875rem; font-weight: 600; text-transform: uppercase; letter-spacing: 0.05em; color: var(--kw-fg); margin: 0.75rem 0 0.25rem; } .kw-access-col__sub { font-weight: 400; text-transform: none; letter-spacing: 0; color: var(--kw-fg-muted); } .kw-access-col__input { width: 100%; padding: 0.375rem 0.5rem; border: 1px solid var(--kw-border-color); border-radius: var(--kw-radius-md); font-size: 0.8125rem; background: var(--kw-bg-elevated); color: var(--kw-fg); } .kw-access-col__empty { font-size: 0.75rem; color: var(--kw-fg-muted); padding: 0.5rem 0.625rem; border: 1px dashed var(--kw-border-color); border-radius: var(--kw-radius-md); } .kw-access-col__labels { margin-top: 0.25rem; } .kw-checkchip { display: inline-flex; align-items: center; gap: 0.25rem; font-size: 0.75rem; padding: 0.25rem 0.5rem; border: 1px solid var(--kw-border-color); border-radius: var(--kw-radius-pill); cursor: pointer; background: var(--kw-bg-elevated); color: var(--kw-fg); } .kw-checkchip input { margin: 0; accent-color: var(--kw-blue); } .kw-linkbtn-danger { display: inline-flex; align-items: center; gap: 0.25rem; background: transparent; border: 0; padding: 0; color: var(--kw-red); font-size: 0.75rem; font-weight: 500; cursor: pointer; } .kw-linkbtn-danger:hover { text-decoration: underline; }.kw-audit__sec-title { padding: 1.25rem 1.25rem 0; } .kw-audit__sec--gap { margin-top: 1rem; } .kw-audit__cell { font-size: 0.75rem; } .kw-audit__empty { padding: 1.25rem; color: var(--kw-fg-muted); font-size: 0.8125rem; } .kw-audit__events td { vertical-align: top; } .kw-audit__time { font-family: var(--kw-font-mono); font-size: 0.75rem; white-space: nowrap; } .kw-runrow { border-bottom: 1px solid var(--kw-border-soft); } .kw-runrow:last-child { border-bottom: 0; } .kw-runrow > summary { list-style: none; cursor: pointer; display: grid; grid-template-columns: 2fr 1fr 1fr 1fr 1fr; gap: 14px; align-items: center; padding: 13px 20px; transition: background 140ms; } .kw-runrow > summary::-webkit-details-marker { display: none; } .kw-runrow > summary:hover { background: var(--kw-bg-subtle); } .kw-runrow > summary:focus-visible { outline: 2px solid var(--kw-focus-ring); outline-offset: -2px; border-radius: var(--kw-radius-sm); } .kw-runrow__chev { display: inline-flex; align-items: center; gap: 9px; font-family: var(--kw-font-mono); font-size: 13px; color: var(--kw-fg); white-space: nowrap; min-width: 0; } .kw-runrow__chev [data-lucide], .kw-runrow__chev svg { width: 15px; height: 15px; color: var(--kw-fg-subtle); transition: transform 160ms; } .kw-runrow[open] > summary .kw-runrow__chev [data-lucide], .kw-runrow[open] > summary .kw-runrow__chev svg { transform: rotate(90deg); } .kw-runrow__meta { font-family: var(--kw-font-mono-num); font-size: 12px; color: var(--kw-fg-subtle); white-space: nowrap; text-align: end; } .kw-runrow__nested { background: var(--kw-bg-subtle); padding: 2px 0 6px; } html.dark .kw-runrow__nested { background: rgba(5, 8, 33, 0.35); } .kw-runrow__nested .kw-table { background: transparent; } .kw-runrow__nested .kw-table th { background: transparent; font-size: 10px; padding: 8px 20px; } .kw-runrow__nested .kw-table td { padding: 8px 20px; border-bottom-color: var(--kw-border-soft); } .kw-runrow__nested .kw-table td:first-child { padding-inline-start: 44px; } .kw-runrow__totals { font-family: var(--kw-font-mono-num); font-size: 12px; color: var(--kw-fg-subtle); text-align: end; padding: 11px 20px; margin: 0; border-top: 1px solid var(--kw-border-soft); } .kw-audit__sec-note { padding: 4px 20px 0; margin: 0; font-size: 12px; line-height: 1.45; } .kw-detail-row--sub { padding-inline-start: 0.85rem; font-size: 0.78rem; opacity: 0.9; } .kw-forensic > summary { list-style: none; cursor: pointer; display: inline-flex; align-items: center; gap: 8px; font-family: var(--kw-font-mono); font-size: 12px; color: var(--kw-fg-subtle); padding: 8px 0; } .kw-forensic > summary::-webkit-details-marker { display: none; } .kw-forensic > summary [data-lucide], .kw-forensic > summary svg { width: 14px; height: 14px; } .kw-forensic > summary:hover { color: var(--kw-fg); } .kw-hashcell { font-family: var(--kw-font-mono); font-size: 10.5px; color: var(--kw-fg-subtle); word-break: break-all; } .kw-jsonblock { background: var(--kw-deep-space); border: 1px solid var(--kw-glass-stroke); color: var(--kw-soft-lavender); font-family: var(--kw-font-mono); font-size: 11.5px; line-height: 1.6; padding: 10px 12px; border-radius: var(--kw-radius-sm); white-space: pre-wrap; word-break: break-all; margin: 6px 0 0; } .kw-chainverified { display: flex; align-items: flex-start; gap: 11px; font-size: 13px; line-height: 1.45; color: var(--kw-fg-muted); } .kw-chainverified__orb { width: 34px; height: 34px; border-radius: var(--kw-radius-sm); display: grid; place-items: center; flex-shrink: 0; background: rgba(43, 182, 115, 0.16); color: #1B8E5A; } html.dark .kw-chainverified__orb { color: #43D693; } .kw-chainverified__orb [data-lucide], .kw-chainverified__orb svg { width: 17px; height: 17px; } .kw-chainverified strong { color: var(--kw-fg); font-weight: 600; }.kw-forbidden { max-width: 480px; margin: 4rem auto; text-align: center; padding: 2.5rem 2rem; background: var(--kw-surface); border: 1px solid var(--kw-border-color); border-radius: var(--kw-radius-xl); box-shadow: var(--kw-shadow-card); } html.dark .kw-forbidden { -webkit-backdrop-filter: blur(34px); backdrop-filter: blur(34px); } .kw-forbidden__icon { display: inline-flex; align-items: center; justify-content: center; width: 72px; height: 72px; border-radius: var(--kw-radius-pill); background: rgba(245, 158, 11, 0.12); color: #b45309; margin-bottom: 1rem; } .kw-forbidden__title { font-size: 1.375rem; font-weight: 700; color: var(--kw-fg); margin: 0 0 0.5rem; } .kw-forbidden__lede { color: var(--kw-fg-muted); font-size: 0.9375rem; line-height: 1.5; margin: 0 0 1.25rem; } .kw-forbidden__who { display: flex; align-items: center; gap: 0.625rem; justify-content: center; padding: 0.75rem 1rem; background: var(--kw-bg-subtle); border: 1px solid var(--kw-border-color); border-radius: var(--kw-radius-md); margin: 0 0 1.25rem; text-align: start; } .kw-forbidden__avatar { width: 36px; height: 36px; flex-shrink: 0; border-radius: 50%; background: linear-gradient(135deg, #4A56AF, #8352E8); color: var(--kw-white); display: flex; align-items: center; justify-content: center; font-weight: 700; } .kw-forbidden__who-name { font-weight: 600; color: var(--kw-fg); font-size: 0.875rem; } .kw-forbidden__who-meta { font-size: 0.75rem; color: var(--kw-fg-muted); font-family: var(--kw-font-mono); } .kw-forbidden__hint { font-size: 0.8125rem; color: var(--kw-fg-muted); margin: 0 0 1.5rem; } .kw-forbidden__actions { display: flex; align-items: center; justify-content: center; gap: 1rem; flex-wrap: wrap; } .kw-forbidden__actions form { margin: 0; display: contents; }.kw-stat { --kw-stat-accent: var(--kw-blue); position: relative; display: block; padding: 1.125rem 1.25rem; background: var(--kw-surface); border: 1px solid var(--kw-border-color); border-radius: var(--kw-radius-lg); box-shadow: var(--kw-shadow-card); text-decoration: none; overflow: hidden; transition: transform .15s ease, box-shadow .15s ease, border-color .15s ease; } .kw-stat::before { content: ""; position: absolute; top: 0; bottom: 0; inset-inline-start: 0; width: 3px; background: var(--kw-stat-accent); } .kw-stat:hover { transform: translateY(-2px); border-color: var(--kw-stat-accent); box-shadow: var(--kw-shadow-hover); } .kw-stat__head { display: flex; align-items: center; justify-content: space-between; gap: .75rem; } .kw-stat__icon { width: 38px; height: 38px; flex-shrink: 0; display: grid; place-items: center; border-radius: 50%; color: #fff; background: var(--kw-stat-accent); box-shadow: 0 6px 16px -6px color-mix(in srgb, var(--kw-stat-accent) 55%, transparent); } .kw-stat__icon .kw-ico { color: #fff; } .kw-stat__value { font-family: var(--kw-font-mono-num); font-size: 1.875rem; font-weight: 400; line-height: 1; letter-spacing: -.02em; color: var(--kw-fg); } .kw-stat__label { margin-top: .625rem; font-family: var(--kw-font-mono); font-size: .75rem; color: var(--kw-fg-muted); } .kw-stat__sub { margin-top: .2rem; font-size: .6875rem; color: var(--kw-fg-subtle); } .kw-stat--teal { --kw-stat-accent: var(--kw-teal); } .kw-stat--blue { --kw-stat-accent: var(--kw-blue); } .kw-stat--purple { --kw-stat-accent: var(--kw-violet); } .kw-stat--violet { --kw-stat-accent: var(--kw-violet); } .kw-stat--navy { --kw-stat-accent: var(--kw-navy); } .kw-stat--gold { --kw-stat-accent: var(--kw-signal-gold); } .kw-stat--gold .kw-stat__icon, .kw-stat--gold .kw-stat__icon .kw-ico { color: #2A1E00; }.kw-update-banner { position: relative; z-index: 50; display: flex; align-items: center; justify-content: center; gap: 1rem; flex-wrap: wrap; flex-shrink: 0; padding: 0.6875rem 1.5rem; font-size: 0.875rem; line-height: 1.35; color: #fff; border-bottom: 1px solid rgba(255, 255, 255, 0.12); background: linear-gradient(90deg, #2A33A8 0%, #4D60FB 55%, #5E54E8 100%); box-shadow: inset 0 0 40px rgba(197, 185, 246, 0.18); } .kw-update-banner--warn { background: linear-gradient(90deg, #5A4500 0%, #8A6A00 100%); box-shadow: none; } .kw-update-banner--danger { background: linear-gradient(90deg, #7A1A1A 0%, #C23434 100%); box-shadow: none; } .kw-update-banner__msg { display: inline-flex; align-items: center; gap: 0.6875rem; } .kw-update-banner__msg .kw-ico { color: var(--kw-soft-lavender); } .kw-update-banner--warn .kw-update-banner__msg .kw-ico { color: var(--kw-signal-gold); } .kw-update-banner--danger .kw-update-banner__msg .kw-ico { color: #FFC9C9; } .kw-update-banner__msg strong { font-weight: 700; } .kw-update-banner__cta { display: inline-flex; align-items: center; gap: 0.4375rem; font-family: var(--kw-font-headline); font-weight: 600; font-size: 0.84375rem; color: #fff; padding: 0.4375rem 0.875rem; border-radius: var(--kw-radius-pill); background: rgba(255, 255, 255, 0.16); border: 1px solid rgba(255, 255, 255, 0.28); text-decoration: none; white-space: nowrap; transition: background 150ms; } .kw-update-banner__cta:hover { background: rgba(255, 255, 255, 0.26); } .kw-update-banner__link { color: #fff; text-decoration: underline; white-space: nowrap; } .kw-update-banner__ack { display: inline-flex; align-items: center; } .kw-update-banner__ack label { display: inline-flex; align-items: center; gap: 0.5rem; color: #fff; cursor: pointer; font-size: 0.84375rem; line-height: 1.3; } .kw-update-banner__ack input[type="checkbox"] { accent-color: var(--kw-signal-gold); width: 1rem; height: 1rem; flex-shrink: 0; cursor: pointer; } button.kw-update-banner__cta { appearance: none; cursor: pointer; } .kw-update-banner__cta:disabled { opacity: 0.5; cursor: not-allowed; }.kw-cttool-banner { width: calc(100% - 2 * var(--kw-space-8)); max-width: var(--kw-width-content); margin: 0 auto 16px auto; padding: 14px 18px; box-sizing: border-box; border-radius: var(--kw-radius-xl); background: color-mix(in srgb, var(--kw-signal-gold) 8%, transparent); border: 1px solid color-mix(in srgb, var(--kw-signal-gold) 40%, transparent); -webkit-backdrop-filter: blur(30px); backdrop-filter: blur(30px); display: flex; flex-direction: column; overflow: hidden; max-height: 400px; opacity: 1; transform: translateY(0); transition: max-height 420ms ease, opacity 300ms ease, transform 300ms ease; } .kw-cttool-banner--collapsing { max-height: 0; opacity: 0; transform: translateY(-6px); } .kw-cttool-banner__row { display: flex; align-items: center; gap: 16px; flex-wrap: wrap; } .kw-cttool-banner__label { display: inline-flex; align-items: center; gap: 8px; font-family: var(--kw-font-headline); font-weight: 500; font-size: 14px; color: #fff; white-space: nowrap; } .kw-cttool-banner__label .kw-ico { color: var(--kw-signal-gold); width: 17px; height: 17px; } .kw-cttool-banner__pills { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; } .kw-cttool-pill { font-family: var(--kw-font-headline); font-weight: 600; font-size: 13px; color: #fff; padding: 7px 14px; border-radius: var(--kw-radius-pill); background: color-mix(in srgb, #fff 6%, transparent); border: 1px solid color-mix(in srgb, var(--kw-electric-indigo) 28%, transparent); cursor: pointer; transition: background 150ms, border-color 150ms; } .kw-cttool-pill:hover { background: color-mix(in srgb, #fff 12%, transparent); border-color: color-mix(in srgb, var(--kw-electric-indigo) 40%, transparent); } .kw-cttool-banner__dismiss { margin-inline-start: auto; width: 28px; height: 28px; flex-shrink: 0; border-radius: 50%; display: inline-flex; align-items: center; justify-content: center; background: transparent; border: 0; cursor: pointer; color: color-mix(in srgb, var(--kw-muted-lavender) 70%, transparent); transition: background 150ms, color 150ms; } .kw-cttool-banner__dismiss:hover { background: color-mix(in srgb, #fff 8%, transparent); color: #fff; } .kw-cttool-banner__dismiss .kw-ico { width: 15px; height: 15px; } .kw-cttool-banner__other { display: flex; align-items: center; gap: 10px; margin-top: 12px; padding-top: 12px; border-top: 1px solid color-mix(in srgb, var(--kw-electric-indigo) 16%, transparent); } .kw-cttool-banner__other[hidden] { display: none; } .kw-cttool-banner__other-input { flex: 1; min-width: 160px; background: transparent; border: 0; outline: 0; font-family: var(--kw-font-headline); font-weight: 400; font-size: 13px; color: #fff; } .kw-cttool-banner__other-input::placeholder { color: color-mix(in srgb, var(--kw-muted-lavender) 70%, transparent); } .kw-cttool-banner__confirm { font-family: var(--kw-font-headline); font-weight: 600; font-size: 12px; color: var(--kw-deep-space); background: var(--kw-soft-lavender); border: 0; border-radius: var(--kw-radius-pill); padding: 7px 14px; cursor: pointer; flex-shrink: 0; transition: filter 150ms; } .kw-cttool-banner__confirm:hover { filter: brightness(0.95); } @media (max-width: 640px) { .kw-cttool-banner { padding-block: 10px; padding-inline: 14px 40px; position: relative; } .kw-cttool-banner__row { gap: 8px; } .kw-cttool-banner__label { flex: 1 1 100%; white-space: normal; font-size: 13px; } .kw-cttool-banner__pills { flex: 1 1 100%; display: grid; grid-template-columns: repeat(auto-fit, minmax(64px, 1fr)); gap: 6px 8px; } .kw-cttool-pill { min-width: 0; padding: 6px 4px; font-size: 12.5px; text-align: center; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .kw-cttool-banner__dismiss { position: absolute; top: 10px; inset-inline-end: 10px; margin-inline-start: 0; } } .kw-cttool-flying { position: fixed; z-index: 9999; box-sizing: border-box; display: inline-flex; align-items: center; justify-content: center; gap: 6px; overflow: hidden; white-space: nowrap; font-family: var(--kw-font-headline); font-weight: 600; font-size: 13px; color: #fff; background: color-mix(in srgb, var(--kw-electric-indigo) 28%, transparent); border: 1px solid color-mix(in srgb, var(--kw-electric-indigo) 28%, transparent); border-radius: var(--kw-radius-pill); pointer-events: none; opacity: 1; transition: top 520ms cubic-bezier(.22, .9, .32, 1), left 520ms cubic-bezier(.22, .9, .32, 1), width 520ms cubic-bezier(.22, .9, .32, 1), height 520ms cubic-bezier(.22, .9, .32, 1), opacity 520ms cubic-bezier(.22, .9, .32, 1); } .kw-cttool-flying .kw-ico { width: 12px; height: 12px; flex-shrink: 0; } .kw-cttool-flying--landed { opacity: .25; } .kw-cttool { display: inline-flex; align-items: center; position: relative; } .kw-cttool:empty { display: none; } .kw-cttool__chip { display: inline-flex; align-items: center; gap: 6px; background: color-mix(in srgb, var(--kw-electric-indigo) 16%, transparent); border: 1px solid color-mix(in srgb, var(--kw-electric-indigo) 32%, transparent); border-radius: var(--kw-radius-pill); padding: 6px 12px; cursor: pointer; } .kw-cttool__chip--pop { animation: kwChipPop 320ms ease; } .kw-cttool__chip .kw-cttool__chip-ico { color: var(--kw-soft-lavender); width: 12px; height: 12px; flex-shrink: 0; } .kw-cttool__label { font-family: var(--kw-font-mono); font-size: 11.5px; color: #fff; white-space: nowrap; max-width: 160px; overflow: hidden; text-overflow: ellipsis; } .kw-cttool__chip .kw-cttool__chevron { color: var(--kw-muted-lavender); width: 11px; height: 11px; flex-shrink: 0; } .kw-cttool__popover { position: absolute; top: calc(100% + 8px); right: 0; min-width: 160px; background: var(--kw-midnight-navy); border: 1px solid color-mix(in srgb, var(--kw-electric-indigo) 25%, transparent); border-radius: var(--kw-radius-lg); padding: 6px; box-shadow: 0 12px 28px -12px rgba(5, 8, 33, 0.55); z-index: 60; } .kw-cttool[data-open="true"] .kw-cttool__popover { display: block; } .kw-cttool:not([data-open="true"]) .kw-cttool__popover { display: none; } .kw-cttool__option { display: flex; align-items: center; justify-content: space-between; gap: 8px; width: 100%; text-align: left; font-family: var(--kw-font-headline); font-weight: 400; font-size: 13px; color: #fff; background: transparent; border: 0; border-radius: 9px; padding: 8px 10px; cursor: pointer; } .kw-cttool__option:hover { background: color-mix(in srgb, var(--kw-electric-indigo) 14%, transparent); } .kw-cttool__option--active { background: color-mix(in srgb, var(--kw-electric-indigo) 12%, transparent); font-weight: 600; } .kw-cttool__option-check { color: var(--kw-signal-gold); width: 14px; height: 14px; flex-shrink: 0; } .kw-cttool__divider { height: 1px; margin: 4px 6px; background: color-mix(in srgb, var(--kw-electric-indigo) 20%, transparent); } .kw-cttool__option--reset { color: var(--kw-muted-lavender); font-size: 12px; font-style: italic; } .kw-cttool__option--reset:hover { background: color-mix(in srgb, var(--kw-signal-gold) 14%, transparent); color: #fff; } .kw-cttool__other { display: flex; align-items: center; gap: 8px; padding: 6px 4px 2px 4px; } .kw-cttool__other-input { flex: 1; min-width: 0; background: color-mix(in srgb, #fff 6%, transparent); border: 1px solid color-mix(in srgb, var(--kw-electric-indigo) 28%, transparent); border-radius: var(--kw-radius-md); padding: 6px 8px; font-family: var(--kw-font-headline); font-size: 12px; color: #fff; outline: 0; } .kw-cttool__other-confirm { font-family: var(--kw-font-headline); font-weight: 600; font-size: 12px; color: var(--kw-deep-space); background: var(--kw-soft-lavender); border: 0; border-radius: var(--kw-radius-pill); padding: 6px 12px; cursor: pointer; flex-shrink: 0; } .kw-cttool__ghost { width: 30px; height: 30px; border-radius: 50%; display: inline-flex; align-items: center; justify-content: center; background: transparent; border: 1px solid color-mix(in srgb, var(--kw-electric-indigo) 22%, transparent); color: var(--kw-muted-lavender); cursor: pointer; transition: background 150ms; } .kw-cttool__ghost:hover { background: color-mix(in srgb, var(--kw-electric-indigo) 12%, transparent); } .kw-cttool__ghost .kw-ico { width: 14px; height: 14px; }.kw-hero--split .kw-hero__inner { display: grid; grid-template-columns: 1.25fr 0.75fr; gap: 3rem; align-items: center; text-align: start; max-width: var(--kw-width-content); } .kw-hero--split .kw-hero__copy { display: flex; flex-direction: column; align-items: flex-start; } .kw-hero--split .kw-hero__title { max-width: none; } .kw-hero--split .kw-hero__eyebrow { margin-bottom: 1.375rem; } .kw-hero--split .kw-hero__lede { margin-inline: 0; margin-block: 1.375rem 1.875rem; max-width: 33rem; } .kw-hero--split .kw-hero__ctas { justify-content: flex-start; } @media (max-width: 900px) { .kw-hero--split .kw-hero__inner { grid-template-columns: 1fr; gap: 2rem; text-align: center; } .kw-hero--split .kw-hero__copy { align-items: center; } .kw-hero--split .kw-hero__lede { margin-inline: auto; } .kw-hero--split .kw-hero__ctas { justify-content: center; } } .feed { border-radius: var(--kw-radius-xl); border: 1px solid var(--kw-border-color); background: var(--kw-surface); overflow: hidden; text-align: start; } html.dark .feed { -webkit-backdrop-filter: blur(34px); backdrop-filter: blur(34px); box-shadow: var(--kw-glow-glass); } .feed__head { display: flex; align-items: center; gap: 0.625rem; padding: 1rem 1.125rem; border-bottom: 1px solid var(--kw-border-color); } .feed__head .eyebrow { display: inline-flex; align-items: center; gap: 0.4375rem; font-family: var(--kw-font-mono); font-size: 12px; font-weight: 500; color: var(--kw-muted-lavender); } .feed__head .dot { width: 7px; height: 7px; border-radius: 50%; background: var(--kw-electric-indigo); box-shadow: 0 0 9px var(--kw-electric-indigo); } .feed__viewall { margin-inline-start: auto; display: inline-flex; align-items: center; gap: 0.3125rem; font-family: var(--kw-font-headline); font-weight: 500; font-size: 13px; color: var(--kw-soft-lavender); } html.light .feed__viewall { color: var(--kw-blue); } .feed__viewall .kw-ico { width: 14px; height: 14px; } .feed__list { display: flex; flex-direction: column; max-height: 26.25rem; overflow-y: auto; } .feed__item { display: flex; gap: 0.8125rem; align-items: flex-start; padding: 0.875rem 1.125rem; text-decoration: none; color: inherit; border-bottom: 1px solid var(--kw-border-soft); transition: background 130ms; } .feed__item[hidden] { display: none; } .feed__item:last-child { border-bottom: 0; } .feed__item--static { cursor: default; } .feed__item--static:hover { background: transparent; } html.dark .feed__item--static:hover { background: transparent; } .feed__item:hover { background: var(--kw-bg-subtle); } html.dark .feed__item:hover { background: rgba(77, 96, 251, 0.07); } .feed__marker { width: 34px; height: 34px; border-radius: 50%; flex-shrink: 0; display: grid; place-items: center; border: 1px solid var(--kw-border-color); } .feed__marker .kw-ico { width: 17px; height: 17px; } .feed__item--new .feed__marker { background: rgba(131, 82, 232, 0.14); border-color: rgba(131, 82, 232, 0.4); color: #8352E8; } html.dark .feed__item--new .feed__marker { color: #B79AF2; } .feed__item--available .feed__marker { background: rgba(43, 182, 115, 0.14); border-color: rgba(43, 182, 115, 0.4); color: #1B8E5A; } html.dark .feed__item--available .feed__marker { color: #36C588; } .feed__item--news .feed__marker { background: rgba(77, 96, 251, 0.10); color: var(--kw-fg-muted); } .feed__body { min-width: 0; flex: 1; } .feed__type { font-family: var(--kw-font-mono); font-size: 10px; font-weight: 600; letter-spacing: 0.04em; text-transform: uppercase; } .feed__item--new .feed__type { color: #8352E8; } html.dark .feed__item--new .feed__type { color: #B79AF2; } .feed__item--available .feed__type { color: #1B8E5A; } html.dark .feed__item--available .feed__type { color: #36C588; } .feed__item--news .feed__type { color: var(--kw-fg-subtle); } .feed__item--update .feed__marker { background: rgba(77, 96, 251, 0.12); border-color: rgba(77, 96, 251, 0.4); color: var(--kw-blue); } html.dark .feed__item--update .feed__marker { color: #93A2FF; } .feed__item--update .feed__type { color: var(--kw-blue); } html.dark .feed__item--update .feed__type { color: #93A2FF; } .feed__title { font-size: 14px; font-weight: 600; color: var(--kw-fg); line-height: 1.35; margin: 2px 0 0; } .feed__summary { font-size: 12.5px; color: var(--kw-fg-muted); line-height: 1.4; margin: 3px 0 0; } .feed__changes { list-style: none; margin: 6px 0 0; padding: 0; display: flex; flex-direction: column; gap: 3px; } .feed__changes li { font-size: 12px; color: var(--kw-fg-muted); line-height: 1.4; display: flex; gap: 6px; align-items: baseline; } .feed__changes .feed__ver { flex-shrink: 0; } .feed__meta { font-family: var(--kw-font-mono); font-size: 11px; color: var(--kw-fg-subtle); margin-top: 4px; display: flex; gap: 6px; flex-wrap: wrap; align-items: center; } .feed__meta > span + span::before { content: "·"; margin-inline-end: 6px; color: var(--kw-fg-subtle); } .feed__ver { font-weight: 600; color: var(--kw-fg-muted); border: 1px solid var(--kw-border-color); border-radius: var(--kw-radius-pill); padding: 1px 7px; letter-spacing: 0.01em; } .feed__meta > .feed__ver + span::before { content: none; } .kw-news-hero { display: flex; align-items: flex-start; gap: 1.125rem; margin-bottom: 0.5rem; } .kw-news-hero__orb { width: 56px; height: 56px; flex-shrink: 0; border-radius: var(--kw-radius-lg); display: grid; place-items: center; color: var(--kw-white); background: var(--kw-glass-fill); border: 1px solid var(--kw-glass-stroke); } html.light .kw-news-hero__orb { background: var(--kw-blue); border-color: var(--kw-blue); color: #fff; } .kw-news-hero__orb .kw-ico { width: 28px; height: 28px; } .kw-news-hero h1 { font-size: 2.125rem; font-weight: 700; letter-spacing: -0.025em; margin: 0; color: var(--kw-fg); } .kw-news-hero p { color: var(--kw-fg-muted); margin: 0.375rem 0 0; font-size: 0.9375rem; max-width: 35rem; } .kw-legal__meta { font-family: var(--kw-font-mono); font-size: 0.75rem; color: var(--kw-fg-subtle); margin: 0.375rem 0 0; } .kw-legal__body { max-width: 42rem; } .kw-legal__ack { margin-top: 1.25rem; font-weight: 600; color: var(--kw-fg); } .kw-legal__receipt { margin: 0.5rem 0 0; font-size: 0.8125rem; color: var(--kw-fg-subtle); } .kw-news-controls { display: flex; align-items: center; justify-content: space-between; gap: 1rem 1.5rem; flex-wrap: wrap; margin: 1.5rem 0 1.375rem; } .kw-news-search { position: relative; display: inline-flex; align-items: center; flex: 0 1 18rem; min-width: 12rem; } .kw-news-search__ico { position: absolute; inset-inline-start: 0.75rem; display: grid; place-items: center; color: var(--kw-fg-subtle); pointer-events: none; } .kw-news-search__ico .kw-ico { width: 15px; height: 15px; } .kw-news-search input { width: 100%; padding-block: 0.5rem; padding-inline: 2.25rem 0.875rem; border-radius: var(--kw-radius-pill); border: 1px solid var(--kw-border-color); background: var(--kw-surface); color: var(--kw-fg); font-size: 13px; } .kw-news-search input:focus-visible { outline: 2px solid var(--kw-blue); outline-offset: 1px; } .kw-news-noresults { color: var(--kw-fg-muted); font-size: 0.9375rem; padding: 1.5rem 1.125rem; margin: 0; } .kw-news-more { display: flex; flex-direction: column; align-items: center; gap: 0.625rem; margin-top: 1.5rem; } .kw-news-more__count { font-family: var(--kw-font-mono); font-size: 12px; color: var(--kw-fg-subtle); margin: 0; } .kw-news-filter { display: flex; gap: 0.5rem; flex-wrap: wrap; align-items: center; } .kw-news-filter__lbl { font-family: var(--kw-font-mono); font-size: 11px; color: var(--kw-fg-subtle); margin-inline-end: 0.125rem; } .kw-news-filter__pill { font-family: var(--kw-font-mono); font-size: 12px; padding: 0.4375rem 0.9375rem; border-radius: var(--kw-radius-pill); border: 1px solid var(--kw-border-color); background: transparent; color: var(--kw-fg-muted); cursor: pointer; display: inline-flex; align-items: center; gap: 0.375rem; } .kw-news-filter__pill .kw-ico { width: 13px; height: 13px; } .kw-news-filter__pill[aria-pressed="true"] { background: var(--kw-blue); border-color: var(--kw-blue); color: #fff; } .feed--page { max-width: 55rem; } .feed--page .feed__list { max-height: none; overflow: visible; } .feed__monthhead { font-family: var(--kw-font-mono); font-size: 11px; font-weight: 600; text-transform: uppercase; letter-spacing: 0.06em; color: var(--kw-fg-subtle); padding: 0.875rem 1.125rem 0.375rem; border-bottom: 1px solid var(--kw-border-soft); } .kw-news-empty { padding: 2rem 1.125rem; } .whatsnew__eyebrow { display: inline-flex; align-items: center; gap: 0.4375rem; font-family: var(--kw-font-mono); font-size: 12px; font-weight: 500; color: var(--kw-muted-lavender); } .whatsnew__eyebrow .dot { width: 7px; height: 7px; border-radius: 50%; background: var(--kw-electric-indigo); box-shadow: 0 0 9px var(--kw-electric-indigo); } .whatsnew__rail { display: grid; grid-template-columns: repeat(4, 1fr); gap: 0.875rem; margin-top: 1.375rem; } .whatsnew__rail .feed__item { flex-direction: column; align-items: flex-start; gap: 0.75rem; height: 100%; border: 1px solid var(--kw-border-color); border-radius: var(--kw-radius-xl); background: var(--kw-surface); } html.dark .whatsnew__rail .feed__item { -webkit-backdrop-filter: blur(34px); backdrop-filter: blur(34px); box-shadow: var(--kw-glow-glass); } @media (max-width: 1000px) { .whatsnew__rail { grid-template-columns: repeat(2, 1fr); } } @media (max-width: 560px) { .whatsnew__rail { grid-template-columns: 1fr; } }.kw-home-section + .kw-home-section { margin-block-start: 3rem; } .kw-grid-cards--muted { opacity: 0.92; } .kw-grid-cards--muted .kw-card { background: var(--kw-bg-subtle); box-shadow: none; } html.dark .kw-grid-cards--muted .kw-card { background: var(--kw-glass-fill-2); border-color: rgba(255, 255, 255, 0.07); box-shadow: none; } html.dark .kw-grid-cards--muted .kw-card:hover { box-shadow: var(--kw-glow-glass); } .kw-orb { position: relative; width: 48px; height: 48px; flex-shrink: 0; display: grid; place-items: center; overflow: hidden; border-radius: var(--kw-radius-md); background: var(--kw-glass-fill); border: 1px solid var(--kw-glass-stroke); color: #fff; } .kw-orb::before { content: ""; position: absolute; inset: 0; pointer-events: none; background: linear-gradient(135deg, rgba(221, 214, 251, 0.45), rgba(221, 214, 251, 0)); } .kw-orb > * { position: relative; } html.dark .kw-orb { box-shadow: var(--kw-glow-glass); } html.light .kw-orb { background: var(--kw-blue); border-color: var(--kw-blue); color: #fff; } html.light .kw-orb::before { background: linear-gradient(135deg, rgba(255, 255, 255, 0.28), rgba(255, 255, 255, 0)); } .kw-orb--gold { color: var(--kw-signal-gold); border-color: rgba(253, 202, 19, 0.42); } html.dark .kw-orb--gold { box-shadow: 0 0 22px -6px rgba(253, 202, 19, 0.45); } html.light .kw-orb--gold { background: rgba(253, 202, 19, 0.14); border-color: rgba(253, 202, 19, 0.42); color: var(--kw-yellow-ink); } .kw-features { display: grid; grid-template-columns: 1fr; gap: 1rem; } @media (min-width: 768px) { .kw-features { grid-template-columns: repeat(3, 1fr); } } .kw-feature { display: flex; flex-direction: column; gap: 0.75rem; padding: 1.5rem; border-radius: var(--kw-radius-xl); background: var(--kw-surface); border: 1px solid var(--kw-border-color); box-shadow: var(--kw-shadow-card); } html.dark .kw-feature { -webkit-backdrop-filter: blur(34px); backdrop-filter: blur(34px); } .kw-feature__top { display: flex; align-items: center; gap: 0.75rem; } .kw-feature__title { font-size: 1rem; font-weight: 700; letter-spacing: -0.01em; color: var(--kw-fg); margin: 0; } .kw-feature__body { font-size: 0.875rem; color: var(--kw-fg-muted); line-height: 1.6; margin: 0; } .kw-codeblock { margin: 0; background: var(--kw-navy); color: var(--kw-white); font-family: var(--kw-font-mono); font-size: 11.5px; line-height: 1.55; padding: 0.75rem 0.875rem; border-radius: var(--kw-radius-md); overflow-x: auto; } .kw-codeblock code { font-family: inherit; color: inherit; } .kw-installgrid { display: grid; grid-template-columns: 1fr; gap: 1rem; } @media (min-width: 768px) { .kw-installgrid { grid-template-columns: repeat(3, 1fr); } } .kw-installcard { display: flex; flex-direction: column; padding: 1.375rem; border-radius: var(--kw-radius-xl); background: var(--kw-surface); border: 1px solid var(--kw-border-color); box-shadow: var(--kw-shadow-card); } html.dark .kw-installcard { -webkit-backdrop-filter: blur(34px); backdrop-filter: blur(34px); } .kw-installcard__head { display: flex; align-items: center; gap: 0.625rem; margin-bottom: 0.875rem; } .kw-installcard__head .kw-orb { width: 38px; height: 38px; } .kw-installcard__host { font-family: var(--kw-font-headline); font-weight: 600; font-size: 1rem; color: var(--kw-fg); } .kw-installcard__body { font-size: 0.84375rem; color: var(--kw-fg-muted); line-height: 1.55; margin: 0; } .kw-installcard__body code { font-family: var(--kw-font-mono); font-size: 0.86em; background: var(--kw-bg-subtle); padding: 1px 6px; border-radius: 4px; } html.dark .kw-installcard__body code { background: rgba(77, 96, 251, 0.16); color: var(--kw-soft-lavender); } .kw-installcard__foot { margin-block-start: auto; padding-block-start: 0.875rem; display: flex; flex-wrap: wrap; align-items: center; gap: 0.5rem 0.75rem; } .kw-installcard__foot .kw-codeblock { font-size: 11px; }.kw-grid-count { font-family: var(--kw-font-mono); font-size: 12px; color: var(--kw-fg-subtle); white-space: nowrap; align-self: center; } .kw-grid-count__n { color: var(--kw-fg); font-weight: 600; } html.dark .kw-grid-count__n { color: #fff; } .kw-seemore { display: flex; align-items: center; gap: 20px; justify-content: space-between; margin-block-start: 20px; padding: 20px 24px; border-radius: var(--kw-radius-xl); text-decoration: none; color: inherit; transition: 180ms ease; background: var(--kw-surface); border: 1px solid var(--kw-border-color); box-shadow: var(--kw-card-shadow); } html.dark .kw-seemore { background: rgba(77, 96, 251, 0.06); border: 1px dashed rgba(77, 96, 251, 0.4); -webkit-backdrop-filter: blur(34px); backdrop-filter: blur(34px); box-shadow: none; } html.light .kw-seemore { border-style: dashed; border-color: #C9D0EC; background: var(--kw-bg-subtle); } .kw-seemore:hover { transform: translateY(-1px); text-decoration: none; } html.dark .kw-seemore:hover { border-color: rgba(77, 96, 251, 0.7); box-shadow: 0 0 30px -10px rgba(77, 96, 251, 0.5); } html.light .kw-seemore:hover { border-color: var(--kw-blue); } .kw-seemore__txt { display: flex; flex-direction: column; gap: 3px; min-width: 0; } .kw-seemore__lead { font-size: 15px; color: var(--kw-fg); } html.dark .kw-seemore__lead { color: #fff; } .kw-seemore__sub { font-size: 13px; color: var(--kw-fg-subtle); } .kw-seemore__cta { display: inline-flex; align-items: center; gap: 8px; flex-shrink: 0; white-space: nowrap; font-family: var(--kw-font-headline); font-weight: 600; font-size: 14px; letter-spacing: -0.01em; padding: 11px 18px; border-radius: var(--kw-radius-md); border: 1px solid transparent; } html.dark .kw-seemore__cta { color: #fff; background: var(--kw-glass-fill); border-color: rgba(77, 96, 251, 0.4); box-shadow: inset 0 0 30px rgba(197, 185, 246, 0.14); } html.light .kw-seemore__cta { color: #fff; background: var(--kw-blue); border-color: var(--kw-blue); } .kw-seemore__cta .kw-ico { transition: translate 160ms; } .kw-seemore:hover .kw-seemore__cta .kw-ico { translate: 3px 0; } [dir="rtl"] .kw-seemore:hover .kw-seemore__cta .kw-ico { translate: -3px 0; } @media (max-width: 640px) { .kw-seemore { flex-direction: column; align-items: flex-start; gap: 14px; } .kw-seemore__cta { width: 100%; justify-content: center; } }.kw-doc { max-width: 56rem; margin-block-start: 1.5rem; color: var(--kw-fg); } .kw-doc__h { font-family: var(--kw-font-headline); font-weight: 700; font-size: 1.05rem; letter-spacing: -0.01em; margin-block: 1.75rem 0.5rem; color: var(--kw-fg); } .kw-doc p { color: var(--kw-fg-muted); line-height: 1.65; margin-block: 0 0.75rem; } .kw-doc__list { padding-inline-start: 1.25rem; margin-block: 0 1rem; color: var(--kw-fg-muted); } .kw-doc__list li { margin-block: 0.25rem; line-height: 1.6; } .kw-doc code { font-family: var(--kw-font-mono); font-size: 0.86em; background: var(--kw-bg-subtle); padding: 1px 6px; border-radius: 4px; } html.dark .kw-doc code { background: rgba(77, 96, 251, 0.16); color: var(--kw-soft-lavender); } .kw-doc .kw-codeblock { margin-block: 0.5rem 1rem; } .kw-doc a.kw-link { text-decoration: underline; text-underline-offset: 2px; }.langpicker { position: relative; flex-shrink: 0; } .langpicker__trigger { display: inline-flex; align-items: center; gap: 8px; cursor: pointer; font-family: var(--kw-font-headline); font-weight: 500; font-size: 13px; padding: 7px 12px; border-radius: var(--kw-radius-pill); transition: 150ms; background: transparent; border: 1px solid transparent; color: inherit; } .langpicker__trigger [data-lucide] { width: 16px; height: 16px; } .langpicker__trigger .chev { width: 14px; height: 14px; opacity: .6; transition: transform 180ms; } .langpicker[data-open="true"] .langpicker__trigger .chev { transform: rotate(180deg); } html.dark .langpicker__trigger { color: #fff; background: rgba(147,156,229,0.10); border-color: rgba(77,96,251,0.18); } html.dark .langpicker__trigger:hover, html.dark .langpicker[data-open="true"] .langpicker__trigger { border-color: rgba(77,96,251,0.5); background: rgba(77,96,251,0.14); } html.light .langpicker__trigger { color: var(--kw-fg-muted); background: var(--kw-bg-subtle); border-color: var(--kw-border-color); } html.light .langpicker__trigger:hover, html.light .langpicker[data-open="true"] .langpicker__trigger { border-color: var(--kw-blue); color: var(--kw-fg); } .langpicker__trigger .code { font-family: var(--kw-font-mono); font-size: 11px; font-weight: 600; opacity: .75; } .langpicker__panel { position: absolute; top: calc(100% + 10px); inset-inline-end: 0; z-index: 200; width: 340px; max-width: calc(100vw - 24px); display: none; flex-direction: column; opacity: 0; transform: translateY(-6px); transition: opacity 160ms ease, transform 160ms ease; border-radius: var(--kw-radius-xl); overflow: hidden; } .langpicker[data-open="true"] .langpicker__panel { display: flex; opacity: 1; transform: none; } html.dark .langpicker__panel { background: rgba(13,15,49,0.97); border: 1px solid rgba(77,96,251,0.30); box-shadow: 0 30px 80px rgba(0,0,0,0.55), inset 0 0 55px rgba(197,185,246,0.10); -webkit-backdrop-filter: blur(40px); backdrop-filter: blur(40px); } html.light .langpicker__panel { background: #fff; border: 1px solid var(--kw-border-color); box-shadow: 0 30px 80px rgba(11,14,36,0.22); } .langpicker--left .langpicker__panel { inset-inline: 0 auto; } .langpicker__searchbar { display: flex; align-items: center; gap: 9px; padding: 13px 15px; border-bottom: 1px solid var(--kw-border-color); } .langpicker__searchbar [data-lucide] { width: 16px; height: 16px; color: var(--kw-fg-subtle); flex-shrink: 0; } .langpicker__searchbar input { flex: 1; border: 0; background: transparent; outline: none; color: var(--kw-fg); font-family: var(--kw-font-body); font-size: 14px; } .langpicker__searchbar input::placeholder { color: var(--kw-fg-subtle); } .langpicker__searchbar kbd { font-family: var(--kw-font-mono); font-size: 10px; color: var(--kw-fg-subtle); border: 1px solid var(--kw-border-color); border-radius: 5px; padding: 1px 5px; } .langpicker__list { max-height: 336px; overflow-y: auto; padding: 6px; --kw-scrollbar-thumb: var(--kw-blue); --kw-scrollbar-thumb-hover: var(--kw-electric-indigo); } .langpicker__grouplabel { font-family: var(--kw-font-mono); font-size: 10px; letter-spacing: 0.06em; text-transform: uppercase; color: var(--kw-fg-subtle); padding: 10px 12px 6px; } .langpicker__item { display: flex; align-items: center; gap: 12px; width: 100%; text-align: start; cursor: pointer; padding: 9px 11px; border-radius: var(--kw-radius-md); border: 1px solid transparent; background: transparent; color: var(--kw-fg); font-family: var(--kw-font-body); } .langpicker__item:hover, .langpicker__item.is-active { background: var(--kw-bg-subtle); } html.dark .langpicker__item:hover, html.dark .langpicker__item.is-active { background: rgba(77,96,251,0.16); } .langpicker__item.is-current { background: transparent; } .langpicker__code { flex-shrink: 0; width: 38px; height: 30px; display: grid; place-items: center; border-radius: var(--kw-radius-sm); font-family: var(--kw-font-mono); font-size: 11px; font-weight: 600; background: rgba(77,96,251,0.12); color: var(--kw-muted-lavender); border: 1px solid rgba(77,96,251,0.20); } html.light .langpicker__code { background: var(--kw-bg-subtle); color: var(--kw-blue); border-color: var(--kw-border-color); } .langpicker__names { min-width: 0; flex: 1; display: flex; flex-direction: column; gap: 1px; } .langpicker__native { font-size: 14px; font-weight: 500; color: var(--kw-fg); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; unicode-bidi: isolate; } .langpicker__en { font-size: 11.5px; color: var(--kw-fg-subtle); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .langpicker__rtl { flex-shrink: 0; font-family: var(--kw-font-mono); font-size: 9px; font-weight: 700; letter-spacing: 0.04em; padding: 2px 6px; border-radius: var(--kw-radius-pill); background: rgba(253,202,19,0.16); color: var(--kw-signal-gold); border: 1px solid rgba(253,202,19,0.3); } html.light .langpicker__rtl { background: #FEF6DC; color: var(--kw-yellow-ink); border-color: #F6E0A0; } .langpicker__check { flex-shrink: 0; color: var(--kw-teal); display: none; } .langpicker__check [data-lucide] { width: 17px; height: 17px; } .langpicker__item.is-current .langpicker__check { display: block; } .langpicker__item.is-current .langpicker__code { background: #2BB673; color: #06170E; border-color: #2BB673; } html.light .langpicker__item.is-current .langpicker__code { background: #1B8E5A; color: #fff; border-color: #1B8E5A; } .langpicker__empty { padding: 28px 16px; text-align: center; color: var(--kw-fg-subtle); font-size: 13px; } .langpicker__empty [data-lucide] { width: 26px; height: 26px; color: var(--kw-fg-subtle); display: block; margin: 0 auto 8px; } .langpicker__foot { padding: 10px 14px; border-top: 1px solid var(--kw-border-color); font-family: var(--kw-font-mono); font-size: 11px; color: var(--kw-fg-subtle); display: flex; align-items: center; gap: 7px; } .langpicker__foot [data-lucide] { width: 13px; height: 13px; } .lang-toast { position: fixed; bottom: 76px; inset-inline-start: 50%; transform: translateX(-50%) translateY(8px); z-index: 1000; display: flex; align-items: center; gap: 9px; opacity: 0; pointer-events: none; padding: 11px 16px; border-radius: var(--kw-radius-pill); font-size: 13.5px; color: #fff; background: rgba(13,15,49,0.96); border: 1px solid rgba(77,96,251,0.45); box-shadow: 0 16px 50px rgba(0,0,0,0.5); transition: 220ms ease; } .lang-toast.show { opacity: 1; transform: translateX(-50%) translateY(0); } .lang-toast [data-lucide] { width: 16px; height: 16px; color: var(--kw-soft-lavender); } .lang-toast .code { font-family: var(--kw-font-mono); color: var(--kw-signal-gold); }.kw-admin-mobilebar { display: none; align-items: center; gap: 12px; padding: 10px 16px; background: var(--kw-deep-space); color: #fff; } .kw-admin-mobilebar img { height: 20px; display: block; } .kw-admin-mobilebar__burger { margin-inline-start: auto; width: 40px; height: 40px; display: grid; place-items: center; border-radius: 10px; border: 1px solid rgba(255, 255, 255, 0.18); background: rgba(255, 255, 255, 0.06); color: #fff; cursor: pointer; } .kw-drawer-scrim { display: none; position: fixed; inset: 0; background: rgba(5, 8, 33, 0.6); -webkit-backdrop-filter: blur(2px); backdrop-filter: blur(2px); z-index: 110; opacity: 0; pointer-events: none; transition: opacity 0.25s ease; } @media (max-width: 1024px) { .kw-container { padding-inline: 1.5rem; } .kw-adminnav { width: 208px; } .kw-topnav__brand-text--muted { display: none; } } @media (max-width: 768px) { .kw-container { padding-inline: 1rem; } .kw-admin-main__inner { padding: 1.25rem 1rem 2.5rem; } .kw-topnav { padding: 12px 1rem; } .kw-topnav__inner { gap: 10px; padding: 8px 10px 8px 14px; } .kw-topnav__brand-text--muted { display: none; } .kw-topnav__nav { display: none; } .kw-topnav .langpicker__trigger { gap: 0; padding: 7px; } .kw-topnav .langpicker__trigger .label, .kw-topnav .langpicker__trigger .code, .kw-topnav .langpicker__trigger .chev { display: none; } .kw-topnav__actions > .kw-cttool { display: none; } .kw-topnav__chip { display: none; } .kw-topnav__install { display: inline-flex; } .kw-topnav__menu { display: block; } .kw-topnav .langpicker__panel { position: fixed; top: 68px; inset-inline: auto 12px; width: min(340px, calc(100vw - 24px)); max-width: none; } .kw-hero { padding: 2.5rem 1rem 2.25rem; } .kw-hero__art { display: none; } .kw-grid-cards, .kw-grid-cards--two, .kw-grid-cards--four, .kw-catalog .kw-grid-cards { grid-template-columns: 1fr; } .kw-page-header--row { flex-direction: column; align-items: flex-start; } .kw-access-editor__cols { grid-template-columns: 1fr; } .kw-detail-hero__inner { flex-direction: column; } .kw-detail-hero__rhs { align-items: stretch; width: 100%; min-width: 0; } .kw-section--flush { overflow-x: auto; } .kw-table { min-width: 720px; } .kw-tabs__list { overflow-x: auto; } .kw-update-banner { padding: 10px 16px; gap: 10px; flex-wrap: nowrap; justify-content: space-between; align-items: center; text-align: left; } .kw-update-banner__msg { align-items: flex-start; min-width: 0; } .kw-update-banner__cta { margin-inline-start: 0; flex-shrink: 0; } .kw-admin-mobilebar { display: flex; } .kw-drawer-scrim { display: block; } .kw-admin-shell { display: block; } .kw-admin-topbar { display: none; } .kw-adminnav { position: fixed; top: 0; inset-inline-start: 0; bottom: 0; height: 100dvh; width: 286px; max-width: 86vw; z-index: 120; transform: translateX(-100%); transition: transform 0.25s ease; align-self: auto; } [dir="rtl"] .kw-adminnav { transform: translateX(100%); } body.kw-drawer-open .kw-adminnav { transform: translateX(0); box-shadow: 0 0 60px rgba(0, 0, 0, 0.5); } body.kw-drawer-open .kw-drawer-scrim { opacity: 1; pointer-events: auto; } } @media (max-width: 480px) { .kw-topnav__install-label { display: none; } .kw-topnav__install { padding-inline: 10px; } }