body {
  background: linear-gradient(180deg, #f7f9fc 0%, #eef3f8 46%, #f8fafc 100%);
}

.guide-wrap {
  min-height: 100vh;
}

.guide-topbar {
  position: sticky;
  top: 0;
  z-index: 1030;
  border-bottom: 1px solid rgba(24, 36, 51, 0.12);
  background: rgba(247, 249, 252, 0.94);
  backdrop-filter: blur(10px);
}

.guide-topbar .guide-nav {
  border: 0;
  border-radius: 0;
  background: transparent;
  padding: 0.75rem 0;
}

.guide-nav-scroll {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.5rem;
}

.guide-hero,
.guide-section,
.guide-card,
.guide-nav {
  border: 1px solid var(--tblr-border-color);
  border-radius: var(--tblr-border-radius-xl);
  background: var(--tblr-bg-surface);
}

.guide-hero {
  border-color: rgba(32, 107, 196, 0.16);
  background: linear-gradient(135deg, #ffffff 0%, #eef5ff 52%, #f7fbf8 100%);
  overflow: hidden;
}

.guide-section {
  scroll-margin-top: 2rem;
  box-shadow: 0 0.5rem 1.5rem rgba(24, 36, 51, 0.05);
}

.guide-card {
  height: 100%;
  background: linear-gradient(180deg, #ffffff 0%, #fbfcfd 100%);
}

.guide-nav {
  background: rgba(255, 255, 255, 0.84);
}

.guide-nav .btn {
  white-space: nowrap;
}

.guide-nav-dropdown {
  position: relative;
  flex: 0 0 auto;
}

.guide-nav-dropdown summary {
  list-style: none;
  cursor: pointer;
}

.guide-nav-dropdown summary::-webkit-details-marker {
  display: none;
}

.guide-nav-dropdown-menu {
  position: absolute;
  top: calc(100% + 0.375rem);
  left: 0;
  z-index: 1060;
  display: none;
  min-width: 14rem;
  padding: 0.5rem;
  border: 1px solid rgba(24, 36, 51, 0.12);
  border-radius: var(--tblr-border-radius-lg);
  background: #ffffff;
  box-shadow: 0 1rem 2rem rgba(24, 36, 51, 0.14);
}

.guide-nav-dropdown[open] .guide-nav-dropdown-menu {
  display: grid;
  gap: 0.125rem;
}

.guide-nav-dropdown-menu a {
  display: block;
  padding: 0.625rem 0.75rem;
  border-radius: var(--tblr-border-radius);
  color: var(--tblr-body-color);
  font-weight: 600;
  text-decoration: none;
  white-space: nowrap;
}

.guide-nav-dropdown-menu a:hover,
.guide-nav-dropdown-menu a:focus-visible,
.guide-nav-dropdown-menu a[aria-current="page"] {
  background: #eef6ff;
  color: var(--tblr-primary);
}

.guide-eyebrow {
  color: var(--tblr-primary);
  font-size: 0.8125rem;
  font-weight: 700;
  letter-spacing: 0;
  text-transform: uppercase;
}

.architecture-card {
  border: 1px solid var(--tblr-border-color);
  border-radius: var(--tblr-border-radius-xl);
  background: linear-gradient(180deg, #ffffff 0%, #f7f9fc 100%);
  height: 100%;
}

.architecture-card.is-recommended {
  border-color: rgba(32, 107, 196, 0.28);
  box-shadow: 0 1rem 2.5rem rgba(32, 107, 196, 0.12);
}

.architecture-card.is-compatible {
  border-color: rgba(24, 36, 51, 0.16);
}

.architecture-meta {
  font-size: 0.875rem;
  color: var(--tblr-secondary);
}

.architecture-download {
  min-width: 100%;
}

.guide-image-frame {
  border: 1px solid rgba(32, 107, 196, 0.18);
  border-radius: var(--tblr-border-radius-lg);
  background: rgba(255, 255, 255, 0.8);
  overflow: hidden;
}

.guide-image-frame.is-soft {
  border-color: var(--tblr-border-color);
  border-radius: var(--tblr-border-radius-xl);
  background: linear-gradient(180deg, #ffffff 0%, #f8fbff 100%);
}

.guide-image {
  width: 100%;
  height: auto;
  display: block;
  background: #eef4fb;
}

.guide-list {
  margin: 0;
  padding-left: 1.15rem;
}

.guide-list li + li {
  margin-top: 0.75rem;
}

.guide-footer {
  border-top: 1px solid rgba(24, 36, 51, 0.12);
  background: rgba(255, 255, 255, 0.78);
}

.guide-footer-inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  padding: 1.25rem 0;
  color: var(--tblr-secondary);
  font-size: 0.9375rem;
}

.guide-footer-inner span {
  font-weight: 700;
}

.guide-footer-inner nav {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 1rem;
}

.guide-footer-inner a {
  color: var(--tblr-secondary);
  text-decoration: none;
}

.guide-footer-inner a:hover,
.guide-footer-inner a:focus-visible {
  color: var(--tblr-primary);
  text-decoration: underline;
}

.policy-section h2 {
  margin-top: 2rem;
  margin-bottom: 0.75rem;
  font-size: 1.25rem;
}

.policy-section h2:first-of-type {
  margin-top: 0;
}

.policy-section p {
  color: var(--tblr-secondary);
  line-height: 1.8;
}

.policy-section ul {
  color: var(--tblr-secondary);
  line-height: 1.8;
}

.policy-table-wrap {
  width: 100%;
  overflow-x: auto;
  margin: 1rem 0 1.5rem;
  border: 1px solid var(--tblr-border-color);
  border-radius: var(--tblr-border-radius-lg);
}

.policy-table {
  width: 100%;
  min-width: 46rem;
  border-collapse: collapse;
  background: #ffffff;
}

.policy-table th,
.policy-table td {
  padding: 0.875rem 1rem;
  border-bottom: 1px solid var(--tblr-border-color);
  vertical-align: top;
  text-align: left;
}

.policy-table tr:last-child th,
.policy-table tr:last-child td {
  border-bottom: 0;
}

.policy-table th {
  width: 11rem;
  background: #f8fafc;
  color: var(--tblr-body-color);
  font-weight: 700;
}

.policy-table td {
  color: var(--tblr-secondary);
  line-height: 1.65;
}

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

.feature-card {
  position: relative;
}

.product-card:hover,
.product-card:focus-visible {
  border-color: rgba(32, 107, 196, 0.35);
  box-shadow: 0 0.75rem 1.75rem rgba(24, 36, 51, 0.08);
}

.product-subnav {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
}

.product-subnav .btn {
  white-space: nowrap;
}

.feature-number {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 2.25rem;
  min-height: 2.25rem;
  margin-bottom: 1rem;
  border-radius: 999px;
  background: var(--tblr-primary);
  color: #ffffff;
  font-size: 0.875rem;
  font-weight: 700;
  font-variant-numeric: tabular-nums;
}

.feature-flow {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 1rem;
}

.feature-flow-item {
  border: 1px solid var(--tblr-border-color);
  border-radius: var(--tblr-border-radius-lg);
  background: #ffffff;
  padding: 1rem;
}

.feature-flow-item span {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 2rem;
  height: 2rem;
  margin-bottom: 0.75rem;
  border-radius: 999px;
  background: #f0f7ff;
  color: var(--tblr-primary);
  font-weight: 700;
}

.feature-flow-item strong {
  display: block;
  margin-bottom: 0.5rem;
}

.feature-flow-item p {
  margin: 0;
  color: var(--tblr-secondary);
}

.feature-menu-list {
  border: 1px solid var(--tblr-border-color);
  border-radius: var(--tblr-border-radius-lg);
  background: #ffffff;
  overflow: hidden;
}

.feature-menu-item + .feature-menu-item {
  border-top: 1px solid var(--tblr-border-color);
}

.feature-menu-item summary {
  display: grid;
  grid-template-columns: 3.5rem minmax(8rem, 12rem) minmax(0, 1fr);
  align-items: center;
  gap: 1rem;
  padding: 1rem 1.25rem;
  cursor: pointer;
  list-style: none;
}

.feature-menu-item summary::-webkit-details-marker {
  display: none;
}

.feature-menu-item summary::after {
  content: "펼치기";
  justify-self: end;
  color: var(--tblr-primary);
  font-size: 0.875rem;
  font-weight: 700;
}

.feature-menu-item[open] summary {
  background: #f7fbff;
}

.feature-menu-item[open] summary::after {
  content: "접기";
}

.feature-menu-title {
  font-weight: 700;
}

.feature-menu-hint {
  min-width: 0;
  color: var(--tblr-secondary);
  overflow-wrap: anywhere;
}

.feature-menu-body {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: 1rem;
  border-top: 1px solid rgba(24, 36, 51, 0.08);
  background: #fbfdff;
  padding: 1.25rem 1.5rem;
}

.feature-menu-body h3 {
  margin: 0 0 0.5rem;
  font-size: 1rem;
  font-weight: 700;
}

.feature-menu-body p,
.feature-menu-body ul {
  margin-bottom: 0;
  color: var(--tblr-secondary);
  line-height: 1.7;
}

.zworks-hero {
  background:
    linear-gradient(135deg, rgba(255, 255, 255, 0.96) 0%, rgba(235, 246, 255, 0.92) 48%, rgba(241, 255, 249, 0.88) 100%),
    radial-gradient(circle at 85% 12%, rgba(32, 107, 196, 0.18), transparent 34%);
}

.zworks-intro-grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(18rem, 24rem);
  align-items: center;
  gap: 2rem;
}

.zworks-summary {
  display: grid;
  gap: 0.75rem;
}

.zworks-summary div {
  display: grid;
  grid-template-columns: 3rem minmax(0, 1fr);
  align-items: center;
  gap: 0.75rem;
  border: 1px solid rgba(32, 107, 196, 0.16);
  border-radius: var(--tblr-border-radius-lg);
  background: #f8fbff;
  padding: 0.875rem 1rem;
}

.zworks-summary strong {
  color: var(--tblr-primary);
  font-variant-numeric: tabular-nums;
}

.zworks-summary span {
  font-weight: 700;
}

.zworks-showcase {
  overflow: hidden;
}

.zworks-screen-layout {
  display: grid;
  grid-template-columns: minmax(17rem, 0.78fr) minmax(0, 1.22fr);
  align-items: center;
  gap: 2rem;
}

.zworks-screen-layout.is-reversed {
  grid-template-columns: minmax(0, 1.22fr) minmax(17rem, 0.78fr);
}

.zworks-screen-layout.is-reversed .zworks-screen-copy {
  order: 2;
}

.zworks-screen-layout.is-reversed .zworks-capture {
  order: 1;
}

.zworks-screen-copy p {
  line-height: 1.75;
}

.zworks-capture {
  border: 1px solid rgba(32, 107, 196, 0.16);
  border-radius: 1.25rem;
  background: linear-gradient(180deg, #f6f9fd 0%, #eef5ff 100%);
  box-shadow: 0 1rem 2.5rem rgba(24, 36, 51, 0.08);
  overflow: hidden;
}

.zworks-login-panel {
  display: grid;
  grid-template-columns: 1fr 1fr;
  min-height: 22rem;
  background: #f8fbff;
}

.zworks-login-form {
  padding: 2.25rem;
}

.zworks-mock-title {
  margin-bottom: 0.75rem;
  color: #06122e;
  font-size: 2.25rem;
  font-weight: 800;
}

.zworks-mock-help {
  margin-bottom: 1.75rem;
  color: #536783;
  font-weight: 600;
}

.zworks-field-label {
  margin-bottom: 0.5rem;
  color: #172235;
  font-size: 0.875rem;
  font-weight: 800;
}

.zworks-field {
  height: 3.5rem;
  margin-bottom: 1.25rem;
  border: 1px solid #d7e2f1;
  border-radius: 1rem;
  background: #ffffff;
}

.zworks-login-button {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 3.5rem;
  border-radius: 0.875rem;
  background: #2367c9;
  color: #ffffff;
  font-weight: 800;
}

.zworks-brand-panel {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-direction: column;
  gap: 1.5rem;
  background: linear-gradient(135deg, #45b4e6 0%, #236ac8 100%);
  color: #ffffff;
  padding: 2rem;
  text-align: center;
}

.zworks-brand-mark {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 8.25rem;
  height: 8.25rem;
  border: 1px solid rgba(255, 255, 255, 0.32);
  border-radius: 1.5rem;
  background: linear-gradient(135deg, #122a60 0%, #07142e 100%);
  box-shadow: inset 0 0 0 2px rgba(68, 182, 255, 0.28);
  color: #52d8ff;
  font-size: 5rem;
  font-weight: 900;
}

.zworks-brand-panel p {
  margin: 0;
  font-size: 1rem;
  font-weight: 800;
  line-height: 1.7;
}

.zworks-app-shell {
  display: grid;
  grid-template-columns: 3.75rem 1fr;
  min-height: 23rem;
  background: #f3f7fd;
}

.zworks-sidebar {
  display: flex;
  align-items: center;
  flex-direction: column;
  gap: 1.25rem;
  border-right: 1px solid rgba(24, 36, 51, 0.08);
  background: #eaf2fd;
  padding: 1rem 0.75rem;
}

.zworks-sidebar span {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 2.5rem;
  height: 2.5rem;
  border-radius: 1rem;
  background: #6a40ec;
  color: #ffffff;
  font-weight: 900;
}

.zworks-sidebar i {
  width: 1.4rem;
  height: 1.4rem;
  border-radius: 0.5rem;
  background: #d5e2f2;
}

.zworks-app-body {
  padding: 1rem 1.25rem 1.25rem;
}

.zworks-app-top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  margin-bottom: 1rem;
  color: #50627c;
  font-size: 0.875rem;
}

.zworks-app-top em {
  border-radius: 999px;
  background: #5b63f2;
  color: #ffffff;
  padding: 0.45rem 0.75rem;
  font-style: normal;
  font-weight: 800;
}

.zworks-dashboard-card {
  border: 1px solid #d7e2f1;
  border-radius: 1.5rem;
  background: #ffffff;
  padding: 1.5rem;
}

.zworks-dashboard-card small {
  color: var(--tblr-primary);
  font-weight: 900;
  letter-spacing: 0.28em;
}

.zworks-dashboard-card h3 {
  margin: 0.5rem 0;
  color: #06122e;
  font-size: 1.45rem;
  font-weight: 900;
}

.zworks-dashboard-card p {
  color: #536783;
}

.zworks-dashboard-card strong {
  display: block;
  margin-top: 0.75rem;
  color: #06122e;
  font-size: 2.5rem;
  font-weight: 900;
}

.zworks-progress {
  height: 0.7rem;
  margin: 0.8rem 0 1rem;
  border-radius: 999px;
  background: #eef2f7;
  overflow: hidden;
}

.zworks-progress i {
  display: block;
  height: 100%;
  border-radius: inherit;
  background: #1f63c5;
}

.zworks-metric-row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 0.75rem;
}

.zworks-metric-row span {
  border: 1px solid #dfe8f5;
  border-radius: 0.875rem;
  background: #f8fbff;
  padding: 0.75rem 1rem;
  color: #526783;
}

.zworks-metric-row b {
  color: #06122e;
}

.zworks-status-mock {
  padding: 1.5rem;
}

.zworks-stat-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 1rem;
}

.zworks-stat-grid div {
  min-height: 8.75rem;
  border: 1px solid #dce6f4;
  border-radius: 1.25rem;
  background: #ffffff;
  padding: 1.25rem;
}

.zworks-stat-grid .is-blue {
  border-color: #91d8ff;
  background: #effaff;
}

.zworks-stat-grid .is-purple {
  border-color: #d9ccff;
  background: #f7f3ff;
}

.zworks-stat-grid .is-green {
  border-color: #a7eccd;
  background: #effcf6;
}

.zworks-stat-grid small,
.zworks-work-list b {
  color: #5f7290;
  font-weight: 800;
}

.zworks-stat-grid strong {
  display: block;
  margin: 1.25rem 0 0.65rem;
  color: #06122e;
  font-size: 2rem;
  font-weight: 900;
}

.zworks-stat-grid span {
  color: #394b63;
}

.zworks-work-list {
  margin-top: 1.25rem;
  border: 1px solid #dce6f4;
  border-radius: 1.25rem;
  background: #ffffff;
  padding: 1.25rem;
}

.zworks-work-list h3 {
  margin: 0 0 1rem;
  font-weight: 900;
}

.zworks-work-list div {
  position: relative;
  border: 1px solid #dce6f4;
  border-radius: 1rem;
  padding: 1rem;
}

.zworks-work-list strong {
  display: block;
  margin-top: 0.4rem;
  color: #06122e;
  font-size: 1.1rem;
}

.zworks-work-list span {
  position: absolute;
  top: 1rem;
  right: 1rem;
  border-radius: 999px;
  background: #dff5ff;
  color: #0470a8;
  padding: 0.35rem 0.7rem;
  font-weight: 800;
}

.zworks-chart-mock {
  padding: 1.5rem;
  background: #ffffff;
}

.zworks-chart-header {
  border-bottom: 1px solid #dce6f4;
  padding-bottom: 1rem;
}

.zworks-chart-header span {
  color: #06122e;
  font-size: 1.75rem;
  font-weight: 900;
}

.zworks-chart-header p {
  margin: 0.75rem 0 0;
  color: #394b63;
}

.zworks-chart-values,
.zworks-bars {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 1rem;
}

.zworks-chart-values {
  padding: 1rem 0;
  color: #4d6c99;
  font-weight: 900;
  text-align: center;
}

.zworks-bars {
  align-items: end;
  min-height: 14rem;
  border: 1px solid #dce6f4;
  border-radius: 1.25rem;
  padding: 1.25rem;
  text-align: center;
}

.zworks-bars div {
  display: flex;
  align-items: center;
  flex-direction: column;
  justify-content: flex-end;
  min-height: 11.5rem;
}

.zworks-bars i {
  display: block;
  width: 2.9rem;
  min-height: 2rem;
  border-radius: 1rem;
  background: linear-gradient(180deg, #52d6e8 0%, #1964c9 100%);
  box-shadow: 0 0.5rem 1rem rgba(25, 100, 201, 0.2);
}

.zworks-bars b {
  margin-top: 1rem;
  color: #06122e;
  font-size: 1rem;
}

.zworks-bars small {
  color: #6b7e9c;
  overflow-wrap: anywhere;
}

.zworks-access-mock {
  padding: 1.5rem;
  background: #ffffff;
}

.zworks-access-title {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  margin-bottom: 1rem;
}

.zworks-access-title h3 {
  margin: 0;
  color: #06122e;
  font-size: 1.75rem;
  font-weight: 900;
}

.zworks-access-title button {
  border: 1px solid #d7e2f1;
  border-radius: 0.85rem;
  background: #ffffff;
  padding: 0.6rem 1rem;
  font-weight: 800;
}

.zworks-access-filter {
  border: 1px solid #d7e2f1;
  border-radius: 1rem;
  background: #f8fbff;
  padding: 1rem;
  color: #566c89;
  font-weight: 800;
}

.zworks-access-filter span {
  display: inline-flex;
  margin-left: 0.5rem;
  border-radius: 999px;
  background: #ffffff;
  padding: 0.35rem 0.7rem;
  color: #25364d;
}

.zworks-access-item {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 13rem;
  gap: 1rem;
  margin-top: 1rem;
  border: 1px solid #dce6f4;
  border-radius: 1.25rem;
  padding: 1rem;
}

.zworks-access-item b {
  display: inline-flex;
  border-radius: 999px;
  background: #e8f4ff;
  color: var(--tblr-primary);
  padding: 0.3rem 0.65rem;
}

.zworks-access-item span {
  margin-left: 0.5rem;
  color: #5f7290;
  font-weight: 800;
}

.zworks-access-item strong {
  display: block;
  margin: 0.75rem 0;
  color: #06122e;
}

.zworks-access-item em {
  display: inline-flex;
  margin-right: 0.5rem;
  border: 1px solid #dce6f4;
  border-radius: 999px;
  padding: 0.3rem 0.65rem;
  color: #394b63;
  font-style: normal;
}

.zworks-access-item aside {
  border: 1px solid #dce6f4;
  border-radius: 1rem;
  background: #f8fbff;
  padding: 0.75rem;
  color: #25364d;
  line-height: 1.8;
}

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

.zworks-role-card {
  border: 1px solid rgba(32, 107, 196, 0.14);
  border-radius: var(--tblr-border-radius-lg);
  background: linear-gradient(180deg, #ffffff 0%, #f8fbff 100%);
  padding: 1.25rem;
}

.zworks-role-card span {
  display: inline-flex;
  margin-bottom: 1rem;
  color: var(--tblr-primary);
  font-size: 0.875rem;
  font-weight: 900;
}

.zworks-role-card h2 {
  margin: 0 0 0.5rem;
  color: #06122e;
  font-size: 1.25rem;
  font-weight: 900;
}

.zworks-role-card p {
  margin: 0;
  color: var(--tblr-secondary);
  line-height: 1.65;
}

.zworks-process-layout {
  display: grid;
  grid-template-columns: minmax(0, 0.9fr) minmax(18rem, 0.75fr);
  align-items: center;
  gap: 2rem;
}

.zworks-process-list {
  display: grid;
  gap: 0.75rem;
}

.zworks-process-list div {
  display: grid;
  grid-template-columns: 8rem minmax(0, 1fr);
  gap: 1rem;
  border-left: 3px solid rgba(32, 107, 196, 0.45);
  background: #f8fbff;
  padding: 0.875rem 1rem;
}

.zworks-process-list strong {
  color: #06122e;
}

.zworks-process-list span {
  color: var(--tblr-secondary);
}

.zworks-composite-preview {
  border: 1px solid rgba(32, 107, 196, 0.16);
  border-radius: 1.25rem;
  background: #eef5ff;
  padding: 1rem;
}

.zworks-preview-window {
  border: 1px solid #d4e1f2;
  border-radius: 1rem;
  background: #ffffff;
  overflow: hidden;
  box-shadow: 0 1rem 2rem rgba(24, 36, 51, 0.08);
}

.zworks-preview-top {
  display: flex;
  align-items: center;
  gap: 0.4rem;
  border-bottom: 1px solid #dce6f4;
  background: #f8fbff;
  padding: 0.75rem;
}

.zworks-preview-top span {
  width: 0.55rem;
  height: 0.55rem;
  border-radius: 999px;
  background: #9db2cf;
}

.zworks-preview-top b {
  margin-left: auto;
  color: #526783;
  font-size: 0.8125rem;
}

.zworks-preview-body {
  display: grid;
  grid-template-columns: 3rem 1fr;
  min-height: 18rem;
}

.zworks-preview-sidebar {
  display: flex;
  align-items: center;
  flex-direction: column;
  gap: 0.9rem;
  background: #eaf2fd;
  padding-top: 1rem;
}

.zworks-preview-sidebar i {
  width: 1.25rem;
  height: 1.25rem;
  border-radius: 0.45rem;
  background: #c9d8ec;
}

.zworks-preview-content {
  padding: 1.25rem;
}

.zworks-preview-content strong {
  display: block;
  margin-bottom: 1rem;
  color: #06122e;
  font-size: 1.35rem;
}

.zworks-preview-progress {
  height: 0.75rem;
  border-radius: 999px;
  background: #edf2f8;
  overflow: hidden;
}

.zworks-preview-progress i {
  display: block;
  height: 100%;
  border-radius: inherit;
  background: #2367c9;
}

.zworks-preview-mini-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 0.75rem;
  margin: 1rem 0;
}

.zworks-preview-mini-grid span {
  border: 1px solid #dce6f4;
  border-radius: 0.85rem;
  background: #f8fbff;
  padding: 0.75rem;
  color: #62728b;
  font-size: 0.8125rem;
}

.zworks-preview-mini-grid b {
  color: #06122e;
}

.zworks-preview-bars {
  display: flex;
  align-items: end;
  justify-content: space-between;
  height: 6rem;
  border: 1px solid #dce6f4;
  border-radius: 0.85rem;
  padding: 0.75rem 1rem;
}

.zworks-preview-bars i,
.zworks-mini-bars i {
  display: block;
  width: 1.15rem;
  min-height: 1rem;
  border-radius: 999px;
  background: linear-gradient(180deg, #52d6e8 0%, #1964c9 100%);
}

.zworks-feature-board {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 1rem;
}

.zworks-feature-tile {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 12rem;
  gap: 1rem;
  min-height: 16rem;
  border: 1px solid #dce6f4;
  border-radius: var(--tblr-border-radius-xl);
  background: #ffffff;
  padding: 1.25rem;
}

.zworks-feature-tile.is-emphasis {
  grid-template-columns: 1fr;
  border-color: rgba(32, 107, 196, 0.24);
  background: linear-gradient(135deg, #f8fbff 0%, #eef7ff 100%);
}

.zworks-feature-tile h3 {
  margin: 0 0 0.5rem;
  color: #06122e;
  font-size: 1.35rem;
  font-weight: 900;
}

.zworks-feature-tile p {
  color: var(--tblr-secondary);
  line-height: 1.65;
}

.zworks-feature-tile ul {
  margin-bottom: 0;
  padding-left: 1.15rem;
  color: var(--tblr-secondary);
  line-height: 1.7;
}

.zworks-mini-login,
.zworks-mini-dashboard,
.zworks-mini-stats,
.zworks-mini-bars,
.zworks-mini-access {
  align-self: stretch;
  border: 1px solid #dce6f4;
  border-radius: 1rem;
  background: #f8fbff;
  padding: 1rem;
}

.zworks-mini-login {
  display: grid;
  align-content: center;
  gap: 0.7rem;
}

.zworks-mini-login b {
  color: #06122e;
  font-size: 1.25rem;
}

.zworks-mini-login i {
  display: block;
  height: 2.2rem;
  border: 1px solid #d6e2f1;
  border-radius: 0.75rem;
  background: #ffffff;
}

.zworks-mini-login strong {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 2.4rem;
  border-radius: 0.75rem;
  background: #2367c9;
  color: #ffffff;
}

.zworks-mini-dashboard {
  display: grid;
  align-content: center;
  gap: 0.75rem;
}

.zworks-mini-dashboard b {
  color: #06122e;
  font-size: 2rem;
  font-weight: 900;
}

.zworks-mini-dashboard span {
  height: 0.7rem;
  border-radius: 999px;
  background: #edf2f8;
  overflow: hidden;
}

.zworks-mini-dashboard i {
  display: block;
  height: 100%;
  border-radius: inherit;
  background: #2367c9;
}

.zworks-mini-dashboard small {
  color: #62728b;
  font-weight: 700;
}

.zworks-mini-stats {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 0.5rem;
}

.zworks-mini-stats span {
  display: flex;
  align-items: center;
  min-height: 3.2rem;
  border-radius: 0.75rem;
  background: #ffffff;
  padding: 0.65rem;
  color: #25364d;
  font-size: 0.8125rem;
  font-weight: 800;
}

.zworks-mini-bars {
  display: flex;
  align-items: end;
  justify-content: space-around;
}

.zworks-mini-access {
  display: grid;
  align-content: center;
  gap: 0.5rem;
}

.zworks-mini-access b {
  color: var(--tblr-primary);
}

.zworks-mini-access span {
  display: block;
  border-radius: 0.75rem;
  background: #ffffff;
  padding: 0.65rem;
  color: #25364d;
  font-size: 0.8125rem;
  font-weight: 800;
}

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

.zworks-usecase-grid div {
  border: 1px solid rgba(24, 36, 51, 0.1);
  border-radius: var(--tblr-border-radius-lg);
  background: #ffffff;
  padding: 1.25rem;
}

.zworks-usecase-grid strong {
  display: block;
  margin-bottom: 0.5rem;
  color: #06122e;
  font-size: 1.1rem;
}

.zworks-usecase-grid p {
  margin: 0;
  color: var(--tblr-secondary);
  line-height: 1.7;
}

.zagents-hero {
  background:
    linear-gradient(135deg, rgba(255, 255, 255, 0.98) 0%, rgba(239, 247, 255, 0.96) 55%, rgba(248, 252, 255, 0.92) 100%),
    radial-gradient(circle at 90% 15%, rgba(36, 106, 210, 0.18), transparent 32%);
}

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

.zagents-role-grid article {
  border: 1px solid rgba(32, 107, 196, 0.14);
  border-radius: var(--tblr-border-radius-lg);
  background: #ffffff;
  padding: 1.25rem;
}

.zagents-role-grid span {
  display: inline-flex;
  margin-bottom: 1rem;
  color: var(--tblr-primary);
  font-size: 0.875rem;
  font-weight: 900;
}

.zagents-role-grid h2 {
  margin: 0 0 0.5rem;
  color: #06122e;
  font-size: 1.25rem;
  font-weight: 900;
}

.zagents-role-grid p {
  margin: 0;
  color: var(--tblr-secondary);
  line-height: 1.65;
}

.zagents-thumbnail-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 1.25rem;
}

.zagents-thumb-card {
  display: grid;
  grid-template-columns: 1fr;
  gap: 1rem;
  align-items: stretch;
  min-height: 0;
  border: 1px solid #dce6f4;
  border-radius: var(--tblr-border-radius-xl);
  background: #ffffff;
  padding: 1.25rem;
}

.zagents-thumb-card h3 {
  margin: 0 0 0.5rem;
  color: #06122e;
  font-size: 1.3rem;
  font-weight: 900;
}

.zagents-thumb-card p {
  margin: 0;
  color: var(--tblr-secondary);
  line-height: 1.65;
}

.zagents-thumb-window {
  position: relative;
  min-height: 0;
  border: 1px solid #cfddea;
  border-radius: 0.75rem;
  background: #ffffff;
  overflow: hidden;
  box-shadow: 0 1rem 2rem rgba(24, 36, 51, 0.1);
}

.zagents-screen-image {
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 72 / 46;
  object-fit: contain;
  background: #f2f6fb;
}

.zagents-thumb-title {
  display: flex;
  align-items: center;
  gap: 0.45rem;
  min-height: 1.6rem;
  border-bottom: 1px solid #cbd8e6;
  background: #eef3f8;
  padding: 0.25rem 0.55rem;
  color: #06122e;
  font-size: 0.65rem;
  font-weight: 800;
}

.zagents-thumb-title::after {
  content: "\2014  \25a1  \00d7";
  margin-left: auto;
  color: #06122e;
  font-size: 0.65rem;
  letter-spacing: 0.2rem;
}

.zagents-thumb-title span {
  width: 0.7rem;
  height: 0.7rem;
  border-radius: 0.2rem;
  background: #2b6fd6;
}

.zagents-thumb-menu {
  display: flex;
  gap: 0.75rem;
  min-height: 1.35rem;
  border-bottom: 1px solid #cfddea;
  background: #ffffff;
  padding: 0.25rem 0.6rem;
  color: #06122e;
  font-size: 0.65rem;
}

.zagents-thumb-log,
.zagents-thumb-form,
.zagents-thumb-section,
.zagents-thumb-cardlet,
.zagents-thumb-toolbar,
.zagents-thumb-table,
.zagents-thumb-route,
.zagents-thumb-support,
.zagents-thumb-save,
.zagents-thumb-header {
  display: grid;
  gap: 0.5rem;
}

.zagents-thumb-log,
.zagents-thumb-form,
.zagents-thumb-section,
.zagents-thumb-cardlet,
.zagents-thumb-toolbar,
.zagents-thumb-support,
.zagents-thumb-save,
.zagents-thumb-header {
  padding: 0.75rem;
}

.zagents-thumb-log {
  align-content: start;
  min-height: 18.9rem;
  padding-top: 1.6rem;
  font-family: Consolas, "Courier New", monospace;
}

.zagents-thumb-log p {
  display: grid;
  grid-template-columns: 3rem 4.6rem minmax(0, 1fr);
  gap: 0.4rem;
  margin: 0;
  color: #33445c;
  font-size: 0.72rem;
  line-height: 1.35;
}

.zagents-thumb-log time {
  color: #8392a7;
}

.zagents-thumb-log b {
  color: #2367c9;
}

.zagents-thumb-log span {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.zagents-thumb-header,
.zagents-thumb-toolbar,
.zagents-thumb-save {
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: center;
}

.zagents-thumb-header,
.zagents-thumb-toolbar {
  border-bottom: 1px solid #dce6f4;
  background: #ffffff;
}

.zagents-thumb-header strong,
.zagents-thumb-toolbar strong,
.zagents-thumb-section strong,
.zagents-thumb-cardlet b,
.zagents-thumb-support b {
  color: #06122e;
  font-size: 0.78rem;
  font-weight: 900;
}

.zagents-thumb-header button,
.zagents-thumb-toolbar button,
.zagents-thumb-save button,
.zagents-thumb-support button {
  border: 1px solid #b9cce6;
  border-radius: 0.25rem;
  background: #ffffff;
  color: #0d356d;
  padding: 0.32rem 0.55rem;
  font-size: 0.68rem;
  font-weight: 800;
}

.zagents-thumb-save {
  border-top: 1px solid #dce6f4;
  background: #ffffff;
  margin-top: auto;
}

.zagents-thumb-save button {
  min-width: 4.8rem;
  border-color: #256bd7;
  background: #256bd7;
  color: #ffffff;
}

.zagents-thumb-save span {
  color: #3e4f67;
  font-size: 0.68rem;
  font-weight: 700;
}

.zagents-thumb-form {
  grid-template-columns: repeat(2, minmax(0, 1fr));
  padding: 1rem;
}

.zagents-thumb-form label,
.zagents-thumb-cardlet label,
.zagents-thumb-route label {
  display: grid;
  gap: 0.25rem;
  min-width: 0;
  color: #06122e;
  font-size: 0.68rem;
  font-weight: 800;
}

.zagents-thumb-cardlet {
  position: relative;
  margin: 1rem;
  border: 1px solid #d7e2f1;
  border-radius: 0.75rem;
  background: #f8fbff;
}

.zagents-thumb-cardlet em {
  position: absolute;
  top: 0.65rem;
  right: 0.75rem;
  color: #06122e;
  font-size: 0.68rem;
  font-style: normal;
  font-weight: 800;
}

.zagents-thumb-cardlet label.wide {
  grid-column: 1 / -1;
}

.zagents-thumb-form i,
.zagents-thumb-section i,
.zagents-thumb-cardlet i,
.zagents-thumb-support i {
  display: block;
  min-height: 1.85rem;
  border: 1px solid #c6d5e9;
  background: #ffffff;
}

.zagents-thumb-cardlet {
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

.zagents-thumb-cardlet b {
  grid-column: 1 / -1;
}

.zagents-thumb-section {
  border-bottom: 1px solid #dce6f4;
  background: #ffffff;
  padding: 1rem;
}

.zagents-thumb-table {
  grid-column: 1 / -1;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 0.25rem;
  border: 1px solid #d7e2f1;
  background: #ffffff;
  padding: 0.35rem;
}

.zagents-thumb-table span {
  background: #eaf2fb;
  color: #41516a;
  padding: 0.35rem;
  font-size: 0.62rem;
  font-weight: 800;
}

.zagents-thumb-table i {
  min-height: 1.2rem;
  background: #f8fbff;
}

.zagents-thumb-route {
  grid-column: 1 / -1;
  grid-template-columns: minmax(0, 1fr) 1.25rem minmax(0, 1fr);
  align-items: end;
}

.zagents-thumb-route strong {
  display: block;
  height: 0.2rem;
  margin-bottom: 0.65rem;
  border-radius: 999px;
  background: #256bd7;
}

.zagents-thumb-support {
  grid-template-columns: repeat(3, minmax(0, 1fr));
  min-height: 16rem;
  padding: 1rem;
}

.zagents-thumb-support div {
  display: grid;
  align-content: start;
  gap: 0.45rem;
  border: 1px solid #d7e2f1;
  border-radius: 0.75rem;
  background: #ffffff;
  padding: 0.85rem;
}

.zagents-thumb-support strong {
  justify-self: center;
  width: 4.25rem;
  height: 4.25rem;
  border: 0.35rem solid #06122e;
  border-radius: 0.35rem;
  background:
    linear-gradient(90deg, #06122e 14%, transparent 14% 28%, #06122e 28% 42%, transparent 42% 56%, #06122e 56% 70%, transparent 70% 84%, #06122e 84%),
    #ffffff;
}

.zagents-thumb-window.is-basic {
  background: #f3f7fd;
}

.zagents-thumb-window.is-printer {
  background: #f8fbff;
}

.zagents-thumb-window.is-tcp,
.zagents-thumb-window.is-socket {
  background: #f4f8ff;
}

.zagents-thumb-window.is-modbus,
.zagents-thumb-window.is-route {
  background: #f7fbf8;
}

.zagents-thumb-window.is-support {
  background: #fbf8ff;
}

.zdocs-hero {
  background:
    linear-gradient(135deg, rgba(255, 255, 255, 0.98) 0%, rgba(239, 247, 255, 0.96) 55%, rgba(248, 252, 255, 0.92) 100%),
    radial-gradient(circle at 88% 18%, rgba(27, 86, 174, 0.16), transparent 32%);
}

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

.zdocs-role-grid article {
  border: 1px solid rgba(32, 107, 196, 0.14);
  border-radius: var(--tblr-border-radius-lg);
  background: #ffffff;
  padding: 1.25rem;
}

.zdocs-role-grid span {
  display: inline-flex;
  margin-bottom: 1rem;
  color: var(--tblr-primary);
  font-size: 0.875rem;
  font-weight: 900;
}

.zdocs-role-grid h2 {
  margin: 0 0 0.5rem;
  color: #06122e;
  font-size: 1.25rem;
  font-weight: 900;
}

.zdocs-role-grid p {
  margin: 0;
  color: var(--tblr-secondary);
  line-height: 1.65;
}

.zdocs-preview-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 1.25rem;
}

.zdocs-preview-card {
  display: grid;
  gap: 1rem;
  border: 1px solid #dce6f4;
  border-radius: var(--tblr-border-radius-xl);
  background: #ffffff;
  padding: 1.25rem;
}

.zdocs-preview-card.is-wide {
  grid-column: 1 / -1;
}

.zdocs-preview-card h3 {
  margin: 0 0 0.5rem;
  color: #06122e;
  font-size: 1.3rem;
  font-weight: 900;
}

.zdocs-preview-card p {
  margin: 0;
  color: var(--tblr-secondary);
  line-height: 1.65;
}

.zdocs-screen-frame {
  border: 1px solid #cfddea;
  border-radius: 0.75rem;
  background: #ffffff;
  overflow: hidden;
  box-shadow: 0 1rem 2rem rgba(24, 36, 51, 0.1);
}

.zdocs-screen-image {
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 129 / 77;
  object-fit: contain;
  background: #eef3f8;
}

.zdocs-flow {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 2rem minmax(0, 1fr) 2rem minmax(0, 1fr) 2rem minmax(0, 1fr);
  align-items: stretch;
  gap: 0.75rem;
}

.zdocs-flow div {
  border: 1px solid rgba(32, 107, 196, 0.16);
  border-radius: var(--tblr-border-radius-lg);
  background: #f8fbff;
  padding: 1.25rem;
}

.zdocs-flow strong {
  display: block;
  margin-bottom: 0.5rem;
  color: #06122e;
  font-size: 1.05rem;
}

.zdocs-flow span {
  color: var(--tblr-secondary);
  line-height: 1.65;
}

.zdocs-flow i {
  align-self: center;
  height: 2px;
  border-radius: 999px;
  background: rgba(32, 107, 196, 0.4);
}

.zview-hero {
  background:
    linear-gradient(135deg, rgba(255, 255, 255, 0.98) 0%, rgba(239, 247, 255, 0.94) 55%, rgba(247, 252, 255, 0.92) 100%),
    radial-gradient(circle at 88% 18%, rgba(27, 86, 174, 0.16), transparent 32%);
}

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

.zview-role-grid article {
  border: 1px solid rgba(32, 107, 196, 0.14);
  border-radius: var(--tblr-border-radius-lg);
  background: #ffffff;
  padding: 1.25rem;
}

.zview-role-grid span {
  display: inline-flex;
  margin-bottom: 1rem;
  color: var(--tblr-primary);
  font-size: 0.875rem;
  font-weight: 900;
}

.zview-role-grid h2 {
  margin: 0 0 0.5rem;
  color: #06122e;
  font-size: 1.25rem;
  font-weight: 900;
}

.zview-role-grid p {
  margin: 0;
  color: var(--tblr-secondary);
  line-height: 1.65;
}

.zview-preview-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 1.25rem;
}

.zview-preview-card {
  display: grid;
  gap: 1rem;
  border: 1px solid #dce6f4;
  border-radius: var(--tblr-border-radius-xl);
  background: #ffffff;
  padding: 1.25rem;
}

.zview-preview-card.is-wide {
  grid-column: 1 / -1;
}

.zview-preview-card h3 {
  margin: 0 0 0.5rem;
  color: #06122e;
  font-size: 1.3rem;
  font-weight: 900;
}

.zview-preview-card p {
  margin: 0;
  color: var(--tblr-secondary);
  line-height: 1.65;
}

.zview-screen-frame {
  border: 1px solid #122235;
  border-radius: 0.75rem;
  background: #101a26;
  overflow: hidden;
  box-shadow: 0 1rem 2rem rgba(10, 18, 28, 0.18);
}

.zview-screen-image {
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 125 / 77;
  object-fit: contain;
  background: #101a26;
}

.zview-flow {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 2rem minmax(0, 1fr) 2rem minmax(0, 1fr) 2rem minmax(0, 1fr);
  align-items: stretch;
  gap: 0.75rem;
}

.zview-flow div {
  border: 1px solid rgba(32, 107, 196, 0.16);
  border-radius: var(--tblr-border-radius-lg);
  background: #f8fbff;
  padding: 1.25rem;
}

.zview-flow strong {
  display: block;
  margin-bottom: 0.5rem;
  color: #06122e;
  font-size: 1.05rem;
}

.zview-flow span {
  color: var(--tblr-secondary);
  line-height: 1.65;
}

.zview-flow i {
  align-self: center;
  height: 2px;
  border-radius: 999px;
  background: rgba(32, 107, 196, 0.4);
}

.zmessage-hero {
  background:
    linear-gradient(135deg, rgba(255, 255, 255, 0.98) 0%, rgba(239, 247, 255, 0.96) 55%, rgba(248, 252, 255, 0.92) 100%),
    radial-gradient(circle at 88% 18%, rgba(37, 105, 214, 0.15), transparent 32%);
}

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

.zmessage-role-grid article {
  border: 1px solid rgba(32, 107, 196, 0.14);
  border-radius: var(--tblr-border-radius-lg);
  background: #ffffff;
  padding: 1.25rem;
}

.zmessage-role-grid span {
  display: inline-flex;
  margin-bottom: 1rem;
  color: var(--tblr-primary);
  font-size: 0.875rem;
  font-weight: 900;
}

.zmessage-role-grid h2 {
  margin: 0 0 0.5rem;
  color: #06122e;
  font-size: 1.25rem;
  font-weight: 900;
}

.zmessage-role-grid p {
  margin: 0;
  color: var(--tblr-secondary);
  line-height: 1.65;
}

.zmessage-preview-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 1.25rem;
}

.zmessage-preview-card {
  display: grid;
  gap: 1rem;
  border: 1px solid #dce6f4;
  border-radius: var(--tblr-border-radius-xl);
  background: #ffffff;
  padding: 1.25rem;
}

.zmessage-preview-card.is-wide {
  grid-column: 1 / -1;
}

.zmessage-preview-card h3 {
  margin: 0 0 0.5rem;
  color: #06122e;
  font-size: 1.3rem;
  font-weight: 900;
}

.zmessage-preview-card p {
  margin: 0;
  color: var(--tblr-secondary);
  line-height: 1.65;
}

.zmessage-screen-frame {
  border: 1px solid #cfddea;
  border-radius: 0.75rem;
  background: #f2f6fb;
  overflow: hidden;
  box-shadow: 0 1rem 2rem rgba(24, 36, 51, 0.1);
}

.zmessage-screen-image {
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 125 / 75;
  object-fit: contain;
  background: #f2f6fb;
}

.zmessage-flow {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 2rem minmax(0, 1fr) 2rem minmax(0, 1fr) 2rem minmax(0, 1fr);
  align-items: stretch;
  gap: 0.75rem;
}

.zmessage-flow div {
  border: 1px solid rgba(32, 107, 196, 0.16);
  border-radius: var(--tblr-border-radius-lg);
  background: #f8fbff;
  padding: 1.25rem;
}

.zmessage-flow strong {
  display: block;
  margin-bottom: 0.5rem;
  color: #06122e;
  font-size: 1.05rem;
}

.zmessage-flow span {
  color: var(--tblr-secondary);
  line-height: 1.65;
}

.zmessage-flow i {
  align-self: center;
  height: 2px;
  border-radius: 999px;
  background: rgba(32, 107, 196, 0.4);
}

.zagents-runtime-layout {
  display: grid;
  grid-template-columns: minmax(0, 0.82fr) minmax(22rem, 1fr);
  align-items: center;
  gap: 2rem;
}

.zagents-runtime-points {
  display: grid;
  gap: 0.75rem;
}

.zagents-runtime-points div {
  border-left: 3px solid rgba(32, 107, 196, 0.45);
  background: #f8fbff;
  padding: 0.85rem 1rem;
}

.zagents-runtime-points strong {
  display: block;
  color: #06122e;
}

.zagents-runtime-points span {
  color: var(--tblr-secondary);
}

.zagents-log-preview {
  border: 1px solid #d7e2f1;
  border-radius: 1rem;
  background: #f6f9fd;
  overflow: hidden;
  box-shadow: 0 1rem 2rem rgba(24, 36, 51, 0.08);
}

.zagents-window-bar {
  display: flex;
  align-items: center;
  gap: 1rem;
  border-bottom: 1px solid #d7e2f1;
  background: #ffffff;
  padding: 0.65rem 0.85rem;
  color: #06122e;
  font-size: 0.8125rem;
}

.zagents-window-bar b {
  margin-right: auto;
  font-weight: 900;
}

.zagents-log-lines {
  min-height: 19rem;
  padding: 1rem;
  font-family: Consolas, "Courier New", monospace;
  font-size: 0.8125rem;
  line-height: 1.45;
}

.zagents-log-lines p {
  margin: 0;
  color: #33445c;
}

.zagents-log-lines time {
  color: #8392a7;
}

.zagents-log-lines b {
  color: #2367c9;
}

.zagents-config-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 1rem;
}

.zagents-config-card {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 14rem;
  gap: 1rem;
  min-height: 15.5rem;
  border: 1px solid #dce6f4;
  border-radius: var(--tblr-border-radius-xl);
  background: #ffffff;
  padding: 1.25rem;
}

.zagents-config-card h3 {
  margin: 0 0 0.5rem;
  color: #06122e;
  font-size: 1.3rem;
  font-weight: 900;
}

.zagents-config-card p {
  margin: 0;
  color: var(--tblr-secondary);
  line-height: 1.65;
}

.zagents-basic-mini,
.zagents-form-mini,
.zagents-list-mini,
.zagents-table-mini,
.zagents-route-mini,
.zagents-auto-mini,
.zagents-update-mini {
  align-self: stretch;
  border: 1px solid #dce6f4;
  border-radius: 1rem;
  background: #f8fbff;
  padding: 1rem;
}

.zagents-basic-mini,
.zagents-form-mini,
.zagents-list-mini,
.zagents-table-mini,
.zagents-route-mini,
.zagents-auto-mini,
.zagents-update-mini {
  display: grid;
  align-content: center;
  gap: 0.55rem;
}

.zagents-basic-mini b,
.zagents-form-mini b,
.zagents-list-mini b,
.zagents-table-mini b,
.zagents-route-mini b,
.zagents-update-mini b {
  color: #06122e;
  font-weight: 900;
}

.zagents-basic-mini span,
.zagents-list-mini span,
.zagents-route-mini span,
.zagents-auto-mini span,
.zagents-update-mini span {
  border: 1px solid #d7e2f1;
  border-radius: 0.7rem;
  background: #ffffff;
  padding: 0.55rem 0.65rem;
  color: #25364d;
  font-size: 0.8125rem;
  font-weight: 700;
}

.zagents-form-mini i {
  display: block;
  border: 1px solid #d7e2f1;
  border-radius: 0.65rem;
  background: #ffffff;
  padding: 0.55rem 0.65rem;
  color: #25364d;
  font-size: 0.8125rem;
  font-style: normal;
}

.zagents-table-mini em {
  display: block;
  border-radius: 0.65rem;
  background: #ffffff;
  padding: 0.55rem 0.65rem;
  color: #25364d;
  font-size: 0.8125rem;
  font-style: normal;
  font-weight: 800;
}

.zagents-auto-mini span {
  position: relative;
  padding-left: 2rem;
}

.zagents-auto-mini span::before {
  content: "";
  position: absolute;
  top: 50%;
  left: 0.65rem;
  width: 0.8rem;
  height: 0.8rem;
  border-radius: 999px;
  background: #d8e0ea;
  transform: translateY(-50%);
}

.zagents-update-mini i {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 5rem;
  height: 5rem;
  justify-self: center;
  border: 0.5rem solid #06122e;
  border-radius: 0.35rem;
  background:
    linear-gradient(90deg, #06122e 14%, transparent 14% 28%, #06122e 28% 42%, transparent 42% 56%, #06122e 56% 70%, transparent 70% 84%, #06122e 84%),
    #ffffff;
  color: transparent;
}

.zagents-flow {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 2rem minmax(0, 1fr) 2rem minmax(0, 1fr) 2rem minmax(0, 1fr);
  align-items: stretch;
  gap: 0.75rem;
}

.zagents-flow div {
  border: 1px solid rgba(32, 107, 196, 0.16);
  border-radius: var(--tblr-border-radius-lg);
  background: #f8fbff;
  padding: 1.25rem;
}

.zagents-flow strong {
  display: block;
  margin-bottom: 0.5rem;
  color: #06122e;
  font-size: 1.05rem;
}

.zagents-flow span {
  color: var(--tblr-secondary);
  line-height: 1.65;
}

.zagents-flow i {
  align-self: center;
  height: 2px;
  border-radius: 999px;
  background: rgba(32, 107, 196, 0.4);
}

.trouble-board-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  border-bottom: 1px solid var(--tblr-border-color);
}

.trouble-board {
  overflow: hidden;
}

.trouble-item + .trouble-item {
  border-top: 1px solid var(--tblr-border-color);
}

.trouble-row {
  width: 100%;
  display: grid;
  grid-template-columns: 4.5rem 7rem minmax(0, 1fr) 5rem;
  align-items: center;
  gap: 1rem;
  border: 0;
  background: #ffffff;
  padding: 1rem 1.5rem;
  color: var(--tblr-body-color);
  text-align: left;
}

.trouble-row:hover,
.trouble-row:focus-visible {
  background: #f8fafc;
}

.trouble-row[aria-expanded="true"] {
  background: #fffaf0;
}

.trouble-no {
  color: var(--tblr-secondary);
  font-variant-numeric: tabular-nums;
  font-weight: 700;
}

.trouble-category {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 1.75rem;
  border: 1px solid rgba(24, 36, 51, 0.14);
  border-radius: 999px;
  background: #f8fafc;
  color: var(--tblr-secondary);
  font-size: 0.8125rem;
  font-weight: 700;
}

.trouble-title {
  min-width: 0;
  overflow-wrap: anywhere;
  font-weight: 700;
}

.trouble-state {
  justify-self: end;
  color: var(--tblr-warning);
  font-size: 0.875rem;
  font-weight: 700;
}

.trouble-answer {
  border-top: 1px solid rgba(24, 36, 51, 0.08);
  background: #fffdf8;
  padding: 1.25rem 1.5rem 1.5rem 13.5rem;
}

.trouble-answer p {
  margin: 0;
  color: var(--tblr-secondary);
  line-height: 1.75;
}

@media (max-width: 575.98px) {
  .guide-wrap {
    padding-top: 1.25rem !important;
    padding-bottom: 1rem !important;
  }

  .guide-hero,
  .guide-section {
    border-radius: var(--tblr-border-radius-lg);
  }

  .guide-topbar .guide-nav {
    padding: 0.625rem 0;
  }

  .guide-nav-scroll {
    flex-wrap: nowrap;
    overflow-x: auto;
    padding-bottom: 0.125rem;
    -webkit-overflow-scrolling: touch;
  }

  .guide-nav-scroll .btn {
    flex: 0 0 auto;
  }

  .guide-nav-dropdown-menu {
    position: fixed;
    top: 4.25rem;
    right: 0.75rem;
    left: 0.75rem;
    min-width: 0;
    max-height: calc(100vh - 5rem);
    overflow-y: auto;
  }

  .guide-nav-dropdown-menu a {
    white-space: normal;
  }

  .display-5 {
    font-size: 2rem;
  }

  .fs-3 {
    font-size: 1rem !important;
  }

  .feature-grid,
  .feature-flow {
    grid-template-columns: 1fr;
  }

  .zworks-intro-grid,
  .zworks-role-grid,
  .zworks-process-layout,
  .zworks-feature-board,
  .zworks-usecase-grid,
  .zagents-role-grid,
  .zagents-thumbnail-grid,
  .zagents-thumb-card,
  .zdocs-role-grid,
  .zdocs-preview-grid,
  .zdocs-flow,
  .zview-role-grid,
  .zview-preview-grid,
  .zview-flow,
  .zmessage-role-grid,
  .zmessage-preview-grid,
  .zmessage-flow,
  .zagents-runtime-layout,
  .zagents-config-grid,
  .zagents-config-card,
  .zagents-flow,
  .zworks-screen-layout,
  .zworks-screen-layout.is-reversed {
    grid-template-columns: 1fr;
  }

  .zworks-process-list div,
  .zworks-feature-tile,
  .zworks-preview-body {
    grid-template-columns: 1fr;
  }

  .zworks-feature-tile {
    min-height: 0;
  }

  .zworks-preview-sidebar {
    align-items: center;
    flex-direction: row;
    padding: 0.75rem;
  }

  .zagents-flow i {
    width: 2px;
    height: 1.5rem;
    justify-self: center;
  }

  .zdocs-preview-card.is-wide {
    grid-column: auto;
  }

  .zdocs-flow i {
    width: 2px;
    height: 1.5rem;
    justify-self: center;
  }

  .zview-preview-card.is-wide {
    grid-column: auto;
  }

  .zview-flow i {
    width: 2px;
    height: 1.5rem;
    justify-self: center;
  }

  .zmessage-preview-card.is-wide {
    grid-column: auto;
  }

  .zmessage-flow i {
    width: 2px;
    height: 1.5rem;
    justify-self: center;
  }

  .zagents-thumb-form,
  .zagents-thumb-cardlet,
  .zagents-thumb-support {
    grid-template-columns: 1fr;
  }

  .zagents-thumb-log p {
    grid-template-columns: 2.7rem minmax(0, 1fr);
  }

  .zagents-thumb-log span {
    grid-column: 1 / -1;
  }

  .zworks-screen-layout.is-reversed .zworks-screen-copy,
  .zworks-screen-layout.is-reversed .zworks-capture {
    order: initial;
  }

  .zworks-login-panel,
  .zworks-stat-grid,
  .zworks-chart-values,
  .zworks-bars,
  .zworks-access-item {
    grid-template-columns: 1fr;
  }

  .zworks-login-form,
  .zworks-brand-panel {
    padding: 1.25rem;
  }

  .zworks-mock-title,
  .zworks-dashboard-card strong,
  .zworks-stat-grid strong {
    font-size: 1.75rem;
  }

  .zworks-brand-mark {
    width: 6rem;
    height: 6rem;
    font-size: 3.5rem;
  }

  .zworks-app-shell {
    grid-template-columns: 1fr;
  }

  .zworks-sidebar {
    align-items: center;
    flex-direction: row;
    justify-content: flex-start;
    overflow-x: auto;
    border-right: 0;
    border-bottom: 1px solid rgba(24, 36, 51, 0.08);
  }

  .zworks-app-top {
    align-items: flex-start;
    flex-direction: column;
  }

  .zworks-metric-row {
    grid-template-columns: 1fr;
  }

  .zworks-bars {
    min-height: 0;
  }

  .zworks-bars div {
    min-height: 7rem;
  }

  .product-subnav {
    flex-wrap: nowrap;
    overflow-x: auto;
    padding-bottom: 0.125rem;
    -webkit-overflow-scrolling: touch;
  }

  .product-subnav .btn {
    flex: 0 0 auto;
  }

  .guide-footer-inner {
    align-items: flex-start;
    flex-direction: column;
  }

  .feature-menu-item summary {
    grid-template-columns: 3rem 1fr;
    gap: 0.625rem;
    padding: 1rem;
  }

  .feature-menu-item summary::after {
    grid-column: 2;
    justify-self: start;
  }

  .feature-menu-hint {
    grid-column: 1 / -1;
  }

  .feature-menu-body {
    grid-template-columns: 1fr;
    padding: 1rem;
  }

  .trouble-board-header {
    align-items: flex-start;
    flex-direction: column;
  }

  .trouble-row {
    grid-template-columns: 3rem 5.5rem 1fr;
    gap: 0.625rem;
    padding: 1rem;
  }

  .trouble-title {
    grid-column: 1 / -1;
  }

  .trouble-state {
    justify-self: end;
  }

  .trouble-answer {
    padding: 1rem;
  }
}