Zerops Zcp

Created By

4 hours ago

ZCP is a CLI with Zerops MCP that makes your agent a Zerops power-user. It runs either inside your project, or is connected through zCLI's VPN functionality to the project from your terminal. Your agent. Your subscription. Your code. Your infrastructure. Your IDE.

Overview Content Tools Comments

Overview

<meta charset="utf-8">
<title>ZCP · Zerops Control Plane | Zerops</title>
<base href="/">
<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin="">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link href="https://fonts.googleapis.com/css2?family=Geologica:wght@100..900&amp;family=Roboto:ital,wght@0,300;0,400;0,500;0,700;1,400;1,500;1,700&amp;family=JetBrains+Mono:ital,wght@0,400;0,500;0,600;0,700;1,400&amp;family=Instrument+Serif:ital@0;1&amp;display=swap" rel="stylesheet">
<link href="https://fonts.googleapis.com/icon?family=Material+Icons+Outlined" rel="stylesheet">
<link rel="icon" type="image/x-icon" href="/favicon.ico">
<link rel="dns-prefetch" href="https://analytics.zerops.io">
<script type="module" crossorigin="" src="/assets/index-CeFefPyX.js"></script>
<link rel="stylesheet" crossorigin="" href="/assets/index-qWCU62rw.css">

.__header[_ngcontent-ng-c993810163] { background: linear-gradient(180deg, var(--background-light) 38.64%, transparent 100%); }

.__nav[_ngcontent-ng-c993810163] { gap: 2px; } @media (min-width: 940px) { .__nav[_ngcontent-ng-c993810163] { gap: 12px; } }

.__link[_ngcontent-ng-c993810163] { --mat-button-text-label-text-color: var(--mat-sys-on-surface); --mat-button-text-label-text-font: var(--font-family-brand); --mat-button-text-label-text-size: 12px; --mat-button-text-label-text-weight: 559; --mat-button-text-horizontal-padding: 8px; } @media (min-width: 940px) { .__link[_ngcontent-ng-c993810163] { --mat-button-text-horizontal-padding: 12px; } } .__link[_ngcontent-ng-c993810163] { position: relative; font-variation-settings: "CRSV" 0, "SHRP" 100, "slnt" 0; transition: font-variation-settings 0.3s cubic-bezier(0.4, 0, 0.2, 1); } .__link[_ngcontent-ng-c993810163]::after { content: ""; position: absolute; bottom: 4px; left: calc(50% - 8px); height: 4px; width: 16px; border-radius: 4px; background: var(--section-indicator-active); opacity: 0; transform: scaleX(0); will-change: transform, opacity; transition: transform 0.3s cubic-bezier(0.4, 0, 0.2, 1), opacity 0.3s cubic-bezier(0.4, 0, 0.2, 1); } .__link--with-badge[_ngcontent-ng-c993810163] { position: relative; }

.__badge[_ngcontent-ng-c993810163] { position: absolute; top: -8px; right: -14px; display: flex; align-items: center; justify-content: center; min-width: 14px; height: 14px; padding: 0 3px; background: var(--mat-sys-error); color: var(--mat-sys-on-error); font-size: 9px; font-weight: 600; border-radius: 7px; line-height: 1; font-family: var(--font-family-brand); } .__badge--mobile[_ngcontent-ng-c993810163] { top: 4px; right: 0px; } .__badge--icon[_ngcontent-ng-c993810163] { background: transparent; padding: 0; min-width: 0; width: 16px; height: 16px; font-size: 14px; line-height: 16px; top: -14px; right: -14px; transition: transform 0.2s cubic-bezier(0.4, 0, 0.2, 1); } .__link[_ngcontent-ng-c993810163]:hover .__badge--icon[_ngcontent-ng-c993810163], .__mobile-link[_ngcontent-ng-c993810163]:hover .__badge--icon[_ngcontent-ng-c993810163] { transform: rotate(-8deg) scale(1.1); } .__badge--icon.__badge--mobile[_ngcontent-ng-c993810163] { top: 2px; right: 2px; }

.__link--scroll-active[_ngcontent-ng-c993810163] { --mat-button-text-label-text-color: var(--mat-sys-primary); font-variation-settings: "CRSV" 0.5, "SHRP" 100, "slnt" 0; } .__link--scroll-active[_ngcontent-ng-c993810163]::after { opacity: 1; transform: scaleX(1); }

.__dir-right[_nghost-ng-c993810163] .__link[_ngcontent-ng-c993810163]:not(.__link--route-active).__link--scroll-active::after { transform-origin: left center; } .__dir-right[_nghost-ng-c993810163] .__link[_ngcontent-ng-c993810163]:not(.__link--route-active):not(.__link--scroll-active)::after { transform-origin: right center; }

.__dir-left[_nghost-ng-c993810163] .__link[_ngcontent-ng-c993810163]:not(.__link--route-active).__link--scroll-active::after { transform-origin: right center; } .__dir-left[_nghost-ng-c993810163] .__link[_ngcontent-ng-c993810163]:not(.__link--route-active):not(.__link--scroll-active)::after { transform-origin: left center; }

.__link--route-active[_ngcontent-ng-c993810163] { --mat-button-text-label-text-color: var(--mat-sys-primary); --mat-button-text-label-text-weight: 580; } .__link--route-active[_ngcontent-ng-c993810163]::after { opacity: 1; width: 20px; left: calc(50% - 10px); transform: scaleX(1); }

.__cta[_ngcontent-ng-c993810163] { --mat-button-filled-container-color: var(--mat-sys-primary); --mat-button-filled-label-text-color: var(--mat-sys-on-primary); --mat-button-filled-container-shape: 6px; --mat-button-filled-label-text-font: var(--font-family-brand); --mat-button-filled-label-text-size: 12px; --mat-button-filled-label-text-weight: 600; --mat-button-filled-label-text-tracking: 0.18em; --mat-button-filled-label-text-transform: uppercase; white-space: nowrap; box-shadow: 0px 122px 49px color-mix(in srgb, var(--mat-sys-primary) 1%, transparent), 0px 69px 41px color-mix(in srgb, var(--mat-sys-primary) 5%, transparent), 0px 31px 31px color-mix(in srgb, var(--mat-sys-primary) 9%, transparent), 0px 8px 17px color-mix(in srgb, var(--mat-sys-primary) 10%, transparent); }

.__hamburger[_ngcontent-ng-c993810163] { display: flex; flex-direction: column; justify-content: center; align-items: center; gap: 5px; width: 40px; height: 40px; padding: 8px; border: none; background: none; cursor: pointer; z-index: 201; } @media (min-width: 810px) { .__hamburger[_ngcontent-ng-c993810163] { display: none; } }

.__hamburger-line[_ngcontent-ng-c993810163] { display: block; width: 20px; height: 2px; border-radius: 2px; background: var(--mat-sys-on-surface); transition: transform 0.35s cubic-bezier(0.4, 0, 0.2, 1), opacity 0.15s ease; transform-origin: center; }

.__hamburger--open[_ngcontent-ng-c993810163] .__hamburger-line[_ngcontent-ng-c993810163]:nth-child(1) { transform: translateY(7px) rotate(135deg); } .__hamburger--open[_ngcontent-ng-c993810163] .__hamburger-line[_ngcontent-ng-c993810163]:nth-child(2) { opacity: 0; transform: scaleX(0); } .__hamburger--open[_ngcontent-ng-c993810163] .__hamburger-line[_ngcontent-ng-c993810163]:nth-child(3) { transform: translateY(-7px) rotate(-135deg); }

.__mobile-overlay[_ngcontent-ng-c993810163] { position: fixed; inset: 0; z-index: 199; background: color-mix(in srgb, var(--background-light) 96%, transparent); backdrop-filter: blur(12px); }

.__mobile-nav[_ngcontent-ng-c993810163] { display: flex; flex-direction: column; gap: 2px; padding: calc(var(--app-bar-height) + 16px) 20px 32px; }

.__mobile-link[_ngcontent-ng-c993810163] { font-family: var(--font-family-brand); font-size: 17px; font-weight: 440; font-variation-settings: "CRSV" 0, "SHRP" 100, "slnt" 0; color: var(--mat-sys-on-surface); text-decoration: none; padding: 10px 8px; border-radius: 8px; transition: background 0.15s ease; animation: _ngcontent-ng-c993810163_mobile-link-in 0.35s cubic-bezier(0.25, 1, 0.5, 1) both; } .__mobile-link[_ngcontent-ng-c993810163]:hover { background: color-mix(in srgb, var(--mat-sys-on-surface) 5%, transparent); } .__mobile-link[_ngcontent-ng-c993810163]:nth-child(1) { animation-delay: 40ms; } .__mobile-link[_ngcontent-ng-c993810163]:nth-child(2) { animation-delay: 80ms; } .__mobile-link[_ngcontent-ng-c993810163]:nth-child(3) { animation-delay: 120ms; } .__mobile-link[_ngcontent-ng-c993810163]:nth-child(4) { animation-delay: 160ms; } .__mobile-link[_ngcontent-ng-c993810163]:nth-child(5) { animation-delay: 200ms; } .__mobile-link[_ngcontent-ng-c993810163]:nth-child(6) { animation-delay: 240ms; } .__mobile-link[_ngcontent-ng-c993810163]:nth-child(7) { animation-delay: 280ms; } .__mobile-link[_ngcontent-ng-c993810163]:nth-child(8) { animation-delay: 320ms; } .__mobile-link[_ngcontent-ng-c993810163]:nth-child(9) { animation-delay: 360ms; } .__mobile-link[_ngcontent-ng-c993810163]:nth-child(10) { animation-delay: 400ms; } .__mobile-link--with-badge[_ngcontent-ng-c993810163] { position: relative; }

.__overlay-enter[_ngcontent-ng-c993810163] { animation: _ngcontent-ng-c993810163_overlay-in 0.25s ease-out both; }

.__overlay-leave[_ngcontent-ng-c993810163] { animation: _ngcontent-ng-c993810163_overlay-out 0.2s ease-in both; }

@keyframes _ngcontent-ng-c993810163_overlay-in { from { opacity: 0; backdrop-filter: blur(0); } to { opacity: 1; backdrop-filter: blur(12px); } } @keyframes _ngcontent-ng-c993810163_overlay-out { from { opacity: 1; } to { opacity: 0; } } @keyframes _ngcontent-ng-c993810163_mobile-link-in { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: translateY(0); } } [_nghost-ng-c993810163]:not(.__host--animated) .__logo[_ngcontent-ng-c993810163], [_nghost-ng-c993810163]:not(.__host--animated) .__nav[_ngcontent-ng-c993810163], [_nghost-ng-c993810163]:not(.__host--animated) .__actions[_ngcontent-ng-c993810163], [_nghost-ng-c993810163]:not(.__host--animated) .__hamburger[_ngcontent-ng-c993810163] { opacity: 0; }

.__host--animated[_nghost-ng-c993810163] .__logo[_ngcontent-ng-c993810163], .__host--animated[_nghost-ng-c993810163] .__nav[_ngcontent-ng-c993810163], .__host--animated[_nghost-ng-c993810163] .__actions[_ngcontent-ng-c993810163], .__host--animated[_nghost-ng-c993810163] .__hamburger[_ngcontent-ng-c993810163] { opacity: 1; } .__host--animated[_nghost-ng-c993810163] .__logo[_ngcontent-ng-c993810163] { animation: _ngcontent-ng-c993810163_bar-enter 2s cubic-bezier(0.25, 1, 0.5, 1) 0.3s backwards; } .__host--animated[_nghost-ng-c993810163] .__nav[_ngcontent-ng-c993810163] { animation: _ngcontent-ng-c993810163_bar-enter 2.6s cubic-bezier(0.25, 1, 0.5, 1) 0.36s backwards; } .__host--animated[_nghost-ng-c993810163] .__actions[_ngcontent-ng-c993810163] { animation: _ngcontent-ng-c993810163_bar-enter 2s cubic-bezier(0.25, 1, 0.5, 1) 0.42s backwards; } .__host--animated[_nghost-ng-c993810163] .__hamburger[_ngcontent-ng-c993810163] { animation: _ngcontent-ng-c993810163_bar-enter 2s cubic-bezier(0.25, 1, 0.5, 1) 0.42s backwards; }

@keyframes _ngcontent-ng-c993810163_bar-enter { from { opacity: 0; } to { opacity: 1; } }

.__host--visible[_nghost-ng-c2054301249] { visibility: visible; }

.__game[_ngcontent-ng-c2054301249] { flex: 1; position: relative; overflow: hidden; } .__game[_ngcontent-ng-c2054301249] canvas[_ngcontent-ng-c2054301249] { display: block; width: 100%; height: 100%; cursor: none; }

.__info[_ngcontent-ng-c2054301249] { display: flex; justify-content: center; align-items: center; flex-wrap: wrap; gap: 6px; padding: 8px 16px 20px; font-size: 12px; color: color-mix(in srgb, var(--mat-sys-on-surface-variant) 50%, transparent); font-family: var(--font-family-brand); letter-spacing: 0.02em; } .__info[_ngcontent-ng-c2054301249] a[_ngcontent-ng-c2054301249] { color: color-mix(in srgb, var(--mat-sys-on-surface-variant) 65%, transparent); text-decoration: none; transition: color 0.2s; } .__info[_ngcontent-ng-c2054301249] a[_ngcontent-ng-c2054301249]:hover { color: var(--mat-sys-on-surface); }

.__dot[_ngcontent-ng-c2054301249] { opacity: 0.4; }

.__wrap[_ngcontent-ng-c4166180381] { display: flex; flex-direction: column; width: 100%; height: 85vh; }

.__toolbar[_ngcontent-ng-c4166180381] { display: flex; align-items: center; justify-content: flex-end; gap: 4px; padding: 6px 8px; background: var(--mat-sys-surface-container); border-radius: 8px 8px 0 0; border-bottom: 1px solid var(--mat-sys-outline-variant); }

.__toolbar-btn[_ngcontent-ng-c4166180381] { --mdc-icon-button-icon-size: 20px; --mdc-icon-button-state-layer-size: 36px; opacity: 0.7; transition: opacity 0.15s; } .__toolbar-btn[_ngcontent-ng-c4166180381]:hover { opacity: 1; }

.__iframe[_ngcontent-ng-c4166180381] { display: block; flex: 1; width: 100%; border: none; border-radius: 0 0 8px 8px; background: var(--mat-sys-surface); }

[_nghost-ng-c3759534042] { display: contents; }

.__shell[_ngcontent-ng-c3759534042] { position: relative; }

.__content[_ngcontent-ng-c3759534042] { display: block; position: relative; padding: 56px 24px 32px; width: min(75vw, 700px); margin: 0 auto; }

.__separator-wrap[_ngcontent-ng-c3759534042] { display: flex; justify-content: center; padding: 48px 0; }

.__section-title[_ngcontent-ng-c3759534042] { font-size: 22px; font-weight: 600; line-height: 1.3; text-align: center; margin: 0 0 12px; color: var(--mat-sys-on-surface); }

.__section-desc-top[_ngcontent-ng-c3759534042] { max-width: 460px; margin: 0 auto 18px; font-size: 13px; line-height: 1.55; text-align: center; color: var(--mat-sys-on-surface-variant); } .__section-desc-top[_ngcontent-ng-c3759534042] code[_ngcontent-ng-c3759534042] { font-family: "Source Code Pro", Menlo, Monaco, Consolas, monospace; font-size: 11.5px; padding: 1px 6px; border-radius: 3px; background: color-mix(in srgb, var(--mat-sys-on-surface) 6%, transparent); color: inherit; }

.__dialog-close-button[_ngcontent-ng-c3759534042] { position: absolute; top: 8px; right: 8px; z-index: 2; }

.__buttons[_ngcontent-ng-c3759534042] { padding: 16px 24px 24px; display: flex; justify-content: center; } .__buttons[_ngcontent-ng-c3759534042] .c-button--full[_ngcontent-ng-c3759534042] { width: 100%; max-width: 400px; }

.__preinstalled[_ngcontent-ng-c3759534042] { max-width: 440px; margin: 4px auto 18px; display: grid; gap: 2px; }

.__preinstalled-row[_ngcontent-ng-c3759534042] { display: grid; grid-template-columns: 68px 1fr; gap: 12px; align-items: baseline; }

.__preinstalled-cat[_ngcontent-ng-c3759534042] { font-size: 10px; font-weight: 600; letter-spacing: 0.06em; text-transform: uppercase; color: var(--mat-sys-on-surface-variant); }

.__preinstalled-items[_ngcontent-ng-c3759534042] { font-size: 12px; line-height: 1.85; color: var(--mat-sys-on-surface-variant); } .__preinstalled-items[_ngcontent-ng-c3759534042] code[_ngcontent-ng-c3759534042] { display: inline-block; margin: 0 3px 2px 0; padding: 0 6px; border-radius: 3px; background: color-mix(in srgb, var(--mat-sys-on-surface) 4%, transparent); font-family: "Source Code Pro", Menlo, Monaco, Consolas, monospace; font-size: 11px; color: var(--mat-sys-on-surface-variant); }

.__action-hint[_ngcontent-ng-c3759534042] { max-width: 450px; margin: 0 auto 36px; font-size: 13px; line-height: 1.55; text-align: center; color: var(--mat-sys-on-surface-variant); } .__action-hint[_ngcontent-ng-c3759534042] code[_ngcontent-ng-c3759534042] { font-family: "Source Code Pro", Menlo, Monaco, Consolas, monospace; font-size: 11.5px; padding: 1px 6px; border-radius: 3px; background: color-mix(in srgb, var(--mat-sys-on-surface) 6%, transparent); color: inherit; }

.__agent-notice[_ngcontent-ng-c3759534042] { display: flex; align-items: flex-start; gap: 10px; max-width: 500px; margin: 0 auto 22px; padding: 10px 14px; border: 1px solid rgba(204, 120, 92, 0.2); border-radius: 6px; background: rgba(204, 120, 92, 0.06); text-align: left; }

.__agent-notice-mark[_ngcontent-ng-c3759534042] { flex-shrink: 0; display: inline-flex; align-items: center; justify-content: center; width: 20px; height: 20px; margin-top: 1px; color: #cc785c; } .__agent-notice-mark[_ngcontent-ng-c3759534042] svg[_ngcontent-ng-c3759534042] { width: 100%; height: 100%; }

.__agent-notice-text[_ngcontent-ng-c3759534042] { font-size: 12px; line-height: 1.5; color: var(--mat-sys-on-surface-variant); } .__agent-notice-text[_ngcontent-ng-c3759534042] strong[_ngcontent-ng-c3759534042] { font-weight: 600; color: var(--mat-sys-on-surface); }

.__auth-method-hint[_ngcontent-ng-c3759534042] { margin: 14px auto 0; max-width: 500px; padding: 0 4px; font-size: 12px; line-height: 1.55; text-align: left; color: var(--mat-sys-on-surface-variant); } .__auth-method-hint[_ngcontent-ng-c3759534042] code[_ngcontent-ng-c3759534042] { font-family: "Source Code Pro", Menlo, Monaco, Consolas, monospace; font-size: 11.5px; padding: 1px 6px; border-radius: 3px; background: color-mix(in srgb, var(--mat-sys-on-surface) 6%, transparent); color: inherit; }

.__agent-stack[_ngcontent-ng-c3759534042] { display: flex; flex-direction: column; gap: 8px; max-width: 500px; margin: 0 auto; text-align: left; }

.__agent-row[_ngcontent-ng-c3759534042] { padding: 12px 16px; border-radius: 6px; border: 1px solid transparent; background: color-mix(in srgb, var(--mat-sys-surface) 50%, transparent); transition: background 0.15s ease, border-color 0.15s ease; overflow: hidden; } .__agent-row[_ngcontent-ng-c3759534042]:hover:not(.is-active) { border-color: var(--mat-sys-outline-variant); } .__agent-row.is-active[_ngcontent-ng-c3759534042] { background: var(--mat-sys-surface); border-color: var(--mat-sys-outline-variant); }

.__agent-check[_ngcontent-ng-c3759534042] { display: block; width: 100%; } .__agent-check[_ngcontent-ng-c3759534042] .mdc-form-field { display: flex; width: 100%; align-items: center; } .__agent-check[_ngcontent-ng-c3759534042] .mdc-label { flex: 1; min-width: 0; display: flex; align-items: center; }

.__agent-row-head[_ngcontent-ng-c3759534042] { display: inline-flex; align-items: center; gap: 10px; }

.__agent-mark[_ngcontent-ng-c3759534042] { flex-shrink: 0; display: inline-flex; align-items: center; justify-content: center; font-size: 20px; line-height: 1; color: var(--mat-sys-on-surface); }

.__agent-name[_ngcontent-ng-c3759534042] { font-size: 14px; font-weight: 500; line-height: 1.2; color: var(--mat-sys-on-surface); }

.__agent-provider[_ngcontent-ng-c3759534042] { font-size: 11px; font-weight: 400; line-height: 1.2; letter-spacing: 0.02em; color: var(--mat-sys-on-surface-variant); }

.__agent-auth[_ngcontent-ng-c3759534042] { margin-top: 14px; } .__agent-auth[_ngcontent-ng-c3759534042] .__auth-switcher[_ngcontent-ng-c3759534042] { margin: 0; gap: 10px; } .__agent-auth[_ngcontent-ng-c3759534042] .__api-token-field[_ngcontent-ng-c3759534042] { margin-top: 14px; }

.__auth-switcher[_ngcontent-ng-c3759534042] { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; max-width: 500px; margin: 0 auto; }

.__api-token-field[_ngcontent-ng-c3759534042] { margin-top: 24px; } .__api-token-field[_ngcontent-ng-c3759534042] mat-form-field[_ngcontent-ng-c3759534042] { width: 100%; }

.__mode-button[_ngcontent-ng-c3759534042] { --mat-button-text-label-text-color: var(--mat-sys-on-surface); display: inline-flex; align-items: center; justify-content: center; gap: 8px; width: 100%; min-width: 0; min-height: 48px; padding: 8px 14px; margin: 0; border: 2px solid transparent; border-radius: 8px !important; background: color-mix(in srgb, var(--mat-sys-on-surface) 4%, transparent); font-size: 13px; font-weight: 500; line-height: 1.25; white-space: nowrap; transition: background 0.15s ease, border-color 0.15s ease; } .__mode-button[_ngcontent-ng-c3759534042] mat-icon[_ngcontent-ng-c3759534042] { flex-shrink: 0; font-size: 18px; width: 18px; height: 18px; color: var(--mat-sys-on-surface-variant); } .__mode-button.is-active[_ngcontent-ng-c3759534042] { background: var(--mat-sys-surface); border-color: var(--mat-sys-primary); }

.__toggle-group-wrap[_ngcontent-ng-c3759534042] { padding: 18px 32px 24px 32px; border-radius: 8px; margin: 4px auto; max-width: 500px; text-align: center; transition: background 200ms ease; } .__toggle-group-wrap.is-active[_ngcontent-ng-c3759534042] { background: color-mix(in srgb, var(--mat-sys-primary) 7%, transparent); }

.__cloud-ide-toggle[_ngcontent-ng-c3759534042] { display: block; width: 100%; text-align: center !important; } .__cloud-ide-toggle[_ngcontent-ng-c3759534042] strong[_ngcontent-ng-c3759534042] { font-size: 18px; font-weight: 600; margin-left: 8px; }

.__section-desc[_ngcontent-ng-c3759534042] { max-width: 500px; margin: 10px auto 0; font-size: 13px; line-height: 1.5; text-align: center; color: var(--mat-sys-on-surface-variant); }

.__toggle-group-wrap_content[_ngcontent-ng-c3759534042] { padding: 28px 0 8px 0; }

.__access-method-title[_ngcontent-ng-c3759534042] { font-size: 14px; font-weight: 500; margin: 0 0 12px 0; text-align: left; color: var(--mat-sys-on-surface-variant); }

.__access-radios[_ngcontent-ng-c3759534042] { display: flex; flex-direction: column; gap: 8px; text-align: left; }

.__access-card[_ngcontent-ng-c3759534042] { padding: 12px 16px; border-radius: 6px; border: 1px solid transparent; background: color-mix(in srgb, var(--mat-sys-surface) 50%, transparent); transition: all 0.15s ease; overflow: hidden; } .__access-card.is-active[_ngcontent-ng-c3759534042] { background: var(--mat-sys-surface); border-color: var(--mat-sys-outline-variant); } .__access-card[_ngcontent-ng-c3759534042] .mat-mdc-radio-button { display: block; width: 100%; } .__access-card[_ngcontent-ng-c3759534042] strong[_ngcontent-ng-c3759534042] { display: block; font-weight: 500; font-size: 14px; color: var(--mat-sys-on-surface); } .__access-card[_ngcontent-ng-c3759534042] span[_ngcontent-ng-c3759534042] { display: block; font-size: 12px; line-height: 1.5; color: var(--mat-sys-on-surface-variant); margin-top: 2px; } .__access-card[_ngcontent-ng-c3759534042] code[_ngcontent-ng-c3759534042] { font-family: "Source Code Pro", Menlo, Monaco, Consolas, monospace; font-size: 11.5px; padding: 1px 6px; border-radius: 3px; background: color-mix(in srgb, var(--mat-sys-on-surface) 6%, transparent); color: inherit; }

.__password-field[_ngcontent-ng-c3759534042] { margin-top: 16px; padding-left: 20px; } .__password-field[_ngcontent-ng-c3759534042] mat-form-field[_ngcontent-ng-c3759534042] { width: 100%; }

.__password-meta[_ngcontent-ng-c3759534042] { display: flex; justify-content: space-between; align-items: center; gap: 12px; margin-top: 6px; padding: 0 4px; font-size: 12px; }

.__password-hint[_ngcontent-ng-c3759534042] { color: var(--mat-sys-on-surface-variant); }

.__regen-link[_ngcontent-ng-c3759534042] { background: none; border: 0; padding: 4px 8px; display: inline-flex; align-items: center; gap: 4px; font-size: 12px; color: var(--mat-sys-on-surface-variant); cursor: pointer; border-radius: 4px; transition: color 0.15s ease, background 0.15s ease; } .__regen-link[_ngcontent-ng-c3759534042] mat-icon[_ngcontent-ng-c3759534042] { font-size: 14px; width: 14px; height: 14px; } .__regen-link[_ngcontent-ng-c3759534042]:hover { color: var(--mat-sys-on-surface); background: color-mix(in srgb, var(--mat-sys-on-surface) 4%, transparent); }

.__services-grid[_ngcontent-ng-c3759534042] { display: grid; grid-auto-flow: column; grid-auto-columns: 25%; column-gap: 8px; row-gap: 8px; justify-content: center; max-width: 600px; margin: 0 auto; }

.__services-grid--start[_ngcontent-ng-c3759534042] { grid-template-columns: 1fr 1fr 1fr 1fr; grid-auto-columns: unset; grid-auto-flow: unset; }

.__service-card[_ngcontent-ng-c3759534042] { position: relative; display: flex; align-items: center; justify-content: center; width: 100%; height: 70px; padding: 8px; margin: 0; border: 2px solid transparent; background: color-mix(in srgb, var(--mat-sys-surface) 70%, transparent); outline: none; border-radius: 6px; cursor: pointer; text-align: center; transition: background 250ms, border 250ms; } .__service-card[_ngcontent-ng-c3759534042]:hover:not(.is-active) { border-color: var(--mat-sys-outline-variant); } .__service-card.is-active[_ngcontent-ng-c3759534042] { border-color: var(--mat-sys-primary); background: color-mix(in srgb, var(--mat-sys-primary) 6%, transparent); } .__service-card[_ngcontent-ng-c3759534042] .mdc-checkbox { display: none !important; } .__service-card[_ngcontent-ng-c3759534042] .mdc-form-field { width: 100%; display: flex; justify-content: center; margin: 0; } .__service-card[_ngcontent-ng-c3759534042] .mdc-label { padding: 0 !important; margin: 0 !important; }

.__service-card_name[_ngcontent-ng-c3759534042] { display: block; font-size: 14px; font-weight: 500; line-height: 1.2; color: var(--mat-sys-on-surface); }

.__service-card_type[_ngcontent-ng-c3759534042] { display: block; margin-top: 4px; font-size: 11px; color: var(--mat-sys-on-surface-variant); }

.__service-card_dev[_ngcontent-ng-c3759534042] { display: inline-block; padding: 0 1px; border-radius: 3px; background: rgba(255, 220, 100, 0.45); color: inherit; font-weight: 500; }

.__deploy-warning[_ngcontent-ng-c3759534042] { display: flex; align-items: flex-start; gap: 12px; max-width: 540px; margin: 0 auto; padding: 12px 16px; border: 1px solid rgba(220, 150, 30, 0.25); border-radius: 6px; background: rgba(220, 150, 30, 0.06); text-align: left; }

.__deploy-warning-icon[_ngcontent-ng-c3759534042] { flex-shrink: 0; margin-top: 1px; font-size: 20px; width: 20px; height: 20px; color: #b97a14; }

.__deploy-warning-list[_ngcontent-ng-c3759534042] { flex: 1; min-width: 0; margin: 0; padding-left: 18px; font-size: 12px; line-height: 1.55; color: var(--mat-sys-on-surface-variant); } .__deploy-warning-list[_ngcontent-ng-c3759534042] li[_ngcontent-ng-c3759534042] + li[_ngcontent-ng-c3759534042] { margin-top: 4px; } .__deploy-warning-list[_ngcontent-ng-c3759534042] strong[_ngcontent-ng-c3759534042] { font-weight: 600; color: var(--mat-sys-on-surface); } .__deploy-warning-list[_ngcontent-ng-c3759534042] code[_ngcontent-ng-c3759534042] { font-family: "Source Code Pro", Menlo, Monaco, Consolas, monospace; font-size: 11.5px; padding: 1px 6px; border-radius: 3px; background: color-mix(in srgb, var(--mat-sys-on-surface) 6%, transparent); color: inherit; }

.__svg[_ngcontent-ng-c606948037] {
  width: 100%;
  height: 100%;
}

[_nghost-ng-c606948037]:has(.__wordmark)   .__svg[_ngcontent-ng-c606948037] {
  width: auto;
}

.__main[_ngcontent-ng-c606948037] {
  fill: var(--mat-sys-primary);
}

.__secondary[_ngcontent-ng-c606948037] {
  fill: var(--mat-sys-primary);
}

.__wordmark[_ngcontent-ng-c606948037] {
  font-family: var(--font-family-brand);
  font-weight: 600;
  font-size: 17.32px;
  line-height: 22px;
  color: var(--mat-sys-on-surface);
}</style><style ng-app-id="ng">.mat-mdc-button-base{text-decoration:none}.mat-mdc-button-base .mat-icon{min-height:fit-content;flex-shrink:0}@media(hover: none){.mat-mdc-button-base:hover>span.mat-mdc-button-persistent-ripple::before{opacity:0}}.mdc-button{-webkit-user-select:none;user-select:none;position:relative;display:inline-flex;align-items:center;justify-content:center;box-sizing:border-box;min-width:64px;border:none;outline:none;line-height:inherit;-webkit-appearance:none;overflow:visible;vertical-align:middle;background:rgba(0,0,0,0);padding:0 8px}.mdc-button::-moz-focus-inner{padding:0;border:0}.mdc-button:active{outline:none}.mdc-button:hover{cursor:pointer}.mdc-button:disabled{cursor:default;pointer-events:none}.mdc-button[hidden]{display:none}.mdc-button .mdc-button__label{position:relative}.mat-mdc-button{padding:0 var(--mat-button-text-horizontal-padding, 12px);height:var(--mat-button-text-container-height, 40px);font-family:var(--mat-button-text-label-text-font, var(--mat-sys-label-large-font));font-size:var(--mat-button-text-label-text-size, var(--mat-sys-label-large-size));letter-spacing:var(--mat-button-text-label-text-tracking, var(--mat-sys-label-large-tracking));text-transform:var(--mat-button-text-label-text-transform);font-weight:var(--mat-button-text-label-text-weight, var(--mat-sys-label-large-weight))}.mat-mdc-button,.mat-mdc-button .mdc-button__ripple{border-radius:var(--mat-button-text-container-shape, var(--mat-sys-corner-full))}.mat-mdc-button:not(:disabled){color:var(--mat-button-text-label-text-color, var(--mat-sys-primary))}.mat-mdc-button[disabled],.mat-mdc-button.mat-mdc-button-disabled{cursor:default;pointer-events:none;color:var(--mat-button-text-disabled-label-text-color, color-mix(in srgb, var(--mat-sys-on-surface) 38%, transparent))}.mat-mdc-button.mat-mdc-button-disabled-interactive{pointer-events:auto}.mat-mdc-button:has(.material-icons,mat-icon,[matButtonIcon]){padding:0 var(--mat-button-text-with-icon-horizontal-padding, 16px)}.mat-mdc-button>.mat-icon{margin-right:var(--mat-button-text-icon-spacing, 8px);margin-left:var(--mat-button-text-icon-offset, -4px)}[dir=rtl] .mat-mdc-button>.mat-icon{margin-right:var(--mat-button-text-icon-offset, -4px);margin-left:var(--mat-button-text-icon-spacing, 8px)}.mat-mdc-button .mdc-button__label+.mat-icon{margin-right:var(--mat-button-text-icon-offset, -4px);margin-left:var(--mat-button-text-icon-spacing, 8px)}[dir=rtl] .mat-mdc-button .mdc-button__label+.mat-icon{margin-right:var(--mat-button-text-icon-spacing, 8px);margin-left:var(--mat-button-text-icon-offset, -4px)}.mat-mdc-button .mat-ripple-element{background-color:var(--mat-button-text-ripple-color, color-mix(in srgb, var(--mat-sys-primary) calc(var(--mat-sys-pressed-state-layer-opacity) * 100%), transparent))}.mat-mdc-button .mat-mdc-button-persistent-ripple::before{background-color:var(--mat-button-text-state-layer-color, var(--mat-sys-primary))}.mat-mdc-button.mat-mdc-button-disabled .mat-mdc-button-persistent-ripple::before{background-color:var(--mat-button-text-disabled-state-layer-color, var(--mat-sys-on-surface-variant))}.mat-mdc-button:hover>.mat-mdc-button-persistent-ripple::before{opacity:var(--mat-button-text-hover-state-layer-opacity, var(--mat-sys-hover-state-layer-opacity))}.mat-mdc-button.cdk-program-focused>.mat-mdc-button-persistent-ripple::before,.mat-mdc-button.cdk-keyboard-focused>.mat-mdc-button-persistent-ripple::before,.mat-mdc-button.mat-mdc-button-disabled-interactive:focus>.mat-mdc-button-persistent-ripple::before{opacity:var(--mat-button-text-focus-state-layer-opacity, var(--mat-sys-focus-state-layer-opacity))}.mat-mdc-button:active>.mat-mdc-button-persistent-ripple::before{opacity:var(--mat-button-text-pressed-state-layer-opacity, var(--mat-sys-pressed-state-layer-opacity))}.mat-mdc-button .mat-mdc-button-touch-target{position:absolute;top:50%;height:var(--mat-button-text-touch-target-size, 48px);display:var(--mat-button-text-touch-target-display, block);left:0;right:0;transform:translateY(-50%)}.mat-mdc-unelevated-button{transition:box-shadow 280ms cubic-bezier(0.4, 0, 0.2, 1);height:var(--mat-button-filled-container-height, 40px);font-family:var(--mat-button-filled-label-text-font, var(--mat-sys-label-large-font));font-size:var(--mat-button-filled-label-text-size, var(--mat-sys-label-large-size));letter-spacing:var(--mat-button-filled-label-text-tracking, var(--mat-sys-label-large-tracking));text-transform:var(--mat-button-filled-label-text-transform);font-weight:var(--mat-button-filled-label-text-weight, var(--mat-sys-label-large-weight));padding:0 var(--mat-button-filled-horizontal-padding, 24px)}.mat-mdc-unelevated-button>.mat-icon{margin-right:var(--mat-button-filled-icon-spacing, 8px);margin-left:var(--mat-button-filled-icon-offset, -8px)}[dir=rtl] .mat-mdc-unelevated-button>.mat-icon{margin-right:var(--mat-button-filled-icon-offset, -8px);margin-left:var(--mat-button-filled-icon-spacing, 8px)}.mat-mdc-unelevated-button .mdc-button__label+.mat-icon{margin-right:var(--mat-button-filled-icon-offset, -8px);margin-left:var(--mat-button-filled-icon-spacing, 8px)}[dir=rtl] .mat-mdc-unelevated-button .mdc-button__label+.mat-icon{margin-right:var(--mat-button-filled-icon-spacing, 8px);margin-left:var(--mat-button-filled-icon-offset, -8px)}.mat-mdc-unelevated-button .mat-ripple-element{background-color:var(--mat-button-filled-ripple-color, color-mix(in srgb, var(--mat-sys-on-primary) calc(var(--mat-sys-pressed-state-layer-opacity) * 100%), transparent))}.mat-mdc-unelevated-button .mat-mdc-button-persistent-ripple::before{background-color:var(--mat-button-filled-state-layer-color, var(--mat-sys-on-primary))}.mat-mdc-unelevated-button.mat-mdc-button-disabled .mat-mdc-button-persistent-ripple::before{background-color:var(--mat-button-filled-disabled-state-layer-color, var(--mat-sys-on-surface-variant))}.mat-mdc-unelevated-button:hover>.mat-mdc-button-persistent-ripple::before{opacity:var(--mat-button-filled-hover-state-layer-opacity, var(--mat-sys-hover-state-layer-opacity))}.mat-mdc-unelevated-button.cdk-program-focused>.mat-mdc-button-persistent-ripple::before,.mat-mdc-unelevated-button.cdk-keyboard-focused>.mat-mdc-button-persistent-ripple::before,.mat-mdc-unelevated-button.mat-mdc-button-disabled-interactive:focus>.mat-mdc-button-persistent-ripple::before{opacity:var(--mat-button-filled-focus-state-layer-opacity, var(--mat-sys-focus-state-layer-opacity))}.mat-mdc-unelevated-button:active>.mat-mdc-button-persistent-ripple::before{opacity:var(--mat-button-filled-pressed-state-layer-opacity, var(--mat-sys-pressed-state-layer-opacity))}.mat-mdc-unelevated-button .mat-mdc-button-touch-target{position:absolute;top:50%;height:var(--mat-button-filled-touch-target-size, 48px);display:var(--mat-button-filled-touch-target-display, block);left:0;right:0;transform:translateY(-50%)}.mat-mdc-unelevated-button:not(:disabled){color:var(--mat-button-filled-label-text-color, var(--mat-sys-on-primary));background-color:var(--mat-button-filled-container-color, var(--mat-sys-primary))}.mat-mdc-unelevated-button,.mat-mdc-unelevated-button .mdc-button__ripple{border-radius:var(--mat-button-filled-container-shape, var(--mat-sys-corner-full))}.mat-mdc-unelevated-button[disabled],.mat-mdc-unelevated-button.mat-mdc-button-disabled{cursor:default;pointer-events:none;color:var(--mat-button-filled-disabled-label-text-color, color-mix(in srgb, var(--mat-sys-on-surface) 38%, transparent));background-color:var(--mat-button-filled-disabled-container-color, color-mix(in srgb, var(--mat-sys-on-surface) 12%, transparent))}.mat-mdc-unelevated-button.mat-mdc-button-disabled-interactive{pointer-events:auto}.mat-mdc-raised-button{transition:box-shadow 280ms cubic-bezier(0.4, 0, 0.2, 1);box-shadow:var(--mat-button-protected-container-elevation-shadow, var(--mat-sys-level1));height:var(--mat-button-protected-container-height, 40px);font-family:var(--mat-button-protected-label-text-font, var(--mat-sys-label-large-font));font-size:var(--mat-button-protected-label-text-size, var(--mat-sys-label-large-size));letter-spacing:var(--mat-button-protected-label-text-tracking, var(--mat-sys-label-large-tracking));text-transform:var(--mat-button-protected-label-text-transform);font-weight:var(--mat-button-protected-label-text-weight, var(--mat-sys-label-large-weight));padding:0 var(--mat-button-protected-horizontal-padding, 24px)}.mat-mdc-raised-button>.mat-icon{margin-right:var(--mat-button-protected-icon-spacing, 8px);margin-left:var(--mat-button-protected-icon-offset, -8px)}[dir=rtl] .mat-mdc-raised-button>.mat-icon{margin-right:var(--mat-button-protected-icon-offset, -8px);margin-left:var(--mat-button-protected-icon-spacing, 8px)}.mat-mdc-raised-button .mdc-button__label+.mat-icon{margin-right:var(--mat-button-protected-icon-offset, -8px);margin-left:var(--mat-button-protected-icon-spacing, 8px)}[dir=rtl] .mat-mdc-raised-button .mdc-button__label+.mat-icon{margin-right:var(--mat-button-protected-icon-spacing, 8px);margin-left:var(--mat-button-protected-icon-offset, -8px)}.mat-mdc-raised-button .mat-ripple-element{background-color:var(--mat-button-protected-ripple-color, color-mix(in srgb, var(--mat-sys-primary) calc(var(--mat-sys-pressed-state-layer-opacity) * 100%), transparent))}.mat-mdc-raised-button .mat-mdc-button-persistent-ripple::before{background-color:var(--mat-button-protected-state-layer-color, var(--mat-sys-primary))}.mat-mdc-raised-button.mat-mdc-button-disabled .mat-mdc-button-persistent-ripple::before{background-color:var(--mat-button-protected-disabled-state-layer-color, var(--mat-sys-on-surface-variant))}.mat-mdc-raised-button:hover>.mat-mdc-button-persistent-ripple::before{opacity:var(--mat-button-protected-hover-state-layer-opacity, var(--mat-sys-hover-state-layer-opacity))}.mat-mdc-raised-button.cdk-program-focused>.mat-mdc-button-persistent-ripple::before,.mat-mdc-raised-button.cdk-keyboard-focused>.mat-mdc-button-persistent-ripple::before,.mat-mdc-raised-button.mat-mdc-button-disabled-interactive:focus>.mat-mdc-button-persistent-ripple::before{opacity:var(--mat-button-protected-focus-state-layer-opacity, var(--mat-sys-focus-state-layer-opacity))}.mat-mdc-raised-button:active>.mat-mdc-button-persistent-ripple::before{opacity:var(--mat-button-protected-pressed-state-layer-opacity, var(--mat-sys-pressed-state-layer-opacity))}.mat-mdc-raised-button .mat-mdc-button-touch-target{position:absolute;top:50%;height:var(--mat-button-protected-touch-target-size, 48px);display:var(--mat-button-protected-touch-target-display, block);left:0;right:0;transform:translateY(-50%)}.mat-mdc-raised-button:not(:disabled){color:var(--mat-button-protected-label-text-color, var(--mat-sys-primary));background-color:var(--mat-button-protected-container-color, var(--mat-sys-surface))}.mat-mdc-raised-button,.mat-mdc-raised-button .mdc-button__ripple{border-radius:var(--mat-button-protected-container-shape, var(--mat-sys-corner-full))}@media(hover: hover){.mat-mdc-raised-button:hover{box-shadow:var(--mat-button-protected-hover-container-elevation-shadow, var(--mat-sys-level2))}}.mat-mdc-raised-button:focus{box-shadow:var(--mat-button-protected-focus-container-elevation-shadow, var(--mat-sys-level1))}.mat-mdc-raised-button:active,.mat-mdc-raised-button:focus:active{box-shadow:var(--mat-button-protected-pressed-container-elevation-shadow, var(--mat-sys-level1))}.mat-mdc-raised-button[disabled],.mat-mdc-raised-button.mat-mdc-button-disabled{cursor:default;pointer-events:none;color:var(--mat-button-protected-disabled-label-text-color, color-mix(in srgb, var(--mat-sys-on-surface) 38%, transparent));background-color:var(--mat-button-protected-disabled-container-color, color-mix(in srgb, var(--mat-sys-on-surface) 12%, transparent))}.mat-mdc-raised-button[disabled].mat-mdc-button-disabled,.mat-mdc-raised-button.mat-mdc-button-disabled.mat-mdc-button-disabled{box-shadow:var(--mat-button-protected-disabled-container-elevation-shadow, var(--mat-sys-level0))}.mat-mdc-raised-button.mat-mdc-button-disabled-interactive{pointer-events:auto}.mat-mdc-outlined-button{border-style:solid;transition:border 280ms cubic-bezier(0.4, 0, 0.2, 1);height:var(--mat-button-outlined-container-height, 40px);font-family:var(--mat-button-outlined-label-text-font, var(--mat-sys-label-large-font));font-size:var(--mat-button-outlined-label-text-size, var(--mat-sys-label-large-size));letter-spacing:var(--mat-button-outlined-label-text-tracking, var(--mat-sys-label-large-tracking));text-transform:var(--mat-button-outlined-label-text-transform);font-weight:var(--mat-button-outlined-label-text-weight, var(--mat-sys-label-large-weight));border-radius:var(--mat-button-outlined-container-shape, var(--mat-sys-corner-full));border-width:var(--mat-button-outlined-outline-width, 1px);padding:0 var(--mat-button-outlined-horizontal-padding, 24px)}.mat-mdc-outlined-button>.mat-icon{margin-right:var(--mat-button-outlined-icon-spacing, 8px);margin-left:var(--mat-button-outlined-icon-offset, -8px)}[dir=rtl] .mat-mdc-outlined-button>.mat-icon{margin-right:var(--mat-button-outlined-icon-offset, -8px);margin-left:var(--mat-button-outlined-icon-spacing, 8px)}.mat-mdc-outlined-button .mdc-button__label+.mat-icon{margin-right:var(--mat-button-outlined-icon-offset, -8px);margin-left:var(--mat-button-outlined-icon-spacing, 8px)}[dir=rtl] .mat-mdc-outlined-button .mdc-button__label+.mat-icon{margin-right:var(--mat-button-outlined-icon-spacing, 8px);margin-left:var(--mat-button-outlined-icon-offset, -8px)}.mat-mdc-outlined-button .mat-ripple-element{background-color:var(--mat-button-outlined-ripple-color, color-mix(in srgb, var(--mat-sys-primary) calc(var(--mat-sys-pressed-state-layer-opacity) * 100%), transparent))}.mat-mdc-outlined-button .mat-mdc-button-persistent-ripple::before{background-color:var(--mat-button-outlined-state-layer-color, var(--mat-sys-primary))}.mat-mdc-outlined-button.mat-mdc-button-disabled .mat-mdc-button-persistent-ripple::before{background-color:var(--mat-button-outlined-disabled-state-layer-color, var(--mat-sys-on-surface-variant))}.mat-mdc-outlined-button:hover>.mat-mdc-button-persistent-ripple::before{opacity:var(--mat-button-outlined-hover-state-layer-opacity, var(--mat-sys-hover-state-layer-opacity))}.mat-mdc-outlined-button.cdk-program-focused>.mat-mdc-button-persistent-ripple::before,.mat-mdc-outlined-button.cdk-keyboard-focused>.mat-mdc-button-persistent-ripple::before,.mat-mdc-outlined-button.mat-mdc-button-disabled-interactive:focus>.mat-mdc-button-persistent-ripple::before{opacity:var(--mat-button-outlined-focus-state-layer-opacity, var(--mat-sys-focus-state-layer-opacity))}.mat-mdc-outlined-button:active>.mat-mdc-button-persistent-ripple::before{opacity:var(--mat-button-outlined-pressed-state-layer-opacity, var(--mat-sys-pressed-state-layer-opacity))}.mat-mdc-outlined-button .mat-mdc-button-touch-target{position:absolute;top:50%;height:var(--mat-button-outlined-touch-target-size, 48px);display:var(--mat-button-outlined-touch-target-display, block);left:0;right:0;transform:translateY(-50%)}.mat-mdc-outlined-button:not(:disabled){color:var(--mat-button-outlined-label-text-color, var(--mat-sys-primary));border-color:var(--mat-button-outlined-outline-color, var(--mat-sys-outline))}.mat-mdc-outlined-button[disabled],.mat-mdc-outlined-button.mat-mdc-button-disabled{cursor:default;pointer-events:none;color:var(--mat-button-outlined-disabled-label-text-color, color-mix(in srgb, var(--mat-sys-on-surface) 38%, transparent));border-color:var(--mat-button-outlined-disabled-outline-color, color-mix(in srgb, var(--mat-sys-on-surface) 12%, transparent))}.mat-mdc-outlined-button.mat-mdc-button-disabled-interactive{pointer-events:auto}.mat-tonal-button{transition:box-shadow 280ms cubic-bezier(0.4, 0, 0.2, 1);height:var(--mat-button-tonal-container-height, 40px);font-family:var(--mat-button-tonal-label-text-font, var(--mat-sys-label-large-font));font-size:var(--mat-button-tonal-label-text-size, var(--mat-sys-label-large-size));letter-spacing:var(--mat-button-tonal-label-text-tracking, var(--mat-sys-label-large-tracking));text-transform:var(--mat-button-tonal-label-text-transform);font-weight:var(--mat-button-tonal-label-text-weight, var(--mat-sys-label-large-weight));padding:0 var(--mat-button-tonal-horizontal-padding, 24px)}.mat-tonal-button:not(:disabled){color:var(--mat-button-tonal-label-text-color, var(--mat-sys-on-secondary-container));background-color:var(--mat-button-tonal-container-color, var(--mat-sys-secondary-container))}.mat-tonal-button,.mat-tonal-button .mdc-button__ripple{border-radius:var(--mat-button-tonal-container-shape, var(--mat-sys-corner-full))}.mat-tonal-button[disabled],.mat-tonal-button.mat-mdc-button-disabled{cursor:default;pointer-events:none;color:var(--mat-button-tonal-disabled-label-text-color, color-mix(in srgb, var(--mat-sys-on-surface) 38%, transparent));background-color:var(--mat-button-tonal-disabled-container-color, color-mix(in srgb, var(--mat-sys-on-surface) 12%, transparent))}.mat-tonal-button.mat-mdc-button-disabled-interactive{pointer-events:auto}.mat-tonal-button>.mat-icon{margin-right:var(--mat-button-tonal-icon-spacing, 8px);margin-left:var(--mat-button-tonal-icon-offset, -8px)}[dir=rtl] .mat-tonal-button>.mat-icon{margin-right:var(--mat-button-tonal-icon-offset, -8px);margin-left:var(--mat-button-tonal-icon-spacing, 8px)}.mat-tonal-button .mdc-button__label+.mat-icon{margin-right:var(--mat-button-tonal-icon-offset, -8px);margin-left:var(--mat-button-tonal-icon-spacing, 8px)}[dir=rtl] .mat-tonal-button .mdc-button__label+.mat-icon{margin-right:var(--mat-button-tonal-icon-spacing, 8px);margin-left:var(--mat-button-tonal-icon-offset, -8px)}.mat-tonal-button .mat-ripple-element{background-color:var(--mat-button-tonal-ripple-color, color-mix(in srgb, var(--mat-sys-on-secondary-container) calc(var(--mat-sys-pressed-state-layer-opacity) * 100%), transparent))}.mat-tonal-button .mat-mdc-button-persistent-ripple::before{background-color:var(--mat-button-tonal-state-layer-color, var(--mat-sys-on-secondary-container))}.mat-tonal-button.mat-mdc-button-disabled .mat-mdc-button-persistent-ripple::before{background-color:var(--mat-button-tonal-disabled-state-layer-color, var(--mat-sys-on-surface-variant))}.mat-tonal-button:hover>.mat-mdc-button-persistent-ripple::before{opacity:var(--mat-button-tonal-hover-state-layer-opacity, var(--mat-sys-hover-state-layer-opacity))}.mat-tonal-button.cdk-program-focused>.mat-mdc-button-persistent-ripple::before,.mat-tonal-button.cdk-keyboard-focused>.mat-mdc-button-persistent-ripple::before,.mat-tonal-button.mat-mdc-button-disabled-interactive:focus>.mat-mdc-button-persistent-ripple::before{opacity:var(--mat-button-tonal-focus-state-layer-opacity, var(--mat-sys-focus-state-layer-opacity))}.mat-tonal-button:active>.mat-mdc-button-persistent-ripple::before{opacity:var(--mat-button-tonal-pressed-state-layer-opacity, var(--mat-sys-pressed-state-layer-opacity))}.mat-tonal-button .mat-mdc-button-touch-target{position:absolute;top:50%;height:var(--mat-button-tonal-touch-target-size, 48px);display:var(--mat-button-tonal-touch-target-display, block);left:0;right:0;transform:translateY(-50%)}.mat-mdc-button,.mat-mdc-unelevated-button,.mat-mdc-raised-button,.mat-mdc-outlined-button,.mat-tonal-button{-webkit-tap-highlight-color:rgba(0,0,0,0)}.mat-mdc-button .mat-mdc-button-ripple,.mat-mdc-button .mat-mdc-button-persistent-ripple,.mat-mdc-button .mat-mdc-button-persistent-ripple::before,.mat-mdc-unelevated-button .mat-mdc-button-ripple,.mat-mdc-unelevated-button .mat-mdc-button-persistent-ripple,.mat-mdc-unelevated-button .mat-mdc-button-persistent-ripple::before,.mat-mdc-raised-button .mat-mdc-button-ripple,.mat-mdc-raised-button .mat-mdc-button-persistent-ripple,.mat-mdc-raised-button .mat-mdc-button-persistent-ripple::before,.mat-mdc-outlined-button .mat-mdc-button-ripple,.mat-mdc-outlined-button .mat-mdc-button-persistent-ripple,.mat-mdc-outlined-button .mat-mdc-button-persistent-ripple::before,.mat-tonal-button .mat-mdc-button-ripple,.mat-tonal-button .mat-mdc-button-persistent-ripple,.mat-tonal-button .mat-mdc-button-persistent-ripple::before{top:0;left:0;right:0;bottom:0;position:absolute;pointer-events:none;border-radius:inherit}.mat-mdc-button .mat-mdc-button-ripple,.mat-mdc-unelevated-button .mat-mdc-button-ripple,.mat-mdc-raised-button .mat-mdc-button-ripple,.mat-mdc-outlined-button .mat-mdc-button-ripple,.mat-tonal-button .mat-mdc-button-ripple{overflow:hidden}.mat-mdc-button .mat-mdc-button-persistent-ripple::before,.mat-mdc-unelevated-button .mat-mdc-button-persistent-ripple::before,.mat-mdc-raised-button .mat-mdc-button-persistent-ripple::before,.mat-mdc-outlined-button .mat-mdc-button-persistent-ripple::before,.mat-tonal-button .mat-mdc-button-persistent-ripple::before{content:"";opacity:0}.mat-mdc-button .mdc-button__label,.mat-mdc-button .mat-icon,.mat-mdc-unelevated-button .mdc-button__label,.mat-mdc-unelevated-button .mat-icon,.mat-mdc-raised-button .mdc-button__label,.mat-mdc-raised-button .mat-icon,.mat-mdc-outlined-button .mdc-button__label,.mat-mdc-outlined-button .mat-icon,.mat-tonal-button .mdc-button__label,.mat-tonal-button .mat-icon{z-index:1;position:relative}.mat-mdc-button .mat-focus-indicator,.mat-mdc-unelevated-button .mat-focus-indicator,.mat-mdc-raised-button .mat-focus-indicator,.mat-mdc-outlined-button .mat-focus-indicator,.mat-tonal-button .mat-focus-indicator{top:0;left:0;right:0;bottom:0;position:absolute;border-radius:inherit}.mat-mdc-button:focus-visible>.mat-focus-indicator::before,.mat-mdc-unelevated-button:focus-visible>.mat-focus-indicator::before,.mat-mdc-raised-button:focus-visible>.mat-focus-indicator::before,.mat-mdc-outlined-button:focus-visible>.mat-focus-indicator::before,.mat-tonal-button:focus-visible>.mat-focus-indicator::before{content:"";border-radius:inherit}.mat-mdc-button._mat-animation-noopable,.mat-mdc-unelevated-button._mat-animation-noopable,.mat-mdc-raised-button._mat-animation-noopable,.mat-mdc-outlined-button._mat-animation-noopable,.mat-tonal-button._mat-animation-noopable{transition:none !important;animation:none !important}.mat-mdc-button>.mat-icon,.mat-mdc-unelevated-button>.mat-icon,.mat-mdc-raised-button>.mat-icon,.mat-mdc-outlined-button>.mat-icon,.mat-tonal-button>.mat-icon{display:inline-block;position:relative;vertical-align:top;font-size:1.125rem;height:1.125rem;width:1.125rem}.mat-mdc-outlined-button .mat-mdc-button-ripple,.mat-mdc-outlined-button .mdc-button__ripple{top:-1px;left:-1px;bottom:-1px;right:-1px}.mat-mdc-unelevated-button .mat-focus-indicator::before,.mat-tonal-button .mat-focus-indicator::before,.mat-mdc-raised-button .mat-focus-indicator::before{margin:calc(calc(var(--mat-focus-indicator-border-width, 3px) + 2px)*-1)}.mat-mdc-outlined-button .mat-focus-indicator::before{margin:calc(calc(var(--mat-focus-indicator-border-width, 3px) + 3px)*-1)}

.__promo[_ngcontent-ng-c3648228642] {
  font-family: var(--font-family-brand);
  font-size: 13px;
  line-height: 1.6;
  color: var(--mat-sys-on-surface-variant);
}

.__github-btn[_ngcontent-ng-c3648228642] {
  --mat-button-filled-container-color: #24292f;
  --mat-button-filled-label-text-color: #fff;
  --mat-button-filled-container-shape: 6px;
  --mat-button-filled-label-text-font: var(--font-family-brand);
  --mat-button-filled-label-text-size: 13px;
  --mat-button-filled-label-text-weight: 600;
}

.__gitlab-btn[_ngcontent-ng-c3648228642] {
  --mat-button-filled-container-color: #fc6d26;
  --mat-button-filled-label-text-color: #fff;
  --mat-button-filled-container-shape: 6px;
  --mat-button-filled-label-text-font: var(--font-family-brand);
  --mat-button-filled-label-text-size: 13px;
  --mat-button-filled-label-text-weight: 600;
}

.__email-row[_ngcontent-ng-c3648228642] {
  font-family: var(--font-family-brand);
  font-size: 13px;
  color: var(--mat-sys-on-surface-variant);
}

.__email-btn[_ngcontent-ng-c3648228642] {
  --mat-button-filled-container-height: 28px;
  --mat-button-filled-container-shape: 6px;
  --mat-button-filled-container-color: var(--mat-sys-surface-container-high);
  --mat-button-filled-label-text-color: var(--mat-sys-on-surface);
  --mat-button-filled-label-text-font: var(--font-family-brand);
  --mat-button-filled-label-text-size: 12px;
  --mat-button-filled-label-text-weight: 600;
}</style><style ng-app-id="ng">.cdk-overlay-container, .cdk-global-overlay-wrapper {

pointer-events: none; top: 0; left: 0; height: 100%; width: 100%; }

.cdk-overlay-container { position: fixed; z-index: 1000; } .cdk-overlay-container:empty { display: none; }

.cdk-global-overlay-wrapper { display: flex; position: absolute; z-index: 1000; }

.cdk-overlay-pane { position: absolute; pointer-events: auto; box-sizing: border-box; display: flex; max-width: 100%; max-height: 100%; z-index: 1000; }

.cdk-overlay-backdrop { position: absolute; top: 0; bottom: 0; left: 0; right: 0; pointer-events: auto; -webkit-tap-highlight-color: transparent; opacity: 0; touch-action: manipulation; z-index: 1000; transition: opacity 400ms cubic-bezier(0.25, 0.8, 0.25, 1); } @media (prefers-reduced-motion) { .cdk-overlay-backdrop { transition-duration: 1ms; } }

.cdk-overlay-backdrop-showing { opacity: 1; } @media (forced-colors: active) { .cdk-overlay-backdrop-showing { opacity: 0.6; } }

.cdk-overlay-dark-backdrop { background: rgba(0, 0, 0, 0.32); }

.cdk-overlay-transparent-backdrop { transition: visibility 1ms linear, opacity 1ms linear; visibility: hidden; opacity: 1; } .cdk-overlay-transparent-backdrop.cdk-overlay-backdrop-showing, .cdk-high-contrast-active .cdk-overlay-transparent-backdrop { opacity: 0; visibility: visible; }

.cdk-overlay-backdrop-noop-animation { transition: none; }

.cdk-overlay-connected-position-bounding-box { position: absolute; display: flex; flex-direction: column; min-width: 1px; min-height: 1px; z-index: 1000; }

.cdk-global-scrollblock { position: fixed; width: 100%; overflow-y: scroll; }

.cdk-overlay-popover { background: none; border: none; padding: 0; outline: 0; overflow: visible; position: fixed; pointer-events: none; white-space: normal; color: inherit; text-decoration: none; width: 100%; height: 100%; inset: auto; top: 0; left: 0; } .cdk-overlay-popover::backdrop { display: none; } .cdk-overlay-popover .cdk-overlay-backdrop { position: fixed; z-index: auto; }

.sat-popover-container.sat-popover-before.sat-popover-above { transform-origin: right bottom; } [dir=rtl] .sat-popover-container.sat-popover-before.sat-popover-above { transform-origin: left bottom; } .sat-popover-container.sat-popover-before.sat-popover-center { transform-origin: right center; } [dir=rtl] .sat-popover-container.sat-popover-before.sat-popover-center { transform-origin: left center; } .sat-popover-container.sat-popover-before.sat-popover-below { transform-origin: right top; } [dir=rtl] .sat-popover-container.sat-popover-before.sat-popover-below { transform-origin: left top; } .sat-popover-container.sat-popover-center.sat-popover-above { transform-origin: center bottom; } .sat-popover-container.sat-popover-center.sat-popover-below { transform-origin: center top; } .sat-popover-container.sat-popover-after.sat-popover-above { transform-origin: left bottom; } [dir=rtl] .sat-popover-container.sat-popover-after.sat-popover-above { transform-origin: right bottom; } .sat-popover-container.sat-popover-after.sat-popover-center { transform-origin: left center; } [dir=rtl] .sat-popover-container.sat-popover-after.sat-popover-center { transform-origin: right center; } .sat-popover-container.sat-popover-after.sat-popover-below { transform-origin: left top; } [dir=rtl] .sat-popover-container.sat-popover-after.sat-popover-below { transform-origin: right top; }

.__area[_ngcontent-ng-c141534006] { overflow: auto; } .__area[_ngcontent-ng-c141534006] .os-scrollbar { --os-size: 10px; --os-padding-perpendicular: 2px; --os-padding-axis: 5px; --os-track-border-radius: 10px; --os-handle-interactive-area-offset: 4px; --os-handle-border-radius: 10px; --os-handle-perpendicular-size-hover: 130%; --os-handle-perpendicular-size-active: 130%; } .__area[_ngcontent-ng-c141534006] .os-theme-zerops { --os-handle-bg: light-dark(rgba(190, 190, 190, 0.15), rgba(190, 190, 190, 0.15)); --os-handle-bg-hover: light-dark(rgba(150, 150, 150, 0.7), rgba(220, 220, 220, 0.5)); --os-handle-bg-active: light-dark(rgba(110, 110, 110, 0.7), rgba(240, 240, 240, 0.7)); } .__area[_ngcontent-ng-c141534006] .os-theme-virtual-scrolling { --os-handle-bg: hsla(0, 0%, 100%, 0.44); --os-handle-bg-hover: hsla(0, 0%, 100%, 0.55); --os-handle-bg-active: hsla(0, 0%, 100%, 0.66); } .__area[_ngcontent-ng-c141534006] .os-scrollbar-vertical .os-scrollbar-handle { right: 3px; } .__area.is-hover[_ngcontent-ng-c141534006] .os-theme-zerops { --os-handle-bg: light-dark(rgba(190, 190, 190, 0.5), rgba(190, 190, 190, 0.1)); }

.__content[_ngcontent-ng-c141534006] { position: relative; }

[_nghost-ng-c141534006] { --_sb-btn-size: var(--scrollbar-btn-size, 35px); --_sb-icon-size: var(--scrollbar-icon-size, 18px); }

.__scroll-button[_ngcontent-ng-c141534006] { position: absolute; left: 50%; z-index: 1; width: var(--_sb-btn-size); height: var(--_sb-btn-size); line-height: var(--_sb-btn-size); margin-left: calc(var(--_sb-btn-size) / -2); opacity: 0.9; box-shadow: none; background: light-dark(#fff, #333); color: light-dark(#9e9e9e, #bbb); transition: opacity 500ms, background-color 400ms cubic-bezier(0.25, 0.8, 0.25, 1), box-shadow 280ms cubic-bezier(0.4, 0, 0.2, 1); } .__scroll-button[_ngcontent-ng-c141534006]:hover { opacity: 1; } .__scroll-button--top[_ngcontent-ng-c141534006] { top: 8px; } .__scroll-button--bottom[_ngcontent-ng-c141534006] { bottom: 8px; }

.__scroll-button-icon[_ngcontent-ng-c141534006] { line-height: 1; width: var(--_sb-icon-size); height: var(--_sb-icon-size); vertical-align: middle; font-size: var(--_sb-icon-size); color: var(--mat-sys-primary); }.mdc-radio__background>.mdc-radio__outer-circle{border-color:var(--mat-radio-unselected-hover-icon-color, var(--mat-sys-on-surface))}.mat-mdc-radio-button .mdc-radio:hover>.mdc-radio__native-control:enabled:checked+.mdc-radio__background>.mdc-radio__outer-circle{border-color:var(--mat-radio-selected-hover-icon-color, var(--mat-sys-primary))}.mat-mdc-radio-button .mdc-radio:hover>.mdc-radio__native-control:enabled:checked+.mdc-radio__background>.mdc-radio__inner-circle{background-color:var(--mat-radio-selected-hover-icon-color, var(--mat-sys-primary, currentColor))}.mat-mdc-radio-button .mdc-radio:active>.mdc-radio__native-control:enabled:not(:checked)+.mdc-radio__background>.mdc-radio__outer-circle{border-color:var(--mat-radio-unselected-pressed-icon-color, var(--mat-sys-on-surface))}.mat-mdc-radio-button .mdc-radio:active>.mdc-radio__native-control:enabled:checked+.mdc-radio__background>.mdc-radio__outer-circle{border-color:var(--mat-radio-selected-pressed-icon-color, var(--mat-sys-primary))}.mat-mdc-radio-button .mdc-radio:active>.mdc-radio__native-control:enabled:checked+.mdc-radio__background>.mdc-radio__inner-circle{background-color:var(--mat-radio-selected-pressed-icon-color, var(--mat-sys-primary, currentColor))}.mat-mdc-radio-button .mdc-radio__background{display:inline-block;position:relative;box-sizing:border-box;width:20px;height:20px}.mat-mdc-radio-button .mdc-radio__background::before{position:absolute;transform:scale(0, 0);border-radius:50%;opacity:0;pointer-events:none;content:"";transition:opacity 90ms cubic-bezier(0.4, 0, 0.6, 1),transform 90ms cubic-bezier(0.4, 0, 0.6, 1);width:var(--mat-radio-state-layer-size, 40px);height:var(--mat-radio-state-layer-size, 40px);top:calc(-1*(var(--mat-radio-state-layer-size, 40px) - 20px)/2);left:calc(-1*(var(--mat-radio-state-layer-size, 40px) - 20px)/2)}.mat-mdc-radio-button .mdc-radio__outer-circle{position:absolute;top:0;left:0;box-sizing:border-box;width:100%;height:100%;border-width:2px;border-style:solid;border-radius:50%;transition:border-color 90ms cubic-bezier(0.4, 0, 0.6, 1)}.mat-mdc-radio-button .mdc-radio__inner-circle{position:absolute;top:0;left:0;box-sizing:border-box;width:100%;height:100%;transform:scale(0);border-radius:50%;transition:transform 90ms cubic-bezier(0.4, 0, 0.6, 1),background-color 90ms cubic-bezier(0.4, 0, 0.6, 1)}@media(forced-colors: active){.mat-mdc-radio-button .mdc-radio__inner-circle{background-color:CanvasText !important}}.mat-mdc-radio-button .mdc-radio__native-control{position:absolute;margin:0;padding:0;opacity:0;top:0;right:0;left:0;cursor:inherit;z-index:1;width:var(--mat-radio-state-layer-size, 40px);height:var(--mat-radio-state-layer-size, 40px)}.mat-mdc-radio-button .mdc-radio__native-control:checked+.mdc-radio__background,.mat-mdc-radio-button .mdc-radio__native-control:disabled+.mdc-radio__background{transition:opacity 90ms cubic-bezier(0, 0, 0.2, 1),transform 90ms cubic-bezier(0, 0, 0.2, 1)}.mat-mdc-radio-button .mdc-radio__native-control:checked+.mdc-radio__background>.mdc-radio__outer-circle,.mat-mdc-radio-button .mdc-radio__native-control:disabled+.mdc-radio__background>.mdc-radio__outer-circle{transition:border-color 90ms cubic-bezier(0, 0, 0.2, 1)}.mat-mdc-radio-button .mdc-radio__native-control:checked+.mdc-radio__background>.mdc-radio__inner-circle,.mat-mdc-radio-button .mdc-radio__native-control:disabled+.mdc-radio__background>.mdc-radio__inner-circle{transition:transform 90ms cubic-bezier(0, 0, 0.2, 1),background-color 90ms cubic-bezier(0, 0, 0.2, 1)}.mat-mdc-radio-button .mdc-radio__native-control:focus+.mdc-radio__background::before{transform:scale(1);opacity:.12;transition:opacity 90ms cubic-bezier(0, 0, 0.2, 1),transform 90ms cubic-bezier(0, 0, 0.2, 1)}.mat-mdc-radio-button .mdc-radio__native-control:disabled:not(:checked)+.mdc-radio__background>.mdc-radio__outer-circle{border-color:var(--mat-radio-disabled-unselected-icon-color, var(--mat-sys-on-surface));opacity:var(--mat-radio-disabled-unselected-icon-opacity, 0.38)}.mat-mdc-radio-button .mdc-radio__native-control:disabled+.mdc-radio__background{cursor:default}.mat-mdc-radio-button .mdc-radio__native-control:disabled+.mdc-radio__background>.mdc-radio__outer-circle{border-color:var(--mat-radio-disabled-selected-icon-color, var(--mat-sys-on-surface));opacity:var(--mat-radio-disabled-selected-icon-opacity, 0.38)}.mat-mdc-radio-button .mdc-radio__native-control:disabled+.mdc-radio__background>.mdc-radio__inner-circle{background-color:var(--mat-radio-disabled-selected-icon-color, var(--mat-sys-on-surface, currentColor));opacity:var(--mat-radio-disabled-selected-icon-opacity, 0.38)}.mat-mdc-radio-button .mdc-radio__native-control:enabled:not(:checked)+.mdc-radio__background>.mdc-radio__outer-circle{border-color:var(--mat-radio-unselected-icon-color, var(--mat-sys-on-surface-variant))}.mat-mdc-radio-button .mdc-radio__native-control:enabled:checked+.mdc-radio__background>.mdc-radio__outer-circle{border-color:var(--mat-radio-selected-icon-color, var(--mat-sys-primary))}.mat-mdc-radio-button .mdc-radio__native-control:enabled:checked+.mdc-radio__background>.mdc-radio__inner-circle{background-color:var(--mat-radio-selected-icon-color, var(--mat-sys-primary, currentColor))}.mat-mdc-radio-button .mdc-radio__native-control:enabled:focus:checked+.mdc-radio__background>.mdc-radio__outer-circle{border-color:var(--mat-radio-selected-focus-icon-color, var(--mat-sys-primary))}.mat-mdc-radio-button .mdc-radio__native-control:enabled:focus:checked+.mdc-radio__background>.mdc-radio__inner-circle{background-color:var(--mat-radio-selected-focus-icon-color, var(--mat-sys-primary, currentColor))}.mat-mdc-radio-button .mdc-radio__native-control:checked+.mdc-radio__background>.mdc-radio__inner-circle{transform:scale(0.5);transition:transform 90ms cubic-bezier(0, 0, 0.2, 1),background-color 90ms cubic-bezier(0, 0, 0.2, 1)}.mat-mdc-radio-button.mat-mdc-radio-disabled-interactive .mdc-radio--disabled{pointer-events:auto}.mat-mdc-radio-button.mat-mdc-radio-disabled-interactive .mdc-radio--disabled .mdc-radio__native-control:not(:checked)+.mdc-radio__background>.mdc-radio__outer-circle{border-color:var(--mat-radio-disabled-unselected-icon-color, var(--mat-sys-on-surface));opacity:var(--mat-radio-disabled-unselected-icon-opacity, 0.38)}.mat-mdc-radio-button.mat-mdc-radio-disabled-interactive .mdc-radio--disabled:hover .mdc-radio__native-control:checked+.mdc-radio__background>.mdc-radio__outer-circle,.mat-mdc-radio-button.mat-mdc-radio-disabled-interactive .mdc-radio--disabled .mdc-radio__native-control:checked:focus+.mdc-radio__background>.mdc-radio__outer-circle,.mat-mdc-radio-button.mat-mdc-radio-disabled-interactive .mdc-radio--disabled .mdc-radio__native-control+.mdc-radio__background>.mdc-radio__outer-circle{border-color:var(--mat-radio-disabled-selected-icon-color, var(--mat-sys-on-surface));opacity:var(--mat-radio-disabled-selected-icon-opacity, 0.38)}.mat-mdc-radio-button.mat-mdc-radio-disabled-interactive .mdc-radio--disabled:hover .mdc-radio__native-control:checked+.mdc-radio__background>.mdc-radio__inner-circle,.mat-mdc-radio-button.mat-mdc-radio-disabled-interactive .mdc-radio--disabled .mdc-radio__native-control:checked:focus+.mdc-radio__background>.mdc-radio__inner-circle,.mat-mdc-radio-button.mat-mdc-radio-disabled-interactive .mdc-radio--disabled .mdc-radio__native-control+.mdc-radio__background>.mdc-radio__inner-circle{background-color:var(--mat-radio-disabled-selected-icon-color, var(--mat-sys-on-surface, currentColor));opacity:var(--mat-radio-disabled-selected-icon-opacity, 0.38)}.mat-mdc-radio-button._mat-animation-noopable .mdc-radio__background::before,.mat-mdc-radio-button._mat-animation-noopable .mdc-radio__outer-circle,.mat-mdc-radio-button._mat-animation-noopable .mdc-radio__inner-circle{transition:none !important}.mat-mdc-radio-button label{cursor:pointer}.mat-mdc-radio-button .mdc-radio__background::before{background-color:var(--mat-radio-ripple-color, var(--mat-sys-on-surface))}.mat-mdc-radio-button.mat-mdc-radio-checked .mat-ripple-element,.mat-mdc-radio-button.mat-mdc-radio-checked .mdc-radio__background::before{background-color:var(--mat-radio-checked-ripple-color, var(--mat-sys-primary))}.mat-mdc-radio-button.mat-mdc-radio-disabled-interactive .mdc-radio--disabled .mat-ripple-element,.mat-mdc-radio-button.mat-mdc-radio-disabled-interactive .mdc-radio--disabled .mdc-radio__background::before{background-color:var(--mat-radio-ripple-color, var(--mat-sys-on-surface))}.mat-mdc-radio-button .mat-internal-form-field{color:var(--mat-radio-label-text-color, var(--mat-sys-on-surface));font-family:var(--mat-radio-label-text-font, var(--mat-sys-body-medium-font));line-height:var(--mat-radio-label-text-line-height, var(--mat-sys-body-medium-line-height));font-size:var(--mat-radio-label-text-size, var(--mat-sys-body-medium-size));letter-spacing:var(--mat-radio-label-text-tracking, var(--mat-sys-body-medium-tracking));font-weight:var(--mat-radio-label-text-weight, var(--mat-sys-body-medium-weight))}.mat-mdc-radio-button .mdc-radio--disabled+label{color:var(--mat-radio-disabled-label-color, color-mix(in srgb, var(--mat-sys-on-surface) 38%, transparent))}.mat-mdc-radio-button .mat-radio-ripple{top:0;left:0;right:0;bottom:0;position:absolute;pointer-events:none;border-radius:50%}.mat-mdc-radio-button .mat-radio-ripple>.mat-ripple-element{opacity:.14}.mat-mdc-radio-button .mat-radio-ripple::before{border-radius:50%}.mat-mdc-radio-button .mdc-radio>.mdc-radio__native-control:focus:enabled:not(:checked).mdc-radio__background>.mdc-radio__outer-circle{border-color:var(--mat-radio-unselected-focus-icon-color, var(--mat-sys-on-surface))}.mat-mdc-radio-button.cdk-focused .mat-focus-indicator::before{content:""}.mat-mdc-radio-disabled{cursor:default;pointer-events:none}.mat-mdc-radio-disabled.mat-mdc-radio-disabled-interactive{pointer-events:auto}.mat-mdc-radio-touch-target{position:absolute;top:50%;left:50%;height:var(--mat-radio-touch-target-size, 48px);width:var(--mat-radio-touch-target-size, 48px);transform:translate(-50%, -50%);display:var(--mat-radio-touch-target-display, block)}[dir=rtl] .mat-mdc-radio-touch-target{left:auto;right:50%;transform:translate(50%, -50%)} .mat-mdc-checkbox-ripple .mat-ripple-element{background-color:var(--mat-checkbox-unselected-focus-state-layer-color, var(--mat-sys-on-surface))}.mdc-checkbox:active>.mdc-checkbox__native-control+.mdc-checkbox__ripple{opacity:var(--mat-checkbox-unselected-pressed-state-layer-opacity, var(--mat-sys-pressed-state-layer-opacity));background-color:var(--mat-checkbox-unselected-pressed-state-layer-color, var(--mat-sys-primary))}.mdc-checkbox:active>.mdc-checkbox__native-control~.mat-mdc-checkbox-ripple .mat-ripple-element{background-color:var(--mat-checkbox-unselected-pressed-state-layer-color, var(--mat-sys-primary))}.mdc-checkbox:hover>.mdc-checkbox__native-control:checked+.mdc-checkbox__ripple{opacity:var(--mat-checkbox-selected-hover-state-layer-opacity, var(--mat-sys-hover-state-layer-opacity));background-color:var(--mat-checkbox-selected-hover-state-layer-color, var(--mat-sys-primary))}.mdc-checkbox:hover>.mdc-checkbox__native-control:checked~.mat-mdc-checkbox-ripple .mat-ripple-element{background-color:var(--mat-checkbox-selected-hover-state-layer-color, var(--mat-sys-primary))}.mdc-checkbox .mdc-checkbox__native-control:focus:checked+.mdc-checkbox__ripple{opacity:var(--mat-checkbox-selected-focus-state-layer-opacity, var(--mat-sys-focus-state-layer-opacity));background-color:var(--mat-checkbox-selected-focus-state-layer-color, var(--mat-sys-primary))}.mdc-checkbox .mdc-checkbox__native-control:focus:checked~.mat-mdc-checkbox-ripple .mat-ripple-element{background-color:var(--mat-checkbox-selected-focus-state-layer-color, var(--mat-sys-primary))}.mdc-checkbox:active>.mdc-checkbox__native-control:checked+.mdc-checkbox__ripple{opacity:var(--mat-checkbox-selected-pressed-state-layer-opacity, var(--mat-sys-pressed-state-layer-opacity));background-color:var(--mat-checkbox-selected-pressed-state-layer-color, var(--mat-sys-on-surface))}.mdc-checkbox:active>.mdc-checkbox__native-control:checked~.mat-mdc-checkbox-ripple .mat-ripple-element{background-color:var(--mat-checkbox-selected-pressed-state-layer-color, var(--mat-sys-on-surface))}.mdc-checkbox--disabled.mat-mdc-checkbox-disabled-interactive .mdc-checkbox .mdc-checkbox__native-control~.mat-mdc-checkbox-ripple .mat-ripple-element,.mdc-checkbox--disabled.mat-mdc-checkbox-disabled-interactive .mdc-checkbox .mdc-checkbox__native-control+.mdc-checkbox__ripple{background-color:var(--mat-checkbox-unselected-hover-state-layer-color, var(--mat-sys-on-surface))}.mdc-checkbox .mdc-checkbox__native-control{position:absolute;margin:0;padding:0;opacity:0;cursor:inherit;z-index:1;width:var(--mat-checkbox-state-layer-size, 40px);height:var(--mat-checkbox-state-layer-size, 40px);top:calc((var(--mat-checkbox-state-layer-size, 40px) - var(--mat-checkbox-state-layer-size, 40px))/2);right:calc((var(--mat-checkbox-state-layer-size, 40px) - var(--mat-checkbox-state-layer-size, 40px))/2);left:calc((var(--mat-checkbox-state-layer-size, 40px) - var(--mat-checkbox-state-layer-size, 40px))/2)}.mdc-checkbox--disabled{cursor:default;pointer-events:none}.mdc-checkbox__background{display:inline-flex;position:absolute;align-items:center;justify-content:center;box-sizing:border-box;width:18px;height:18px;border:2px solid currentColor;border-radius:2px;background-color:rgba(0,0,0,0);pointer-events:none;will-change:background-color,border-color;transition:background-color 90ms cubic-bezier(0.4, 0, 0.6, 1),border-color 90ms cubic-bezier(0.4, 0, 0.6, 1);-webkit-print-color-adjust:exact;color-adjust:exact;border-color:var(--mat-checkbox-unselected-icon-color, var(--mat-sys-on-surface-variant));top:calc((var(--mat-checkbox-state-layer-size, 40px) - 18px)/2);left:calc((var(--mat-checkbox-state-layer-size, 40px) - 18px)/2)}.mdc-checkbox__native-control:enabled:checked~.mdc-checkbox__background,.mdc-checkbox__native-control:enabled:indeterminate~.mdc-checkbox__background{border-color:var(--mat-checkbox-selected-icon-color, var(--mat-sys-primary));background-color:var(--mat-checkbox-selected-icon-color, var(--mat-sys-primary))}.mdc-checkbox--disabled .mdc-checkbox__background{border-color:var(--mat-checkbox-disabled-unselected-icon-color, color-mix(in srgb, var(--mat-sys-on-surface) 38%, transparent))}@media(forced-colors: active){.mdc-checkbox--disabled .mdc-checkbox__background{border-color:GrayText}}.mdc-checkbox__native-control:disabled:checked~.mdc-checkbox__background,.mdc-checkbox__native-control:disabled:indeterminate~.mdc-checkbox__background{background-color:var(--mat-checkbox-disabled-selected-icon-color, color-mix(in srgb, var(--mat-sys-on-surface) 38%, transparent));border-color:rgba(0,0,0,0)}@media(forced-colors: active){.mdc-checkbox__native-control:disabled:checked~.mdc-checkbox__background,.mdc-checkbox__native-control:disabled:indeterminate~.mdc-checkbox__background{border-color:GrayText}}.mdc-checkbox:hover>.mdc-checkbox__native-control:not(:checked)~~.mdc-checkbox__background,.mdc-checkbox:hover>.mdc-checkbox__native-control:not(:indeterminate)~~.mdc-checkbox__background{border-color:var(--mat-checkbox-unselected-hover-icon-color, var(--mat-sys-on-surface));background-color:rgba(0,0,0,0)}.mdc-checkbox:hover>.mdc-checkbox__native-control:checked~.mdc-checkbox__background,.mdc-checkbox:hover>.mdc-checkbox__native-control:indeterminate~.mdc-checkbox__background{border-color:var(--mat-checkbox-selected-hover-icon-color, var(--mat-sys-primary));background-color:var(--mat-checkbox-selected-hover-icon-color, var(--mat-sys-primary))}.mdc-checkbox__native-control:focus:focus:not(:checked)~~.mdc-checkbox__background,.mdc-checkbox__native-control:focus:focus:not(:indeterminate)~~.mdc-checkbox__background{border-color:var(--mat-checkbox-unselected-focus-icon-color, var(--mat-sys-on-surface))}.mdc-checkbox__native-control:focus:focus:checked~.mdc-checkbox__background,.mdc-checkbox__native-control:focus:focus:indeterminate~.mdc-checkbox__background{border-color:var(--mat-checkbox-selected-focus-icon-color, var(--mat-sys-primary));background-color:var(--mat-checkbox-selected-focus-icon-color, var(--mat-sys-primary))}.mdc-checkbox--disabled.mat-mdc-checkbox-disabled-interactive .mdc-checkbox:hover>.mdc-checkbox__native-control~.mdc-checkbox__background,.mdc-checkbox--disabled.mat-mdc-checkbox-disabled-interactive .mdc-checkbox .mdc-checkbox__native-control:focus~.mdc-checkbox__background,.mdc-checkbox--disabled.mat-mdc-checkbox-disabled-interactive .mdc-checkbox__background{border-color:var(--mat-checkbox-disabled-unselected-icon-color, color-mix(in srgb, var(--mat-sys-on-surface) 38%, transparent))}@media(forced-colors: active){.mdc-checkbox--disabled.mat-mdc-checkbox-disabled-interactive .mdc-checkbox:hover>.mdc-checkbox__native-control~.mdc-checkbox__background,.mdc-checkbox--disabled.mat-mdc-checkbox-disabled-interactive .mdc-checkbox .mdc-checkbox__native-control:focus~.mdc-checkbox__background,.mdc-checkbox--disabled.mat-mdc-checkbox-disabled-interactive .mdc-checkbox__background{border-color:GrayText}}.mdc-checkbox--disabled.mat-mdc-checkbox-disabled-interactive .mdc-checkbox__native-control:checked~.mdc-checkbox__background,.mdc-checkbox--disabled.mat-mdc-checkbox-disabled-interactive .mdc-checkbox__native-control:indeterminate~.mdc-checkbox__background{background-color:var(--mat-checkbox-disabled-selected-icon-color, color-mix(in srgb, var(--mat-sys-on-surface) 38%, transparent));border-color:rgba(0,0,0,0)}.mdc-checkbox__checkmark{position:absolute;top:0;right:0;bottom:0;left:0;width:100%;opacity:0;transition:opacity 180ms cubic-bezier(0.4, 0, 0.6, 1);color:var(--mat-checkbox-selected-checkmark-color, var(--mat-sys-on-primary))}@media(forced-colors: active){.mdc-checkbox__checkmark{color:CanvasText}}.mdc-checkbox--disabled .mdc-checkbox__checkmark,.mdc-checkbox--disabled.mat-mdc-checkbox-disabled-interactive .mdc-checkbox__checkmark{color:var(--mat-checkbox-disabled-selected-checkmark-color, var(--mat-sys-surface))}@media(forced-colors: active){.mdc-checkbox--disabled .mdc-checkbox__checkmark,.mdc-checkbox--disabled.mat-mdc-checkbox-disabled-interactive .mdc-checkbox__checkmark{color:GrayText}}.mdc-checkbox__checkmark-path{transition:stroke-dashoffset 180ms cubic-bezier(0.4, 0, 0.6, 1);stroke:currentColor;stroke-width:3.12px;stroke-dashoffset:29.7833385;stroke-dasharray:29.7833385}.mdc-checkbox__mixedmark{width:100%;height:0;transform:scaleX(0) rotate(0deg);border-width:1px;border-style:solid;opacity:0;transition:opacity 90ms cubic-bezier(0.4, 0, 0.6, 1),transform 90ms cubic-bezier(0.4, 0, 0.6, 1);border-color:var(--mat-checkbox-selected-checkmark-color, var(--mat-sys-on-primary))}@media(forced-colors: active){.mdc-checkbox__mixedmark{margin:0 1px}}.mdc-checkbox--disabled .mdc-checkbox__mixedmark,.mdc-checkbox--disabled.mat-mdc-checkbox-disabled-interactive .mdc-checkbox__mixedmark{border-color:var(--mat-checkbox-disabled-selected-checkmark-color, var(--mat-sys-surface))}@media(forced-colors: active){.mdc-checkbox--disabled .mdc-checkbox__mixedmark,.mdc-checkbox--disabled.mat-mdc-checkbox-disabled-interactive .mdc-checkbox__mixedmark{border-color:GrayText}}.mdc-checkbox--anim-unchecked-checked .mdc-checkbox__background,.mdc-checkbox--anim-unchecked-indeterminate .mdc-checkbox__background,.mdc-checkbox--anim-checked-unchecked .mdc-checkbox__background,.mdc-checkbox--anim-indeterminate-unchecked .mdc-checkbox__background{animation-duration:180ms;animation-timing-function:linear}.mdc-checkbox--anim-unchecked-checked .mdc-checkbox__checkmark-path{animation:mdc-checkbox-unchecked-checked-checkmark-path 180ms linear;transition:none}.mdc-checkbox--anim-unchecked-indeterminate .mdc-checkbox__mixedmark{animation:mdc-checkbox-unchecked-indeterminate-mixedmark 90ms linear;transition:none}.mdc-checkbox--anim-checked-unchecked .mdc-checkbox__checkmark-path{animation:mdc-checkbox-checked-unchecked-checkmark-path 90ms linear;transition:none}.mdc-checkbox--anim-checked-indeterminate .mdc-checkbox__checkmark{animation:mdc-checkbox-checked-indeterminate-checkmark 90ms linear;transition:none}.mdc-checkbox--anim-checked-indeterminate .mdc-checkbox__mixedmark{animation:mdc-checkbox-checked-indeterminate-mixedmark 90ms linear;transition:none}.mdc-checkbox--anim-indeterminate-checked .mdc-checkbox__checkmark{animation:mdc-checkbox-indeterminate-checked-checkmark 500ms linear;transition:none}.mdc-checkbox--anim-indeterminate-checked .mdc-checkbox__mixedmark{animation:mdc-checkbox-indeterminate-checked-mixedmark 500ms linear;transition:none}.mdc-checkbox--anim-indeterminate-unchecked .mdc-checkbox__mixedmark{animation:mdc-checkbox-indeterminate-unchecked-mixedmark 300ms linear;transition:none}.mdc-checkbox__native-control:checked~.mdc-checkbox__background,.mdc-checkbox__native-control:indeterminate~.mdc-checkbox__background{transition:border-color 90ms cubic-bezier(0, 0, 0.2, 1),background-color 90ms cubic-bezier(0, 0, 0.2, 1)}.mdc-checkbox__native-control:checked~.mdc-checkbox__background>.mdc-checkbox__checkmark>.mdc-checkbox__checkmark-path,.mdc-checkbox__native-control:indeterminate~.mdc-checkbox__background>.mdc-checkbox__checkmark>.mdc-checkbox__checkmark-path{stroke-dashoffset:0}.mdc-checkbox__native-control:checked~.mdc-checkbox__background>.mdc-checkbox__checkmark{transition:opacity 180ms cubic-bezier(0, 0, 0.2, 1),transform 180ms cubic-bezier(0, 0, 0.2, 1);opacity:1}.mdc-checkbox__native-control:checked~.mdc-checkbox__background>.mdc-checkbox__mixedmark{transform:scaleX(1) rotate(-45deg)}.mdc-checkbox__native-control:indeterminate~.mdc-checkbox__background>.mdc-checkbox__checkmark{transform:rotate(45deg);opacity:0;transition:opacity 90ms cubic-bezier(0.4, 0, 0.6, 1),transform 90ms cubic-bezier(0.4, 0, 0.6, 1)}.mdc-checkbox__native-control:indeterminate~.mdc-checkbox__background>.mdc-checkbox__mixedmark{transform:scaleX(1) rotate(0deg);opacity:1}@keyframes mdc-checkbox-unchecked-checked-checkmark-path{0%,50%{stroke-dashoffset:29.7833385}50%{animation-timing-function:cubic-bezier(0, 0, 0.2, 1)}100%{stroke-dashoffset:0}}@keyframes mdc-checkbox-unchecked-indeterminate-mixedmark{0%,68.2%{transform:scaleX(0)}68.2%{animation-timing-function:cubic-bezier(0, 0, 0, 1)}100%{transform:scaleX(1)}}@keyframes mdc-checkbox-checked-unchecked-checkmark-path{from{animation-timing-function:cubic-bezier(0.4, 0, 1, 1);opacity:1;stroke-dashoffset:0}to{opacity:0;stroke-dashoffset:-29.7833385}}@keyframes mdc-checkbox-checked-indeterminate-checkmark{from{animation-timing-function:cubic-bezier(0, 0, 0.2, 1);transform:rotate(0deg);opacity:1}to{transform:rotate(45deg);opacity:0}}@keyframes mdc-checkbox-indeterminate-checked-checkmark{from{animation-timing-function:cubic-bezier(0.14, 0, 0, 1);transform:rotate(45deg);opacity:0}to{transform:rotate(360deg);opacity:1}}@keyframes mdc-checkbox-checked-indeterminate-mixedmark{from{animation-timing-function:cubic-bezier(0, 0, 0.2, 1);transform:rotate(-45deg);opacity:0}to{transform:rotate(0deg);opacity:1}}@keyframes mdc-checkbox-indeterminate-checked-mixedmark{from{animation-timing-function:cubic-bezier(0.14, 0, 0, 1);transform:rotate(0deg);opacity:1}to{transform:rotate(315deg);opacity:0}}@keyframes mdc-checkbox-indeterminate-unchecked-mixedmark{0%{animation-timing-function:linear;transform:scaleX(1);opacity:1}32.8%,100%{transform:scaleX(0);opacity:0}}.mat-mdc-checkbox{display:inline-block;position:relative;-webkit-tap-highlight-color:rgba(0,0,0,0)}.mat-mdc-checkbox._mat-animation-noopable>.mat-internal-form-field>.mdc-checkbox>.mat-mdc-checkbox-touch-target,.mat-mdc-checkbox._mat-animation-noopable>.mat-internal-form-field>.mdc-checkbox>.mdc-checkbox__native-control,.mat-mdc-checkbox._mat-animation-noopable>.mat-internal-form-field>.mdc-checkbox>.mdc-checkbox__ripple,.mat-mdc-checkbox._mat-animation-noopable>.mat-internal-form-field>.mdc-checkbox>.mat-mdc-checkbox-ripple::before,.mat-mdc-checkbox._mat-animation-noopable>.mat-internal-form-field>.mdc-checkbox>.mdc-checkbox__background,.mat-mdc-checkbox._mat-animation-noopable>.mat-internal-form-field>.mdc-checkbox>.mdc-checkbox__background>.mdc-checkbox__checkmark,.mat-mdc-checkbox._mat-animation-noopable>.mat-internal-form-field>.mdc-checkbox>.mdc-checkbox__background>.mdc-checkbox__checkmark>.mdc-checkbox__checkmark-path,.mat-mdc-checkbox._mat-animation-noopable>.mat-internal-form-field>.mdc-checkbox>.mdc-checkbox__background>.mdc-checkbox__mixedmark{transition:none !important;animation:none !important}.mat-mdc-checkbox label{cursor:pointer}.mat-mdc-checkbox .mat-internal-form-field{color:var(--mat-checkbox-label-text-color, var(--mat-sys-on-surface));font-family:var(--mat-checkbox-label-text-font, var(--mat-sys-body-medium-font));line-height:var(--mat-checkbox-label-text-line-height, var(--mat-sys-body-medium-line-height));font-size:var(--mat-checkbox-label-text-size, var(--mat-sys-body-medium-size));letter-spacing:var(--mat-checkbox-label-text-tracking, var(--mat-sys-body-medium-tracking));font-weight:var(--mat-checkbox-label-text-weight, var(--mat-sys-body-medium-weight))}.mat-mdc-checkbox.mat-mdc-checkbox-disabled.mat-mdc-checkbox-disabled-interactive{pointer-events:auto}.mat-mdc-checkbox.mat-mdc-checkbox-disabled.mat-mdc-checkbox-disabled-interactive input{cursor:default}.mat-mdc-checkbox.mat-mdc-checkbox-disabled label{cursor:default;color:var(--mat-checkbox-disabled-label-color, color-mix(in srgb, var(--mat-sys-on-surface) 38%, transparent))}@media(forced-colors: active){.mat-mdc-checkbox.mat-mdc-checkbox-disabled label{color:GrayText}}.mat-mdc-checkbox label:empty{display:none}.mat-mdc-checkbox .mdc-checkbox__ripple{opacity:0}.mat-mdc-checkbox .mat-mdc-checkbox-ripple,.mdc-checkbox__ripple{top:0;left:0;right:0;bottom:0;position:absolute;border-radius:50%;pointer-events:none}.mat-mdc-checkbox .mat-mdc-checkbox-ripple:not(:empty),.mdc-checkbox__ripple:not(:empty){transform:translateZ(0)}.mat-mdc-checkbox-ripple .mat-ripple-element{opacity:.1}.mat-mdc-checkbox-touch-target{position:absolute;top:50%;left:50%;height:var(--mat-checkbox-touch-target-size, 48px);width:var(--mat-checkbox-touch-target-size, 48px);transform:translate(-50%, -50%);display:var(--mat-checkbox-touch-target-display, block)}.mat-mdc-checkbox .mat-mdc-checkbox-ripple::before{border-radius:50%}.mdc-checkbox__native-control:focus-visible~.mat-focus-indicator::before{content:""}

svg[_ngcontent-ng-c1206384196] {
  display: block;
}</style><style ng-app-id="ng">[_nghost-ng-c2739666580] {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  line-height: 0;
}

svg[_ngcontent-ng-c2739666580] {
  display: block;
}</style><style ng-app-id="ng">[_nghost-ng-c1437691622] {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  line-height: 0;
}

svg[_ngcontent-ng-c1437691622] {
  display: block;
}</style><style ng-app-id="ng">[_nghost-ng-c40093664] {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  line-height: 0;
}

svg[_ngcontent-ng-c40093664] {
  display: block;
}</style><style ng-app-id="ng">.mdc-text-field{display:inline-flex;align-items:baseline;padding:0 16px;position:relative;box-sizing:border-box;overflow:hidden;will-change:opacity,transform,color;border-top-left-radius:4px;border-top-right-radius:4px;border-bottom-right-radius:0;border-bottom-left-radius:0}.mdc-text-field__input{width:100%;min-width:0;border:none;border-radius:0;background:none;padding:0;-moz-appearance:none;-webkit-appearance:none;height:28px}.mdc-text-field__input::-webkit-calendar-picker-indicator,.mdc-text-field__input::-webkit-search-cancel-button{display:none}.mdc-text-field__input::-ms-clear{display:none}.mdc-text-field__input:focus{outline:none}.mdc-text-field__input:invalid{box-shadow:none}.mdc-text-field__input::placeholder{opacity:0}.mdc-text-field__input::-moz-placeholder{opacity:0}.mdc-text-field__input::-webkit-input-placeholder{opacity:0}.mdc-text-field__input:-ms-input-placeholder{opacity:0}.mdc-text-field--no-label .mdc-text-field__input::placeholder,.mdc-text-field--focused .mdc-text-field__input::placeholder{opacity:1}.mdc-text-field--no-label .mdc-text-field__input::-moz-placeholder,.mdc-text-field--focused .mdc-text-field__input::-moz-placeholder{opacity:1}.mdc-text-field--no-label .mdc-text-field__input::-webkit-input-placeholder,.mdc-text-field--focused .mdc-text-field__input::-webkit-input-placeholder{opacity:1}.mdc-text-field--no-label .mdc-text-field__input:-ms-input-placeholder,.mdc-text-field--focused .mdc-text-field__input:-ms-input-placeholder{opacity:1}.mdc-text-field--disabled:not(.mdc-text-field--no-label) .mdc-text-field__input.mat-mdc-input-disabled-interactive::placeholder{opacity:0}.mdc-text-field--disabled:not(.mdc-text-field--no-label) .mdc-text-field__input.mat-mdc-input-disabled-interactive::-moz-placeholder{opacity:0}.mdc-text-field--disabled:not(.mdc-text-field--no-label) .mdc-text-field__input.mat-mdc-input-disabled-interactive::-webkit-input-placeholder{opacity:0}.mdc-text-field--disabled:not(.mdc-text-field--no-label) .mdc-text-field__input.mat-mdc-input-disabled-interactive:-ms-input-placeholder{opacity:0}.mdc-text-field--outlined .mdc-text-field__input,.mdc-text-field--filled.mdc-text-field--no-label .mdc-text-field__input{height:100%}.mdc-text-field--outlined .mdc-text-field__input{display:flex;border:none !important;background-color:rgba(0,0,0,0)}.mdc-text-field--disabled .mdc-text-field__input{pointer-events:auto}.mdc-text-field--filled:not(.mdc-text-field--disabled) .mdc-text-field__input{color:var(--mat-form-field-filled-input-text-color, var(--mat-sys-on-surface));caret-color:var(--mat-form-field-filled-caret-color, var(--mat-sys-primary))}.mdc-text-field--filled:not(.mdc-text-field--disabled) .mdc-text-field__input::placeholder{color:var(--mat-form-field-filled-input-text-placeholder-color, var(--mat-sys-on-surface-variant))}.mdc-text-field--filled:not(.mdc-text-field--disabled) .mdc-text-field__input::-moz-placeholder{color:var(--mat-form-field-filled-input-text-placeholder-color, var(--mat-sys-on-surface-variant))}.mdc-text-field--filled:not(.mdc-text-field--disabled) .mdc-text-field__input::-webkit-input-placeholder{color:var(--mat-form-field-filled-input-text-placeholder-color, var(--mat-sys-on-surface-variant))}.mdc-text-field--filled:not(.mdc-text-field--disabled) .mdc-text-field__input:-ms-input-placeholder{color:var(--mat-form-field-filled-input-text-placeholder-color, var(--mat-sys-on-surface-variant))}.mdc-text-field--outlined:not(.mdc-text-field--disabled) .mdc-text-field__input{color:var(--mat-form-field-outlined-input-text-color, var(--mat-sys-on-surface));caret-color:var(--mat-form-field-outlined-caret-color, var(--mat-sys-primary))}.mdc-text-field--outlined:not(.mdc-text-field--disabled) .mdc-text-field__input::placeholder{color:var(--mat-form-field-outlined-input-text-placeholder-color, var(--mat-sys-on-surface-variant))}.mdc-text-field--outlined:not(.mdc-text-field--disabled) .mdc-text-field__input::-moz-placeholder{color:var(--mat-form-field-outlined-input-text-placeholder-color, var(--mat-sys-on-surface-variant))}.mdc-text-field--outlined:not(.mdc-text-field--disabled) .mdc-text-field__input::-webkit-input-placeholder{color:var(--mat-form-field-outlined-input-text-placeholder-color, var(--mat-sys-on-surface-variant))}.mdc-text-field--outlined:not(.mdc-text-field--disabled) .mdc-text-field__input:-ms-input-placeholder{color:var(--mat-form-field-outlined-input-text-placeholder-color, var(--mat-sys-on-surface-variant))}.mdc-text-field--filled.mdc-text-field--invalid:not(.mdc-text-field--disabled) .mdc-text-field__input{caret-color:var(--mat-form-field-filled-error-caret-color, var(--mat-sys-error))}.mdc-text-field--outlined.mdc-text-field--invalid:not(.mdc-text-field--disabled) .mdc-text-field__input{caret-color:var(--mat-form-field-outlined-error-caret-color, var(--mat-sys-error))}.mdc-text-field--filled.mdc-text-field--disabled .mdc-text-field__input{color:var(--mat-form-field-filled-disabled-input-text-color, color-mix(in srgb, var(--mat-sys-on-surface) 38%, transparent))}.mdc-text-field--outlined.mdc-text-field--disabled .mdc-text-field__input{color:var(--mat-form-field-outlined-disabled-input-text-color, color-mix(in srgb, var(--mat-sys-on-surface) 38%, transparent))}@media(forced-colors: active){.mdc-text-field--disabled .mdc-text-field__input{background-color:Window}}.mdc-text-field--filled{height:56px;border-bottom-right-radius:0;border-bottom-left-radius:0;border-top-left-radius:var(--mat-form-field-filled-container-shape, var(--mat-sys-corner-extra-small));border-top-right-radius:var(--mat-form-field-filled-container-shape, var(--mat-sys-corner-extra-small))}.mdc-text-field--filled:not(.mdc-text-field--disabled){background-color:var(--mat-form-field-filled-container-color, var(--mat-sys-surface-variant))}.mdc-text-field--filled.mdc-text-field--disabled{background-color:var(--mat-form-field-filled-disabled-container-color, color-mix(in srgb, var(--mat-sys-on-surface) 4%, transparent))}.mdc-text-field--outlined{height:56px;overflow:visible;padding-right:max(16px,var(--mat-form-field-outlined-container-shape, var(--mat-sys-corner-extra-small)));padding-left:max(16px,var(--mat-form-field-outlined-container-shape, var(--mat-sys-corner-extra-small)) + 4px)}[dir=rtl] .mdc-text-field--outlined{padding-right:max(16px,var(--mat-form-field-outlined-container-shape, var(--mat-sys-corner-extra-small)) + 4px);padding-left:max(16px,var(--mat-form-field-outlined-container-shape, var(--mat-sys-corner-extra-small)))}.mdc-floating-label{position:absolute;left:0;transform-origin:left top;line-height:1.15rem;text-align:left;text-overflow:ellipsis;white-space:nowrap;cursor:text;overflow:hidden;will-change:transform}[dir=rtl] .mdc-floating-label{right:0;left:auto;transform-origin:right top;text-align:right}.mdc-text-field .mdc-floating-label{top:50%;transform:translateY(-50%);pointer-events:none}.mdc-notched-outline .mdc-floating-label{display:inline-block;position:relative;max-width:100%}.mdc-text-field--outlined .mdc-floating-label{left:4px;right:auto}[dir=rtl] .mdc-text-field--outlined .mdc-floating-label{left:auto;right:4px}.mdc-text-field--filled .mdc-floating-label{left:16px;right:auto}[dir=rtl] .mdc-text-field--filled .mdc-floating-label{left:auto;right:16px}.mdc-text-field--disabled .mdc-floating-label{cursor:default}@media(forced-colors: active){.mdc-text-field--disabled .mdc-floating-label{z-index:1}}.mdc-text-field--filled.mdc-text-field--no-label .mdc-floating-label{display:none}.mdc-text-field--filled:not(.mdc-text-field--disabled) .mdc-floating-label{color:var(--mat-form-field-filled-label-text-color, var(--mat-sys-on-surface-variant))}.mdc-text-field--filled:not(.mdc-text-field--disabled).mdc-text-field--focused .mdc-floating-label{color:var(--mat-form-field-filled-focus-label-text-color, var(--mat-sys-primary))}.mdc-text-field--filled:not(.mdc-text-field--disabled):not(.mdc-text-field--focused):hover .mdc-floating-label{color:var(--mat-form-field-filled-hover-label-text-color, var(--mat-sys-on-surface-variant))}.mdc-text-field--filled.mdc-text-field--disabled .mdc-floating-label{color:var(--mat-form-field-filled-disabled-label-text-color, color-mix(in srgb, var(--mat-sys-on-surface) 38%, transparent))}.mdc-text-field--filled:not(.mdc-text-field--disabled).mdc-text-field--invalid .mdc-floating-label{color:var(--mat-form-field-filled-error-label-text-color, var(--mat-sys-error))}.mdc-text-field--filled:not(.mdc-text-field--disabled).mdc-text-field--invalid.mdc-text-field--focused .mdc-floating-label{color:var(--mat-form-field-filled-error-focus-label-text-color, var(--mat-sys-error))}.mdc-text-field--filled:not(.mdc-text-field--disabled).mdc-text-field--invalid:not(.mdc-text-field--disabled):hover .mdc-floating-label{color:var(--mat-form-field-filled-error-hover-label-text-color, var(--mat-sys-on-error-container))}.mdc-text-field--filled .mdc-floating-label{font-family:var(--mat-form-field-filled-label-text-font, var(--mat-sys-body-large-font));font-size:var(--mat-form-field-filled-label-text-size, var(--mat-sys-body-large-size));font-weight:var(--mat-form-field-filled-label-text-weight, var(--mat-sys-body-large-weight));letter-spacing:var(--mat-form-field-filled-label-text-tracking, var(--mat-sys-body-large-tracking))}.mdc-text-field--outlined:not(.mdc-text-field--disabled) .mdc-floating-label{color:var(--mat-form-field-outlined-label-text-color, var(--mat-sys-on-surface-variant))}.mdc-text-field--outlined:not(.mdc-text-field--disabled).mdc-text-field--focused .mdc-floating-label{color:var(--mat-form-field-outlined-focus-label-text-color, var(--mat-sys-primary))}.mdc-text-field--outlined:not(.mdc-text-field--disabled):not(.mdc-text-field--focused):hover .mdc-floating-label{color:var(--mat-form-field-outlined-hover-label-text-color, var(--mat-sys-on-surface))}.mdc-text-field--outlined.mdc-text-field--disabled .mdc-floating-label{color:var(--mat-form-field-outlined-disabled-label-text-color, color-mix(in srgb, var(--mat-sys-on-surface) 38%, transparent))}.mdc-text-field--outlined:not(.mdc-text-field--disabled).mdc-text-field--invalid .mdc-floating-label{color:var(--mat-form-field-outlined-error-label-text-color, var(--mat-sys-error))}.mdc-text-field--outlined:not(.mdc-text-field--disabled).mdc-text-field--invalid.mdc-text-field--focused .mdc-floating-label{color:var(--mat-form-field-outlined-error-focus-label-text-color, var(--mat-sys-error))}.mdc-text-field--outlined:not(.mdc-text-field--disabled).mdc-text-field--invalid:not(.mdc-text-field--disabled):hover .mdc-floating-label{color:var(--mat-form-field-outlined-error-hover-label-text-color, var(--mat-sys-on-error-container))}.mdc-text-field--outlined .mdc-floating-label{font-family:var(--mat-form-field-outlined-label-text-font, var(--mat-sys-body-large-font));font-size:var(--mat-form-field-outlined-label-text-size, var(--mat-sys-body-large-size));font-weight:var(--mat-form-field-outlined-label-text-weight, var(--mat-sys-body-large-weight));letter-spacing:var(--mat-form-field-outlined-label-text-tracking, var(--mat-sys-body-large-tracking))}.mdc-floating-label--float-above{cursor:auto;transform:translateY(-106%) scale(0.75)}.mdc-text-field--filled .mdc-floating-label--float-above{transform:translateY(-106%) scale(0.75)}.mdc-text-field--outlined .mdc-floating-label--float-above{transform:translateY(-37.25px) scale(1);font-size:.75rem}.mdc-notched-outline .mdc-floating-label--float-above{text-overflow:clip}.mdc-notched-outline--upgraded .mdc-floating-label--float-above{max-width:133.3333333333%}.mdc-text-field--outlined.mdc-notched-outline--upgraded .mdc-floating-label--float-above,.mdc-text-field--outlined .mdc-notched-outline--upgraded .mdc-floating-label--float-above{transform:translateY(-34.75px) scale(0.75)}.mdc-text-field--outlined.mdc-notched-outline--upgraded .mdc-floating-label--float-above,.mdc-text-field--outlined .mdc-notched-outline--upgraded .mdc-floating-label--float-above{font-size:1rem}.mdc-floating-label--required:not(.mdc-floating-label--hide-required-marker)::after{margin-left:1px;margin-right:0;content:"*"}[dir=rtl] .mdc-floating-label--required:not(.mdc-floating-label--hide-required-marker)::after{margin-left:0;margin-right:1px}.mdc-notched-outline{display:flex;position:absolute;top:0;right:0;left:0;box-sizing:border-box;width:100%;max-width:100%;height:100%;text-align:left;pointer-events:none}[dir=rtl] .mdc-notched-outline{text-align:right}.mdc-text-field--outlined .mdc-notched-outline{z-index:1}.mat-mdc-notch-piece{box-sizing:border-box;height:100%;pointer-events:none;border:none;border-top:1px solid;border-bottom:1px solid}.mdc-text-field--focused .mat-mdc-notch-piece{border-width:2px}.mdc-text-field--outlined:not(.mdc-text-field--disabled) .mat-mdc-notch-piece{border-color:var(--mat-form-field-outlined-outline-color, var(--mat-sys-outline));border-width:var(--mat-form-field-outlined-outline-width, 1px)}.mdc-text-field--outlined:not(.mdc-text-field--disabled):not(.mdc-text-field--focused):hover .mat-mdc-notch-piece{border-color:var(--mat-form-field-outlined-hover-outline-color, var(--mat-sys-on-surface))}.mdc-text-field--outlined:not(.mdc-text-field--disabled).mdc-text-field--focused .mat-mdc-notch-piece{border-color:var(--mat-form-field-outlined-focus-outline-color, var(--mat-sys-primary))}.mdc-text-field--outlined.mdc-text-field--disabled .mat-mdc-notch-piece{border-color:var(--mat-form-field-outlined-disabled-outline-color, color-mix(in srgb, var(--mat-sys-on-surface) 12%, transparent))}.mdc-text-field--outlined:not(.mdc-text-field--disabled).mdc-text-field--invalid .mat-mdc-notch-piece{border-color:var(--mat-form-field-outlined-error-outline-color, var(--mat-sys-error))}.mdc-text-field--outlined:not(.mdc-text-field--disabled).mdc-text-field--invalid:not(.mdc-text-field--focused):hover .mdc-notched-outline .mat-mdc-notch-piece{border-color:var(--mat-form-field-outlined-error-hover-outline-color, var(--mat-sys-on-error-container))}.mdc-text-field--outlined:not(.mdc-text-field--disabled).mdc-text-field--invalid.mdc-text-field--focused .mat-mdc-notch-piece{border-color:var(--mat-form-field-outlined-error-focus-outline-color, var(--mat-sys-error))}.mdc-text-field--outlined:not(.mdc-text-field--disabled).mdc-text-field--focused .mdc-notched-outline .mat-mdc-notch-piece{border-width:var(--mat-form-field-outlined-focus-outline-width, 2px)}.mdc-notched-outline__leading{border-left:1px solid;border-right:none;border-top-right-radius:0;border-bottom-right-radius:0;border-top-left-radius:var(--mat-form-field-outlined-container-shape, var(--mat-sys-corner-extra-small));border-bottom-left-radius:var(--mat-form-field-outlined-container-shape, var(--mat-sys-corner-extra-small))}.mdc-text-field--outlined .mdc-notched-outline .mdc-notched-outline__leading{width:max(12px,var(--mat-form-field-outlined-container-shape, var(--mat-sys-corner-extra-small)))}[dir=rtl] .mdc-notched-outline__leading{border-left:none;border-right:1px solid;border-bottom-left-radius:0;border-top-left-radius:0;border-top-right-radius:var(--mat-form-field-outlined-container-shape, var(--mat-sys-corner-extra-small));border-bottom-right-radius:var(--mat-form-field-outlined-container-shape, var(--mat-sys-corner-extra-small))}.mdc-notched-outline__trailing{flex-grow:1;border-left:none;border-right:1px solid;border-top-left-radius:0;border-bottom-left-radius:0;border-top-right-radius:var(--mat-form-field-outlined-container-shape, var(--mat-sys-corner-extra-small));border-bottom-right-radius:var(--mat-form-field-outlined-container-shape, var(--mat-sys-corner-extra-small))}[dir=rtl] .mdc-notched-outline__trailing{border-left:1px solid;border-right:none;border-top-right-radius:0;border-bottom-right-radius:0;border-top-left-radius:var(--mat-form-field-outlined-container-shape, var(--mat-sys-corner-extra-small));border-bottom-left-radius:var(--mat-form-field-outlined-container-shape, var(--mat-sys-corner-extra-small))}.mdc-notched-outline__notch{flex:0 0 auto;width:auto}.mdc-text-field--outlined .mdc-notched-outline .mdc-notched-outline__notch{max-width:min(var(--mat-form-field-notch-max-width, 100%),calc(100% - max(12px, var(--mat-form-field-outlined-container-shape, var(--mat-sys-corner-extra-small))) * 2))}.mdc-text-field--outlined .mdc-notched-outline--notched .mdc-notched-outline__notch{max-width:min(100%,calc(100% - max(12px, var(--mat-form-field-outlined-container-shape, var(--mat-sys-corner-extra-small))) * 2))}.mdc-text-field--outlined .mdc-notched-outline--notched .mdc-notched-outline__notch{padding-top:1px}.mdc-text-field--focused.mdc-text-field--outlined .mdc-notched-outline--notched .mdc-notched-outline__notch{padding-top:2px}.mdc-notched-outline--notched .mdc-notched-outline__notch{padding-left:0;padding-right:8px;border-top:none}[dir=rtl] .mdc-notched-outline--notched .mdc-notched-outline__notch{padding-left:8px;padding-right:0}.mdc-notched-outline--no-label .mdc-notched-outline__notch{display:none}.mdc-line-ripple::before,.mdc-line-ripple::after{position:absolute;bottom:0;left:0;width:100%;border-bottom-style:solid;content:""}.mdc-line-ripple::before{z-index:1;border-bottom-width:var(--mat-form-field-filled-active-indicator-height, 1px)}.mdc-text-field--filled:not(.mdc-text-field--disabled) .mdc-line-ripple::before{border-bottom-color:var(--mat-form-field-filled-active-indicator-color, var(--mat-sys-on-surface-variant))}.mdc-text-field--filled:not(.mdc-text-field--disabled):not(.mdc-text-field--focused):hover .mdc-line-ripple::before{border-bottom-color:var(--mat-form-field-filled-hover-active-indicator-color, var(--mat-sys-on-surface))}.mdc-text-field--filled.mdc-text-field--disabled .mdc-line-ripple::before{border-bottom-color:var(--mat-form-field-filled-disabled-active-indicator-color, color-mix(in srgb, var(--mat-sys-on-surface) 38%, transparent))}.mdc-text-field--filled:not(.mdc-text-field--disabled).mdc-text-field--invalid .mdc-line-ripple::before{border-bottom-color:var(--mat-form-field-filled-error-active-indicator-color, var(--mat-sys-error))}.mdc-text-field--filled:not(.mdc-text-field--disabled).mdc-text-field--invalid:not(.mdc-text-field--focused):hover .mdc-line-ripple::before{border-bottom-color:var(--mat-form-field-filled-error-hover-active-indicator-color, var(--mat-sys-on-error-container))}.mdc-line-ripple::after{transform:scaleX(0);opacity:0;z-index:2}.mdc-text-field--filled .mdc-line-ripple::after{border-bottom-width:var(--mat-form-field-filled-focus-active-indicator-height, 2px)}.mdc-text-field--filled:not(.mdc-text-field--disabled) .mdc-line-ripple::after{border-bottom-color:var(--mat-form-field-filled-focus-active-indicator-color, var(--mat-sys-primary))}.mdc-text-field--filled.mdc-text-field--invalid:not(.mdc-text-field--disabled) .mdc-line-ripple::after{border-bottom-color:var(--mat-form-field-filled-error-focus-active-indicator-color, var(--mat-sys-error))}.mdc-line-ripple--active::after{transform:scaleX(1);opacity:1}.mdc-line-ripple--deactivating::after{opacity:0}.mdc-text-field--disabled{pointer-events:none}.mat-mdc-form-field-textarea-control{vertical-align:middle;resize:vertical;box-sizing:border-box;height:auto;margin:0;padding:0;border:none;overflow:auto}.mat-mdc-form-field-input-control.mat-mdc-form-field-input-control{-moz-osx-font-smoothing:grayscale;-webkit-font-smoothing:antialiased;font:inherit;letter-spacing:inherit;text-decoration:inherit;text-transform:inherit;border:none}.mat-mdc-form-field .mat-mdc-floating-label.mdc-floating-label{-moz-osx-font-smoothing:grayscale;-webkit-font-smoothing:antialiased;line-height:normal;pointer-events:all;will-change:auto}.mat-mdc-form-field:not(.mat-form-field-disabled) .mat-mdc-floating-label.mdc-floating-label{cursor:inherit}.mdc-text-field--no-label:not(.mdc-text-field--textarea) .mat-mdc-form-field-input-control.mdc-text-field__input,.mat-mdc-text-field-wrapper .mat-mdc-form-field-input-control{height:auto}.mat-mdc-text-field-wrapper .mat-mdc-form-field-input-control.mdc-text-field__input[type=color]{height:23px}.mat-mdc-text-field-wrapper{height:auto;flex:auto;will-change:auto}.mat-mdc-form-field-has-icon-prefix .mat-mdc-text-field-wrapper{padding-left:0;--mat-mdc-form-field-label-offset-x: -16px}.mat-mdc-form-field-has-icon-suffix .mat-mdc-text-field-wrapper{padding-right:0}[dir=rtl] .mat-mdc-text-field-wrapper{padding-left:16px;padding-right:16px}[dir=rtl] .mat-mdc-form-field-has-icon-suffix .mat-mdc-text-field-wrapper{padding-left:0}[dir=rtl] .mat-mdc-form-field-has-icon-prefix .mat-mdc-text-field-wrapper{padding-right:0}.mat-form-field-disabled .mdc-text-field__input::placeholder{color:var(--mat-form-field-disabled-input-text-placeholder-color, color-mix(in srgb, var(--mat-sys-on-surface) 38%, transparent))}.mat-form-field-disabled .mdc-text-field__input::-moz-placeholder{color:var(--mat-form-field-disabled-input-text-placeholder-color, color-mix(in srgb, var(--mat-sys-on-surface) 38%, transparent))}.mat-form-field-disabled .mdc-text-field__input::-webkit-input-placeholder{color:var(--mat-form-field-disabled-input-text-placeholder-color, color-mix(in srgb, var(--mat-sys-on-surface) 38%, transparent))}.mat-form-field-disabled .mdc-text-field__input:-ms-input-placeholder{color:var(--mat-form-field-disabled-input-text-placeholder-color, color-mix(in srgb, var(--mat-sys-on-surface) 38%, transparent))}.mat-mdc-form-field-label-always-float .mdc-text-field__input::placeholder{transition-delay:40ms;transition-duration:110ms;opacity:1}.mat-mdc-text-field-wrapper .mat-mdc-form-field-infix .mat-mdc-floating-label{left:auto;right:auto}.mat-mdc-text-field-wrapper.mdc-text-field--outlined .mdc-text-field__input{display:inline-block}.mat-mdc-form-field .mat-mdc-text-field-wrapper.mdc-text-field .mdc-notched-outline__notch{padding-top:0}.mat-mdc-form-field.mat-mdc-form-field.mat-mdc-form-field.mat-mdc-form-field.mat-mdc-form-field.mat-mdc-form-field .mdc-notched-outline__notch{border-left:1px solid rgba(0,0,0,0)}[dir=rtl] .mat-mdc-form-field.mat-mdc-form-field.mat-mdc-form-field.mat-mdc-form-field.mat-mdc-form-field.mat-mdc-form-field .mdc-notched-outline__notch{border-left:none;border-right:1px solid rgba(0,0,0,0)}.mat-mdc-form-field-infix{min-height:var(--mat-form-field-container-height, 56px);padding-top:var(--mat-form-field-filled-with-label-container-padding-top, 24px);padding-bottom:var(--mat-form-field-filled-with-label-container-padding-bottom, 8px)}.mdc-text-field--outlined .mat-mdc-form-field-infix,.mdc-text-field--no-label .mat-mdc-form-field-infix{padding-top:var(--mat-form-field-container-vertical-padding, 16px);padding-bottom:var(--mat-form-field-container-vertical-padding, 16px)}.mat-mdc-text-field-wrapper .mat-mdc-form-field-flex .mat-mdc-floating-label{top:calc(var(--mat-form-field-container-height, 56px)/2)}.mdc-text-field--filled .mat-mdc-floating-label{display:var(--mat-form-field-filled-label-display, block)}.mat-mdc-text-field-wrapper.mdc-text-field--outlined .mdc-notched-outline--upgraded .mdc-floating-label--float-above{--mat-mdc-form-field-label-transform: translateY(calc(calc(6.75px + var(--mat-form-field-container-height, 56px) / 2) * -1)) scale(var(--mat-mdc-form-field-floating-label-scale, 0.75));transform:var(--mat-mdc-form-field-label-transform)}@keyframes _mat-form-field-subscript-animation{from{opacity:0;transform:translateY(-5px)}to{opacity:1;transform:translateY(0)}}.mat-mdc-form-field-subscript-wrapper{box-sizing:border-box;width:100%;position:relative}.mat-mdc-form-field-hint-wrapper,.mat-mdc-form-field-error-wrapper{position:absolute;top:0;left:0;right:0;padding:0 16px;opacity:1;transform:translateY(0);animation:_mat-form-field-subscript-animation 0ms cubic-bezier(0.55, 0, 0.55, 0.2)}.mat-mdc-form-field-subscript-dynamic-size .mat-mdc-form-field-hint-wrapper,.mat-mdc-form-field-subscript-dynamic-size .mat-mdc-form-field-error-wrapper{position:static}.mat-mdc-form-field-bottom-align::before{content:"";display:inline-block;height:16px}.mat-mdc-form-field-bottom-align.mat-mdc-form-field-subscript-dynamic-size::before{content:unset}.mat-mdc-form-field-hint-end{order:1}.mat-mdc-form-field-hint-wrapper{display:flex}.mat-mdc-form-field-hint-spacer{flex:1 0 1em}.mat-mdc-form-field-error{display:block;color:var(--mat-form-field-error-text-color, var(--mat-sys-error))}.mat-mdc-form-field-subscript-wrapper,.mat-mdc-form-field-bottom-align::before{-moz-osx-font-smoothing:grayscale;-webkit-font-smoothing:antialiased;font-family:var(--mat-form-field-subscript-text-font, var(--mat-sys-body-small-font));line-height:var(--mat-form-field-subscript-text-line-height, var(--mat-sys-body-small-line-height));font-size:var(--mat-form-field-subscript-text-size, var(--mat-sys-body-small-size));letter-spacing:var(--mat-form-field-subscript-text-tracking, var(--mat-sys-body-small-tracking));font-weight:var(--mat-form-field-subscript-text-weight, var(--mat-sys-body-small-weight))}.mat-mdc-form-field-focus-overlay{top:0;left:0;right:0;bottom:0;position:absolute;opacity:0;pointer-events:none;background-color:var(--mat-form-field-state-layer-color, var(--mat-sys-on-surface))}.mat-mdc-text-field-wrapper:hover .mat-mdc-form-field-focus-overlay{opacity:var(--mat-form-field-hover-state-layer-opacity, var(--mat-sys-hover-state-layer-opacity))}.mat-mdc-form-field.mat-focused .mat-mdc-form-field-focus-overlay{opacity:var(--mat-form-field-focus-state-layer-opacity, 0)}select.mat-mdc-form-field-input-control{-moz-appearance:none;-webkit-appearance:none;background-color:rgba(0,0,0,0);display:inline-flex;box-sizing:border-box}select.mat-mdc-form-field-input-control:not(:disabled){cursor:pointer}select.mat-mdc-form-field-input-control:not(.mat-mdc-native-select-inline) option{color:var(--mat-form-field-select-option-text-color, var(--mat-sys-neutral10))}select.mat-mdc-form-field-input-control:not(.mat-mdc-native-select-inline) option:disabled{color:var(--mat-form-field-select-disabled-option-text-color, color-mix(in srgb, var(--mat-sys-neutral10) 38%, transparent))}.mat-mdc-form-field-type-mat-native-select .mat-mdc-form-field-infix::after{content:"";width:0;height:0;border-left:5px solid rgba(0,0,0,0);border-right:5px solid rgba(0,0,0,0);border-top:5px solid;position:absolute;right:0;top:50%;margin-top:-2.5px;pointer-events:none;color:var(--mat-form-field-enabled-select-arrow-color, var(--mat-sys-on-surface-variant))}[dir=rtl] .mat-mdc-form-field-type-mat-native-select .mat-mdc-form-field-infix::after{right:auto;left:0}.mat-mdc-form-field-type-mat-native-select.mat-focused .mat-mdc-form-field-infix::after{color:var(--mat-form-field-focus-select-arrow-color, var(--mat-sys-primary))}.mat-mdc-form-field-type-mat-native-select.mat-form-field-disabled .mat-mdc-form-field-infix::after{color:var(--mat-form-field-disabled-select-arrow-color, color-mix(in srgb, var(--mat-sys-on-surface) 38%, transparent))}.mat-mdc-form-field-type-mat-native-select .mat-mdc-form-field-input-control{padding-right:15px}[dir=rtl] .mat-mdc-form-field-type-mat-native-select .mat-mdc-form-field-input-control{padding-right:0;padding-left:15px}@media(forced-colors: active){.mat-form-field-appearance-fill .mat-mdc-text-field-wrapper{outline:solid 1px}}@media(forced-colors: active){.mat-form-field-appearance-fill.mat-form-field-disabled .mat-mdc-text-field-wrapper{outline-color:GrayText}}@media(forced-colors: active){.mat-form-field-appearance-fill.mat-focused .mat-mdc-text-field-wrapper{outline:dashed 3px}}@media(forced-colors: active){.mat-mdc-form-field.mat-focused .mdc-notched-outline{border:dashed 3px}}.mat-mdc-form-field-input-control[type=date],.mat-mdc-form-field-input-control[type=datetime],.mat-mdc-form-field-input-control[type=datetime-local],.mat-mdc-form-field-input-control[type=month],.mat-mdc-form-field-input-control[type=week],.mat-mdc-form-field-input-control[type=time]{line-height:1}.mat-mdc-form-field-input-control::-webkit-datetime-edit{line-height:1;padding:0;margin-bottom:-2px}.mat-mdc-form-field{--mat-mdc-form-field-floating-label-scale: 0.75;display:inline-flex;flex-direction:column;min-width:0;text-align:left;-moz-osx-font-smoothing:grayscale;-webkit-font-smoothing:antialiased;font-family:var(--mat-form-field-container-text-font, var(--mat-sys-body-large-font));line-height:var(--mat-form-field-container-text-line-height, var(--mat-sys-body-large-line-height));font-size:var(--mat-form-field-container-text-size, var(--mat-sys-body-large-size));letter-spacing:var(--mat-form-field-container-text-tracking, var(--mat-sys-body-large-tracking));font-weight:var(--mat-form-field-container-text-weight, var(--mat-sys-body-large-weight))}.mat-mdc-form-field .mdc-text-field--outlined .mdc-floating-label--float-above{font-size:calc(var(--mat-form-field-outlined-label-text-populated-size)*var(--mat-mdc-form-field-floating-label-scale))}.mat-mdc-form-field .mdc-text-field--outlined .mdc-notched-outline--upgraded .mdc-floating-label--float-above{font-size:var(--mat-form-field-outlined-label-text-populated-size)}[dir=rtl] .mat-mdc-form-field{text-align:right}.mat-mdc-form-field-flex{display:inline-flex;align-items:baseline;box-sizing:border-box;width:100%}.mat-mdc-text-field-wrapper{width:100%;z-index:0}.mat-mdc-form-field-icon-prefix,.mat-mdc-form-field-icon-suffix{align-self:center;line-height:0;pointer-events:auto;position:relative;z-index:1}.mat-mdc-form-field-icon-prefix>.mat-icon,.mat-mdc-form-field-icon-suffix>.mat-icon{padding:0 12px;box-sizing:content-box}.mat-mdc-form-field-icon-prefix{color:var(--mat-form-field-leading-icon-color, var(--mat-sys-on-surface-variant))}.mat-form-field-disabled .mat-mdc-form-field-icon-prefix{color:var(--mat-form-field-disabled-leading-icon-color, color-mix(in srgb, var(--mat-sys-on-surface) 38%, transparent))}.mat-mdc-form-field-icon-suffix{color:var(--mat-form-field-trailing-icon-color, var(--mat-sys-on-surface-variant))}.mat-form-field-disabled .mat-mdc-form-field-icon-suffix{color:var(--mat-form-field-disabled-trailing-icon-color, color-mix(in srgb, var(--mat-sys-on-surface) 38%, transparent))}.mat-form-field-invalid .mat-mdc-form-field-icon-suffix{color:var(--mat-form-field-error-trailing-icon-color, var(--mat-sys-error))}.mat-form-field-invalid:not(.mat-focused):not(.mat-form-field-disabled) .mat-mdc-text-field-wrapper:hover .mat-mdc-form-field-icon-suffix{color:var(--mat-form-field-error-hover-trailing-icon-color, var(--mat-sys-on-error-container))}.mat-form-field-invalid.mat-focused .mat-mdc-text-field-wrapper .mat-mdc-form-field-icon-suffix{color:var(--mat-form-field-error-focus-trailing-icon-color, var(--mat-sys-error))}.mat-mdc-form-field-icon-prefix,[dir=rtl] .mat-mdc-form-field-icon-suffix{padding:0 4px 0 0}.mat-mdc-form-field-icon-suffix,[dir=rtl] .mat-mdc-form-field-icon-prefix{padding:0 0 0 4px}.mat-mdc-form-field-subscript-wrapper .mat-icon,.mat-mdc-form-field label .mat-icon{width:1em;height:1em;font-size:inherit}.mat-mdc-form-field-infix{flex:auto;min-width:0;width:180px;position:relative;box-sizing:border-box}.mat-mdc-form-field-infix:has(textarea[cols]){width:auto}.mat-mdc-form-field .mdc-notched-outline__notch{margin-left:-1px;-webkit-clip-path:inset(-9em -999em -9em 1px);clip-path:inset(-9em -999em -9em 1px)}[dir=rtl] .mat-mdc-form-field .mdc-notched-outline__notch{margin-left:0;margin-right:-1px;-webkit-clip-path:inset(-9em 1px -9em -999em);clip-path:inset(-9em 1px -9em -999em)}.mat-mdc-form-field.mat-form-field-animations-enabled .mdc-floating-label{transition:transform 150ms cubic-bezier(0.4, 0, 0.2, 1),color 150ms cubic-bezier(0.4, 0, 0.2, 1)}.mat-mdc-form-field.mat-form-field-animations-enabled .mdc-text-field__input{transition:opacity 150ms cubic-bezier(0.4, 0, 0.2, 1)}.mat-mdc-form-field.mat-form-field-animations-enabled .mdc-text-field__input::placeholder{transition:opacity 67ms cubic-bezier(0.4, 0, 0.2, 1)}.mat-mdc-form-field.mat-form-field-animations-enabled .mdc-text-field__input::-moz-placeholder{transition:opacity 67ms cubic-bezier(0.4, 0, 0.2, 1)}.mat-mdc-form-field.mat-form-field-animations-enabled .mdc-text-field__input::-webkit-input-placeholder{transition:opacity 67ms cubic-bezier(0.4, 0, 0.2, 1)}.mat-mdc-form-field.mat-form-field-animations-enabled .mdc-text-field__input:-ms-input-placeholder{transition:opacity 67ms cubic-bezier(0.4, 0, 0.2, 1)}.mat-mdc-form-field.mat-form-field-animations-enabled.mdc-text-field--no-label .mdc-text-field__input::placeholder,.mat-mdc-form-field.mat-form-field-animations-enabled.mdc-text-field--focused .mdc-text-field__input::placeholder{transition-delay:40ms;transition-duration:110ms}.mat-mdc-form-field.mat-form-field-animations-enabled.mdc-text-field--no-label .mdc-text-field__input::-moz-placeholder,.mat-mdc-form-field.mat-form-field-animations-enabled.mdc-text-field--focused .mdc-text-field__input::-moz-placeholder{transition-delay:40ms;transition-duration:110ms}.mat-mdc-form-field.mat-form-field-animations-enabled.mdc-text-field--no-label .mdc-text-field__input::-webkit-input-placeholder,.mat-mdc-form-field.mat-form-field-animations-enabled.mdc-text-field--focused .mdc-text-field__input::-webkit-input-placeholder{transition-delay:40ms;transition-duration:110ms}.mat-mdc-form-field.mat-form-field-animations-enabled.mdc-text-field--no-label .mdc-text-field__input:-ms-input-placeholder,.mat-mdc-form-field.mat-form-field-animations-enabled.mdc-text-field--focused .mdc-text-field__input:-ms-input-placeholder{transition-delay:40ms;transition-duration:110ms}.mat-mdc-form-field.mat-form-field-animations-enabled .mdc-text-field--filled:not(.mdc-ripple-upgraded):focus .mdc-text-field__ripple::before{transition-duration:75ms}.mat-mdc-form-field.mat-form-field-animations-enabled .mdc-line-ripple::after{transition:transform 180ms cubic-bezier(0.4, 0, 0.2, 1),opacity 180ms cubic-bezier(0.4, 0, 0.2, 1)}.mat-mdc-form-field.mat-form-field-animations-enabled .mat-mdc-form-field-hint-wrapper,.mat-mdc-form-field.mat-form-field-animations-enabled .mat-mdc-form-field-error-wrapper{animation-duration:300ms}.mdc-notched-outline .mdc-floating-label{max-width:calc(100% + 1px)}.mdc-notched-outline--upgraded .mdc-floating-label--float-above{max-width:calc(133.3333333333% + 1px)}

.__wrap[_ngcontent-ng-c2605670751] {
  position: relative;
}

.__input[_ngcontent-ng-c2605670751] {
  padding-right: 36px;
}





.__wrap.is-masked[_ngcontent-ng-c2605670751]     input {
  -webkit-text-security: disc;
  letter-spacing: 0.05em;
}

.__visibility-icon[_ngcontent-ng-c2605670751] {
  position: absolute;
  top: -4px;
  right: 0;
  cursor: pointer;
  user-select: none;
  outline: none;
}</style><style ng-app-id="ng">.__compare-landscape[_ngcontent-ng-c2162118440] {

width: 100%; margin-top: 96px; } @media (min-width: 810px) { .__compare-landscape[_ngcontent-ng-c2162118440] { margin-top: 184px; } }

[_nghost-ng-c2162118440] { display: block; }

.__h3[_ngcontent-ng-c2162118440], .__h2[_ngcontent-ng-c2162118440], .__h1[_ngcontent-ng-c2162118440] { font-family: var(--font-family-brand); color: var(--mat-sys-on-surface); margin: 0; font-variation-settings: "CRSV" 1, "SHRP" 100, "slnt" 0; font-feature-settings: "tnum" on, "lnum" on; }

.__h1[_ngcontent-ng-c2162118440] { font-weight: 240; font-size: 32px; line-height: 40px; max-width: 760px; } @media (min-width: 650px) { .__h1[_ngcontent-ng-c2162118440] { font-size: 42px; line-height: 52px; } } @media (min-width: 1440px) { .__h1[_ngcontent-ng-c2162118440] { font-size: 52px; line-height: 62px; } }

.__h2[_ngcontent-ng-c2162118440] { font-weight: 240; font-size: 24px; line-height: 32px; max-width: 720px; } @media (min-width: 650px) { .__h2[_ngcontent-ng-c2162118440] { font-size: 30px; line-height: 40px; } } @media (min-width: 1440px) { .__h2[_ngcontent-ng-c2162118440] { font-size: 36px; line-height: 48px; } }

.__h3[_ngcontent-ng-c2162118440] { font-weight: 320; font-size: 20px; line-height: 28px; } @media (min-width: 1440px) { .__h3[_ngcontent-ng-c2162118440] { font-size: 24px; line-height: 32px; } }

.__sub[_ngcontent-ng-c2162118440], .__hero-sub[_ngcontent-ng-c2162118440] { font-family: var(--font-family-brand); font-weight: 240; font-size: 17px; line-height: 26px; color: var(--mat-sys-on-surface); opacity: 0.82; margin: 0; max-width: 620px; font-variation-settings: "CRSV" 1, "SHRP" 0; } @media (min-width: 1440px) { .__sub[_ngcontent-ng-c2162118440], .__hero-sub[_ngcontent-ng-c2162118440] { font-size: 19px; line-height: 30px; } }

.__body[_ngcontent-ng-c2162118440], .__ul[_ngcontent-ng-c2162118440], .__ol[_ngcontent-ng-c2162118440] { font-family: var(--font-family-brand); font-weight: 284; font-size: 15px; line-height: 24px; letter-spacing: 0.005em; color: var(--mat-sys-on-surface); margin: 0; max-width: 680px; font-variation-settings: "CRSV" 0, "SHRP" 0; } @media (min-width: 1440px) { .__body[_ngcontent-ng-c2162118440], .__ul[_ngcontent-ng-c2162118440], .__ol[_ngcontent-ng-c2162118440] { font-size: 16px; line-height: 26px; } } .__body[_ngcontent-ng-c2162118440] strong[_ngcontent-ng-c2162118440], .__ul[_ngcontent-ng-c2162118440] strong[_ngcontent-ng-c2162118440], .__ol[_ngcontent-ng-c2162118440] strong[_ngcontent-ng-c2162118440] { font-weight: 500; } .__body[_ngcontent-ng-c2162118440] em[_ngcontent-ng-c2162118440], .__ul[_ngcontent-ng-c2162118440] em[_ngcontent-ng-c2162118440], .__ol[_ngcontent-ng-c2162118440] em[_ngcontent-ng-c2162118440] { font-style: italic; font-variation-settings: "CRSV" 1, "SHRP" 0, "slnt" -8; } .__body[_ngcontent-ng-c2162118440] code[_ngcontent-ng-c2162118440], .__ul[_ngcontent-ng-c2162118440] code[_ngcontent-ng-c2162118440], .__ol[_ngcontent-ng-c2162118440] code[_ngcontent-ng-c2162118440] { font-family: var(--font-family-mono, ui-monospace, SFMono-Regular, "SF Mono", Menlo, monospace); font-size: 0.88em; font-weight: 400; letter-spacing: -0.01em; padding: 0.1em 0.3em; border-radius: 4px; background: color-mix(in srgb, var(--mat-sys-on-surface) 7%, transparent); }

.__ul[_ngcontent-ng-c2162118440], .__ol[_ngcontent-ng-c2162118440] { padding-left: 22px; } .__ul[_ngcontent-ng-c2162118440] li[_ngcontent-ng-c2162118440], .__ol[_ngcontent-ng-c2162118440] li[_ngcontent-ng-c2162118440] { margin-bottom: 6px; }

.__ul--compare[_ngcontent-ng-c2162118440] li[_ngcontent-ng-c2162118440] { margin-bottom: 10px; }

.__text-block[_ngcontent-ng-c2162118440] { display: flex; flex-direction: column; gap: 24px; }

.__text-block--centered[_ngcontent-ng-c2162118440] { align-items: center; text-align: center; } .__text-block--centered[_ngcontent-ng-c2162118440] .__body[_ngcontent-ng-c2162118440], .__text-block--centered[_ngcontent-ng-c2162118440] .__sub[_ngcontent-ng-c2162118440], .__text-block--centered[_ngcontent-ng-c2162118440] .__hero-sub[_ngcontent-ng-c2162118440], .__text-block--centered[_ngcontent-ng-c2162118440] .__ol[_ngcontent-ng-c2162118440], .__text-block--centered[_ngcontent-ng-c2162118440] .__ul[_ngcontent-ng-c2162118440] { margin-left: auto; margin-right: auto; } .__text-block--centered[_ngcontent-ng-c2162118440] .__ol[_ngcontent-ng-c2162118440], .__text-block--centered[_ngcontent-ng-c2162118440] .__ul[_ngcontent-ng-c2162118440] { text-align: left; }

.__recipes[_ngcontent-ng-c2162118440] { position: relative; }

.__greenfield[_ngcontent-ng-c2162118440] { position: relative; padding: clamp(40px, 6vw, 96px) 16px clamp(64px, 9vw, 128px); display: flex; flex-direction: column; align-items: center; } @media (min-width: 810px) { .__greenfield[_ngcontent-ng-c2162118440] { padding-left: 24px; padding-right: 24px; } }

.__greenfield-form[_ngcontent-ng-c2162118440] { width: 100%; max-width: 480px; display: flex; flex-direction: column; gap: 40px; margin-top: clamp(48px, 7vw, 80px); }

.__greenfield-field[_ngcontent-ng-c2162118440] { width: 100%; --mat-form-field-container-height: 64px; --mat-form-field-container-vertical-padding: 18px; --mat-form-field-outlined-input-text-size: 20px; --mdc-outlined-text-field-input-text-size: 20px; --mat-form-field-container-text-size: 20px; --mat-form-field-container-text-line-height: 28px; }

zui-zagent-mini-card[_ngcontent-ng-c2162118440] { display: block; width: 100%; max-width: none; margin: 0; --zagent-card-bg: transparent; --zagent-card-bg-hover: transparent; --zagent-card-padding: 0; --zagent-head-padding: 0 0 20px; --zagent-head-label-padding-left: 16px; --zagent-tiles-gap: 14px; --zagent-tile-padding: 18px 20px; --zagent-tile-gap: 14px; }

.__greenfield-deploy[_ngcontent-ng-c2162118440] { width: 100%; --mat-button-filled-container-height: 48px; --mat-button-filled-container-shape: 6px; --mat-button-filled-container-color: var(--mat-sys-on-surface); --mat-button-filled-label-text-color: var(--mat-sys-surface); --mat-button-filled-ripple-color: color-mix(in srgb, var(--mat-sys-surface) 12%, transparent); --mat-button-filled-state-layer-color: var(--mat-sys-surface); --mat-button-filled-label-text-font: var(--font-family-brand), sans-serif; --mat-button-filled-label-text-size: 12px; --mat-button-filled-label-text-tracking: 0.18em; --mat-button-filled-label-text-weight: 600; --mat-button-filled-hover-state-layer-opacity: 0.08; --mat-button-filled-pressed-state-layer-opacity: 0.12; box-shadow: var(--alt-card-btn-shadow); }

.sr-only[_ngcontent-ng-c2162118440] { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0; }

.__scr-show-pill[_ngcontent-ng-c2162118440], .__scr-panel[_ngcontent-ng-c2162118440], .__scr-bar[_ngcontent-ng-c2162118440] { background: color-mix(in srgb, var(--mat-sys-surface-container-low) 88%, transparent); backdrop-filter: blur(14px) saturate(140%); -webkit-backdrop-filter: blur(14px) saturate(140%); color: var(--mat-sys-on-surface); border: 1px solid color-mix(in srgb, var(--mat-sys-outline-variant) 70%, transparent); box-shadow: 0 -12px 36px -16px rgba(0, 0, 0, 0.45); }

.__scr-bar[_ngcontent-ng-c2162118440] { position: fixed; left: 50%; bottom: 16px; transform: translateX(-50%); width: min(1280px, 100vw - 32px); display: flex; flex-direction: column; gap: 8px; padding: 10px 14px 12px; border-radius: 14px; font-family: var(--font-family-mono, ui-monospace, SFMono-Regular, "JetBrains Mono", monospace); font-size: 12px; z-index: 9998; }

.__scr-bar-head[_ngcontent-ng-c2162118440] { display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; gap: 12px; min-height: 18px; }

.__scr-phase[_ngcontent-ng-c2162118440] { justify-self: start; min-width: 0; display: inline-flex; align-items: center; gap: 8px; font-size: 11px; letter-spacing: 0.04em; text-transform: uppercase; color: color-mix(in srgb, var(--mat-sys-on-surface) 80%, transparent); }

.__scr-bar-actions[_ngcontent-ng-c2162118440] { justify-self: end; display: inline-flex; align-items: center; gap: 2px; }

.__scr-phase-beat[_ngcontent-ng-c2162118440] { display: inline-flex; align-items: center; justify-content: center; min-width: 22px; height: 18px; padding: 0 5px; border-radius: 4px; font-weight: 700; font-size: 10px; letter-spacing: 0.04em; background: color-mix(in srgb, var(--mat-sys-primary) 18%, transparent); color: var(--mat-sys-primary); }

.__scr-phase-beat--neutral[_ngcontent-ng-c2162118440] { background: color-mix(in srgb, var(--mat-sys-on-surface) 8%, transparent); color: color-mix(in srgb, var(--mat-sys-on-surface) 55%, transparent); }

.__scr-phase-label[_ngcontent-ng-c2162118440] { font-family: inherit; font-weight: 500; font-size: 11px; color: var(--mat-sys-on-surface); text-transform: none; letter-spacing: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 38vw; }

.__scr-time[_ngcontent-ng-c2162118440] { justify-self: center; display: inline-grid; grid-template-columns: 5ch auto 6ch; align-items: baseline; gap: 4px; font-variant-numeric: tabular-nums; font-size: 11px; letter-spacing: 0.02em; color: color-mix(in srgb, var(--mat-sys-on-surface) 80%, transparent); text-align: center; }

.__scr-time-cur[_ngcontent-ng-c2162118440] { color: var(--mat-sys-primary); font-weight: 600; text-align: right; }

.__scr-time-sep[_ngcontent-ng-c2162118440] { opacity: 0.5; text-align: center; }

.__scr-time-tot[_ngcontent-ng-c2162118440] { opacity: 0.7; text-align: left; }

.__scr-bar-row[_ngcontent-ng-c2162118440] { display: grid; grid-template-columns: auto 1fr auto; align-items: center; gap: 14px; }

.__scr-transport[_ngcontent-ng-c2162118440] { display: inline-flex; align-items: center; gap: 4px; }

.__scr-play[_ngcontent-ng-c2162118440] { appearance: none; border: 1px solid color-mix(in srgb, var(--mat-sys-primary) 60%, transparent); background: var(--mat-sys-primary); color: var(--mat-sys-on-primary); width: 34px; height: 28px; border-radius: 8px; font-family: inherit; font-size: 13px; line-height: 1; font-weight: 700; cursor: pointer; display: inline-flex; align-items: center; justify-content: center; transition: transform 120ms ease, filter 120ms ease; } .__scr-play[_ngcontent-ng-c2162118440]:hover { filter: brightness(1.08); } .__scr-play[_ngcontent-ng-c2162118440]:active { transform: scale(0.96); }

.__scr-icon-btn[_ngcontent-ng-c2162118440], .__scr-speed-btn[_ngcontent-ng-c2162118440] { appearance: none; border: 1px solid color-mix(in srgb, var(--mat-sys-outline-variant) 70%, transparent); background: color-mix(in srgb, var(--mat-sys-on-surface) 4%, transparent); color: var(--mat-sys-on-surface); height: 24px; min-width: 24px; padding: 0 7px; border-radius: 6px; font-family: inherit; font-size: 11px; font-weight: 500; letter-spacing: 0.02em; cursor: pointer; display: inline-flex; align-items: center; justify-content: center; transition: background 120ms ease, border-color 120ms ease, color 120ms ease; user-select: none; } .__scr-icon-btn[_ngcontent-ng-c2162118440]:hover, .__scr-speed-btn[_ngcontent-ng-c2162118440]:hover { background: color-mix(in srgb, var(--mat-sys-on-surface) 10%, transparent); border-color: color-mix(in srgb, var(--mat-sys-outline) 80%, transparent); } .__scr-icon-btn.is-active[_ngcontent-ng-c2162118440], .is-active.__scr-speed-btn[_ngcontent-ng-c2162118440] { color: var(--mat-sys-on-primary); background: var(--mat-sys-primary); border-color: var(--mat-sys-primary); } .__scr-icon-btn[_ngcontent-ng-c2162118440]:focus-visible, .__scr-speed-btn[_ngcontent-ng-c2162118440]:focus-visible { outline: 2px solid var(--mat-sys-primary); outline-offset: 2px; }

.__scr-bar-head[_ngcontent-ng-c2162118440] .__scr-bar-actions[_ngcontent-ng-c2162118440] .__scr-icon-btn[_ngcontent-ng-c2162118440], .__scr-bar-head[_ngcontent-ng-c2162118440] .__scr-bar-actions[_ngcontent-ng-c2162118440] .__scr-speed-btn[_ngcontent-ng-c2162118440] { width: 24px; height: 24px; min-width: 0; padding: 0; font-size: 12px; line-height: 1; }

.__scr-help-btn[_ngcontent-ng-c2162118440] { margin-left: auto; }

.__scr-track-wrap[_ngcontent-ng-c2162118440] { position: relative; height: 28px; display: flex; align-items: center; overflow: visible; }

.__scr-native[_ngcontent-ng-c2162118440] { position: absolute; inset: 0; width: 100%; height: 100%; margin: 0; opacity: 0; pointer-events: none; z-index: -1; } .__scr-native[_ngcontent-ng-c2162118440]:focus-visible { opacity: 0.001; outline: 2px solid var(--mat-sys-primary); outline-offset: -2px; border-radius: 8px; z-index: 5; }

.__scr-track[_ngcontent-ng-c2162118440] { position: relative; width: 100%; height: 28px; border-radius: 6px; background: color-mix(in srgb, var(--mat-sys-on-surface) 6%, transparent); border: 1px solid color-mix(in srgb, var(--mat-sys-outline-variant) 50%, transparent); cursor: ew-resize; overflow: visible; touch-action: none; } .__scr-track[_ngcontent-ng-c2162118440]:hover { background: color-mix(in srgb, var(--mat-sys-on-surface) 9%, transparent); }

.__scr-track[_ngcontent-ng-c2162118440] > .__scr-beat-bands[_ngcontent-ng-c2162118440], .__scr-track[_ngcontent-ng-c2162118440] > .__scr-fill[_ngcontent-ng-c2162118440], .__scr-track[_ngcontent-ng-c2162118440] > .__scr-loop[_ngcontent-ng-c2162118440] { border-radius: 6px; }

.__scr-beat-bands[_ngcontent-ng-c2162118440] { position: absolute; inset: 0; pointer-events: none; }

.__scr-beat-band[_ngcontent-ng-c2162118440] { position: absolute; top: 0; bottom: 0; transition: background 200ms ease; } .__scr-beat-band[data-beat="1"][_ngcontent-ng-c2162118440] { background: hsla(180, 70%, 55%, 0.1); } .__scr-beat-band[data-beat="1"].is-active[_ngcontent-ng-c2162118440] { background: hsla(180, 70%, 55%, 0.22); } .__scr-beat-band[data-beat="2"][_ngcontent-ng-c2162118440] { background: hsla(210, 70%, 55%, 0.1); } .__scr-beat-band[data-beat="2"].is-active[_ngcontent-ng-c2162118440] { background: hsla(210, 70%, 55%, 0.22); } .__scr-beat-band[data-beat="3"][_ngcontent-ng-c2162118440] { background: hsla(265, 70%, 55%, 0.1); } .__scr-beat-band[data-beat="3"].is-active[_ngcontent-ng-c2162118440] { background: hsla(265, 70%, 55%, 0.22); } .__scr-beat-band[data-beat="4"][_ngcontent-ng-c2162118440] { background: hsla(305, 70%, 55%, 0.1); } .__scr-beat-band[data-beat="4"].is-active[_ngcontent-ng-c2162118440] { background: hsla(305, 70%, 55%, 0.22); } .__scr-beat-band[data-beat="5"][_ngcontent-ng-c2162118440] { background: hsla(345, 70%, 55%, 0.1); } .__scr-beat-band[data-beat="5"].is-active[_ngcontent-ng-c2162118440] { background: hsla(345, 70%, 55%, 0.22); } .__scr-beat-band[data-beat="6"][_ngcontent-ng-c2162118440] { background: hsla(35, 70%, 55%, 0.1); } .__scr-beat-band[data-beat="6"].is-active[_ngcontent-ng-c2162118440] { background: hsla(35, 70%, 55%, 0.22); } .__scr-beat-band[data-beat="7"][_ngcontent-ng-c2162118440] { background: hsla(75, 70%, 55%, 0.1); } .__scr-beat-band[data-beat="7"].is-active[_ngcontent-ng-c2162118440] { background: hsla(75, 70%, 55%, 0.22); }

.__scr-fill[_ngcontent-ng-c2162118440] { position: absolute; left: 0; top: 0; bottom: 0; background: linear-gradient(90deg, color-mix(in srgb, var(--mat-sys-primary) 18%, transparent), color-mix(in srgb, var(--mat-sys-primary) 32%, transparent)); pointer-events: none; transition: width 60ms linear; }

.__scr-loop[_ngcontent-ng-c2162118440] { position: absolute; top: 2px; bottom: 2px; background: color-mix(in srgb, var(--mat-sys-tertiary) 18%, transparent); border: 1px dashed color-mix(in srgb, var(--mat-sys-tertiary) 60%, transparent); border-radius: 4px; pointer-events: none; opacity: 0.55; transition: opacity 200ms ease; } .__scr-loop.is-enabled[_ngcontent-ng-c2162118440] { opacity: 1; background: color-mix(in srgb, var(--mat-sys-tertiary) 26%, transparent); border-style: solid; }

.__scr-tick[_ngcontent-ng-c2162118440] { position: absolute; top: 4px; bottom: 4px; width: 2px; margin-left: -1px; border-radius: 1px; background: color-mix(in srgb, var(--mat-sys-on-surface) 42%, transparent); pointer-events: none; z-index: 2; transition: background 120ms ease, transform 120ms ease; } .__scr-tick.__scr-tick--global[_ngcontent-ng-c2162118440] { background: color-mix(in srgb, var(--mat-sys-on-surface) 75%, transparent); top: 2px; bottom: 2px; } .__scr-tick.is-active[_ngcontent-ng-c2162118440] { background: var(--mat-sys-primary); box-shadow: 0 0 0 2px color-mix(in srgb, var(--mat-sys-primary) 22%, transparent); transform: scaleX(1.4); }

.__scr-head[_ngcontent-ng-c2162118440] { position: absolute; top: -8px; bottom: -8px; width: 2px; margin-left: -1px; background: var(--mat-sys-primary); box-shadow: 0 0 0 1px color-mix(in srgb, var(--mat-sys-surface) 60%, transparent), 0 0 14px color-mix(in srgb, var(--mat-sys-primary) 55%, transparent); pointer-events: none; z-index: 4; transition: left 60ms linear; } .__scr-head[_ngcontent-ng-c2162118440]::before { content: ""; position: absolute; left: 50%; top: -6px; width: 16px; height: 16px; margin-left: -8px; border-radius: 50%; background: var(--mat-sys-primary); border: 2px solid var(--mat-sys-surface); box-shadow: 0 1px 4px rgba(0, 0, 0, 0.18), 0 0 0 1px color-mix(in srgb, var(--mat-sys-primary) 40%, transparent); pointer-events: auto; cursor: ew-resize; transition: transform 120ms ease, box-shadow 120ms ease; } .__scr-head[_ngcontent-ng-c2162118440]:hover::before, .__scr-track[_ngcontent-ng-c2162118440]:active .__scr-head[_ngcontent-ng-c2162118440]::before { transform: scale(1.15); box-shadow: 0 2px 6px rgba(0, 0, 0, 0.22), 0 0 0 4px color-mix(in srgb, var(--mat-sys-primary) 18%, transparent); }

.__scr-loop-handle[_ngcontent-ng-c2162118440] { position: absolute; top: -3px; bottom: -3px; width: 12px; margin-left: -6px; padding: 0; background: var(--mat-sys-tertiary); border: 1px solid color-mix(in srgb, var(--mat-sys-tertiary) 80%, transparent); border-radius: 3px; cursor: ew-resize; z-index: 5; box-shadow: 0 1px 6px color-mix(in srgb, var(--mat-sys-tertiary) 45%, transparent); touch-action: none; } .__scr-loop-handle[_ngcontent-ng-c2162118440]:hover { filter: brightness(1.1); } .__scr-loop-handle[_ngcontent-ng-c2162118440]::after { content: ""; position: absolute; inset: 4px 4px; border-left: 1px solid color-mix(in srgb, var(--mat-sys-on-tertiary) 70%, transparent); border-right: 1px solid color-mix(in srgb, var(--mat-sys-on-tertiary) 70%, transparent); }

.__scr-speed-tag[_ngcontent-ng-c2162118440] { appearance: none; border: 1px solid color-mix(in srgb, var(--mat-sys-outline-variant) 80%, transparent); background: color-mix(in srgb, var(--mat-sys-on-surface) 6%, transparent); color: var(--mat-sys-on-surface); font-family: inherit; font-size: 11px; font-weight: 600; letter-spacing: 0.02em; padding: 0 8px; height: 28px; min-width: 44px; border-radius: 6px; cursor: pointer; font-variant-numeric: tabular-nums; } .__scr-speed-tag[_ngcontent-ng-c2162118440]:hover { background: color-mix(in srgb, var(--mat-sys-on-surface) 10%, transparent); }

.__scr-panel[_ngcontent-ng-c2162118440] { position: fixed; left: 50%; bottom: 92px; transform: translateX(-50%); width: min(1280px, 100vw - 32px); display: flex; flex-direction: column; gap: 12px; padding: 14px 16px 16px; border-radius: 14px; font-family: var(--font-family-mono, ui-monospace, SFMono-Regular, "JetBrains Mono", monospace); font-size: 12px; z-index: 9999; animation: __scr-panel-in 180ms cubic-bezier(0.22, 1, 0.36, 1); max-height: calc(100svh - 140px); overflow-y: auto; }

@keyframes _ngcontent-ng-c2162118440___scr-panel-in { from { opacity: 0; transform: translate(-50%, 8px); } to { opacity: 1; transform: translate(-50%, 0); } } .__scr-beats[_ngcontent-ng-c2162118440] { display: flex; flex-wrap: wrap; gap: 6px; }

.__scr-beat-group[_ngcontent-ng-c2162118440] { display: inline-flex; flex-direction: column; align-items: stretch; border: 1px solid color-mix(in srgb, var(--mat-sys-outline-variant) 60%, transparent); border-radius: 8px; overflow: hidden; background: color-mix(in srgb, var(--mat-sys-on-surface) 3%, transparent); transition: border-color 120ms ease, background 120ms ease; } .__scr-beat-group.is-active[_ngcontent-ng-c2162118440] { border-color: color-mix(in srgb, var(--mat-sys-primary) 55%, transparent); background: color-mix(in srgb, var(--mat-sys-primary) 8%, transparent); } .__scr-beat-group.is-expanded[_ngcontent-ng-c2162118440] { width: 100%; background: color-mix(in srgb, var(--mat-sys-on-surface) 6%, transparent); }

.__scr-beat-head[_ngcontent-ng-c2162118440] { appearance: none; border: none; background: transparent; color: var(--mat-sys-on-surface); display: inline-flex; align-items: center; gap: 6px; padding: 4px 10px; height: 26px; font-family: inherit; font-size: 11px; font-weight: 600; letter-spacing: 0.04em; cursor: pointer; } .__scr-beat-group.is-active[_ngcontent-ng-c2162118440] .__scr-beat-head[_ngcontent-ng-c2162118440] { color: var(--mat-sys-primary); }

.__scr-beat-name[_ngcontent-ng-c2162118440] { font-weight: 700; letter-spacing: 0.06em; }

.__scr-beat-count[_ngcontent-ng-c2162118440] { display: inline-flex; align-items: center; justify-content: center; min-width: 16px; height: 14px; padding: 0 4px; border-radius: 999px; background: color-mix(in srgb, var(--mat-sys-on-surface) 12%, transparent); color: color-mix(in srgb, var(--mat-sys-on-surface) 80%, transparent); font-size: 9px; font-weight: 600; }

.__scr-beat-subs[_ngcontent-ng-c2162118440] { display: flex; flex-wrap: wrap; gap: 4px; padding: 6px 8px 8px; border-top: 1px solid color-mix(in srgb, var(--mat-sys-outline-variant) 50%, transparent); }

.__scr-sub-chip[_ngcontent-ng-c2162118440] { appearance: none; border: 1px solid color-mix(in srgb, var(--mat-sys-outline-variant) 60%, transparent); background: color-mix(in srgb, var(--mat-sys-surface) 60%, transparent); color: var(--mat-sys-on-surface); font-family: inherit; font-size: 10px; padding: 3px 8px; border-radius: 999px; cursor: pointer; display: inline-flex; align-items: center; gap: 6px; letter-spacing: 0.02em; transition: background 120ms ease, color 120ms ease, border-color 120ms ease; } .__scr-sub-chip[_ngcontent-ng-c2162118440]:hover { background: color-mix(in srgb, var(--mat-sys-on-surface) 10%, transparent); border-color: color-mix(in srgb, var(--mat-sys-outline) 80%, transparent); } .__scr-sub-chip.is-active[_ngcontent-ng-c2162118440] { color: var(--mat-sys-on-primary); background: var(--mat-sys-primary); border-color: var(--mat-sys-primary); }

.__scr-sub-label[_ngcontent-ng-c2162118440] { text-transform: lowercase; }

.__scr-sub-time[_ngcontent-ng-c2162118440] { font-variant-numeric: tabular-nums; opacity: 0.7; font-size: 9px; }

.__scr-controls[_ngcontent-ng-c2162118440] { display: flex; flex-wrap: wrap; gap: 16px; align-items: center; padding-top: 6px; border-top: 1px solid color-mix(in srgb, var(--mat-sys-outline-variant) 40%, transparent); }

.__scr-control-group[_ngcontent-ng-c2162118440] { display: inline-flex; align-items: center; gap: 4px; }

.__scr-control-label[_ngcontent-ng-c2162118440] { font-size: 10px; letter-spacing: 0.08em; text-transform: uppercase; color: color-mix(in srgb, var(--mat-sys-on-surface) 55%, transparent); margin-right: 4px; }

.__scr-speed-btn[_ngcontent-ng-c2162118440] { font-variant-numeric: tabular-nums; min-width: 38px; }

.__scr-loop-readout[_ngcontent-ng-c2162118440] { font-variant-numeric: tabular-nums; font-size: 10px; letter-spacing: 0.02em; color: color-mix(in srgb, var(--mat-sys-on-surface) 70%, transparent); padding: 0 6px; }

.__scr-help[_ngcontent-ng-c2162118440] { padding: 10px 12px; background: color-mix(in srgb, var(--mat-sys-on-surface) 4%, transparent); border: 1px dashed color-mix(in srgb, var(--mat-sys-outline-variant) 70%, transparent); border-radius: 8px; }

.__scr-help-list[_ngcontent-ng-c2162118440] { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 6px 14px; } .__scr-help-list[_ngcontent-ng-c2162118440] li[_ngcontent-ng-c2162118440] { display: inline-flex; align-items: center; gap: 6px; font-size: 11px; color: color-mix(in srgb, var(--mat-sys-on-surface) 80%, transparent); } .__scr-help-list[_ngcontent-ng-c2162118440] kbd[_ngcontent-ng-c2162118440] { display: inline-flex; align-items: center; justify-content: center; min-width: 20px; height: 18px; padding: 0 5px; border: 1px solid color-mix(in srgb, var(--mat-sys-outline-variant) 80%, transparent); border-bottom-width: 2px; border-radius: 4px; background: color-mix(in srgb, var(--mat-sys-on-surface) 6%, transparent); color: var(--mat-sys-on-surface); font-family: var(--font-family-mono, ui-monospace, monospace); font-size: 10px; font-weight: 600; }

@keyframes _ngcontent-ng-c2162118440___insp-flash { 0% { background: color-mix(in srgb, var(--mat-sys-primary) 22%, transparent); } 100% { background: transparent; } } body.__insp-scrubbing[_ngcontent-ng-c2162118440] { cursor: ew-resize !important; user-select: none; -webkit-user-select: none; }

.is-popout[_nghost-ng-c2162118440] { background: var(--mat-sys-surface); } .is-popout[_nghost-ng-c2162118440] .__hero[_ngcontent-ng-c2162118440], .is-popout[_nghost-ng-c2162118440] .__beat[_ngcontent-ng-c2162118440], .is-popout[_nghost-ng-c2162118440] .__spacer[_ngcontent-ng-c2162118440] { display: none !important; } .is-popout[_nghost-ng-c2162118440] .__insp[_ngcontent-ng-c2162118440] { position: fixed; left: 0 !important; top: 0 !important; width: 100vw !important; height: calc(100vh - 88px) !important; border-radius: 0; border: none; } .is-popout[_nghost-ng-c2162118440] .__insp-head-grip[_ngcontent-ng-c2162118440], .is-popout[_nghost-ng-c2162118440] .__insp-resize[_ngcontent-ng-c2162118440] { display: none; } .is-popout[_nghost-ng-c2162118440] .__insp-head-actions[_ngcontent-ng-c2162118440] button[aria-label="Pop out to new window"][_ngcontent-ng-c2162118440] { display: none; }

.__insp[_ngcontent-ng-c2162118440] { position: fixed; z-index: 9997; display: flex; flex-direction: column; min-height: 0; background: color-mix(in srgb, var(--mat-sys-surface-container-low) 96%, transparent); backdrop-filter: blur(14px) saturate(140%); -webkit-backdrop-filter: blur(14px) saturate(140%); border: 1px solid color-mix(in srgb, var(--mat-sys-outline-variant) 70%, transparent); border-radius: 12px; box-shadow: 0 12px 32px -8px rgba(0, 0, 0, 0.18), 0 1px 0 0 color-mix(in srgb, var(--mat-sys-on-surface) 4%, transparent) inset; color: var(--mat-sys-on-surface); font-family: ui-monospace, "SF Mono", Menlo, Consolas, monospace; font-size: 11px; font-feature-settings: "tnum"; overflow: hidden; animation: __insp-enter 180ms cubic-bezier(0.22, 1, 0.36, 1); }

.__insp-head[_ngcontent-ng-c2162118440] { cursor: grab; user-select: none; } .__insp-head[_ngcontent-ng-c2162118440]:active { cursor: grabbing; }

.__insp-head-grip[_ngcontent-ng-c2162118440] { display: inline-block; font-size: 10px; letter-spacing: -1.5px; color: color-mix(in srgb, var(--mat-sys-on-surface) 40%, transparent); padding: 0 4px 0 2px; cursor: grab; }

.__insp-resize[_ngcontent-ng-c2162118440] { position: absolute; right: 2px; bottom: 2px; width: 16px; height: 16px; border: none; background: transparent; color: color-mix(in srgb, var(--mat-sys-on-surface) 35%, transparent); cursor: nwse-resize; font-size: 12px; line-height: 1; padding: 0; display: inline-flex; align-items: center; justify-content: center; z-index: 5; transition: color 120ms ease; } .__insp-resize[_ngcontent-ng-c2162118440]:hover { color: var(--mat-sys-primary); }

@keyframes _ngcontent-ng-c2162118440___insp-enter { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: translateY(0); } } .__insp-body--tracks[_ngcontent-ng-c2162118440] { flex: 1; display: grid; grid-template-rows: auto 1fr; min-height: 0; overflow: hidden; }

.__insp.is-minimized[_ngcontent-ng-c2162118440] .__insp-toolbar[_ngcontent-ng-c2162118440], .__insp.is-minimized[_ngcontent-ng-c2162118440] .__insp-body[_ngcontent-ng-c2162118440], .__insp.is-minimized[_ngcontent-ng-c2162118440] .__insp-foot[_ngcontent-ng-c2162118440], .__insp.is-minimized[_ngcontent-ng-c2162118440] .__insp-resize[_ngcontent-ng-c2162118440] { display: none; } .__insp.is-minimized[_ngcontent-ng-c2162118440] .__insp-head[_ngcontent-ng-c2162118440] { border-bottom: none; }

.__insp-tracks[_ngcontent-ng-c2162118440] { position: relative; padding: 8px 12px 6px; border-bottom: 1px solid color-mix(in srgb, var(--mat-sys-outline-variant) 40%, transparent); background: color-mix(in srgb, var(--mat-sys-on-surface) 2%, transparent); overflow: auto; min-height: 0; }

.__insp-axis[_ngcontent-ng-c2162118440] { position: relative; height: 14px; margin-bottom: 4px; border-bottom: 1px dashed color-mix(in srgb, var(--mat-sys-outline-variant) 50%, transparent); }

.__insp-axis-tick[_ngcontent-ng-c2162118440] { position: absolute; top: 0; transform: translateX(-50%); font-size: 9px; font-variant-numeric: tabular-nums; color: color-mix(in srgb, var(--mat-sys-on-surface) 50%, transparent); padding: 0 3px; background: color-mix(in srgb, var(--mat-sys-surface-container-low) 90%, transparent); } .__insp-axis-tick[_ngcontent-ng-c2162118440]::after { content: ""; position: absolute; left: 50%; bottom: -4px; width: 1px; height: 4px; background: color-mix(in srgb, var(--mat-sys-on-surface) 30%, transparent); }

.__insp-bands[_ngcontent-ng-c2162118440] { position: relative; height: 22px; margin-bottom: 6px; }

.__insp-band[_ngcontent-ng-c2162118440] { position: absolute; top: 0; bottom: 0; appearance: none; border: 1px solid transparent; border-radius: 4px; display: flex; align-items: center; padding: 0 8px; cursor: pointer; font-family: inherit; text-align: left; overflow: hidden; transition: background 120ms ease, border-color 120ms ease; } .__insp-band[data-beat="1"][_ngcontent-ng-c2162118440] { background: color-mix(in srgb, #4ade80 18%, transparent); border-color: color-mix(in srgb, #4ade80 30%, transparent); } .__insp-band[data-beat="2"][_ngcontent-ng-c2162118440] { background: color-mix(in srgb, #38bdf8 18%, transparent); border-color: color-mix(in srgb, #38bdf8 30%, transparent); } .__insp-band[data-beat="3"][_ngcontent-ng-c2162118440] { background: color-mix(in srgb, #a78bfa 18%, transparent); border-color: color-mix(in srgb, #a78bfa 30%, transparent); } .__insp-band[data-beat="4"][_ngcontent-ng-c2162118440] { background: color-mix(in srgb, #fb923c 18%, transparent); border-color: color-mix(in srgb, #fb923c 30%, transparent); } .__insp-band[data-beat="5"][_ngcontent-ng-c2162118440] { background: color-mix(in srgb, #f472b6 18%, transparent); border-color: color-mix(in srgb, #f472b6 30%, transparent); } .__insp-band[data-beat="6"][_ngcontent-ng-c2162118440] { background: color-mix(in srgb, #facc15 18%, transparent); border-color: color-mix(in srgb, #facc15 30%, transparent); } .__insp-band[data-beat="7"][_ngcontent-ng-c2162118440] { background: color-mix(in srgb, #34d399 18%, transparent); border-color: color-mix(in srgb, #34d399 30%, transparent); } .__insp-band[_ngcontent-ng-c2162118440]:hover { filter: brightness(1.1); } .__insp-band.is-active[_ngcontent-ng-c2162118440] { box-shadow: 0 0 0 2px color-mix(in srgb, var(--mat-sys-primary) 60%, transparent); }

.__insp-band-label[_ngcontent-ng-c2162118440] { font-size: 9.5px; font-weight: 700; letter-spacing: 0.05em; text-transform: uppercase; color: color-mix(in srgb, var(--mat-sys-on-surface) 85%, transparent); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

.__insp-lanes[_ngcontent-ng-c2162118440] { position: relative; min-height: 24px; background: repeating-linear-gradient(to right, transparent 0, transparent calc(20% - 1px), color-mix(in srgb, var(--mat-sys-on-surface) 4%, transparent) calc(20% - 1px), color-mix(in srgb, var(--mat-sys-on-surface) 4%, transparent) 20%); }

.__insp-bar[_ngcontent-ng-c2162118440] { position: absolute; height: 18px; appearance: none; border: 1px solid color-mix(in srgb, var(--mat-sys-on-surface) 28%, transparent); border-radius: 3px; background: color-mix(in srgb, var(--mat-sys-surface-container-high) 85%, transparent); display: flex; align-items: center; padding: 0 5px; cursor: pointer; font-family: inherit; font-size: 9px; font-weight: 600; letter-spacing: 0.02em; color: color-mix(in srgb, var(--mat-sys-on-surface) 80%, transparent); overflow: hidden; text-align: left; transition: background 100ms ease, border-color 100ms ease, transform 100ms ease; } .__insp-bar[data-beat="1"][_ngcontent-ng-c2162118440] { background: color-mix(in srgb, #4ade80 22%, var(--mat-sys-surface-container-high)); } .__insp-bar[data-beat="2"][_ngcontent-ng-c2162118440] { background: color-mix(in srgb, #38bdf8 22%, var(--mat-sys-surface-container-high)); } .__insp-bar[data-beat="3"][_ngcontent-ng-c2162118440] { background: color-mix(in srgb, #a78bfa 22%, var(--mat-sys-surface-container-high)); } .__insp-bar[data-beat="4"][_ngcontent-ng-c2162118440] { background: color-mix(in srgb, #fb923c 22%, var(--mat-sys-surface-container-high)); } .__insp-bar[data-beat="5"][_ngcontent-ng-c2162118440] { background: color-mix(in srgb, #f472b6 22%, var(--mat-sys-surface-container-high)); } .__insp-bar[data-beat="6"][_ngcontent-ng-c2162118440] { background: color-mix(in srgb, #facc15 22%, var(--mat-sys-surface-container-high)); } .__insp-bar[data-beat="7"][_ngcontent-ng-c2162118440] { background: color-mix(in srgb, #34d399 22%, var(--mat-sys-surface-container-high)); } .__insp-bar[_ngcontent-ng-c2162118440]:hover { filter: brightness(1.15); transform: translateY(-1px); } .__insp-bar.is-selected[_ngcontent-ng-c2162118440] { border: 2px solid var(--mat-sys-primary); box-shadow: 0 0 0 1px color-mix(in srgb, var(--mat-sys-primary) 40%, transparent), 0 0 12px color-mix(in srgb, var(--mat-sys-primary) 35%, transparent); color: var(--mat-sys-on-surface); z-index: 2; } .__insp-bar.is-here[_ngcontent-ng-c2162118440] { box-shadow: 0 0 0 2px color-mix(in srgb, var(--mat-sys-primary) 60%, transparent); } .__insp-bar.is-looping[_ngcontent-ng-c2162118440] { outline: 1px dashed var(--mat-sys-primary); outline-offset: 1px; }

.__insp-bar-label[_ngcontent-ng-c2162118440] { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

.__insp-playhead[_ngcontent-ng-c2162118440] { position: absolute; top: -22px; bottom: 0; width: 2px; background: var(--mat-sys-primary); pointer-events: none; z-index: 3; box-shadow: 0 0 6px var(--mat-sys-primary); } .__insp-playhead[_ngcontent-ng-c2162118440]::before { content: ""; position: absolute; top: -3px; left: 50%; transform: translateX(-50%); width: 0; height: 0; border-left: 5px solid transparent; border-right: 5px solid transparent; border-top: 6px solid var(--mat-sys-primary); }

.__insp-props[_ngcontent-ng-c2162118440] { display: flex; flex-direction: column; min-height: 0; max-height: 100%; overflow: hidden; }

.__insp-props-head[_ngcontent-ng-c2162118440] { display: flex; align-items: center; gap: 8px; height: 28px; padding: 0 12px; border-bottom: 1px solid color-mix(in srgb, var(--mat-sys-outline-variant) 30%, transparent); background: color-mix(in srgb, var(--mat-sys-on-surface) 4%, transparent); }

.__insp-props-tag[_ngcontent-ng-c2162118440] { display: inline-flex; align-items: center; justify-content: center; min-width: 22px; height: 16px; padding: 0 5px; border-radius: 3px; background: var(--mat-sys-primary); color: var(--mat-sys-on-primary); font-size: 9px; font-weight: 800; letter-spacing: 0.06em; }

.__insp-props-name[_ngcontent-ng-c2162118440] { font-size: 11px; font-weight: 700; letter-spacing: 0.04em; text-transform: uppercase; color: var(--mat-sys-on-surface); }

.__insp-props-meta[_ngcontent-ng-c2162118440] { font-size: 9.5px; font-variant-numeric: tabular-nums; color: color-mix(in srgb, var(--mat-sys-on-surface) 55%, transparent); }

.__insp-props-follow[_ngcontent-ng-c2162118440] { display: inline-flex; align-items: center; gap: 4px; height: 18px; padding: 0 8px; margin-left: auto; border-radius: 999px; background: color-mix(in srgb, var(--mat-sys-on-surface) 8%, transparent); color: color-mix(in srgb, var(--mat-sys-on-surface) 60%, transparent); font-size: 9px; font-weight: 600; letter-spacing: 0.06em; text-transform: uppercase; }

.__insp-props-clear[_ngcontent-ng-c2162118440] { appearance: none; border: 1px solid color-mix(in srgb, var(--mat-sys-outline-variant) 50%, transparent); background: transparent; color: color-mix(in srgb, var(--mat-sys-on-surface) 55%, transparent); font-family: inherit; font-size: 9px; font-weight: 700; letter-spacing: 0.06em; text-transform: uppercase; height: 18px; padding: 0 6px; margin-left: auto; border-radius: 3px; cursor: pointer; } .__insp-props-clear[_ngcontent-ng-c2162118440]:hover { background: color-mix(in srgb, var(--mat-sys-on-surface) 8%, transparent); color: var(--mat-sys-on-surface); }

.__insp-props-loop[_ngcontent-ng-c2162118440] { appearance: none; border: 1px solid color-mix(in srgb, var(--mat-sys-primary) 50%, transparent); background: color-mix(in srgb, var(--mat-sys-primary) 12%, transparent); color: var(--mat-sys-primary); font-family: inherit; font-size: 9.5px; font-weight: 700; letter-spacing: 0.06em; text-transform: uppercase; height: 20px; padding: 0 8px; border-radius: 4px; cursor: pointer; display: inline-flex; align-items: center; gap: 4px; margin-left: auto; } .__insp-props-loop[_ngcontent-ng-c2162118440]:hover { background: color-mix(in srgb, var(--mat-sys-primary) 22%, transparent); } .__insp-props-loop.is-active[_ngcontent-ng-c2162118440] { background: var(--mat-sys-primary); color: var(--mat-sys-on-primary); }

.__insp-props-rows[_ngcontent-ng-c2162118440] { flex: 1 1 0; min-height: 0; overflow-y: auto; overflow-x: hidden; } .__insp-props-rows[_ngcontent-ng-c2162118440]::-webkit-scrollbar { width: 8px; } .__insp-props-rows[_ngcontent-ng-c2162118440]::-webkit-scrollbar-thumb { background: color-mix(in srgb, var(--mat-sys-on-surface) 18%, transparent); border-radius: 4px; } .__insp-props-rows[_ngcontent-ng-c2162118440]::-webkit-scrollbar-thumb:hover { background: color-mix(in srgb, var(--mat-sys-on-surface) 32%, transparent); } .__insp-props-rows[_ngcontent-ng-c2162118440]::-webkit-scrollbar-track { background: transparent; }

.__insp-props-empty[_ngcontent-ng-c2162118440] { flex: 1; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 8px; font-size: 11px; color: color-mix(in srgb, var(--mat-sys-on-surface) 55%, transparent); letter-spacing: 0.02em; padding: 24px; }

.__insp-props-empty-icon[_ngcontent-ng-c2162118440] { font-size: 24px; color: color-mix(in srgb, var(--mat-sys-primary) 65%, transparent); animation: __insp-empty-bounce 1.8s ease-in-out infinite; }

@keyframes _ngcontent-ng-c2162118440___insp-empty-bounce { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-4px); } } .__insp-head[_ngcontent-ng-c2162118440] { display: flex; align-items: center; gap: 8px; padding: 10px 10px 8px; border-bottom: 1px solid color-mix(in srgb, var(--mat-sys-outline-variant) 40%, transparent); }

.__insp-title-wrap[_ngcontent-ng-c2162118440] { display: inline-flex; align-items: center; gap: 8px; flex: 1; min-width: 0; }

.__insp-title[_ngcontent-ng-c2162118440] { font-size: 10px; font-weight: 700; letter-spacing: 0.12em; text-transform: uppercase; color: color-mix(in srgb, var(--mat-sys-on-surface) 92%, transparent); }

.__insp-count[_ngcontent-ng-c2162118440] { font-size: 9.5px; color: color-mix(in srgb, var(--mat-sys-on-surface) 50%, transparent); letter-spacing: 0.04em; font-variant-numeric: tabular-nums; }

.__insp-badge[_ngcontent-ng-c2162118440] { appearance: none; border: 1px solid color-mix(in srgb, var(--mat-sys-primary) 40%, transparent); background: color-mix(in srgb, var(--mat-sys-primary) 14%, transparent); color: var(--mat-sys-primary); font-family: inherit; font-size: 9px; font-weight: 700; letter-spacing: 0.06em; text-transform: uppercase; height: 18px; padding: 0 6px; border-radius: 999px; cursor: pointer; display: inline-flex; align-items: center; gap: 4px; transition: background 120ms ease; } .__insp-badge[_ngcontent-ng-c2162118440]:hover { background: color-mix(in srgb, var(--mat-sys-primary) 22%, transparent); } .__insp-badge[_ngcontent-ng-c2162118440] .__insp-badge-x[_ngcontent-ng-c2162118440] { font-size: 10px; opacity: 0.75; }

.__insp-head-actions[_ngcontent-ng-c2162118440] { display: inline-flex; align-items: center; gap: 2px; }

.__insp-icon-btn[_ngcontent-ng-c2162118440] { appearance: none; border: none; background: transparent; color: color-mix(in srgb, var(--mat-sys-on-surface) 60%, transparent); font-family: inherit; font-size: 14px; line-height: 1; width: 22px; height: 22px; display: inline-flex; align-items: center; justify-content: center; border-radius: 4px; cursor: pointer; transition: background 120ms ease, color 120ms ease; } .__insp-icon-btn[_ngcontent-ng-c2162118440]:hover { background: color-mix(in srgb, var(--mat-sys-on-surface) 8%, transparent); color: var(--mat-sys-on-surface); }

.__insp-toolbar[_ngcontent-ng-c2162118440] { display: flex; align-items: center; gap: 6px; padding: 8px 10px; border-bottom: 1px solid color-mix(in srgb, var(--mat-sys-outline-variant) 30%, transparent); }

.__insp-search[_ngcontent-ng-c2162118440] { flex: 1; position: relative; display: inline-flex; align-items: center; height: 24px; background: color-mix(in srgb, var(--mat-sys-on-surface) 5%, transparent); border: 1px solid color-mix(in srgb, var(--mat-sys-outline-variant) 40%, transparent); border-radius: 5px; padding: 0 6px 0 22px; transition: border-color 120ms ease, background 120ms ease; } .__insp-search[_ngcontent-ng-c2162118440]:focus-within { border-color: color-mix(in srgb, var(--mat-sys-primary) 60%, transparent); background: color-mix(in srgb, var(--mat-sys-primary) 4%, transparent); }

.__insp-search-icon[_ngcontent-ng-c2162118440] { position: absolute; left: 7px; top: 50%; transform: translateY(-50%); font-size: 12px; color: color-mix(in srgb, var(--mat-sys-on-surface) 45%, transparent); pointer-events: none; }

.__insp-search-input[_ngcontent-ng-c2162118440] { flex: 1; appearance: none; border: none; background: transparent; color: var(--mat-sys-on-surface); font-family: inherit; font-size: 11px; outline: none; padding: 0; height: 100%; min-width: 0; } .__insp-search-input[_ngcontent-ng-c2162118440]::placeholder { color: color-mix(in srgb, var(--mat-sys-on-surface) 35%, transparent); }

.__insp-search-clear[_ngcontent-ng-c2162118440] { appearance: none; border: none; background: transparent; color: color-mix(in srgb, var(--mat-sys-on-surface) 55%, transparent); font-family: inherit; font-size: 13px; line-height: 1; cursor: pointer; padding: 0 2px; } .__insp-search-clear[_ngcontent-ng-c2162118440]:hover { color: var(--mat-sys-on-surface); }

.__insp-chip[_ngcontent-ng-c2162118440] { appearance: none; height: 24px; padding: 0 8px; border-radius: 5px; border: 1px solid color-mix(in srgb, var(--mat-sys-outline-variant) 40%, transparent); background: transparent; color: color-mix(in srgb, var(--mat-sys-on-surface) 60%, transparent); font-family: inherit; font-size: 9.5px; font-weight: 600; letter-spacing: 0.08em; text-transform: uppercase; cursor: pointer; transition: background 120ms ease, border-color 120ms ease, color 120ms ease; } .__insp-chip[_ngcontent-ng-c2162118440]:hover { background: color-mix(in srgb, var(--mat-sys-on-surface) 6%, transparent); color: var(--mat-sys-on-surface); } .__insp-chip.is-active[_ngcontent-ng-c2162118440] { background: color-mix(in srgb, var(--mat-sys-primary) 16%, transparent); border-color: color-mix(in srgb, var(--mat-sys-primary) 55%, transparent); color: var(--mat-sys-primary); }

.__insp-body[_ngcontent-ng-c2162118440] { flex: 1; overflow-y: auto; overflow-x: hidden; padding: 4px 0 6px; } .__insp-body[_ngcontent-ng-c2162118440]::-webkit-scrollbar { width: 6px; } .__insp-body[_ngcontent-ng-c2162118440]::-webkit-scrollbar-thumb { background: color-mix(in srgb, var(--mat-sys-on-surface) 12%, transparent); border-radius: 3px; } .__insp-body[_ngcontent-ng-c2162118440]::-webkit-scrollbar-thumb:hover { background: color-mix(in srgb, var(--mat-sys-on-surface) 22%, transparent); }

.__insp-loop-banner[_ngcontent-ng-c2162118440] { position: sticky; top: 0; z-index: 3; display: flex; align-items: center; gap: 8px; padding: 8px 10px; background: linear-gradient(90deg, color-mix(in srgb, var(--mat-sys-primary) 22%, transparent), color-mix(in srgb, var(--mat-sys-primary) 14%, transparent)); border-bottom: 1px solid color-mix(in srgb, var(--mat-sys-primary) 40%, transparent); color: var(--mat-sys-primary); backdrop-filter: blur(8px); }

.__insp-loop-banner-pulse[_ngcontent-ng-c2162118440] { width: 7px; height: 7px; border-radius: 50%; background: var(--mat-sys-primary); flex-shrink: 0; animation: __insp-loop-pulse 1.2s ease-in-out infinite; }

@keyframes _ngcontent-ng-c2162118440___insp-loop-pulse { 0%, 100% { opacity: 0.4; transform: scale(1); } 50% { opacity: 1; transform: scale(1.4); box-shadow: 0 0 8px var(--mat-sys-primary); } } .__insp-loop-banner-text[_ngcontent-ng-c2162118440] { flex: 1; display: inline-flex; align-items: baseline; gap: 8px; min-width: 0; }

.__insp-loop-banner-key[_ngcontent-ng-c2162118440] { font-size: 9px; font-weight: 800; letter-spacing: 0.12em; color: var(--mat-sys-primary); text-transform: uppercase; }

.__insp-loop-banner-val[_ngcontent-ng-c2162118440] { font-size: 11.5px; font-weight: 600; letter-spacing: 0.02em; color: var(--mat-sys-on-surface); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

.__insp-loop-banner-stop[_ngcontent-ng-c2162118440] { appearance: none; border: 1px solid color-mix(in srgb, var(--mat-sys-primary) 50%, transparent); background: color-mix(in srgb, var(--mat-sys-primary) 12%, transparent); color: var(--mat-sys-primary); font-family: inherit; font-size: 10px; font-weight: 700; letter-spacing: 0.06em; text-transform: uppercase; height: 22px; padding: 0 8px; border-radius: 4px; cursor: pointer; transition: background 120ms ease; } .__insp-loop-banner-stop[_ngcontent-ng-c2162118440]:hover { background: color-mix(in srgb, var(--mat-sys-primary) 22%, transparent); }

.__insp-beat[_ngcontent-ng-c2162118440] { margin: 0; } .__insp-beat.is-active[_ngcontent-ng-c2162118440] { background: color-mix(in srgb, var(--mat-sys-primary) 3%, transparent); }

.__insp-beat-head[_ngcontent-ng-c2162118440] { position: sticky; top: 0; z-index: 2; display: flex; align-items: stretch; height: 32px; background: color-mix(in srgb, var(--mat-sys-surface-container-high) 94%, transparent); backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); border-top: 2px solid color-mix(in srgb, var(--mat-sys-outline-variant) 40%, transparent); border-bottom: 1px solid color-mix(in srgb, var(--mat-sys-outline-variant) 25%, transparent); } .__insp-beat.is-active[_ngcontent-ng-c2162118440] .__insp-beat-head[_ngcontent-ng-c2162118440] { background: color-mix(in srgb, var(--mat-sys-primary) 14%, transparent); border-top-color: color-mix(in srgb, var(--mat-sys-primary) 60%, transparent); border-bottom-color: color-mix(in srgb, var(--mat-sys-primary) 40%, transparent); }

.__insp-beat-head-main[_ngcontent-ng-c2162118440] { appearance: none; border: none; background: transparent; color: var(--mat-sys-on-surface); flex: 1; display: flex; align-items: center; gap: 8px; padding: 0 10px; font-family: inherit; cursor: pointer; text-align: left; min-width: 0; } .__insp-beat-head-main[_ngcontent-ng-c2162118440]:hover { background: color-mix(in srgb, var(--mat-sys-on-surface) 5%, transparent); }

.__insp-beat-tag[_ngcontent-ng-c2162118440] { display: inline-flex; align-items: center; justify-content: center; min-width: 24px; height: 18px; padding: 0 6px; border-radius: 4px; background: color-mix(in srgb, var(--mat-sys-on-surface) 14%, transparent); color: var(--mat-sys-on-surface); font-size: 10px; font-weight: 800; letter-spacing: 0.06em; } .__insp-beat.is-active[_ngcontent-ng-c2162118440] .__insp-beat-tag[_ngcontent-ng-c2162118440] { background: var(--mat-sys-primary); color: var(--mat-sys-on-primary); box-shadow: 0 0 0 2px color-mix(in srgb, var(--mat-sys-primary) 30%, transparent); }

.__insp-beat-label[_ngcontent-ng-c2162118440] { flex: 1; font-size: 11px; font-weight: 600; letter-spacing: 0.02em; color: color-mix(in srgb, var(--mat-sys-on-surface) 88%, transparent); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

.__insp-beat-loop[_ngcontent-ng-c2162118440] { appearance: none; border: none; border-left: 1px solid color-mix(in srgb, var(--mat-sys-outline-variant) 25%, transparent); background: transparent; color: color-mix(in srgb, var(--mat-sys-on-surface) 55%, transparent); font-family: inherit; font-size: 10px; font-weight: 700; letter-spacing: 0.06em; text-transform: uppercase; padding: 0 12px; cursor: pointer; display: inline-flex; align-items: center; gap: 6px; transition: background 120ms ease, color 120ms ease; } .__insp-beat-loop[_ngcontent-ng-c2162118440]:hover { background: color-mix(in srgb, var(--mat-sys-primary) 12%, transparent); color: var(--mat-sys-primary); } .__insp-beat-loop.is-active[_ngcontent-ng-c2162118440] { background: color-mix(in srgb, var(--mat-sys-primary) 20%, transparent); color: var(--mat-sys-primary); } .__insp-beat-loop.is-active[_ngcontent-ng-c2162118440] .__insp-beat-loop-icon[_ngcontent-ng-c2162118440] { animation: __insp-loop-spin 2.4s linear infinite; }

.__insp-beat-loop-icon[_ngcontent-ng-c2162118440] { display: inline-block; font-size: 13px; }

@keyframes _ngcontent-ng-c2162118440___insp-loop-spin { to { transform: rotate(360deg); } } .__insp-phase[_ngcontent-ng-c2162118440] { position: relative; padding: 0; } .__insp-phase.is-parallel[_ngcontent-ng-c2162118440] { background: color-mix(in srgb, var(--mat-sys-tertiary, var(--mat-sys-primary)) 5%, transparent); border-left: 2px solid color-mix(in srgb, var(--mat-sys-tertiary, var(--mat-sys-primary)) 40%, transparent); } .__insp-phase.is-parallel[_ngcontent-ng-c2162118440] .__insp-section[_ngcontent-ng-c2162118440] { margin-left: 4px; }

.__insp-phase-head[_ngcontent-ng-c2162118440] { display: flex; align-items: center; gap: 8px; height: 22px; padding: 0 10px; border-top: 1px dashed color-mix(in srgb, var(--mat-sys-outline-variant) 40%, transparent); } .__insp-phase.is-parallel[_ngcontent-ng-c2162118440] .__insp-phase-head[_ngcontent-ng-c2162118440] { border-top: 1px solid color-mix(in srgb, var(--mat-sys-tertiary, var(--mat-sys-primary)) 45%, transparent); background: color-mix(in srgb, var(--mat-sys-tertiary, var(--mat-sys-primary)) 10%, transparent); }

.__insp-phase-num[_ngcontent-ng-c2162118440] { font-size: 9px; font-weight: 800; letter-spacing: 0.1em; text-transform: uppercase; color: color-mix(in srgb, var(--mat-sys-on-surface) 55%, transparent); min-width: 48px; } .__insp-phase.is-parallel[_ngcontent-ng-c2162118440] .__insp-phase-num[_ngcontent-ng-c2162118440] { color: color-mix(in srgb, var(--mat-sys-tertiary, var(--mat-sys-primary)) 95%, transparent); }

.__insp-phase-time[_ngcontent-ng-c2162118440] { font-size: 9px; font-variant-numeric: tabular-nums; font-weight: 700; letter-spacing: 0.04em; color: color-mix(in srgb, var(--mat-sys-on-surface) 50%, transparent); }

.__insp-phase-parallel[_ngcontent-ng-c2162118440] { flex: 1; display: inline-flex; align-items: center; justify-content: flex-start; height: 14px; padding: 0 6px; border-radius: 3px; background: color-mix(in srgb, var(--mat-sys-tertiary, var(--mat-sys-primary)) 22%, transparent); color: color-mix(in srgb, var(--mat-sys-tertiary, var(--mat-sys-primary)) 100%, transparent); font-size: 8.5px; font-weight: 800; letter-spacing: 0.08em; text-transform: uppercase; white-space: nowrap; margin-left: 4px; max-width: max-content; }

.__insp-phase-loop[_ngcontent-ng-c2162118440] { appearance: none; border: none; background: transparent; color: color-mix(in srgb, var(--mat-sys-on-surface) 50%, transparent); font-family: inherit; font-size: 9px; font-weight: 700; letter-spacing: 0.06em; text-transform: uppercase; padding: 0 6px; height: 18px; border-radius: 3px; cursor: pointer; display: inline-flex; align-items: center; gap: 4px; margin-left: auto; transition: background 120ms ease, color 120ms ease; } .__insp-phase-loop[_ngcontent-ng-c2162118440]:hover { background: color-mix(in srgb, var(--mat-sys-primary) 14%, transparent); color: var(--mat-sys-primary); } .__insp-phase-loop.is-active[_ngcontent-ng-c2162118440] { background: color-mix(in srgb, var(--mat-sys-primary) 20%, transparent); color: var(--mat-sys-primary); } .__insp-phase-loop.is-active[_ngcontent-ng-c2162118440] .__insp-phase-loop-icon[_ngcontent-ng-c2162118440] { animation: __insp-loop-spin 2.4s linear infinite; }

.__insp-phase-loop-icon[_ngcontent-ng-c2162118440] { font-size: 11px; }

.__insp-section[_ngcontent-ng-c2162118440] { margin: 0; } .__insp-section.is-here[_ngcontent-ng-c2162118440] { background: linear-gradient(90deg, color-mix(in srgb, var(--mat-sys-primary) 12%, transparent), transparent 40%); border-left: 2px solid var(--mat-sys-primary); }

.__insp-section-head[_ngcontent-ng-c2162118440] { display: flex; align-items: stretch; height: 22px; } .__insp-section-head[_ngcontent-ng-c2162118440]:hover { background: color-mix(in srgb, var(--mat-sys-on-surface) 5%, transparent); }

.__insp-section-head-main[_ngcontent-ng-c2162118440] { appearance: none; border: none; background: transparent; color: var(--mat-sys-on-surface); flex: 1; display: flex; align-items: center; gap: 6px; padding: 0 10px; font-family: inherit; font-size: 10px; cursor: pointer; text-align: left; min-width: 0; }

.__insp-section-bullet[_ngcontent-ng-c2162118440] { display: inline-flex; align-items: center; justify-content: center; width: 14px; font-size: 11px; color: color-mix(in srgb, var(--mat-sys-on-surface) 30%, transparent); user-select: none; }

.__insp-section-step[_ngcontent-ng-c2162118440] { font-size: 9px; font-variant-numeric: tabular-nums; font-weight: 700; letter-spacing: 0.06em; color: color-mix(in srgb, var(--mat-sys-on-surface) 38%, transparent); min-width: 32px; text-align: center; user-select: none; }

.__insp-section-time[_ngcontent-ng-c2162118440] { font-size: 9px; font-variant-numeric: tabular-nums; font-weight: 700; letter-spacing: 0.04em; color: color-mix(in srgb, var(--mat-sys-on-surface) 50%, transparent); min-width: 32px; text-align: right; user-select: none; } .__insp-section.is-here[_ngcontent-ng-c2162118440] .__insp-section-time[_ngcontent-ng-c2162118440] { color: var(--mat-sys-primary); }

.__insp-section-parallel[_ngcontent-ng-c2162118440] { display: inline-flex; align-items: center; height: 13px; padding: 0 5px; border-radius: 3px; background: color-mix(in srgb, var(--mat-sys-tertiary, var(--mat-sys-primary)) 16%, transparent); color: color-mix(in srgb, var(--mat-sys-tertiary, var(--mat-sys-primary)) 95%, transparent); font-size: 8.5px; font-weight: 700; letter-spacing: 0.06em; text-transform: uppercase; white-space: nowrap; margin-left: 4px; }

.__insp-section.is-concurrent[_ngcontent-ng-c2162118440] { position: relative; } .__insp-section.is-concurrent[_ngcontent-ng-c2162118440]::before { content: ""; position: absolute; left: 3px; top: 0; bottom: 0; width: 2px; background: color-mix(in srgb, var(--mat-sys-tertiary, var(--mat-sys-primary)) 40%, transparent); } .__insp-section.is-concurrent.is-concurrent-lead[_ngcontent-ng-c2162118440]::before { top: 3px; border-top-left-radius: 2px; border-top-right-radius: 2px; } .__insp-section.is-concurrent[_ngcontent-ng-c2162118440]:not(:has(+ .__insp-section.is-concurrent:not(.is-concurrent-lead)))::before { bottom: 3px; border-bottom-left-radius: 2px; border-bottom-right-radius: 2px; }

.__insp-section.is-concurrent[_ngcontent-ng-c2162118440] .__insp-section-head-main[_ngcontent-ng-c2162118440] { padding-left: 12px; }

.__insp-section-here[_ngcontent-ng-c2162118440] { display: inline-flex; align-items: center; justify-content: center; width: 14px; font-size: 10px; color: var(--mat-sys-primary); animation: __insp-loop-pulse 1.2s ease-in-out infinite; }

.__insp-section-name[_ngcontent-ng-c2162118440] { flex: 1; font-weight: 600; letter-spacing: 0.06em; text-transform: uppercase; color: color-mix(in srgb, var(--mat-sys-on-surface) 78%, transparent); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

.__insp-section-count[_ngcontent-ng-c2162118440] { font-size: 9px; color: color-mix(in srgb, var(--mat-sys-on-surface) 45%, transparent); font-variant-numeric: tabular-nums; }

.__insp-section-dot[_ngcontent-ng-c2162118440] { width: 5px; height: 5px; border-radius: 50%; background: var(--mat-sys-primary); flex-shrink: 0; }

.__insp-section-chev[_ngcontent-ng-c2162118440] { font-size: 9px; color: color-mix(in srgb, var(--mat-sys-on-surface) 40%, transparent); }

.__insp-rows[_ngcontent-ng-c2162118440] { display: flex; flex-direction: column; }

.__insp-row[_ngcontent-ng-c2162118440] { position: relative; display: grid; grid-template-columns: 1fr 56px auto 18px; align-items: center; gap: 6px; height: 26px; padding: 0 10px; border-top: 1px solid color-mix(in srgb, var(--mat-sys-outline-variant) 14%, transparent); } .__insp-row[_ngcontent-ng-c2162118440]:first-child { border-top: none; } .__insp-row[_ngcontent-ng-c2162118440] { --insp-tint: #94a3b8; } .__insp-row[data-type=angle][_ngcontent-ng-c2162118440] { --insp-tint: #38b6ff; } .__insp-row[data-type=scale][_ngcontent-ng-c2162118440] { --insp-tint: #c084fc; } .__insp-row[data-type=opacity][_ngcontent-ng-c2162118440] { --insp-tint: #94a3b8; } .__insp-row[data-type=duration][_ngcontent-ng-c2162118440] { --insp-tint: #f59e0b; } .__insp-row[data-type=delay][_ngcontent-ng-c2162118440] { --insp-tint: #fb7185; } .__insp-row[data-type=translateY][_ngcontent-ng-c2162118440] { --insp-tint: #ec4899; } .__insp-row[data-type=perspective][_ngcontent-ng-c2162118440] { --insp-tint: #34d399; } .__insp-row[data-type=percent][_ngcontent-ng-c2162118440] { --insp-tint: #34d399; } .__insp-row[_ngcontent-ng-c2162118440]:hover { background: color-mix(in srgb, var(--mat-sys-on-surface) 4%, transparent); } .__insp-row.is-flashed[_ngcontent-ng-c2162118440] { animation: __insp-flash 500ms ease-out; }

.__insp-rail[_ngcontent-ng-c2162118440] { position: absolute; left: 10px; right: 10px; bottom: 0; height: 1px; background: color-mix(in srgb, var(--mat-sys-on-surface) 8%, transparent); pointer-events: none; overflow: hidden; border-radius: 0.5px; } .__insp-rail[_ngcontent-ng-c2162118440]::after { content: ""; position: absolute; left: 0; top: 0; bottom: 0; width: var(--insp-pct, 0%); background: color-mix(in srgb, var(--insp-tint) 70%, transparent); transition: width 80ms linear; } .__insp-row.is-modified[_ngcontent-ng-c2162118440] .__insp-rail[_ngcontent-ng-c2162118440] { height: 2px; }

.__insp-label[_ngcontent-ng-c2162118440] { appearance: none; border: none; background: transparent; color: color-mix(in srgb, var(--mat-sys-on-surface) 80%, transparent); font-family: inherit; font-size: 11px; letter-spacing: 0.01em; display: inline-flex; align-items: center; gap: 6px; padding: 0; min-width: 0; cursor: ew-resize; text-align: left; touch-action: none; user-select: none; } .__insp-label[_ngcontent-ng-c2162118440]:hover { color: var(--mat-sys-on-surface); } .__insp-label.is-scrubbing[_ngcontent-ng-c2162118440], .__insp-label[_ngcontent-ng-c2162118440]:active { color: var(--mat-sys-primary); } .__insp-label[_ngcontent-ng-c2162118440]:focus-visible { outline: 1px dashed color-mix(in srgb, var(--mat-sys-primary) 60%, transparent); outline-offset: 2px; border-radius: 2px; }

.__insp-label-text[_ngcontent-ng-c2162118440] { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; min-width: 0; }

.__insp-dot[_ngcontent-ng-c2162118440] { width: 6px; height: 6px; border-radius: 50%; border: 1.5px solid var(--insp-tint); background: transparent; flex-shrink: 0; transition: background 120ms ease, transform 120ms ease; } .__insp-row.is-modified[_ngcontent-ng-c2162118440] .__insp-dot[_ngcontent-ng-c2162118440] { background: var(--insp-tint); box-shadow: 0 0 0 2px color-mix(in srgb, var(--insp-tint) 25%, transparent); }

.__insp-num[_ngcontent-ng-c2162118440] { appearance: textfield; -moz-appearance: textfield; border: 1px solid transparent; background: transparent; color: var(--mat-sys-on-surface); font-family: inherit; font-size: 11px; font-variant-numeric: tabular-nums; text-align: right; outline: none; padding: 0 4px; height: 20px; width: 56px; border-radius: 3px; transition: background 100ms ease, border-color 100ms ease; } .__insp-row[_ngcontent-ng-c2162118440]:hover .__insp-num[_ngcontent-ng-c2162118440] { background: color-mix(in srgb, var(--mat-sys-on-surface) 6%, transparent); border-color: color-mix(in srgb, var(--mat-sys-outline-variant) 35%, transparent); } .__insp-num[_ngcontent-ng-c2162118440]:focus { background: color-mix(in srgb, var(--mat-sys-primary) 6%, transparent); border-color: color-mix(in srgb, var(--mat-sys-primary) 60%, transparent); } .__insp-num[_ngcontent-ng-c2162118440]::-webkit-outer-spin-button, .__insp-num[_ngcontent-ng-c2162118440]::-webkit-inner-spin-button { appearance: none; margin: 0; }

.__insp-unit[_ngcontent-ng-c2162118440] { font-size: 9.5px; letter-spacing: 0.04em; color: color-mix(in srgb, var(--mat-sys-on-surface) 50%, transparent); user-select: none; min-width: 8px; text-align: left; }

.__insp-revert[_ngcontent-ng-c2162118440] { appearance: none; border: none; background: transparent; color: color-mix(in srgb, var(--mat-sys-primary) 70%, transparent); cursor: pointer; font-size: 12px; line-height: 1; width: 18px; height: 18px; border-radius: 4px; display: inline-flex; align-items: center; justify-content: center; opacity: 0; transition: opacity 120ms ease, background 120ms ease, color 120ms ease; } .__insp-row[_ngcontent-ng-c2162118440]:hover .__insp-revert.is-visible[_ngcontent-ng-c2162118440], .__insp-revert.is-visible[_ngcontent-ng-c2162118440] { opacity: 1; } .__insp-revert[_ngcontent-ng-c2162118440]:hover { background: color-mix(in srgb, var(--mat-sys-primary) 14%, transparent); color: var(--mat-sys-primary); }

.__insp-section-loop-cta[_ngcontent-ng-c2162118440] { appearance: none; border: none; background: color-mix(in srgb, var(--mat-sys-primary) 8%, transparent); color: color-mix(in srgb, var(--mat-sys-primary) 80%, transparent); font-family: inherit; font-size: 10px; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; display: flex; align-items: center; justify-content: center; gap: 8px; height: 28px; margin: 4px 8px 8px; border-radius: 5px; border: 1px dashed color-mix(in srgb, var(--mat-sys-primary) 35%, transparent); cursor: pointer; transition: background 120ms ease, color 120ms ease, border-color 120ms ease; } .__insp-section-loop-cta[_ngcontent-ng-c2162118440]:hover { background: color-mix(in srgb, var(--mat-sys-primary) 16%, transparent); color: var(--mat-sys-primary); border-color: color-mix(in srgb, var(--mat-sys-primary) 55%, transparent); border-style: solid; } .__insp-section-loop-cta.is-active[_ngcontent-ng-c2162118440] { background: color-mix(in srgb, var(--mat-sys-primary) 22%, transparent); color: var(--mat-sys-primary); border: 1px solid var(--mat-sys-primary); } .__insp-section-loop-cta.is-active[_ngcontent-ng-c2162118440] .__insp-section-loop-cta-icon[_ngcontent-ng-c2162118440] { animation: __insp-loop-spin 2.4s linear infinite; }

.__insp-section-loop-cta-icon[_ngcontent-ng-c2162118440] { font-size: 13px; line-height: 1; }

.__insp-empty[_ngcontent-ng-c2162118440] { padding: 24px 14px; font-size: 11px; color: color-mix(in srgb, var(--mat-sys-on-surface) 50%, transparent); letter-spacing: 0.02em; text-align: center; }

.__insp-foot[_ngcontent-ng-c2162118440] { display: flex; flex-direction: column; gap: 3px; border-top: 1px solid color-mix(in srgb, var(--mat-sys-outline-variant) 30%, transparent); padding: 7px 10px 8px; background: color-mix(in srgb, var(--mat-sys-on-surface) 3%, transparent); }

.__insp-foot-row[_ngcontent-ng-c2162118440] { display: grid; grid-template-columns: 36px 1fr; gap: 8px; align-items: baseline; font-size: 9.5px; letter-spacing: 0.02em; color: color-mix(in srgb, var(--mat-sys-on-surface) 55%, transparent); }

.__insp-foot-key[_ngcontent-ng-c2162118440] { text-transform: uppercase; font-weight: 700; letter-spacing: 0.08em; color: color-mix(in srgb, var(--mat-sys-primary) 80%, transparent); font-size: 8.5px; }

.__insp-foot-val[_ngcontent-ng-c2162118440] kbd[_ngcontent-ng-c2162118440] { display: inline-block; min-width: 14px; height: 14px; padding: 0 3px; border-radius: 3px; border: 1px solid color-mix(in srgb, var(--mat-sys-outline-variant) 60%, transparent); background: color-mix(in srgb, var(--mat-sys-on-surface) 5%, transparent); font-family: inherit; font-size: 9px; font-weight: 600; line-height: 12px; text-align: center; vertical-align: 1px; color: var(--mat-sys-on-surface); } .__insp-foot-val[_ngcontent-ng-c2162118440] .__insp-foot-icon[_ngcontent-ng-c2162118440] { display: inline-block; color: var(--mat-sys-primary); font-weight: 600; padding: 0 2px; }

.__insp-overlay[_ngcontent-ng-c2162118440] { position: fixed; top: 0; left: 0; pointer-events: none; z-index: 9996; border: 2px solid var(--mat-sys-primary); border-radius: 3px; box-shadow: 0 0 0 1px color-mix(in srgb, var(--mat-sys-primary) 30%, transparent), 0 0 22px 6px color-mix(in srgb, var(--mat-sys-primary) 32%, transparent), inset 0 0 0 1px color-mix(in srgb, var(--mat-sys-on-primary) 70%, transparent); animation: __insp-overlay-in 100ms ease-out; }

@keyframes _ngcontent-ng-c2162118440___insp-overlay-in { from { opacity: 0; } to { opacity: 1; } } .__scr-inspector-toggle[_ngcontent-ng-c2162118440] { position: relative; } .__scr-inspector-toggle.is-active[_ngcontent-ng-c2162118440] { background: color-mix(in srgb, var(--mat-sys-primary) 18%, transparent); color: var(--mat-sys-primary); } .__scr-inspector-toggle[_ngcontent-ng-c2162118440] .__scr-inspector-toggle-icon[_ngcontent-ng-c2162118440] { display: inline-block; width: 6px; height: 10px; font-size: 0; line-height: 0; background-image: radial-gradient(circle at 1px 1px, currentColor 1px, transparent 1.5px), radial-gradient(circle at 1px 5px, currentColor 1px, transparent 1.5px), radial-gradient(circle at 1px 9px, currentColor 1px, transparent 1.5px), radial-gradient(circle at 5px 1px, currentColor 1px, transparent 1.5px), radial-gradient(circle at 5px 5px, currentColor 1px, transparent 1.5px), radial-gradient(circle at 5px 9px, currentColor 1px, transparent 1.5px); background-repeat: no-repeat; } .__scr-inspector-toggle[_ngcontent-ng-c2162118440] .__scr-inspector-toggle-dot[_ngcontent-ng-c2162118440] { position: absolute; top: 3px; right: 3px; width: 5px; height: 5px; border-radius: 50%; background: var(--mat-sys-primary); box-shadow: 0 0 0 2px color-mix(in srgb, var(--mat-sys-surface-container-low) 90%, transparent); }

.__scr-show-pill[_ngcontent-ng-c2162118440] { position: fixed; right: 16px; bottom: 16px; z-index: 9998; width: 36px; height: 36px; border-radius: 18px; padding: 0; display: inline-flex; align-items: center; justify-content: center; font-size: 16px; line-height: 1; cursor: pointer; transition: transform 140ms cubic-bezier(0.22, 1, 0.36, 1), background-color 140ms ease; } .__scr-show-pill[_ngcontent-ng-c2162118440]:hover { transform: scale(1.06); background: color-mix(in srgb, var(--mat-sys-surface-container-low) 96%, transparent); }

.__scr-hide[_ngcontent-ng-c2162118440] { opacity: 0.7; } .__scr-hide[_ngcontent-ng-c2162118440]:hover { opacity: 1; }

[_nghost-ng-c1428112811]:not(.__host--animated)   .__dot[_ngcontent-ng-c1428112811] {
  opacity: 0;
}

.__host--animated[_nghost-ng-c1428112811]   .__dot[_ngcontent-ng-c1428112811] {
  animation: _ngcontent-ng-c1428112811_dot-enter 0.8s cubic-bezier(0.25, 1, 0.5, 1) both;
}

@keyframes _ngcontent-ng-c1428112811_dot-enter {
  from {
    opacity: 0;
    transform: translateY(6px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

.__dot[_ngcontent-ng-c1428112811] {
  pointer-events: auto;
  position: relative;
  width: 32px;
  min-height: 12px;
  border: none;
  padding: 4px 0;
  background: none;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
}

.__dot[_ngcontent-ng-c1428112811]::after {
  content: '';
  display: block;
  width: 4px;
  height: 4px;
  border-radius: 4px;
  background: var(--section-indicator-dot);
  will-change: height, background-color;
  transition:
    height 0.3s cubic-bezier(0.4, 0, 0.2, 1),
    background-color 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

.__dot--active[_ngcontent-ng-c1428112811]::after {
  height: 16px;
  background: var(--section-indicator-active);
}



.__dot--scrubber[_ngcontent-ng-c1428112811] {
  min-height: 48px;
  padding: 6px 0;
  cursor: ns-resize;
  touch-action: none;
  z-index: 2;
}

.__dot--scrubber[_ngcontent-ng-c1428112811]::after {
  display: none;
}

.__bar[_ngcontent-ng-c1428112811] {
  position: relative;
  display: block;
  width: 4px;
  height: 36px;
  border-radius: 4px;
  background: var(--section-indicator-track);
  transition:
    width 320ms cubic-bezier(0.22, 1, 0.36, 1),
    height 320ms cubic-bezier(0.22, 1, 0.36, 1),
    background-color 280ms ease;
}

.__bar-fill[_ngcontent-ng-c1428112811] {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  border-radius: 4px 4px 0 0;
  background: var(--section-indicator-active);
  transition: height 80ms linear;
  pointer-events: none;
}

.__bar-thumb[_ngcontent-ng-c1428112811] {
  position: absolute;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--section-indicator-active);
  box-shadow: 0 0 0 2px var(--mat-sys-surface, #fff);
  opacity: 0;
  transition:
    opacity 220ms ease,
    width 320ms cubic-bezier(0.22, 1, 0.36, 1),
    height 320ms cubic-bezier(0.22, 1, 0.36, 1);
  pointer-events: none;
}

.__dot--scrubber[_ngcontent-ng-c1428112811]:hover   .__bar-thumb[_ngcontent-ng-c1428112811],

.__dot--scrubber[_ngcontent-ng-c1428112811] .__bar.is-blooming[_ngcontent-ng-c1428112811] .__bar-thumb[_ngcontent-ng-c1428112811] { opacity: 1; }

.__bar-tick[_ngcontent-ng-c1428112811] {
  position: absolute;
  left: -3px;
  right: -3px;
  height: 1px;
  background: color-mix(in srgb, var(--section-indicator-active) 50%, transparent);
  opacity: 0;
  transform: scaleX(0.6);
  animation: _ngcontent-ng-c1428112811_tick-in 280ms cubic-bezier(0.22, 1, 0.36, 1) forwards;
  pointer-events: none;
}

@keyframes _ngcontent-ng-c1428112811_tick-in {
  to { opacity: 0.85; transform: scaleX(1); }
}



.__bar.is-blooming[_ngcontent-ng-c1428112811] {
  width: 12px;
  height: 96px;
  background: color-mix(in srgb, var(--section-indicator-active) 18%, transparent);
}

.__bar.is-blooming[_ngcontent-ng-c1428112811]   .__bar-thumb[_ngcontent-ng-c1428112811] {
  width: 14px;
  height: 14px;
  box-shadow:
    0 0 0 2px var(--mat-sys-surface, #fff),
    0 4px 12px rgba(15, 184, 168, 0.32);
}



.__bar-readout[_ngcontent-ng-c1428112811] {
  position: absolute;
  left: calc(50% + 22px);
  transform: translateY(-50%);
  background: #fff;
  color: var(--mat-sys-on-surface, #254E4A);
  font-family: var(--font-family-brand);
  font-size: 10px;
  font-weight: 500;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  padding: 5px 9px;
  border-radius: 6px;
  white-space: nowrap;
  pointer-events: none;
  box-shadow:
    0px 2px 4px rgba(0,0,0,0.04),
    0px 8px 16px rgba(0,0,0,0.06),
    0px 24px 40px rgba(0,0,0,0.06);
  opacity: 0;
  animation: _ngcontent-ng-c1428112811_readout-in 220ms 40ms cubic-bezier(0.22, 1, 0.36, 1) forwards;
}

.__bar-readout-sep[_ngcontent-ng-c1428112811] {
  opacity: 0.4;
  margin: 0 3px;
}

.__bar-readout-total[_ngcontent-ng-c1428112811] {
  opacity: 0.6;
}

@keyframes _ngcontent-ng-c1428112811_readout-in {
  from { opacity: 0; transform: translate(-6px, -50%); }
  to   { opacity: 1; transform: translate(0, -50%); }
}

.__dot[_ngcontent-ng-c1428112811]:focus-visible {
  outline: 2px solid var(--section-indicator-active);
  outline-offset: 4px;
  border-radius: 2px;
}</style><style ng-app-id="ng">[_nghost-ng-c4143097745] {

display: block; }

body.__zcp-popout[_nghost-ng-c4143097745], body.__zcp-popout [_nghost-ng-c4143097745] { display: none; }

.is-hidden[_nghost-ng-c4143097745] { display: none; }

.__hero[_ngcontent-ng-c4143097745] { position: relative; display: flex; flex-direction: column; align-items: center; height: 100svh; min-height: 100svh; gap: 24px; padding: calc(var(--app-bar-height, 72px) + 16px) 16px 24px; overflow: hidden; } @media (min-width: 810px) { .__hero[_ngcontent-ng-c4143097745] { gap: 40px; padding: calc(var(--app-bar-height, 72px) + 24px) 24px 32px; } } @media (min-width: 1440px) { .__hero[_ngcontent-ng-c4143097745] { gap: 56px; padding: calc(var(--app-bar-height, 72px) + 24px) 24px 40px; } }

.__spacer[_ngcontent-ng-c4143097745] { flex-grow: 1; }

.__content[_ngcontent-ng-c4143097745] { display: flex; flex-direction: column; align-items: center; gap: 24px; width: 100%; position: relative; z-index: 2; } @media (min-width: 810px) { .__content[_ngcontent-ng-c4143097745] { gap: 40px; } } @media (min-width: 1440px) { .__content[_ngcontent-ng-c4143097745] { gap: 56px; } }

.__tagline[_ngcontent-ng-c4143097745] { font-family: var(--font-family-brand); font-weight: 360; font-size: clamp(22px, 3.4vw, 32px); line-height: 1.45; text-align: center; color: var(--mat-sys-on-surface); font-variation-settings: "CRSV" 1, "SHRP" 100, "slnt" 0; font-feature-settings: "tnum" on, "lnum" on; max-width: 1170px; margin: 0; } .__tagline[_ngcontent-ng-c4143097745] strong[_ngcontent-ng-c4143097745] { font-weight: 660; } .__tagline[_ngcontent-ng-c4143097745] em[_ngcontent-ng-c4143097745] { font-style: normal; } @media (max-width: 649px) { .__tagline[_ngcontent-ng-c4143097745] .__br[_ngcontent-ng-c4143097745] { display: none; } }

.__agent-marks[_ngcontent-ng-c4143097745] { display: inline-flex; align-items: center; gap: 12px; margin: 0 6px; vertical-align: middle; height: 1em; line-height: 0; }

.__agent-mark.mat-icon[_ngcontent-ng-c4143097745] { width: 1.15em; height: 1.15em; font-size: 1em; margin-top: -0.2em; color: var(--mat-sys-on-surface); flex-shrink: 0; } .__agent-mark.mat-icon[_ngcontent-ng-c4143097745] svg[_ngcontent-ng-c4143097745] { width: 100%; height: 100%; }

.__tagline[_ngcontent-ng-c4143097745] .word[_ngcontent-ng-c4143097745], .__beat-text[_ngcontent-ng-c4143097745] .word[_ngcontent-ng-c4143097745] { display: inline-block; will-change: transform, opacity, filter; }

.__tagline[_ngcontent-ng-c4143097745] .word[_ngcontent-ng-c4143097745] { opacity: 0; transform: translateY(12px); filter: blur(6px); will-change: opacity, transform, filter; }

.__phrase[_ngcontent-ng-c4143097745] { display: inline; }

.__cta-row[_ngcontent-ng-c4143097745] { position: absolute; left: 50%; bottom: clamp(28px, 5vh, 56px); transform: translateX(-50%); z-index: 5; display: flex; flex-direction: row; align-items: center; gap: 8px; flex-wrap: wrap; justify-content: center; padding: 0 16px; }

.__cta-btn[_ngcontent-ng-c4143097745] { white-space: nowrap; backdrop-filter: blur(14px) saturate(140%); -webkit-backdrop-filter: blur(14px) saturate(140%); border-radius: 6px; } .__cta-btn[_ngcontent-ng-c4143097745] .mdc-button__label[_ngcontent-ng-c4143097745] { mix-blend-mode: difference; color: white; }

.__cta-btn--primary[_ngcontent-ng-c4143097745] { --mat-button-outlined-container-height: 48px; --mat-button-outlined-container-shape: 6px; --mat-button-outlined-outline-color: var(--mat-sys-outline-variant); --mat-button-outlined-label-text-color: var(--mat-sys-on-surface); --mat-button-outlined-ripple-color: color-mix(in srgb, var(--mat-sys-on-surface) 12%, transparent); --mat-button-outlined-state-layer-color: var(--mat-sys-on-surface); --mat-button-outlined-container-color: color-mix(in srgb, var(--mat-sys-surface) 60%, transparent); --mat-button-outlined-label-text-font: var(--font-family-brand), sans-serif; --mat-button-outlined-label-text-size: 12px; --mat-button-outlined-label-text-tracking: 0.18em; --mat-button-outlined-label-text-weight: 600; --mat-button-outlined-hover-state-layer-opacity: 0.04; --mat-button-outlined-pressed-state-layer-opacity: 0.08; }

.__cta-btn--secondary[_ngcontent-ng-c4143097745] { --mat-button-text-container-height: 48px; --mat-button-text-container-shape: 6px; --mat-button-text-horizontal-padding: 16px; --mat-button-text-label-text-color: var(--mat-sys-on-surface); --mat-button-text-ripple-color: color-mix(in srgb, var(--mat-sys-on-surface) 12%, transparent); --mat-button-text-state-layer-color: var(--mat-sys-on-surface); --mat-button-text-container-color: color-mix(in srgb, var(--mat-sys-surface) 60%, transparent); --mat-button-text-label-text-font: var(--font-family-brand), sans-serif; --mat-button-text-label-text-size: 12px; --mat-button-text-label-text-tracking: 0.18em; --mat-button-text-label-text-weight: 600; --mat-button-text-hover-state-layer-opacity: 0.04; --mat-button-text-pressed-state-layer-opacity: 0.08; } .__cta-btn--secondary[_ngcontent-ng-c4143097745] .mdc-button__label[_ngcontent-ng-c4143097745] { text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 4px; text-decoration-color: color-mix(in srgb, var(--mat-sys-on-surface) 55%, transparent); } .__cta-btn--secondary[_ngcontent-ng-c4143097745]:hover .mdc-button__label[_ngcontent-ng-c4143097745], .__cta-btn--secondary[_ngcontent-ng-c4143097745]:focus-visible .mdc-button__label[_ngcontent-ng-c4143097745] { text-decoration-color: var(--mat-sys-on-surface); }

.__beat[_ngcontent-ng-c4143097745] { position: absolute; inset: var(--app-bar-height, 72px) 0 0 0; display: flex; align-items: center; justify-content: center; pointer-events: none; padding: 24px; opacity: 0; will-change: opacity, transform; z-index: 3; perspective: 1600px; perspective-origin: 50% 38%; } @media (min-width: 810px) { .__beat[_ngcontent-ng-c4143097745] { padding: 32px; } }

.__beat-inner[_ngcontent-ng-c4143097745] { display: flex; flex-direction: column; align-items: center; gap: 32px; max-width: 1100px; width: 100%; } @media (min-width: 810px) { .__beat-inner[_ngcontent-ng-c4143097745] { gap: 44px; } }

.__beat-inner--top[_ngcontent-ng-c4143097745] { justify-content: flex-start; padding-top: clamp(40px, 8svh, 96px); gap: clamp(20px, 3svh, 36px); } @media (min-width: 810px) { .__beat-inner--top[_ngcontent-ng-c4143097745] { gap: clamp(24px, 3.5svh, 44px); } }

.__beat-inner--cinematic[_ngcontent-ng-c4143097745] { display: grid; place-items: center; padding: 0; gap: 0; width: 100%; height: 100%; max-width: none; } .__beat-inner--cinematic[_ngcontent-ng-c4143097745] > *[_ngcontent-ng-c4143097745] { grid-row: 1; grid-column: 1; } .__beat-inner--cinematic[_ngcontent-ng-c4143097745] .__beat-text[_ngcontent-ng-c4143097745] { z-index: 4; }

.__beat-text[_ngcontent-ng-c4143097745] { font-family: var(--font-family-brand); font-weight: 360; font-size: clamp(22px, 3.4vw, 32px); line-height: 1.45; text-align: center; color: var(--mat-sys-on-surface); margin: 0; font-variation-settings: "CRSV" 1, "SHRP" 100, "slnt" 0; font-feature-settings: "tnum" on, "lnum" on; will-change: transform, opacity; } .__beat-text[_ngcontent-ng-c4143097745] strong[_ngcontent-ng-c4143097745] { font-weight: 660; } .__beat-text[_ngcontent-ng-c4143097745] em[_ngcontent-ng-c4143097745] { font-style: normal; } .__beat-text[_ngcontent-ng-c4143097745] code[_ngcontent-ng-c4143097745] { font-family: var(--font-family-mono, ui-monospace, SFMono-Regular, "JetBrains Mono", Menlo, monospace); font-size: 0.86em; font-weight: 500; letter-spacing: -0.01em; background: none; padding: 0; }

.__beat-text[_ngcontent-ng-c4143097745] { max-width: min(880px, 86vw); margin-left: auto; margin-right: auto; }

.__beat-inner--form-stack[_ngcontent-ng-c4143097745] { display: grid; grid-template-rows: auto minmax(0, 1fr); justify-items: center; align-content: start; padding: clamp(12px, 2svh, 24px) clamp(16px, 2vw, 32px) clamp(12px, 2svh, 24px); gap: clamp(8px, 1.4svh, 18px); width: 100%; height: 100%; max-width: none; }

.__beat-inner--recipes-overlay[_ngcontent-ng-c4143097745] { position: relative; display: block; padding: 0; width: 100%; height: 100%; max-width: none; perspective: var(--dbg-b1-perspective, 1108px); perspective-origin: var(--dbg-b1-pers-x, 92%) var(--dbg-b1-pers-y, -25%); }

.__beat-text--upper-center[_ngcontent-ng-c4143097745] { text-align: center; margin: 0 auto; max-width: min(820px, 88vw); font-size: clamp(18px, 2.4vw, 28px); line-height: 1.4; z-index: 4; }

.__beat-text--top-left-overlay[_ngcontent-ng-c4143097745] { position: absolute; top: clamp(20px, 4svh, 56px); left: clamp(20px, 3vw, 56px); text-align: left; margin: 0; max-width: min(440px, 46vw); font-size: clamp(18px, 2.3vw, 26px); line-height: 1.4; z-index: 4; text-shadow: 0 0 24px var(--mat-sys-surface), 0 1px 0 var(--mat-sys-surface); }

.__beat-text--bottom-left-overlay[_ngcontent-ng-c4143097745] { position: absolute; bottom: clamp(20px, 4svh, 56px); left: clamp(20px, 3vw, 56px); text-align: left; margin: 0; max-width: min(440px, 46vw); font-size: clamp(18px, 2.3vw, 26px); line-height: 1.4; z-index: 4; text-shadow: 0 0 24px var(--mat-sys-surface), 0 1px 0 var(--mat-sys-surface); }

.__form-cameo[_ngcontent-ng-c4143097745] { width: clamp(340px, 88vw, 700px); height: clamp(420px, 76svh, 800px); overflow: hidden; will-change: transform, opacity; mask-image: linear-gradient(to bottom, transparent 0%, black 14%, black 86%, transparent 100%), linear-gradient(to right, transparent 0%, black 9%, black 91%, transparent 100%); mask-composite: intersect; -webkit-mask-image: linear-gradient(to bottom, transparent 0%, black 14%, black 86%, transparent 100%), linear-gradient(to right, transparent 0%, black 9%, black 91%, transparent 100%); -webkit-mask-composite: source-in; }

.__form-track[_ngcontent-ng-c4143097745] { position: relative; width: 100%; transform-origin: 50% 0%; will-change: transform; }

.__form-image[_ngcontent-ng-c4143097745] { width: 100%; max-width: 1075px; height: auto; display: block; }

.__form-image--off[_ngcontent-ng-c4143097745] { position: relative; z-index: 1; }

.__form-image--on[_ngcontent-ng-c4143097745] { position: absolute; inset: 0; z-index: 2; opacity: 0; }

.__form-cameo--fill[_ngcontent-ng-c4143097745] { width: 100%; max-width: min(540px, 88vw); height: 100%; max-height: 100%; justify-self: center; mask-image: linear-gradient(to bottom, transparent 0%, black 12%, black 88%, transparent 100%); mask-composite: add; -webkit-mask-image: linear-gradient(to bottom, transparent 0%, black 12%, black 88%, transparent 100%); -webkit-mask-composite: source-over; }

.__recipes-cameo[_ngcontent-ng-c4143097745] { width: clamp(420px, 96vw, 1320px); height: clamp(440px, 78svh, 880px); align-self: center; overflow: hidden; will-change: transform, opacity; mask-image: linear-gradient(to bottom, transparent 0%, black 9%, black 91%, transparent 100%), linear-gradient(to right, transparent 0%, black 4%, black 96%, transparent 100%); mask-composite: intersect; -webkit-mask-image: linear-gradient(to bottom, transparent 0%, black 9%, black 91%, transparent 100%), linear-gradient(to right, transparent 0%, black 4%, black 96%, transparent 100%); -webkit-mask-composite: source-in; }

.__recipes-track[_ngcontent-ng-c4143097745] { position: relative; width: 100%; transform-origin: 50% 0%; will-change: transform; }

.__recipes-image[_ngcontent-ng-c4143097745] { width: 100%; max-width: 1283px; height: auto; display: block; margin: 0 auto; }

.__recipes-cameo--full[_ngcontent-ng-c4143097745] { position: absolute; left: var(--dbg-b1-cameo-x, 20%); right: 0; top: 0; bottom: 0; height: 100%; max-width: none; align-self: stretch; transform-origin: var(--dbg-b1-trans-x, 90%) var(--dbg-b1-trans-y, 8%); mask-image: linear-gradient(to bottom, transparent 0%, black 10%, black 92%, transparent 100%); -webkit-mask-image: linear-gradient(to bottom, transparent 0%, black 10%, black 92%, transparent 100%); }

.__services-cameo[_ngcontent-ng-c4143097745] { width: clamp(380px, 90vw, 1800px); height: clamp(440px, 78svh, 880px); align-self: center; overflow: hidden; will-change: transform, opacity; mask-image: linear-gradient(to bottom, transparent 0%, black 9%, black 91%, transparent 100%); -webkit-mask-image: linear-gradient(to bottom, transparent 0%, black 9%, black 91%, transparent 100%); }

.__services-track[_ngcontent-ng-c4143097745] { position: relative; width: 100%; transform-origin: 50% 0%; will-change: transform; }

.__services-shell[_ngcontent-ng-c4143097745] { width: 100%; height: auto; display: block; }

.__services-inner-frame[_ngcontent-ng-c4143097745] { position: absolute; left: 36%; right: 11%; top: 4%; bottom: 2%; overflow: hidden; border-radius: 4px; box-shadow: inset 0 6px 14px -8px rgba(15, 36, 33, 0.1), inset 0 -6px 14px -8px rgba(15, 36, 33, 0.1); }

.__services-inner-track[_ngcontent-ng-c4143097745] { position: absolute; top: 0; left: 0; width: 100%; transform: translateY(0); will-change: transform; }

.__services-inner[_ngcontent-ng-c4143097745] { display: block; width: 100%; height: auto; }

.__b3-svcs[_ngcontent-ng-c4143097745] { position: relative; width: 100%; height: 100%; z-index: 3; pointer-events: none; }

.__b3-svc[_ngcontent-ng-c4143097745] { position: absolute; opacity: 0; transform: scale(0.5); transform-origin: 50% 50%; will-change: transform, opacity; } .__b3-svc[_ngcontent-ng-c4143097745] > *[_ngcontent-ng-c4143097745] { transform: translate(-50%, -50%); }

.__b3-svc--appdev[_ngcontent-ng-c4143097745] { top: 22%; left: 16%; }

.__b3-svc--appstage[_ngcontent-ng-c4143097745] { top: 31%; left: 84%; }

.__b3-svc--workerdev[_ngcontent-ng-c4143097745] { top: 55%; left: 8%; }

.__b3-svc--workerstage[_ngcontent-ng-c4143097745] { top: 48%; left: 92%; }

.__b3-svc--db[_ngcontent-ng-c4143097745] { top: 80%; left: 24%; }

.__b3-svc--queue[_ngcontent-ng-c4143097745] { top: 86%; left: 58%; }

.__b3-svc--cache[_ngcontent-ng-c4143097745] { top: 73%; left: 80%; }

.__auth-cameo[_ngcontent-ng-c4143097745] { width: clamp(420px, 88vw, 1080px); align-self: start; position: relative; overflow: hidden; will-change: transform, opacity; mask-image: linear-gradient(to bottom, transparent 0%, black 8%, black 92%, transparent 100%), linear-gradient(to right, transparent 0%, black 5%, black 95%, transparent 100%); mask-composite: intersect; -webkit-mask-image: linear-gradient(to bottom, transparent 0%, black 8%, black 92%, transparent 100%), linear-gradient(to right, transparent 0%, black 5%, black 95%, transparent 100%); -webkit-mask-composite: source-in; }

.__auth-track[_ngcontent-ng-c4143097745] { position: relative; width: 100%; transform-origin: 50% 50%; will-change: transform; }

.__auth-image[_ngcontent-ng-c4143097745] { width: 100%; height: auto; display: block; will-change: opacity; }

.__auth-image--1[_ngcontent-ng-c4143097745] { position: relative; }

.__auth-image--2[_ngcontent-ng-c4143097745], .__auth-image--3[_ngcontent-ng-c4143097745], .__auth-image--4[_ngcontent-ng-c4143097745], .__auth-image--5[_ngcontent-ng-c4143097745] { position: absolute; inset: 0; }

.__auth-image--1[_ngcontent-ng-c4143097745] { opacity: 1; z-index: 1; }

.__auth-image--2[_ngcontent-ng-c4143097745] { opacity: 0; z-index: 2; }

.__auth-image--3[_ngcontent-ng-c4143097745] { opacity: 0; z-index: 3; }

.__auth-image--4[_ngcontent-ng-c4143097745] { opacity: 0; z-index: 4; }

.__auth-image--5[_ngcontent-ng-c4143097745] { opacity: 0; z-index: 5; }

.__develop-cameo[_ngcontent-ng-c4143097745] { width: 100%; max-width: min(90vw, 1700px); height: 100%; align-self: stretch; justify-self: center; border-radius: 6px; overflow: hidden; position: relative; will-change: opacity; }

.__develop-track[_ngcontent-ng-c4143097745] { position: absolute; inset: 0; }

.__develop-window[_ngcontent-ng-c4143097745] { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; opacity: 0; will-change: opacity; }

.__develop-image[_ngcontent-ng-c4143097745] { display: block; max-width: 100%; max-height: 100%; width: auto; height: auto; border-radius: 6px; }

.__develop-window--terminal[_ngcontent-ng-c4143097745] .__develop-image[_ngcontent-ng-c4143097745] { max-width: 62%; }

.__b5-swap[_ngcontent-ng-c4143097745] { position: relative; display: inline-block; vertical-align: baseline; }

.__b5-swap-item[_ngcontent-ng-c4143097745] { display: inline-block; white-space: nowrap; will-change: opacity; }

.__b5-swap-item--cloud[_ngcontent-ng-c4143097745] { position: relative; opacity: 0; }

.__b5-swap-item--ide[_ngcontent-ng-c4143097745], .__b5-swap-item--term[_ngcontent-ng-c4143097745] { position: absolute; left: 0; top: 0; opacity: 0; }

.__b6-process[_ngcontent-ng-c4143097745] { display: flex; align-items: center; justify-content: center; position: absolute; --b6-process-h: min(72svh, 760px); --b6-process-w: calc(var(--b6-process-h) * 1664 / 1808); left: 75vw; top: 50%; width: var(--b6-process-w); height: var(--b6-process-h); margin-left: calc(var(--b6-process-w) / -2); margin-top: calc(var(--b6-process-h) / -2); will-change: transform, opacity; }

.__b6-process-rive[_ngcontent-ng-c4143097745] { display: block; height: 100%; aspect-ratio: 1664/1808; max-width: 100%; }

.__b6cap.__b6cap--1[_ngcontent-ng-c4143097745], .__b6cap.__b6cap--2[_ngcontent-ng-c4143097745] { position: absolute; left: 0; right: 50vw; width: min(440px, 50vw - 64px); max-width: none; margin-left: auto; margin-right: auto; padding: 0; text-align: left; text-shadow: 0 0 24px var(--mat-sys-surface), 0 1px 0 var(--mat-sys-surface); }

.__b6cap.__b6cap--1[_ngcontent-ng-c4143097745] { top: clamp(40px, 8svh, 96px); bottom: auto; }

.__b6cap.__b6cap--2[_ngcontent-ng-c4143097745] { top: auto; bottom: clamp(40px, 8svh, 96px); }

.__beat-text--closing[_ngcontent-ng-c4143097745] { font-size: clamp(24px, 3.6vw, 36px); line-height: 1.4; max-width: min(960px, 90vw); }

.__fw-btn[_ngcontent-ng-c1328342833] { --mat-button-text-container-height: 64px; --mat-button-text-horizontal-padding: calc(var(--spacing) * 2); --mat-button-text-container-shape: 4px; --mat-button-text-label-text-color: var(--mat-sys-on-surface); --mat-button-text-state-layer-color: var(--mat-sys-on-surface); --mat-button-text-label-text-font: var(--font-family-brand); --mat-button-text-label-text-size: 11px; --mat-button-text-label-text-weight: 400; --mat-button-text-label-text-tracking: 0.05em; width: 75px; } @media (min-width: 810px) { .__fw-btn[_ngcontent-ng-c1328342833] { --mat-button-text-container-height: 80px; --mat-button-text-horizontal-padding: calc(var(--spacing) * 2.5); --mat-button-text-label-text-size: 12px; width: 80px; } }

.__fw-btn--active[_ngcontent-ng-c1328342833] { background-color: var(--mat-sys-surface-container-highest); }

.__fw-label[_ngcontent-ng-c1328342833] { max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

.__empty-text[_ngcontent-ng-c1328342833] { font-family: var(--font-family-brand); font-weight: 228; font-size: 16px; line-height: 26px; text-align: center; color: var(--mat-sys-on-surface); font-variation-settings: "CRSV" 0, "SHRP" 100, "slnt" 0; max-width: 100%; margin: 0; } @media (min-width: 810px) { .__empty-text[_ngcontent-ng-c1328342833] { font-size: 18px; line-height: 30px; max-width: 430px; } }

.__discord-link[_ngcontent-ng-c1328342833] { color: #5865F2; }

.__sticky-nav[_ngcontent-ng-c1328342833] { z-index: 40; display: flex; justify-content: center; align-items: center; background: var(--white); box-shadow: 0px 186px 74px rgba(80, 149, 142, 0.01), 0px 104px 63px rgba(80, 149, 142, 0.03), 0px 46px 46px rgba(80, 149, 142, 0.06), 0px 12px 26px rgba(80, 149, 142, 0.07); border-radius: 14px; display: none; position: fixed; } @media (min-width: 810px) { .__sticky-nav[_ngcontent-ng-c1328342833] { display: flex; } } .__sticky-nav[_ngcontent-ng-c1328342833] { top: 67px; left: 50%; transform: translateX(-50%); gap: 7px; padding: 8px 10px; max-width: calc(100vw - 32px); overflow-x: auto; scrollbar-width: none; } .__sticky-nav[_ngcontent-ng-c1328342833]::-webkit-scrollbar { display: none; } .__sticky-nav[_ngcontent-ng-c1328342833] { opacity: 0; pointer-events: none; translate: 0 -4px; transition: opacity 0.35s cubic-bezier(0.25, 1, 0.5, 1), translate 0.35s cubic-bezier(0.25, 1, 0.5, 1); } .__sticky-nav--visible[_ngcontent-ng-c1328342833] { opacity: 1; pointer-events: auto; translate: 0 0; }

.__sticky-logo[_ngcontent-ng-c1328342833] { position: relative; z-index: 1; display: flex; align-items: center; justify-content: center; width: 32px; height: 32px; border-radius: 6px; border: none; background: transparent; cursor: pointer; padding: 0; transition: background-color 0.2s ease; } .__sticky-logo[_ngcontent-ng-c1328342833]:hover { background-color: color-mix(in srgb, var(--mat-sys-on-surface) 6%, transparent); } .__sticky-logo--active[_ngcontent-ng-c1328342833] { background-color: var(--alt-card-accent); }

.__content-area[_ngcontent-ng-c1328342833] { position: relative; width: 100%; padding: max(12svh, 108px) 16px 80px; } @media (min-width: 810px) { .__content-area[_ngcontent-ng-c1328342833] { padding: max(20svh, 135px) 24px 160px; } } .__content-area[_ngcontent-ng-c1328342833]::before { content: ""; position: absolute; top: 0; left: 0; right: 0; height: 180px; background: linear-gradient(to bottom, light-dark(var(--background-light), var(--background-dark)) 0%, light-dark(var(--background-light), var(--background-dark)) 15%, color-mix(in srgb, light-dark(var(--background-light), var(--background-dark)) 70%, transparent) 45%, color-mix(in srgb, light-dark(var(--background-light), var(--background-dark)) 30%, transparent) 70%, transparent 100%); z-index: 1; pointer-events: none; } .__content-area[_ngcontent-ng-c1328342833]::after { content: ""; position: absolute; bottom: 0; left: 0; right: 0; height: 180px; background: linear-gradient(to top, light-dark(var(--background-light), var(--background-dark)) 0%, light-dark(var(--background-light), var(--background-dark)) 15%, color-mix(in srgb, light-dark(var(--background-light), var(--background-dark)) 70%, transparent) 45%, color-mix(in srgb, light-dark(var(--background-light), var(--background-dark)) 30%, transparent) 70%, transparent 100%); z-index: 1; pointer-events: none; } .__content-area[_ngcontent-ng-c1328342833] { display: grid; } .__content-area[_ngcontent-ng-c1328342833] > [_ngcontent-ng-c1328342833]:not(.__aurora-backdrop) { grid-column: 1; grid-row: 1; width: 100%; max-width: 1060px; justify-self: center; position: relative; z-index: 2; } .__content-area[_ngcontent-ng-c1328342833] > .__empty-state[_ngcontent-ng-c1328342833] { max-width: 620px; } .__content-area[_ngcontent-ng-c1328342833] { transition: height 0.8s cubic-bezier(0.25, 1, 0.5, 1); }

.__state-enter[_ngcontent-ng-c1328342833] { animation: _ngcontent-ng-c1328342833_state-fade-in 0.8s 0.4s cubic-bezier(0.25, 1, 0.5, 1) both; }

.__state-leave[_ngcontent-ng-c1328342833] { animation: _ngcontent-ng-c1328342833_state-fade-out 0.6s cubic-bezier(0.4, 0, 0.6, 1) both; }

@keyframes _ngcontent-ng-c1328342833_state-fade-in { from { opacity: 0; } to { opacity: 1; } } @keyframes _ngcontent-ng-c1328342833_state-fade-out { from { opacity: 1; } to { opacity: 0; } } .__recipe-card[_ngcontent-ng-c1328342833] { animation: _ngcontent-ng-c1328342833_recipe-card-enter 0.8s cubic-bezier(0.25, 1, 0.5, 1) both; }

@keyframes _ngcontent-ng-c1328342833_recipe-card-enter { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: translateY(0); } } .__aurora-backdrop[_ngcontent-ng-c1328342833] { position: absolute; top: 0; left: 0; right: 0; height: 700px; z-index: 0; pointer-events: none; overflow: hidden; --aurora-mask: linear-gradient( to bottom, transparent 0%, black 14%, black 78%, transparent 100% ); -webkit-mask-image: var(--aurora-mask); mask-image: var(--aurora-mask); }

.__aurora[_ngcontent-ng-c1328342833] { position: absolute; top: 0; left: 0; right: 0; height: 700px; pointer-events: none; opacity: 0; transition: opacity 1.2s cubic-bezier(0.4, 0, 0.2, 1); } .__aurora--visible[_ngcontent-ng-c1328342833] { opacity: 0.2; transition: opacity 0.5s cubic-bezier(0.25, 1, 0.5, 1); }

.__sticky-sentinel[_ngcontent-ng-c2970098295] { width: 1px; height: 1px; align-self: flex-start; pointer-events: none; }

.__pill-selector[_ngcontent-ng-c2970098295] { --mat-button-text-container-height: 24px; --mat-button-text-container-shape: 4px; --mat-button-text-horizontal-padding: 8px; --mat-button-text-label-text-font: var(--font-family-brand), sans-serif; --mat-button-text-label-text-size: 10px; --mat-button-text-label-text-tracking: 0.1em; --mat-button-text-label-text-weight: 500; --mat-button-text-label-text-transform: uppercase; --mat-button-text-label-text-color: var(--mat-sys-on-surface); --mat-button-text-state-layer-color: var(--mat-sys-on-surface); --mat-button-text-ripple-color: color-mix(in srgb, var(--mat-sys-on-surface) 12%, transparent); --mat-button-text-hover-state-layer-opacity: 0.04; --mat-button-text-pressed-state-layer-opacity: 0.08; flex-shrink: 0; transition: color 0.45s cubic-bezier(0.4, 0, 0.2, 1); } @media (min-width: 810px) { .__pill-selector[_ngcontent-ng-c2970098295] { --mat-button-text-horizontal-padding: 10px; } } @media (min-width: 1400px) { .__pill-selector[_ngcontent-ng-c2970098295] { --mat-button-text-horizontal-padding: 12px; } } .__pill-selector.is-active[_ngcontent-ng-c2970098295] { --mat-button-text-label-text-color: var(--white); --mat-button-text-state-layer-color: var(--white); --mat-button-text-ripple-color: color-mix(in srgb, var(--white) 12%, transparent); }

.__indicator[_ngcontent-ng-c2970098295] { position: absolute; top: 50%; left: 0; height: 24px; margin-top: -12px; border-radius: 4px; background: var(--black); will-change: transform, width, opacity; transition: transform 0.5s cubic-bezier(0.4, 0, 0.2, 1), width 0.5s cubic-bezier(0.4, 0, 0.2, 1), opacity 0.35s ease; pointer-events: none; }

.__menu[_ngcontent-ng-c2970098295] { z-index: 40; display: flex; justify-content: center; align-items: center; background: var(--white); box-shadow: 0px 186px 74px rgba(80, 149, 142, 0.01), 0px 104px 63px rgba(80, 149, 142, 0.03), 0px 46px 46px rgba(80, 149, 142, 0.06), 0px 12px 26px rgba(80, 149, 142, 0.07); border-radius: 14px; display: none; } @media (min-width: 1100px) { .__menu[_ngcontent-ng-c2970098295] { display: flex; position: sticky; top: 67px; padding: 12px 10px; gap: 8px; width: max-content; max-width: min(100%, 1280px); height: 48px; margin: 0 auto; border-radius: 14px; } }

.__wrap[_ngcontent-ng-c1424912126] { gap: 56px; } @media (min-width: 810px) { .__wrap[_ngcontent-ng-c1424912126] { gap: 80px; } }

.__row[_ngcontent-ng-c1424912126] { display: grid; grid-template-columns: 1fr; grid-template-areas: "head" "body"; gap: 18px 32px; align-items: start; position: relative; } @media (min-width: 900px) { .__row[_ngcontent-ng-c1424912126] { grid-template-columns: minmax(260px, 380px) minmax(0, 1fr); grid-template-areas: "head body"; gap: 32px 48px; } } @media (min-width: 1440px) { .__row[_ngcontent-ng-c1424912126] { grid-template-columns: minmax(280px, 420px) minmax(0, 1fr); gap: 32px 64px; } }

.__closest-pill[_ngcontent-ng-c1424912126] { display: inline-flex; align-items: center; align-self: flex-start; font-family: var(--font-family-brand), sans-serif; font-weight: 500; font-size: 9px; line-height: 1; letter-spacing: 0.1em; text-transform: uppercase; color: var(--white); background: var(--mat-sys-primary); padding: 6px 9px; border-radius: 4px; white-space: nowrap; }

.__head[_ngcontent-ng-c1424912126] { grid-area: head; display: flex; flex-direction: column; gap: 16px; min-width: 0; }

.__title[_ngcontent-ng-c1424912126] { font-family: var(--font-family-brand); font-weight: 240; font-size: 19px; line-height: 26px; color: var(--mat-sys-on-surface); font-variation-settings: "CRSV" 1, "SHRP" 100, "slnt" 0; font-feature-settings: "tnum" on, "lnum" on; margin: 0; max-width: min(536px, 100%); } @media (max-width: 1099px) { .__title[_ngcontent-ng-c1424912126] { max-width: min(648px, 100%); } } @media (min-width: 650px) { .__title[_ngcontent-ng-c1424912126] { font-size: 22px; line-height: 30px; } } @media (min-width: 1440px) { .__title[_ngcontent-ng-c1424912126] { font-size: 24px; line-height: 32px; } } .__title[_ngcontent-ng-c1424912126] { margin: 0; max-width: 100%; }

.__logos[_ngcontent-ng-c1424912126] { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; }

.__logo-chip[_ngcontent-ng-c1424912126] { display: inline-flex; align-items: center; justify-content: center; width: 44px; height: 44px; padding: 8px; border-radius: 10px; background: color-mix(in srgb, var(--mat-sys-on-surface) 5%, transparent); border: 1px solid color-mix(in srgb, var(--mat-sys-on-surface) 8%, transparent); transition: background 0.25s ease, transform 0.25s ease; } .__logo-chip[_ngcontent-ng-c1424912126]:hover { background: color-mix(in srgb, var(--mat-sys-on-surface) 10%, transparent); transform: translateY(-1px); }

.__logo[_ngcontent-ng-c1424912126] { display: block; max-width: 100%; max-height: 100%; width: auto; height: auto; object-fit: contain; filter: contrast(1.02); }

.__examples[_ngcontent-ng-c1424912126] { font-family: var(--font-family-mono, ui-monospace, SFMono-Regular, "SF Mono", Menlo, monospace); font-weight: 400; font-size: 12px; line-height: 18px; letter-spacing: 0.01em; color: color-mix(in srgb, var(--mat-sys-on-surface) 70%, transparent); margin: 0; }

.__body-col[_ngcontent-ng-c1424912126] { grid-area: body; display: flex; flex-direction: column; gap: 20px; min-width: 0; } @media (min-width: 810px) { .__body-col[_ngcontent-ng-c1424912126] { gap: 24px; } }

.__body[_ngcontent-ng-c1424912126] { font-family: var(--font-family-brand); font-weight: 284; font-size: 15px; line-height: 23px; letter-spacing: 0.01em; color: var(--mat-sys-on-surface); font-variation-settings: "CRSV" 0, "SHRP" 0, "slnt" 0; margin: 0; max-width: min(536px, 100%); } @media (max-width: 1099px) { .__body[_ngcontent-ng-c1424912126] { max-width: min(648px, 100%); } } @media (min-width: 1440px) { .__body[_ngcontent-ng-c1424912126] { font-size: 16px; line-height: 24px; } } .__body[_ngcontent-ng-c1424912126] strong[_ngcontent-ng-c1424912126] { font-weight: 500; } .__body[_ngcontent-ng-c1424912126] code[_ngcontent-ng-c1424912126] { font-family: var(--font-family-mono, ui-monospace, SFMono-Regular, "SF Mono", Menlo, monospace); font-size: 0.88em; font-weight: 400; letter-spacing: -0.01em; padding: 0.1em 0.3em; border-radius: 4px; background: color-mix(in srgb, var(--mat-sys-on-surface) 7%, transparent); } .__body[_ngcontent-ng-c1424912126] a[href*="docs.zerops.io"][_ngcontent-ng-c1424912126] { position: relative; display: inline; padding: 1px 6px 1px 5px; color: color-mix(in srgb, var(--mat-sys-primary) 55%, var(--mat-sys-on-surface)); background: color-mix(in srgb, var(--mat-sys-primary) 8%, transparent); border-radius: 5px; text-decoration: none; font-weight: inherit; cursor: pointer; transition: background 0.2s, color 0.2s; line-height: inherit; } .__body[_ngcontent-ng-c1424912126] a[href*="docs.zerops.io"][_ngcontent-ng-c1424912126]::after { content: "help_outline"; font-family: "Material Icons Outlined"; font-weight: 300; font-size: 0.92em; position: relative; top: 0.12em; margin-left: 0.15em; opacity: 0.65; } .__body[_ngcontent-ng-c1424912126] a[href*="docs.zerops.io"][_ngcontent-ng-c1424912126]:hover { background: color-mix(in srgb, var(--mat-sys-primary) 14%, transparent); color: var(--mat-sys-primary); } .__body[_ngcontent-ng-c1424912126] a[href*="docs.zerops.io"][_ngcontent-ng-c1424912126]:hover::after { opacity: 0.9; } .__body[_ngcontent-ng-c1424912126] a[href*="docs.zerops.io"][_ngcontent-ng-c1424912126] code[_ngcontent-ng-c1424912126] { background: none; padding: 0; } .__body[_ngcontent-ng-c1424912126] a[href^="/#"][_ngcontent-ng-c1424912126], .__body[_ngcontent-ng-c1424912126] a.__home-link[_ngcontent-ng-c1424912126] { position: relative; display: inline; padding: 1px 6px 1px 5px; color: color-mix(in srgb, var(--mat-sys-on-surface) 65%, transparent); background: color-mix(in srgb, var(--mat-sys-on-surface) 6%, transparent); border-radius: 5px; text-decoration: none; font-weight: inherit; cursor: pointer; transition: background 0.2s, color 0.2s; line-height: inherit; } .__body[_ngcontent-ng-c1424912126] a[href^="/#"][_ngcontent-ng-c1424912126]::after, .__body[_ngcontent-ng-c1424912126] a.__home-link[_ngcontent-ng-c1424912126]::after { content: "north_east"; font-family: "Material Icons Outlined"; font-weight: 300; font-size: 0.84em; position: relative; top: 0.12em; margin-left: 0.15em; opacity: 0.55; } .__body[_ngcontent-ng-c1424912126] a[href^="/#"][_ngcontent-ng-c1424912126]:hover, .__body[_ngcontent-ng-c1424912126] a.__home-link[_ngcontent-ng-c1424912126]:hover { background: color-mix(in srgb, var(--mat-sys-on-surface) 12%, transparent); color: var(--mat-sys-on-surface); } .__body[_ngcontent-ng-c1424912126] a[href^="/#"][_ngcontent-ng-c1424912126]:hover::after, .__body[_ngcontent-ng-c1424912126] a.__home-link[_ngcontent-ng-c1424912126]:hover::after { opacity: 0.85; } .__body[_ngcontent-ng-c1424912126] a[href^="/#"][_ngcontent-ng-c1424912126] code[_ngcontent-ng-c1424912126], .__body[_ngcontent-ng-c1424912126] a.__home-link[_ngcontent-ng-c1424912126] code[_ngcontent-ng-c1424912126] { background: none; padding: 0; } .__body[_ngcontent-ng-c1424912126] { margin: 0; max-width: min(640px, 100%); } .__body[_ngcontent-ng-c1424912126] em[_ngcontent-ng-c1424912126] { font-style: italic; font-weight: 320; color: color-mix(in srgb, var(--mat-sys-on-surface) 80%, transparent); }

.__zcp-answer[_ngcontent-ng-c1424912126] { position: relative; display: flex; flex-direction: column; gap: 10px; padding: 16px; border-radius: 12px; background: color-mix(in srgb, var(--mat-sys-primary) 6%, transparent); border: 1px solid color-mix(in srgb, var(--mat-sys-primary) 18%, transparent); max-width: min(640px, 100%); } @media (min-width: 810px) { .__zcp-answer[_ngcontent-ng-c1424912126] { padding: 20px 22px; gap: 12px; } }

.__zcp-answer-label[_ngcontent-ng-c1424912126] { display: inline-flex; align-items: center; gap: 6px; font-family: var(--font-family-brand), sans-serif; font-weight: 600; font-size: 11px; line-height: 14px; letter-spacing: 0.12em; text-transform: uppercase; color: var(--mat-sys-primary); font-variation-settings: "CRSV" 0, "SHRP" 100, "slnt" 0; }

.__zcp-answer-arrow[_ngcontent-ng-c1424912126] { display: inline-flex; align-items: center; justify-content: center; width: 16px; height: 16px; border-radius: 4px; background: color-mix(in srgb, var(--mat-sys-primary) 18%, transparent); color: var(--mat-sys-primary); font-size: 11px; font-weight: 500; line-height: 1; letter-spacing: 0; }

.__zcp-answer-body[_ngcontent-ng-c1424912126] { font-family: var(--font-family-brand); font-weight: 284; font-size: 15px; line-height: 23px; letter-spacing: 0.01em; color: var(--mat-sys-on-surface); font-variation-settings: "CRSV" 0, "SHRP" 0, "slnt" 0; margin: 0; max-width: min(536px, 100%); } @media (max-width: 1099px) { .__zcp-answer-body[_ngcontent-ng-c1424912126] { max-width: min(648px, 100%); } } @media (min-width: 1440px) { .__zcp-answer-body[_ngcontent-ng-c1424912126] { font-size: 16px; line-height: 24px; } } .__zcp-answer-body[_ngcontent-ng-c1424912126] strong[_ngcontent-ng-c1424912126] { font-weight: 500; } .__zcp-answer-body[_ngcontent-ng-c1424912126] code[_ngcontent-ng-c1424912126] { font-family: var(--font-family-mono, ui-monospace, SFMono-Regular, "SF Mono", Menlo, monospace); font-size: 0.88em; font-weight: 400; letter-spacing: -0.01em; padding: 0.1em 0.3em; border-radius: 4px; background: color-mix(in srgb, var(--mat-sys-on-surface) 7%, transparent); } .__zcp-answer-body[_ngcontent-ng-c1424912126] a[href*="docs.zerops.io"][_ngcontent-ng-c1424912126] { position: relative; display: inline; padding: 1px 6px 1px 5px; color: color-mix(in srgb, var(--mat-sys-primary) 55%, var(--mat-sys-on-surface)); background: color-mix(in srgb, var(--mat-sys-primary) 8%, transparent); border-radius: 5px; text-decoration: none; font-weight: inherit; cursor: pointer; transition: background 0.2s, color 0.2s; line-height: inherit; } .__zcp-answer-body[_ngcontent-ng-c1424912126] a[href*="docs.zerops.io"][_ngcontent-ng-c1424912126]::after { content: "help_outline"; font-family: "Material Icons Outlined"; font-weight: 300; font-size: 0.92em; position: relative; top: 0.12em; margin-left: 0.15em; opacity: 0.65; } .__zcp-answer-body[_ngcontent-ng-c1424912126] a[href*="docs.zerops.io"][_ngcontent-ng-c1424912126]:hover { background: color-mix(in srgb, var(--mat-sys-primary) 14%, transparent); color: var(--mat-sys-primary); } .__zcp-answer-body[_ngcontent-ng-c1424912126] a[href*="docs.zerops.io"][_ngcontent-ng-c1424912126]:hover::after { opacity: 0.9; } .__zcp-answer-body[_ngcontent-ng-c1424912126] a[href*="docs.zerops.io"][_ngcontent-ng-c1424912126] code[_ngcontent-ng-c1424912126] { background: none; padding: 0; } .__zcp-answer-body[_ngcontent-ng-c1424912126] a[href^="/#"][_ngcontent-ng-c1424912126], .__zcp-answer-body[_ngcontent-ng-c1424912126] a.__home-link[_ngcontent-ng-c1424912126] { position: relative; display: inline; padding: 1px 6px 1px 5px; color: color-mix(in srgb, var(--mat-sys-on-surface) 65%, transparent); background: color-mix(in srgb, var(--mat-sys-on-surface) 6%, transparent); border-radius: 5px; text-decoration: none; font-weight: inherit; cursor: pointer; transition: background 0.2s, color 0.2s; line-height: inherit; } .__zcp-answer-body[_ngcontent-ng-c1424912126] a[href^="/#"][_ngcontent-ng-c1424912126]::after, .__zcp-answer-body[_ngcontent-ng-c1424912126] a.__home-link[_ngcontent-ng-c1424912126]::after { content: "north_east"; font-family: "Material Icons Outlined"; font-weight: 300; font-size: 0.84em; position: relative; top: 0.12em; margin-left: 0.15em; opacity: 0.55; } .__zcp-answer-body[_ngcontent-ng-c1424912126] a[href^="/#"][_ngcontent-ng-c1424912126]:hover, .__zcp-answer-body[_ngcontent-ng-c1424912126] a.__home-link[_ngcontent-ng-c1424912126]:hover { background: color-mix(in srgb, var(--mat-sys-on-surface) 12%, transparent); color: var(--mat-sys-on-surface); } .__zcp-answer-body[_ngcontent-ng-c1424912126] a[href^="/#"][_ngcontent-ng-c1424912126]:hover::after, .__zcp-answer-body[_ngcontent-ng-c1424912126] a.__home-link[_ngcontent-ng-c1424912126]:hover::after { opacity: 0.85; } .__zcp-answer-body[_ngcontent-ng-c1424912126] a[href^="/#"][_ngcontent-ng-c1424912126] code[_ngcontent-ng-c1424912126], .__zcp-answer-body[_ngcontent-ng-c1424912126] a.__home-link[_ngcontent-ng-c1424912126] code[_ngcontent-ng-c1424912126] { background: none; padding: 0; } .__zcp-answer-body[_ngcontent-ng-c1424912126] { margin: 0; max-width: 100%; } .__zcp-answer-body[_ngcontent-ng-c1424912126] em[_ngcontent-ng-c1424912126] { font-style: italic; font-weight: 320; color: color-mix(in srgb, var(--mat-sys-on-surface) 80%, transparent); }

.__node-label[_ngcontent-ng-c4207994126] { font-family: var(--font-family-brand); font-weight: 600; font-size: 11px; line-height: 14px; letter-spacing: 0.12em; text-transform: uppercase; color: #254E4A; white-space: nowrap; font-variation-settings: "CRSV" 0, "SHRP" 100, "slnt" 0; }

.__node-label--mono[_ngcontent-ng-c4207994126] { font-family: "Roboto Mono", "JetBrains Mono", ui-monospace, monospace; font-weight: 500; font-size: 10px; line-height: 12px; letter-spacing: 0.02em; text-transform: none; color: #464646; text-align: center; padding: 0 8px; }

.__node-label--mono-core[_ngcontent-ng-c4207994126] { font-family: "Roboto Mono", "JetBrains Mono", ui-monospace, monospace; font-weight: 500; font-size: 10px; line-height: 12px; letter-spacing: 0.02em; text-transform: none; color: #254E4A; text-align: center; }

.__node-label--side[_ngcontent-ng-c4207994126] { color: #464646; }

.__node-label--sub[_ngcontent-ng-c4207994126] { margin: 0 auto; }

.__node-label--multiline[_ngcontent-ng-c4207994126] { white-space: pre-line; }

.__node-label--ext-text[_ngcontent-ng-c4207994126] { white-space: pre-line; text-align: center; font-size: 9px; line-height: 12px; }

.__bar-row[_ngcontent-ng-c4207994126] { display: flex; gap: 5px; align-items: flex-end; }

.__bar-row--infra[_ngcontent-ng-c4207994126] { gap: 9px; }

.__bar-row--balancer[_ngcontent-ng-c4207994126] { gap: 5px; }

.__bar-col[_ngcontent-ng-c4207994126] { display: flex; flex-direction: column; gap: 4px; }

.__label-block[_ngcontent-ng-c4207994126] { display: flex; flex-direction: column; align-items: center; gap: 5px; }

.__tech-icon[_ngcontent-ng-c4207994126] { width: 16px !important; height: 16px !important; font-size: 16px !important; line-height: 16px !important; opacity: 1; filter: grayscale(1); }

.__service-box[_ngcontent-ng-c4207994126] .__tech-icon[_ngcontent-ng-c4207994126] { width: 25px !important; height: 25px !important; font-size: 25px !important; line-height: 25px !important; position: absolute; flex-shrink: 0; left: -5px; bottom: -5px; }

.__tech-icons-row[_ngcontent-ng-c4207994126] { display: flex; align-items: center; gap: 6px; }

.__endpoint-pill[_ngcontent-ng-c4207994126] { display: flex; align-items: center; justify-content: center; width: 278px; height: 51px; padding: 22px; background: #fff; border-radius: 8px; box-shadow: 0px 38px 15px rgba(0, 0, 0, 0.01), 0px 21px 13px rgba(0, 0, 0, 0.02), 0px 10px 10px rgba(0, 0, 0, 0.03), 0px 2px 5px rgba(0, 0, 0, 0.03); }

.__endpoint-label[_ngcontent-ng-c4207994126] { font-family: var(--font-family-brand); font-weight: 600; font-size: 11px; line-height: 14px; letter-spacing: 0.12em; text-transform: uppercase; color: #464646; text-align: center; font-variation-settings: "CRSV" 0, "SHRP" 100, "slnt" 0; }

.__infra-core-box[_ngcontent-ng-c4207994126] { display: flex; flex-direction: column; align-items: center; gap: 11px; width: var(--diagram-node-infra-core-width, 89px); min-height: 97px; }

.__infra-side-box[_ngcontent-ng-c4207994126] { display: flex; flex-direction: column; align-items: center; min-height: 97px; gap: 11px; }

.__side-bottom[_ngcontent-ng-c4207994126] { display: flex; flex-direction: column; align-items: center; gap: 5px; }

.__balancer-box[_ngcontent-ng-c4207994126] { display: flex; flex-direction: column; align-items: center; gap: 11px; padding: 11px; background: var(--alt-card-banner-bg); background-blend-mode: multiply; border-radius: 8px; width: 85px; height: 108px; overflow: hidden; }

.__balancer-label-area[_ngcontent-ng-c4207994126] { display: flex; flex-direction: column; align-items: center; gap: 5px; }

.__service-box[_ngcontent-ng-c4207994126] { position: relative; overflow: hidden; display: flex; flex-direction: column; align-items: center; gap: 11px; padding: 5px 5px 11px; padding-bottom: 20px; background: var(--service-bg, #D8D7D7); border-radius: 8px; }

.__services-row--top[_nghost-ng-c4207994126] .__service-box[_ngcontent-ng-c4207994126], .__services-row--top [_nghost-ng-c4207994126] .__service-box[_ngcontent-ng-c4207994126] { padding: 5px; padding-bottom: 20px; }

.__compound[_nghost-ng-c4207994126], .__compound [_nghost-ng-c4207994126] { position: static; contain: style; overflow: visible; }

.__compound[_nghost-ng-c4207994126] .__service-box[_ngcontent-ng-c4207994126], .__compound [_nghost-ng-c4207994126] .__service-box[_ngcontent-ng-c4207994126] { background: none; border-radius: 0; padding: 0; position: static; overflow: visible; }

.__service-highlighted-box[_ngcontent-ng-c4207994126] { display: flex; flex-direction: column; align-items: center; padding: 5px 5px 11px; gap: 9px; background: var(--alt-card-banner-bg); background-blend-mode: multiply; border-radius: 5px; }

.__external-box[_ngcontent-ng-c4207994126] { display: flex; flex-direction: column; align-items: flex-start; gap: 5px; padding: 5px; background: #D8D7D7; border-radius: 8px; width: 115px; height: 74px; justify-content: center; }

.__ext-inner-card[_ngcontent-ng-c4207994126] { display: flex; flex-direction: column; align-items: center; gap: 14px; padding: 11px; background: #fff; border-radius: 5px; width: 104px; height: 41px; justify-content: center; box-shadow: 0px 38px 15px rgba(0, 0, 0, 0.01), 0px 21px 13px rgba(0, 0, 0, 0.02), 0px 10px 10px rgba(0, 0, 0, 0.03), 0px 2px 5px rgba(0, 0, 0, 0.03); }

.__ext-sublabel-frame[_ngcontent-ng-c4207994126] { display: flex; align-items: center; justify-content: center; width: 104px; height: 18px; padding: 5px; background: #E8E7E7; border-radius: 3px; }

.__grid[_ngcontent-ng-c449404196] { display: grid; grid-template-columns: 1fr 660px; gap: 56px; } @media (max-width: 1420px) { .__grid[_ngcontent-ng-c449404196] { grid-template-columns: 1fr 560px; } } @media (max-width: 1099px) { .__grid[_ngcontent-ng-c449404196] { grid-template-columns: minmax(0, 1fr); } } @media (max-width: 809px) { .__grid[_ngcontent-ng-c449404196] { padding-right: 56px; } } @media (max-width: 599px) { .__grid[_ngcontent-ng-c449404196] { padding-right: 40px; } }

@media (max-width: 1099px) { .__text-col[_ngcontent-ng-c449404196] { align-items: center; text-align: center; max-width: min(648px, 100%); margin: 0 auto; } }

@media (min-width: 1100px) { .__left-col[_ngcontent-ng-c449404196] { padding-top: clamp(80px, 14vw, 200px); } }

.__section-label[_ngcontent-ng-c449404196] { display: inline-flex; align-items: center; font-family: var(--font-family-brand), sans-serif; font-weight: 500; font-size: 10px; line-height: 1; letter-spacing: 0.1em; text-transform: uppercase; color: var(--white); background: var(--black); padding: 6px 10px; border-radius: 4px; margin-left: auto; margin-right: auto; white-space: nowrap; width: fit-content; align-self: center; } @media (min-width: 1100px) { .__section-label[_ngcontent-ng-c449404196] { display: none; } }

.__title[_ngcontent-ng-c449404196] { font-family: var(--font-family-brand); font-weight: 240; font-size: 19px; line-height: 26px; color: var(--mat-sys-on-surface); font-variation-settings: "CRSV" 1, "SHRP" 100, "slnt" 0; font-feature-settings: "tnum" on, "lnum" on; margin: 0; max-width: min(536px, 100%); } @media (max-width: 1099px) { .__title[_ngcontent-ng-c449404196] { max-width: min(648px, 100%); } } @media (min-width: 650px) { .__title[_ngcontent-ng-c449404196] { font-size: 22px; line-height: 30px; } } @media (min-width: 1440px) { .__title[_ngcontent-ng-c449404196] { font-size: 24px; line-height: 32px; } }

.__subtitle[_ngcontent-ng-c449404196] { font-family: var(--font-family-brand); font-weight: 239; font-size: 16px; line-height: 24px; color: var(--mat-sys-on-surface); font-variation-settings: "CRSV" 1, "SHRP" 0, "slnt" 0; margin: 0; max-width: min(536px, 100%); } @media (max-width: 1099px) { .__subtitle[_ngcontent-ng-c449404196] { max-width: min(648px, 100%); } } @media (min-width: 650px) { .__subtitle[_ngcontent-ng-c449404196] { font-size: 18px; line-height: 28px; } } @media (min-width: 1440px) { .__subtitle[_ngcontent-ng-c449404196] { font-size: 20px; line-height: 32px; } } .__subtitle[_ngcontent-ng-c449404196] strong[_ngcontent-ng-c449404196] { font-weight: 500; } .__subtitle[_ngcontent-ng-c449404196] code[_ngcontent-ng-c449404196] { font-family: var(--font-family-mono, ui-monospace, SFMono-Regular, "SF Mono", Menlo, monospace); font-size: 0.88em; font-weight: 400; letter-spacing: -0.01em; padding: 0.1em 0.3em; border-radius: 4px; background: color-mix(in srgb, var(--mat-sys-on-surface) 7%, transparent); } .__subtitle[_ngcontent-ng-c449404196] a[href*="docs.zerops.io"][_ngcontent-ng-c449404196] { position: relative; display: inline; padding: 1px 6px 1px 5px; color: color-mix(in srgb, var(--mat-sys-primary) 55%, var(--mat-sys-on-surface)); background: color-mix(in srgb, var(--mat-sys-primary) 8%, transparent); border-radius: 5px; text-decoration: none; font-weight: inherit; cursor: pointer; transition: background 0.2s, color 0.2s; line-height: inherit; } .__subtitle[_ngcontent-ng-c449404196] a[href*="docs.zerops.io"][_ngcontent-ng-c449404196]::after { content: "help_outline"; font-family: "Material Icons Outlined"; font-weight: 300; font-size: 0.92em; position: relative; top: 0.12em; margin-left: 0.15em; opacity: 0.65; } .__subtitle[_ngcontent-ng-c449404196] a[href*="docs.zerops.io"][_ngcontent-ng-c449404196]:hover { background: color-mix(in srgb, var(--mat-sys-primary) 14%, transparent); color: var(--mat-sys-primary); } .__subtitle[_ngcontent-ng-c449404196] a[href*="docs.zerops.io"][_ngcontent-ng-c449404196]:hover::after { opacity: 0.9; } .__subtitle[_ngcontent-ng-c449404196] a[href*="docs.zerops.io"][_ngcontent-ng-c449404196] code[_ngcontent-ng-c449404196] { background: none; padding: 0; } .__subtitle[_ngcontent-ng-c449404196] a[href^="/#"][_ngcontent-ng-c449404196], .__subtitle[_ngcontent-ng-c449404196] a.__home-link[_ngcontent-ng-c449404196] { position: relative; display: inline; padding: 1px 6px 1px 5px; color: color-mix(in srgb, var(--mat-sys-on-surface) 65%, transparent); background: color-mix(in srgb, var(--mat-sys-on-surface) 6%, transparent); border-radius: 5px; text-decoration: none; font-weight: inherit; cursor: pointer; transition: background 0.2s, color 0.2s; line-height: inherit; } .__subtitle[_ngcontent-ng-c449404196] a[href^="/#"][_ngcontent-ng-c449404196]::after, .__subtitle[_ngcontent-ng-c449404196] a.__home-link[_ngcontent-ng-c449404196]::after { content: "north_east"; font-family: "Material Icons Outlined"; font-weight: 300; font-size: 0.84em; position: relative; top: 0.12em; margin-left: 0.15em; opacity: 0.55; } .__subtitle[_ngcontent-ng-c449404196] a[href^="/#"][_ngcontent-ng-c449404196]:hover, .__subtitle[_ngcontent-ng-c449404196] a.__home-link[_ngcontent-ng-c449404196]:hover { background: color-mix(in srgb, var(--mat-sys-on-surface) 12%, transparent); color: var(--mat-sys-on-surface); } .__subtitle[_ngcontent-ng-c449404196] a[href^="/#"][_ngcontent-ng-c449404196]:hover::after, .__subtitle[_ngcontent-ng-c449404196] a.__home-link[_ngcontent-ng-c449404196]:hover::after { opacity: 0.85; } .__subtitle[_ngcontent-ng-c449404196] a[href^="/#"][_ngcontent-ng-c449404196] code[_ngcontent-ng-c449404196], .__subtitle[_ngcontent-ng-c449404196] a.__home-link[_ngcontent-ng-c449404196] code[_ngcontent-ng-c449404196] { background: none; padding: 0; }

.__body[_ngcontent-ng-c449404196] { font-family: var(--font-family-brand); font-weight: 284; font-size: 15px; line-height: 23px; letter-spacing: 0.01em; color: var(--mat-sys-on-surface); font-variation-settings: "CRSV" 0, "SHRP" 0, "slnt" 0; margin: 0; max-width: min(536px, 100%); } @media (max-width: 1099px) { .__body[_ngcontent-ng-c449404196] { max-width: min(648px, 100%); } } @media (min-width: 1440px) { .__body[_ngcontent-ng-c449404196] { font-size: 16px; line-height: 24px; } } .__body[_ngcontent-ng-c449404196] strong[_ngcontent-ng-c449404196] { font-weight: 500; } .__body[_ngcontent-ng-c449404196] code[_ngcontent-ng-c449404196] { font-family: var(--font-family-mono, ui-monospace, SFMono-Regular, "SF Mono", Menlo, monospace); font-size: 0.88em; font-weight: 400; letter-spacing: -0.01em; padding: 0.1em 0.3em; border-radius: 4px; background: color-mix(in srgb, var(--mat-sys-on-surface) 7%, transparent); } .__body[_ngcontent-ng-c449404196] a[href*="docs.zerops.io"][_ngcontent-ng-c449404196] { position: relative; display: inline; padding: 1px 6px 1px 5px; color: color-mix(in srgb, var(--mat-sys-primary) 55%, var(--mat-sys-on-surface)); background: color-mix(in srgb, var(--mat-sys-primary) 8%, transparent); border-radius: 5px; text-decoration: none; font-weight: inherit; cursor: pointer; transition: background 0.2s, color 0.2s; line-height: inherit; } .__body[_ngcontent-ng-c449404196] a[href*="docs.zerops.io"][_ngcontent-ng-c449404196]::after { content: "help_outline"; font-family: "Material Icons Outlined"; font-weight: 300; font-size: 0.92em; position: relative; top: 0.12em; margin-left: 0.15em; opacity: 0.65; } .__body[_ngcontent-ng-c449404196] a[href*="docs.zerops.io"][_ngcontent-ng-c449404196]:hover { background: color-mix(in srgb, var(--mat-sys-primary) 14%, transparent); color: var(--mat-sys-primary); } .__body[_ngcontent-ng-c449404196] a[href*="docs.zerops.io"][_ngcontent-ng-c449404196]:hover::after { opacity: 0.9; } .__body[_ngcontent-ng-c449404196] a[href*="docs.zerops.io"][_ngcontent-ng-c449404196] code[_ngcontent-ng-c449404196] { background: none; padding: 0; } .__body[_ngcontent-ng-c449404196] a[href^="/#"][_ngcontent-ng-c449404196], .__body[_ngcontent-ng-c449404196] a.__home-link[_ngcontent-ng-c449404196] { position: relative; display: inline; padding: 1px 6px 1px 5px; color: color-mix(in srgb, var(--mat-sys-on-surface) 65%, transparent); background: color-mix(in srgb, var(--mat-sys-on-surface) 6%, transparent); border-radius: 5px; text-decoration: none; font-weight: inherit; cursor: pointer; transition: background 0.2s, color 0.2s; line-height: inherit; } .__body[_ngcontent-ng-c449404196] a[href^="/#"][_ngcontent-ng-c449404196]::after, .__body[_ngcontent-ng-c449404196] a.__home-link[_ngcontent-ng-c449404196]::after { content: "north_east"; font-family: "Material Icons Outlined"; font-weight: 300; font-size: 0.84em; position: relative; top: 0.12em; margin-left: 0.15em; opacity: 0.55; } .__body[_ngcontent-ng-c449404196] a[href^="/#"][_ngcontent-ng-c449404196]:hover, .__body[_ngcontent-ng-c449404196] a.__home-link[_ngcontent-ng-c449404196]:hover { background: color-mix(in srgb, var(--mat-sys-on-surface) 12%, transparent); color: var(--mat-sys-on-surface); } .__body[_ngcontent-ng-c449404196] a[href^="/#"][_ngcontent-ng-c449404196]:hover::after, .__body[_ngcontent-ng-c449404196] a.__home-link[_ngcontent-ng-c449404196]:hover::after { opacity: 0.85; } .__body[_ngcontent-ng-c449404196] a[href^="/#"][_ngcontent-ng-c449404196] code[_ngcontent-ng-c449404196], .__body[_ngcontent-ng-c449404196] a.__home-link[_ngcontent-ng-c449404196] code[_ngcontent-ng-c449404196] { background: none; padding: 0; }

zw-network-diagram[_ngcontent-ng-c449404196] { display: block; } @media (max-width: 1099px) { zw-network-diagram[_ngcontent-ng-c449404196] { max-width: 660px; margin: 0 auto; } zw-network-diagram[_ngcontent-ng-c449404196] .__project { margin-left: -10px; } zw-network-diagram[_ngcontent-ng-c449404196] .__endpoint-row { margin-left: -18px; } } @media (max-width: 809px) { zw-network-diagram[_ngcontent-ng-c449404196] { max-width: 540px; } } @media (max-width: 599px) { zw-network-diagram[_ngcontent-ng-c449404196] { max-width: 100%; } }

.__grid[_ngcontent-ng-c2289786030] { display: grid; grid-template-columns: 700px 1fr; gap: 112px; } @media (max-width: 1420px) { .__grid[_ngcontent-ng-c2289786030] { grid-template-columns: 580px 1fr; gap: 80px; } } @media (max-width: 1099px) { .__grid[_ngcontent-ng-c2289786030] { grid-template-columns: minmax(0, 1fr); gap: 56px; } }

@media (max-width: 1099px) { .__text-col[_ngcontent-ng-c2289786030] { align-items: center; text-align: center; max-width: min(648px, 100%); margin: 0 auto; } }

@media (min-width: 1100px) { .__right-col[_ngcontent-ng-c2289786030] { align-self: center; } } @media (max-width: 1099px) { .__right-col[_ngcontent-ng-c2289786030] { order: 2; } }

.__section-label[_ngcontent-ng-c2289786030] { display: inline-flex; align-items: center; font-family: var(--font-family-brand), sans-serif; font-weight: 500; font-size: 10px; line-height: 1; letter-spacing: 0.1em; text-transform: uppercase; color: var(--white); background: var(--black); padding: 6px 10px; border-radius: 4px; margin-left: auto; margin-right: auto; white-space: nowrap; width: fit-content; align-self: center; } @media (min-width: 1100px) { .__section-label[_ngcontent-ng-c2289786030] { display: none; } }

.__title[_ngcontent-ng-c2289786030] { font-family: var(--font-family-brand); font-weight: 240; font-size: 19px; line-height: 26px; color: var(--mat-sys-on-surface); font-variation-settings: "CRSV" 1, "SHRP" 100, "slnt" 0; font-feature-settings: "tnum" on, "lnum" on; margin: 0; max-width: min(536px, 100%); } @media (max-width: 1099px) { .__title[_ngcontent-ng-c2289786030] { max-width: min(648px, 100%); } } @media (min-width: 650px) { .__title[_ngcontent-ng-c2289786030] { font-size: 22px; line-height: 30px; } } @media (min-width: 1440px) { .__title[_ngcontent-ng-c2289786030] { font-size: 24px; line-height: 32px; } }

.__subtitle[_ngcontent-ng-c2289786030] { font-family: var(--font-family-brand); font-weight: 239; font-size: 16px; line-height: 24px; color: var(--mat-sys-on-surface); font-variation-settings: "CRSV" 1, "SHRP" 0, "slnt" 0; margin: 0; max-width: min(536px, 100%); } @media (max-width: 1099px) { .__subtitle[_ngcontent-ng-c2289786030] { max-width: min(648px, 100%); } } @media (min-width: 650px) { .__subtitle[_ngcontent-ng-c2289786030] { font-size: 18px; line-height: 28px; } } @media (min-width: 1440px) { .__subtitle[_ngcontent-ng-c2289786030] { font-size: 20px; line-height: 32px; } } .__subtitle[_ngcontent-ng-c2289786030] strong[_ngcontent-ng-c2289786030] { font-weight: 500; } .__subtitle[_ngcontent-ng-c2289786030] code[_ngcontent-ng-c2289786030] { font-family: var(--font-family-mono, ui-monospace, SFMono-Regular, "SF Mono", Menlo, monospace); font-size: 0.88em; font-weight: 400; letter-spacing: -0.01em; padding: 0.1em 0.3em; border-radius: 4px; background: color-mix(in srgb, var(--mat-sys-on-surface) 7%, transparent); } .__subtitle[_ngcontent-ng-c2289786030] a[href*="docs.zerops.io"][_ngcontent-ng-c2289786030] { position: relative; display: inline; padding: 1px 6px 1px 5px; color: color-mix(in srgb, var(--mat-sys-primary) 55%, var(--mat-sys-on-surface)); background: color-mix(in srgb, var(--mat-sys-primary) 8%, transparent); border-radius: 5px; text-decoration: none; font-weight: inherit; cursor: pointer; transition: background 0.2s, color 0.2s; line-height: inherit; } .__subtitle[_ngcontent-ng-c2289786030] a[href*="docs.zerops.io"][_ngcontent-ng-c2289786030]::after { content: "help_outline"; font-family: "Material Icons Outlined"; font-weight: 300; font-size: 0.92em; position: relative; top: 0.12em; margin-left: 0.15em; opacity: 0.65; } .__subtitle[_ngcontent-ng-c2289786030] a[href*="docs.zerops.io"][_ngcontent-ng-c2289786030]:hover { background: color-mix(in srgb, var(--mat-sys-primary) 14%, transparent); color: var(--mat-sys-primary); } .__subtitle[_ngcontent-ng-c2289786030] a[href*="docs.zerops.io"][_ngcontent-ng-c2289786030]:hover::after { opacity: 0.9; } .__subtitle[_ngcontent-ng-c2289786030] a[href*="docs.zerops.io"][_ngcontent-ng-c2289786030] code[_ngcontent-ng-c2289786030] { background: none; padding: 0; } .__subtitle[_ngcontent-ng-c2289786030] a[href^="/#"][_ngcontent-ng-c2289786030], .__subtitle[_ngcontent-ng-c2289786030] a.__home-link[_ngcontent-ng-c2289786030] { position: relative; display: inline; padding: 1px 6px 1px 5px; color: color-mix(in srgb, var(--mat-sys-on-surface) 65%, transparent); background: color-mix(in srgb, var(--mat-sys-on-surface) 6%, transparent); border-radius: 5px; text-decoration: none; font-weight: inherit; cursor: pointer; transition: background 0.2s, color 0.2s; line-height: inherit; } .__subtitle[_ngcontent-ng-c2289786030] a[href^="/#"][_ngcontent-ng-c2289786030]::after, .__subtitle[_ngcontent-ng-c2289786030] a.__home-link[_ngcontent-ng-c2289786030]::after { content: "north_east"; font-family: "Material Icons Outlined"; font-weight: 300; font-size: 0.84em; position: relative; top: 0.12em; margin-left: 0.15em; opacity: 0.55; } .__subtitle[_ngcontent-ng-c2289786030] a[href^="/#"][_ngcontent-ng-c2289786030]:hover, .__subtitle[_ngcontent-ng-c2289786030] a.__home-link[_ngcontent-ng-c2289786030]:hover { background: color-mix(in srgb, var(--mat-sys-on-surface) 12%, transparent); color: var(--mat-sys-on-surface); } .__subtitle[_ngcontent-ng-c2289786030] a[href^="/#"][_ngcontent-ng-c2289786030]:hover::after, .__subtitle[_ngcontent-ng-c2289786030] a.__home-link[_ngcontent-ng-c2289786030]:hover::after { opacity: 0.85; } .__subtitle[_ngcontent-ng-c2289786030] a[href^="/#"][_ngcontent-ng-c2289786030] code[_ngcontent-ng-c2289786030], .__subtitle[_ngcontent-ng-c2289786030] a.__home-link[_ngcontent-ng-c2289786030] code[_ngcontent-ng-c2289786030] { background: none; padding: 0; }

.__body[_ngcontent-ng-c2289786030] { font-family: var(--font-family-brand); font-weight: 284; font-size: 15px; line-height: 23px; letter-spacing: 0.01em; color: var(--mat-sys-on-surface); font-variation-settings: "CRSV" 0, "SHRP" 0, "slnt" 0; margin: 0; max-width: min(536px, 100%); } @media (max-width: 1099px) { .__body[_ngcontent-ng-c2289786030] { max-width: min(648px, 100%); } } @media (min-width: 1440px) { .__body[_ngcontent-ng-c2289786030] { font-size: 16px; line-height: 24px; } } .__body[_ngcontent-ng-c2289786030] strong[_ngcontent-ng-c2289786030] { font-weight: 500; } .__body[_ngcontent-ng-c2289786030] code[_ngcontent-ng-c2289786030] { font-family: var(--font-family-mono, ui-monospace, SFMono-Regular, "SF Mono", Menlo, monospace); font-size: 0.88em; font-weight: 400; letter-spacing: -0.01em; padding: 0.1em 0.3em; border-radius: 4px; background: color-mix(in srgb, var(--mat-sys-on-surface) 7%, transparent); } .__body[_ngcontent-ng-c2289786030] a[href*="docs.zerops.io"][_ngcontent-ng-c2289786030] { position: relative; display: inline; padding: 1px 6px 1px 5px; color: color-mix(in srgb, var(--mat-sys-primary) 55%, var(--mat-sys-on-surface)); background: color-mix(in srgb, var(--mat-sys-primary) 8%, transparent); border-radius: 5px; text-decoration: none; font-weight: inherit; cursor: pointer; transition: background 0.2s, color 0.2s; line-height: inherit; } .__body[_ngcontent-ng-c2289786030] a[href*="docs.zerops.io"][_ngcontent-ng-c2289786030]::after { content: "help_outline"; font-family: "Material Icons Outlined"; font-weight: 300; font-size: 0.92em; position: relative; top: 0.12em; margin-left: 0.15em; opacity: 0.65; } .__body[_ngcontent-ng-c2289786030] a[href*="docs.zerops.io"][_ngcontent-ng-c2289786030]:hover { background: color-mix(in srgb, var(--mat-sys-primary) 14%, transparent); color: var(--mat-sys-primary); } .__body[_ngcontent-ng-c2289786030] a[href*="docs.zerops.io"][_ngcontent-ng-c2289786030]:hover::after { opacity: 0.9; } .__body[_ngcontent-ng-c2289786030] a[href*="docs.zerops.io"][_ngcontent-ng-c2289786030] code[_ngcontent-ng-c2289786030] { background: none; padding: 0; } .__body[_ngcontent-ng-c2289786030] a[href^="/#"][_ngcontent-ng-c2289786030], .__body[_ngcontent-ng-c2289786030] a.__home-link[_ngcontent-ng-c2289786030] { position: relative; display: inline; padding: 1px 6px 1px 5px; color: color-mix(in srgb, var(--mat-sys-on-surface) 65%, transparent); background: color-mix(in srgb, var(--mat-sys-on-surface) 6%, transparent); border-radius: 5px; text-decoration: none; font-weight: inherit; cursor: pointer; transition: background 0.2s, color 0.2s; line-height: inherit; } .__body[_ngcontent-ng-c2289786030] a[href^="/#"][_ngcontent-ng-c2289786030]::after, .__body[_ngcontent-ng-c2289786030] a.__home-link[_ngcontent-ng-c2289786030]::after { content: "north_east"; font-family: "Material Icons Outlined"; font-weight: 300; font-size: 0.84em; position: relative; top: 0.12em; margin-left: 0.15em; opacity: 0.55; } .__body[_ngcontent-ng-c2289786030] a[href^="/#"][_ngcontent-ng-c2289786030]:hover, .__body[_ngcontent-ng-c2289786030] a.__home-link[_ngcontent-ng-c2289786030]:hover { background: color-mix(in srgb, var(--mat-sys-on-surface) 12%, transparent); color: var(--mat-sys-on-surface); } .__body[_ngcontent-ng-c2289786030] a[href^="/#"][_ngcontent-ng-c2289786030]:hover::after, .__body[_ngcontent-ng-c2289786030] a.__home-link[_ngcontent-ng-c2289786030]:hover::after { opacity: 0.85; } .__body[_ngcontent-ng-c2289786030] a[href^="/#"][_ngcontent-ng-c2289786030] code[_ngcontent-ng-c2289786030], .__body[_ngcontent-ng-c2289786030] a.__home-link[_ngcontent-ng-c2289786030] code[_ngcontent-ng-c2289786030] { background: none; padding: 0; }

.__rive-wrap[_ngcontent-ng-c2289786030] { width: 100%; aspect-ratio: 1664/1808; max-width: 700px; margin: 0 auto; } @media (max-width: 1420px) { .__rive-wrap[_ngcontent-ng-c2289786030] { max-width: 580px; } } @media (max-width: 1099px) { .__rive-wrap[_ngcontent-ng-c2289786030] { max-width: 520px; order: 1; } }

.__rive[_ngcontent-ng-c2289786030] { display: block; width: 100%; height: 100%; }

.__wrapper[_ngcontent-ng-c2623937836] { max-width: 1320px; padding: 0 16px; } @media (min-width: 810px) { .__wrapper[_ngcontent-ng-c2623937836] { padding: 0 24px; } }

.__text-block[_ngcontent-ng-c2623937836] { max-width: min(720px, 100%); }

.__section-label[_ngcontent-ng-c2623937836] { display: inline-flex; align-items: center; font-family: var(--font-family-brand), sans-serif; font-weight: 500; font-size: 10px; line-height: 1; letter-spacing: 0.1em; text-transform: uppercase; color: var(--white); background: var(--black); padding: 6px 10px; border-radius: 4px; margin-left: auto; margin-right: auto; white-space: nowrap; width: fit-content; align-self: center; } @media (min-width: 1100px) { .__section-label[_ngcontent-ng-c2623937836] { display: none; } }

.__title[_ngcontent-ng-c2623937836] { font-family: var(--font-family-brand); font-weight: 240; font-size: 19px; line-height: 26px; color: var(--mat-sys-on-surface); font-variation-settings: "CRSV" 1, "SHRP" 100, "slnt" 0; font-feature-settings: "tnum" on, "lnum" on; margin: 0; max-width: min(536px, 100%); } @media (max-width: 1099px) { .__title[_ngcontent-ng-c2623937836] { max-width: min(648px, 100%); } } @media (min-width: 650px) { .__title[_ngcontent-ng-c2623937836] { font-size: 22px; line-height: 30px; } } @media (min-width: 1440px) { .__title[_ngcontent-ng-c2623937836] { font-size: 24px; line-height: 32px; } }

.__subtitle[_ngcontent-ng-c2623937836] { font-family: var(--font-family-brand); font-weight: 239; font-size: 16px; line-height: 24px; color: var(--mat-sys-on-surface); font-variation-settings: "CRSV" 1, "SHRP" 0, "slnt" 0; margin: 0; max-width: min(536px, 100%); } @media (max-width: 1099px) { .__subtitle[_ngcontent-ng-c2623937836] { max-width: min(648px, 100%); } } @media (min-width: 650px) { .__subtitle[_ngcontent-ng-c2623937836] { font-size: 18px; line-height: 28px; } } @media (min-width: 1440px) { .__subtitle[_ngcontent-ng-c2623937836] { font-size: 20px; line-height: 32px; } } .__subtitle[_ngcontent-ng-c2623937836] strong[_ngcontent-ng-c2623937836] { font-weight: 500; } .__subtitle[_ngcontent-ng-c2623937836] code[_ngcontent-ng-c2623937836] { font-family: var(--font-family-mono, ui-monospace, SFMono-Regular, "SF Mono", Menlo, monospace); font-size: 0.88em; font-weight: 400; letter-spacing: -0.01em; padding: 0.1em 0.3em; border-radius: 4px; background: color-mix(in srgb, var(--mat-sys-on-surface) 7%, transparent); } .__subtitle[_ngcontent-ng-c2623937836] a[href*="docs.zerops.io"][_ngcontent-ng-c2623937836] { position: relative; display: inline; padding: 1px 6px 1px 5px; color: color-mix(in srgb, var(--mat-sys-primary) 55%, var(--mat-sys-on-surface)); background: color-mix(in srgb, var(--mat-sys-primary) 8%, transparent); border-radius: 5px; text-decoration: none; font-weight: inherit; cursor: pointer; transition: background 0.2s, color 0.2s; line-height: inherit; } .__subtitle[_ngcontent-ng-c2623937836] a[href*="docs.zerops.io"][_ngcontent-ng-c2623937836]::after { content: "help_outline"; font-family: "Material Icons Outlined"; font-weight: 300; font-size: 0.92em; position: relative; top: 0.12em; margin-left: 0.15em; opacity: 0.65; } .__subtitle[_ngcontent-ng-c2623937836] a[href*="docs.zerops.io"][_ngcontent-ng-c2623937836]:hover { background: color-mix(in srgb, var(--mat-sys-primary) 14%, transparent); color: var(--mat-sys-primary); } .__subtitle[_ngcontent-ng-c2623937836] a[href*="docs.zerops.io"][_ngcontent-ng-c2623937836]:hover::after { opacity: 0.9; } .__subtitle[_ngcontent-ng-c2623937836] a[href*="docs.zerops.io"][_ngcontent-ng-c2623937836] code[_ngcontent-ng-c2623937836] { background: none; padding: 0; } .__subtitle[_ngcontent-ng-c2623937836] a[href^="/#"][_ngcontent-ng-c2623937836], .__subtitle[_ngcontent-ng-c2623937836] a.__home-link[_ngcontent-ng-c2623937836] { position: relative; display: inline; padding: 1px 6px 1px 5px; color: color-mix(in srgb, var(--mat-sys-on-surface) 65%, transparent); background: color-mix(in srgb, var(--mat-sys-on-surface) 6%, transparent); border-radius: 5px; text-decoration: none; font-weight: inherit; cursor: pointer; transition: background 0.2s, color 0.2s; line-height: inherit; } .__subtitle[_ngcontent-ng-c2623937836] a[href^="/#"][_ngcontent-ng-c2623937836]::after, .__subtitle[_ngcontent-ng-c2623937836] a.__home-link[_ngcontent-ng-c2623937836]::after { content: "north_east"; font-family: "Material Icons Outlined"; font-weight: 300; font-size: 0.84em; position: relative; top: 0.12em; margin-left: 0.15em; opacity: 0.55; } .__subtitle[_ngcontent-ng-c2623937836] a[href^="/#"][_ngcontent-ng-c2623937836]:hover, .__subtitle[_ngcontent-ng-c2623937836] a.__home-link[_ngcontent-ng-c2623937836]:hover { background: color-mix(in srgb, var(--mat-sys-on-surface) 12%, transparent); color: var(--mat-sys-on-surface); } .__subtitle[_ngcontent-ng-c2623937836] a[href^="/#"][_ngcontent-ng-c2623937836]:hover::after, .__subtitle[_ngcontent-ng-c2623937836] a.__home-link[_ngcontent-ng-c2623937836]:hover::after { opacity: 0.85; } .__subtitle[_ngcontent-ng-c2623937836] a[href^="/#"][_ngcontent-ng-c2623937836] code[_ngcontent-ng-c2623937836], .__subtitle[_ngcontent-ng-c2623937836] a.__home-link[_ngcontent-ng-c2623937836] code[_ngcontent-ng-c2623937836] { background: none; padding: 0; }

.__body[_ngcontent-ng-c2623937836] { font-family: var(--font-family-brand); font-weight: 284; font-size: 15px; line-height: 23px; letter-spacing: 0.01em; color: var(--mat-sys-on-surface); font-variation-settings: "CRSV" 0, "SHRP" 0, "slnt" 0; margin: 0; max-width: min(536px, 100%); } @media (max-width: 1099px) { .__body[_ngcontent-ng-c2623937836] { max-width: min(648px, 100%); } } @media (min-width: 1440px) { .__body[_ngcontent-ng-c2623937836] { font-size: 16px; line-height: 24px; } } .__body[_ngcontent-ng-c2623937836] strong[_ngcontent-ng-c2623937836] { font-weight: 500; } .__body[_ngcontent-ng-c2623937836] code[_ngcontent-ng-c2623937836] { font-family: var(--font-family-mono, ui-monospace, SFMono-Regular, "SF Mono", Menlo, monospace); font-size: 0.88em; font-weight: 400; letter-spacing: -0.01em; padding: 0.1em 0.3em; border-radius: 4px; background: color-mix(in srgb, var(--mat-sys-on-surface) 7%, transparent); } .__body[_ngcontent-ng-c2623937836] a[href*="docs.zerops.io"][_ngcontent-ng-c2623937836] { position: relative; display: inline; padding: 1px 6px 1px 5px; color: color-mix(in srgb, var(--mat-sys-primary) 55%, var(--mat-sys-on-surface)); background: color-mix(in srgb, var(--mat-sys-primary) 8%, transparent); border-radius: 5px; text-decoration: none; font-weight: inherit; cursor: pointer; transition: background 0.2s, color 0.2s; line-height: inherit; } .__body[_ngcontent-ng-c2623937836] a[href*="docs.zerops.io"][_ngcontent-ng-c2623937836]::after { content: "help_outline"; font-family: "Material Icons Outlined"; font-weight: 300; font-size: 0.92em; position: relative; top: 0.12em; margin-left: 0.15em; opacity: 0.65; } .__body[_ngcontent-ng-c2623937836] a[href*="docs.zerops.io"][_ngcontent-ng-c2623937836]:hover { background: color-mix(in srgb, var(--mat-sys-primary) 14%, transparent); color: var(--mat-sys-primary); } .__body[_ngcontent-ng-c2623937836] a[href*="docs.zerops.io"][_ngcontent-ng-c2623937836]:hover::after { opacity: 0.9; } .__body[_ngcontent-ng-c2623937836] a[href*="docs.zerops.io"][_ngcontent-ng-c2623937836] code[_ngcontent-ng-c2623937836] { background: none; padding: 0; } .__body[_ngcontent-ng-c2623937836] a[href^="/#"][_ngcontent-ng-c2623937836], .__body[_ngcontent-ng-c2623937836] a.__home-link[_ngcontent-ng-c2623937836] { position: relative; display: inline; padding: 1px 6px 1px 5px; color: color-mix(in srgb, var(--mat-sys-on-surface) 65%, transparent); background: color-mix(in srgb, var(--mat-sys-on-surface) 6%, transparent); border-radius: 5px; text-decoration: none; font-weight: inherit; cursor: pointer; transition: background 0.2s, color 0.2s; line-height: inherit; } .__body[_ngcontent-ng-c2623937836] a[href^="/#"][_ngcontent-ng-c2623937836]::after, .__body[_ngcontent-ng-c2623937836] a.__home-link[_ngcontent-ng-c2623937836]::after { content: "north_east"; font-family: "Material Icons Outlined"; font-weight: 300; font-size: 0.84em; position: relative; top: 0.12em; margin-left: 0.15em; opacity: 0.55; } .__body[_ngcontent-ng-c2623937836] a[href^="/#"][_ngcontent-ng-c2623937836]:hover, .__body[_ngcontent-ng-c2623937836] a.__home-link[_ngcontent-ng-c2623937836]:hover { background: color-mix(in srgb, var(--mat-sys-on-surface) 12%, transparent); color: var(--mat-sys-on-surface); } .__body[_ngcontent-ng-c2623937836] a[href^="/#"][_ngcontent-ng-c2623937836]:hover::after, .__body[_ngcontent-ng-c2623937836] a.__home-link[_ngcontent-ng-c2623937836]:hover::after { opacity: 0.85; } .__body[_ngcontent-ng-c2623937836] a[href^="/#"][_ngcontent-ng-c2623937836] code[_ngcontent-ng-c2623937836], .__body[_ngcontent-ng-c2623937836] a.__home-link[_ngcontent-ng-c2623937836] code[_ngcontent-ng-c2623937836] { background: none; padding: 0; }

.__title[_ngcontent-ng-c2623937836], .__body[_ngcontent-ng-c2623937836] { max-width: min(570px, 100%); }

.__agent-row[_ngcontent-ng-c2623937836] { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 20px 40px; max-width: 720px; margin: 0 auto; }

.__agent-logo[_ngcontent-ng-c2623937836] { flex-shrink: 0; width: 40px; height: 40px; font-size: 40px; line-height: 40px; color: var(--mat-sys-on-surface); }

.__surface-shot[_ngcontent-ng-c2623937836] { display: block; width: 100%; max-width: 1600px; height: auto; margin: 0 auto; }

.__svg-layer[_ngcontent-ng-c909695120] { position: absolute; inset: 0; pointer-events: none; overflow: visible; contain: layout style; will-change: transform; }

.__path-base[_ngcontent-ng-c909695120] { fill: none; stroke: #C4C3C3; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }

.__canvas[_ngcontent-ng-c909695120] { position: relative; z-index: 1; width: 680px; margin: 0 auto; transform: scale(var(--diagram-scale, 1)); transform-origin: top center; display: flex; flex-direction: column; align-items: center; gap: 51px; overflow: visible; } @media (max-width: 1099px) { .__canvas[_ngcontent-ng-c909695120] { transform-origin: top left; margin-left: calc(50% - 340px * var(--diagram-scale, 1)); margin-right: 0; } } @media (min-width: 1100px) and (max-width: 1439px) { .__canvas[_ngcontent-ng-c909695120] { transform-origin: top left; margin: 0; } }

.__endpoint-row[_ngcontent-ng-c909695120] { display: flex; justify-content: center; width: 100%; }

zw-project-shell[_ngcontent-ng-c909695120] { width: 100%; }

.__zone[_ngcontent-ng-c909695120] { position: relative; border-radius: 8px; background: rgba(232, 231, 231, 0.5); padding: 20px 14px; }

.__zone-label[_ngcontent-ng-c909695120] { position: absolute; top: 23px; left: 23px; font-family: var(--font-family-brand); font-weight: 600; font-size: 11px; line-height: 14px; letter-spacing: 0.12em; text-transform: uppercase; color: #254E4A; opacity: 0.6; font-variation-settings: "CRSV" 0, "SHRP" 100, "slnt" 0; }

.__zone--services[_ngcontent-ng-c909695120] > .__zone-label[_ngcontent-ng-c909695120] { max-width: 108px; }

.__services-content[_ngcontent-ng-c909695120] { display: flex; flex-direction: column; align-items: center; gap: 0; }

.__services-row[_ngcontent-ng-c909695120] { display: flex; justify-content: center; width: 100%; }

.__services-row--top[_ngcontent-ng-c909695120] { display: grid; grid-template-columns: 1fr auto 1fr; align-items: start; } .__services-row--top[_ngcontent-ng-c909695120] > [_ngcontent-ng-c909695120]:last-child { justify-self: start; }

.__services-row--bottom[_ngcontent-ng-c909695120] { display: grid; grid-template-columns: 1fr auto 1fr; gap: 11px; align-items: start; justify-content: center; } .__services-row--bottom[_ngcontent-ng-c909695120] > [_ngcontent-ng-c909695120]:first-child { justify-self: end; } .__services-row--bottom[_ngcontent-ng-c909695120] > [_ngcontent-ng-c909695120]:last-child { justify-self: start; }

.__services-side-nodes[_ngcontent-ng-c909695120] { display: flex; gap: 19px; align-items: flex-start; margin-left: 38px; }

.__services-spacer[_ngcontent-ng-c909695120] { height: 51px; flex-shrink: 0; }

.__compound[_ngcontent-ng-c909695120] { position: relative; overflow: hidden; display: flex; flex-direction: column; align-items: center; background: #D8D7D7; border-radius: 8px; padding: 5px; padding-bottom: 20px; gap: 40px; min-width: 111px; }

.__external-node[_ngcontent-ng-c909695120] { position: absolute; right: -40px; top: 708px; }

.__path-glow[_ngcontent-ng-c909695120] { fill: none; stroke: var(--mat-sys-primary); stroke-width: 3; stroke-linecap: round; stroke-linejoin: round; opacity: 0; stroke-dasharray: var(--path-len, 300); stroke-dashoffset: var(--path-len, 300); pointer-events: none; }

.__path-glow--active[_ngcontent-ng-c909695120] { opacity: 0.55; stroke-dashoffset: 0; filter: drop-shadow(0 0 3px rgba(0, 164, 154, 0.3)); transition: opacity 0.2s ease, stroke-dashoffset 600ms cubic-bezier(0.25, 0.1, 0.25, 1); } @media (max-width: 767px) { .__path-glow--active[_ngcontent-ng-c909695120] { filter: none; } }

.__path-glow--decay[_ngcontent-ng-c909695120] { opacity: 0; stroke-dashoffset: 0; filter: none; transition: opacity 0.9s ease-out; }

.__external-node.--pulse[_ngcontent-ng-c909695120] zw-diagram-node[_ngcontent-ng-c909695120] { filter: drop-shadow(0 0 6px rgba(0, 164, 154, 0.2)); transition: filter 0.5s ease; } @media (max-width: 767px) { .__external-node.--pulse[_ngcontent-ng-c909695120] zw-diagram-node[_ngcontent-ng-c909695120] { filter: none; } }

.__external-node[_ngcontent-ng-c909695120]:not(.--pulse) zw-diagram-node[_ngcontent-ng-c909695120] { filter: none; transition: filter 0.6s ease-out; }

@media (prefers-reduced-motion: reduce) { .__path-glow[_ngcontent-ng-c909695120] { display: none; } }

.__project[_ngcontent-ng-c2210064755] { position: relative; width: 100%; border: 1px solid #D8D7D7; border-left-width: var(--project-shell-side-border, 1px); border-right-width: var(--project-shell-side-border, 1px); border-radius: var(--project-shell-border-radius, 16px); background: #F0F0F0; padding: var(--project-shell-padding, 88px 9px 11px); display: flex; flex-direction: column; gap: 0; }

.__project-header[_ngcontent-ng-c2210064755] { position: absolute; top: var(--project-shell-header-top, 31px); left: var(--project-shell-header-left, 31px); display: flex; flex-direction: column; gap: 3px; }

.__project-title[_ngcontent-ng-c2210064755] { font-family: var(--font-family-brand); font-weight: 600; font-size: 11px; line-height: 14px; letter-spacing: 0.12em; text-transform: uppercase; color: #254E4A; font-variation-settings: "CRSV" 0, "SHRP" 100, "slnt" 0; }

.__vxlan-label[_ngcontent-ng-c2210064755] { font-family: "Roboto Mono", "JetBrains Mono", ui-monospace, monospace; font-weight: 400; font-size: 9px; line-height: 12px; letter-spacing: 0.02em; color: #254E4A; }

.__infra-stack[_ngcontent-ng-c2210064755] { display: grid; }

.__infra-mode[_ngcontent-ng-c2210064755] { grid-row: 1; grid-column: 1; display: grid; grid-template-rows: 0fr; opacity: 0; pointer-events: none; transition: opacity 0.18s cubic-bezier(0.4, 0, 0.2, 1) 0s, grid-template-rows 0.25s cubic-bezier(0.4, 0, 0.2, 1) 0.12s; } .__infra-mode--active[_ngcontent-ng-c2210064755] { grid-template-rows: 1fr; opacity: 1; pointer-events: auto; transition: grid-template-rows 0.25s cubic-bezier(0.4, 0, 0.2, 1) 0s, opacity 0.18s cubic-bezier(0.4, 0, 0.2, 1) 0.2s; }

.__infra-mode-inner[_ngcontent-ng-c2210064755] { min-height: 0; overflow: hidden; }

.__zone[_ngcontent-ng-c2210064755] { position: relative; border-radius: 8px; background: rgba(232, 231, 231, 0.5); padding: 20px 14px; }

.__zone-label[_ngcontent-ng-c2210064755] { position: absolute; top: var(--project-shell-zone-label-top, 23px); left: var(--project-shell-zone-label-left, 23px); font-family: var(--font-family-brand); font-weight: 600; font-size: 11px; line-height: 14px; letter-spacing: 0.12em; text-transform: uppercase; color: #254E4A; opacity: 0.6; font-variation-settings: "CRSV" 0, "SHRP" 100, "slnt" 0; }

.__zone--infra[_ngcontent-ng-c2210064755] > .__zone-label[_ngcontent-ng-c2210064755] { top: 28px; max-width: 119px; }

.__zone--infra-lightweight[_ngcontent-ng-c2210064755] > .__zone-label[_ngcontent-ng-c2210064755] { max-width: 180px; }

.__zone--routing[_ngcontent-ng-c2210064755] > .__zone-label[_ngcontent-ng-c2210064755] { max-width: 139px; }

.__zone-spacer[_ngcontent-ng-c2210064755] { flex-shrink: 0; }

.__zone-spacer--infra-to-routing[_ngcontent-ng-c2210064755] { height: 9px; }

.__zone-spacer--routing-to-services[_ngcontent-ng-c2210064755] { height: 34px; }

.__infra-content[_ngcontent-ng-c2210064755] { display: flex; justify-content: center; padding-left: var(--project-shell-infra-pad-left, 122px); }

.__infra-content--lightweight[_ngcontent-ng-c2210064755] { padding-left: 0; --diagram-node-infra-core-width: 120px; }

.__infra-group[_ngcontent-ng-c2210064755] { display: flex; flex-direction: row; align-items: flex-start; gap: 18px; padding: 11px; background: var(--alt-card-banner-bg); background-blend-mode: multiply; border-radius: 8px; }

.__infra-side-nodes[_ngcontent-ng-c2210064755] { display: flex; gap: 3px; align-items: flex-start; }

.__routing-content[_ngcontent-ng-c2210064755] { display: flex; justify-content: center; }

.__svg-layer[_ngcontent-ng-c2210064755] { position: absolute; inset: 0; pointer-events: none; overflow: visible; opacity: 0; transition: opacity 0.15s cubic-bezier(0.4, 0, 0.2, 1); } .__svg-layer--visible[_ngcontent-ng-c2210064755] { opacity: 1; }

.__path-base[_ngcontent-ng-c2210064755] { fill: none; stroke: #C4C3C3; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }

[_nghost-ng-c3639138795] {
  --zagent-agent-accent: #cc785c;
  --zagent-agent-tint: rgba(204, 120, 92, 0.08);
  --zagent-ide-accent: #0077cc;
  --zagent-ide-tint: rgba(0, 119, 204, 0.075);
  --zagent-dev-highlight: rgba(255, 220, 100, 0.55);

  


  --zagent-card-bg: color-mix(in srgb, var(--mat-sys-secondary-container) 20%, transparent);
  --zagent-card-bg-hover: color-mix(in srgb, var(--mat-sys-secondary-container) 30%, transparent);
  --zagent-card-padding: 16px 18px 18px;
  --zagent-head-padding: 2px 2px 12px;
  --zagent-tiles-gap: 8px;
  --zagent-tile-padding: 12px 14px;
  --zagent-tile-gap: 10px;

  display: block;
  width: 100%;
  margin: -6px auto 0;
}

.__card[_ngcontent-ng-c3639138795] {
  position: relative;
  display: block;
  width: 100%;
  padding: var(--zagent-card-padding);
  border: 0;
  border-radius: 10px;
  background: var(--zagent-card-bg);
  text-align: left;
  cursor: pointer;
  outline: none;
  transition: background 180ms ease;

  &:hover {
    background: var(--zagent-card-bg-hover);

    .__configure-btn {
      border-color: var(--mat-sys-outline);
      color: var(--mat-sys-on-surface);
    }
  }
}

.__head[_ngcontent-ng-c3639138795] {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: var(--zagent-head-padding);
}

.__head-label[_ngcontent-ng-c3639138795] {
  font-size: 10px;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--mat-sys-on-surface-variant);
  line-height: 1;
  padding-left: var(--zagent-head-label-padding-left, 0);
}

.__configure-btn[_ngcontent-ng-c3639138795] {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  min-width: 0;
  height: 24px;
  padding: 0 10px;
  line-height: 1;
  border-color: var(--mat-sys-outline-variant);
  border-radius: 5px;
  font-size: 11px;
  font-weight: 500;
  letter-spacing: 0.01em;
  color: var(--mat-sys-on-surface-variant);
}

.__tiles[_ngcontent-ng-c3639138795] {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--zagent-tiles-gap);
  align-items: start;
}

.__tiles.__tiles--single[_ngcontent-ng-c3639138795] {
  grid-template-columns: 1fr;
}

.__tile[_ngcontent-ng-c3639138795] {
  display: flex;
  flex-direction: column;
  gap: var(--zagent-tile-gap);
  padding: var(--zagent-tile-padding);
  border-radius: 7px;
  min-width: 0;
}

.__tile-head[_ngcontent-ng-c3639138795] {
  display: flex;
  align-items: center;
  gap: 6px;
  min-width: 0;
}

.__tile--agent[_ngcontent-ng-c3639138795] {
  background: var(--zagent-agent-tint);

  .__tile-icon { color: var(--zagent-agent-accent); }
}

.__tile--ide[_ngcontent-ng-c3639138795] {
  background: var(--zagent-ide-tint);

  .__tile-icon { color: var(--zagent-ide-accent); }
}

.__tile--base[_ngcontent-ng-c3639138795] {
  background: color-mix(in srgb, var(--mat-sys-on-surface) 4%, transparent);

  .__tile-icon { color: var(--mat-sys-on-surface-variant); }
}

.__tile-icon[_ngcontent-ng-c3639138795] {
  flex-shrink: 0;
  width: 14px;
  height: 14px;
  font-size: 14px;
  line-height: 14px;
}

.__tile-title[_ngcontent-ng-c3639138795] {
  font-size: 13px;
  font-weight: 600;
  line-height: 1.2;
  color: var(--mat-sys-on-surface);
  letter-spacing: -0.005em;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.__tile-meta[_ngcontent-ng-c3639138795] {
  display: flex;
  flex-direction: column;
  gap: 4px;
  min-width: 0;
}

.__meta-row[_ngcontent-ng-c3639138795] {
  display: flex;
  align-items: center;
  gap: 6px;
  min-width: 0;
  font-size: 11px;
  font-weight: 400;
  line-height: 1.35;
  color: var(--mat-sys-on-surface-variant);
}

.__meta-row--agent[_ngcontent-ng-c3639138795],

.__meta-row--auth[_ngcontent-ng-c3639138795] { position: relative; }

.__meta-row--agent[_ngcontent-ng-c3639138795] {
  gap: 7px;
}

.__brand[_ngcontent-ng-c3639138795],

.__meta-icon[_ngcontent-ng-c3639138795] { flex-shrink: 0; display: inline-flex; align-items: center; justify-content: center; width: 12px; height: 12px; font-size: 12px; line-height: 12px; color: var(--mat-sys-on-surface-variant); }

.__brand[_ngcontent-ng-c3639138795] {
  color: var(--mat-sys-on-surface);
}

.__brand--ide[_ngcontent-ng-c3639138795] {
  color: var(--zagent-ide-accent);
}

.__meta-text[_ngcontent-ng-c3639138795] {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.__meta-text--primary[_ngcontent-ng-c3639138795] {
  font-weight: 500;
  color: var(--mat-sys-on-surface);
}

.__meta-row--agent[_ngcontent-ng-c3639138795]   .__meta-text--primary[_ngcontent-ng-c3639138795] {
  flex: 1 1 auto;
}

.__auth-tag[_ngcontent-ng-c3639138795] {
  flex-shrink: 0;
  margin-left: auto;
  padding: 0 5px;
  border-radius: 4px;
  font-size: 9px;
  font-weight: 600;
  letter-spacing: 0.04em;
  line-height: 15px;
  background: color-mix(in srgb, var(--mat-sys-on-surface) 7%, transparent);
  color: var(--mat-sys-on-surface-variant);
  transition: opacity 140ms ease;
}





.__agent-remove[_ngcontent-ng-c3639138795] {
  position: absolute;
  right: 0;
  top: 50%;
  transform: translateY(-50%);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 18px;
  height: 18px;
  padding: 0;
  border: 0;
  border-radius: 50%;
  background: color-mix(in srgb, var(--mat-sys-on-surface) 6%, transparent);
  color: var(--mat-sys-on-surface-variant);
  cursor: pointer;
  opacity: 0;
  pointer-events: none;
  transition: opacity 140ms ease, background 140ms ease, color 140ms ease;

  mat-icon {
    width: 12px;
    height: 12px;
    font-size: 12px;
    line-height: 12px;
  }

  &:hover {
    background: color-mix(in srgb, var(--mat-sys-on-surface) 12%, transparent);
    color: var(--mat-sys-on-surface);
  }
}

.__meta-row--agent[_ngcontent-ng-c3639138795]:hover {
  .__auth-tag {
    opacity: 0;
  }

  .__agent-remove {
    opacity: 1;
    pointer-events: auto;
  }
}





.__meta-remove-overlay[_ngcontent-ng-c3639138795] {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 0;
  border: 0;
  background: transparent;
  color: var(--mat-sys-on-surface-variant);
  font: inherit;
  font-size: 11px;
  font-weight: 500;
  cursor: pointer;
  opacity: 0;
  pointer-events: none;
  transition: opacity 140ms ease, color 140ms ease;

  mat-icon {
    width: 14px;
    height: 14px;
    font-size: 14px;
    line-height: 14px;
  }

  &:hover {
    color: var(--mat-sys-on-surface);
  }
}

.__tile--agent[_ngcontent-ng-c3639138795]:hover   .__meta-row--auth[_ngcontent-ng-c3639138795] {
  > :not(.__meta-remove-overlay) {
    opacity: 0;
    transition: opacity 140ms ease;
  }

  .__meta-remove-overlay {
    opacity: 1;
    pointer-events: auto;
  }
}

.__quick-add[_ngcontent-ng-c3639138795] {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 5px;
  padding: 6px 2px 0;
  margin-top: 10px;
}

.__quick-add-label[_ngcontent-ng-c3639138795] {
  flex-basis: 100%;
  margin-bottom: 6px;
  font-size: 10px;
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--mat-sys-on-surface-variant);
  line-height: 1;
}

.__qa-chip[_ngcontent-ng-c3639138795] {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 2px 7px 2px 8px;
  border: 1px solid var(--mat-sys-outline-variant);
  border-radius: 999px;
  background: transparent;
  color: var(--mat-sys-on-surface-variant);
  font-size: 10.5px;
  font-weight: 500;
  line-height: 1.5;
  cursor: pointer;
  transition: border-color 140ms ease, color 140ms ease, background 140ms ease;

  .__brand {
    width: 11px;
    height: 11px;
    font-size: 11px;
  }

  &:hover {
    border-color: var(--mat-sys-outline);
    color: var(--mat-sys-on-surface);
    background: color-mix(in srgb, var(--mat-sys-on-surface) 4%, transparent);
  }
}

.__qa-add[_ngcontent-ng-c3639138795] {
  width: 13px;
  height: 13px;
  font-size: 13px;
  line-height: 13px;
  opacity: 0.7;
}





.__mounts[_ngcontent-ng-c3639138795] {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 6px;
  padding: 8px 11px;
  margin-top: 12px;
  border-radius: 7px;
  background: color-mix(in srgb, var(--mat-sys-on-surface) 4%, transparent);
}

.__mounts-label[_ngcontent-ng-c3639138795] {
  font-size: 10px;
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--mat-sys-on-surface-variant);
}

.__chips[_ngcontent-ng-c3639138795] {
  display: flex;
  flex-wrap: wrap;
  gap: 3px;
}




.__svc-chip[_ngcontent-ng-c3639138795] {
  display: inline-flex;
  align-items: center;
  padding: 1px 7px;
  border-radius: 7px;
  font-size: 10.5px;
  font-weight: 500;
  line-height: 1.5;
  background: color-mix(in srgb, var(--mat-sys-surface) 85%, transparent);
  color: var(--mat-sys-on-surface-variant);
}

.__chip-dev[_ngcontent-ng-c3639138795] {
  display: inline-block;
  padding: 0 1px;
  border-radius: 3px;
  background: var(--zagent-dev-highlight);
  color: inherit;
  font-weight: 600;
}</style><style ng-app-id="ng">[_nghost-ng-c1013959713] {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  line-height: 0;
}

svg[_ngcontent-ng-c1013959713] {
  display: block;
}</style><style ng-app-id="ng">[_nghost-ng-c2524183654] {

display: block; contain: layout style; }

.__bar-icon[_ngcontent-ng-c2524183654] { display: flex; flex-direction: column; justify-content: center; align-items: flex-start; padding: 5px; width: 30px; height: 30px; background: #fff; box-shadow: 0px 38px 15px rgba(0, 0, 0, 0.01), 0px 21px 13px rgba(0, 0, 0, 0.02), 0px 10px 10px rgba(0, 0, 0, 0.03), 0px 2px 5px rgba(0, 0, 0, 0.03); border-radius: 5px; position: relative; overflow: hidden; }

.__node--highlighted[_nghost-ng-c2524183654] .__bar-icon[_ngcontent-ng-c2524183654], .__node--highlighted [_nghost-ng-c2524183654] .__bar-icon[_ngcontent-ng-c2524183654], .__infra-group[_nghost-ng-c2524183654] .__bar-icon[_ngcontent-ng-c2524183654], .__infra-group [_nghost-ng-c2524183654] .__bar-icon[_ngcontent-ng-c2524183654], .__compound-lb[_nghost-ng-c2524183654] .__bar-icon[_ngcontent-ng-c2524183654], .__compound-lb [_nghost-ng-c2524183654] .__bar-icon[_ngcontent-ng-c2524183654] { box-shadow: 0px 24px 10px rgba(132, 245, 234, 0.03), 0px 14px 8px rgba(132, 245, 234, 0.1), 0px 6px 6px rgba(132, 245, 234, 0.18), 0px 2px 3px rgba(132, 245, 234, 0.21); }

.__bar-icon[_ngcontent-ng-c2524183654]:not(.__bar-icon--active) { background: #D8D7D7; }

.__cvs[_ngcontent-ng-c2524183654] { display: block; width: 19px; height: 18px; }

.size-sm[_nghost-ng-c2524183654] .__bar-icon[_ngcontent-ng-c2524183654] { width: 22px; height: 22px; padding: 4px; border-radius: 4px; }

.size-sm[_nghost-ng-c2524183654] .__cvs[_ngcontent-ng-c2524183654] { width: 14px; height: 13px; }

<script type="text/javascript" id="ng-event-dispatch-contract">(()=>{function p(t,n,r,o,e,i,f,m){return{eventType:t,event:n,targetElement:r,eic:o,timeStamp:e,eia:i,eirp:f,eiack:m}}function u(t){let n=[],r=e=>{n.push(e)};return{c:t,q:n,et:[],etc:[],d:r,h:e=>{r(p(e.type,e,e.target,t,Date.now()))}}}function s(t,n,r){for(let o=0;o<n.length;o++){let e=n[o];(r?t.etc:t.et).push(e),t.c.addEventListener(e,t.h,r)}}function c(t,n,r,o,e=window){let i=u(t);e._ejsas||(e._ejsas={}),e._ejsas[n]=i,s(i,r),s(i,o,!0)}window.__jsaction_bootstrap=c;})();

Project Info

Created At

4 hours ago

Updated At

4 hours ago

Author Name

Star

Language

License

Recommend Servers

View All

ScottishFixer

@Jack Cowhig

Local film fixer and location scout for shoots in Scotland. Tools cover day rates, permit authorities and lead times (councils, Network Rail, NTS, NatureScot, Police Scotland, CAA), the Highlands and Islands location library, UK AVEC tax credit eligibility, current availability, and a request_quote tool that lodges a brief straight with Jack Cowhig for a same business day reply. Run by ScottishFixer (SFixer Ltd), a working fixer, not a directory.

a day ago

Sentry

@modelcontextprotocol

Retrieving and analyzing issues from Sentry.io

a year ago

Kira Mcp

@Anmol202005

A local Model Context Protocol (MCP) server that gives any MCP-compatible host (Claude Desktop, Claude Code, Cursor, Cline, Continue) full computer-use control of the machine. One perceive_screen call screenshots the display, runs a bundled OmniParser-v2 YOLO icon-detector plus optional OCR, and returns click-ready (cx, cy) pixel coordinates, with full mouse, keyboard, and clipboard automation via pyautogui. No API key, no network call. the detector weights ship inside the wheel. Install with: pip install kira-mcp

18 hours ago

Profitlee Mcp

@AronLEEdev

ProfitLee MCP is an MCP server for analyzing ecommerce and marketplace profitability. It helps users calculate net profit, profit margin, ROI, breakeven price, and fee-adjusted outcomes from product cost, selling price, shipping, ads, platform fees, and tax inputs. It also supports reusable profit scenarios so users can compare pricing and cost assumptions more easily.

a day ago

Aiimagemultistyle

@codecraftm

A Model Context Protocol (MCP) server for image generation and manipulation using fal.ai's Stable Diffusion model.

a year ago

Defi Mcp

@matiosera3-ops

AI agent access to on-chain DeFi data: wallet balances, Aave v3 positions, token prices via Chainlink. No centralized API.

2 hours ago

Urbankit Atlas — Us County Parcel Arcgis Rest

@LEOyrh

Give AI assistants direct access to 152 verified US county parcel ArcGIS REST endpoints across 50 states. Look up a county's REST endpoint, get its real owner/taxpayer field name, and build a ready-to-fire owner-name search query — no ArcGIS expertise or API key required.

2 days ago

Stacktree

@stevysmith

Publish HTML to a private, unguessable URL from any MCP client. Gate by password or email domain; replace in place.

2 days ago

Filesystem

@modelcontextprotocol

2 months ago

yapp.page

@Reamber GmbH

Yapp turns "build me a page and publish it" into a live URL. Connect once (browser OAuth, or a token for terminal clients) and your AI can publish HTML, PDFs, ZIP sites, images and landing pages to a public `<slug>.yapp.page` URL in seconds — then update, password-protect, set expiry, attach a custom domain, or read form submissions, all by asking. Free to start; no local install.

16 minutes ago

Areacode.fyi Mcp Server

@riv-lc

North American NANP area-code and phone-number intelligence for AI agents: area-code lookup, NANP validation, local time, city/state/province coverage, overlays, scam/spoofing context, and block-allocation carrier metadata backed by areacode.fyi.

11 hours ago

Silkgeo Geo

@SilkGeo

Dual-market GEO platform. 8 MCP tools for AI visibility audit, citation tracking

a day ago

EdgeOne Pages MCP

@TencentEdgeOne

An MCP service designed for deploying HTML content to EdgeOne Pages and obtaining an accessible public URL.

TypeScript

a year ago

Crypto Intel Mcp

@cstamigo-droid

2 days ago

Redis

@modelcontextprotocol

A Model Context Protocol server that provides access to Redis databases. This server enables LLMs to interact with Redis key-value stores through a set of standardized tools.

a year ago

pyobfus — Python Obfuscator

@zhurong2020

Obfuscate Python & reverse-map stack traces from your agent. AST-based, no phone-home. PyArmor alt.

3 hours ago

Routara Llm Gateway

@36412749-collab

OpenAI-compatible MCP server for Routara — route 787+ LLMs, image & video generation via api.routara.ai. npm: routara-mcp@1.0.1 MCP Registry: io.github.36412749-collab/routara-mcp Tools: list_models, chat, generate_image, generate_video, get_video_status. Get API key: https://routara.ai/#auth

an hour ago

Steady

16 hours ago

Bazel Mcp

@saeid-rez

A local MCP server that exposes Bazel build system capabilities to AI assistants. ## Tools | Tool | Description | |------|-------------| | `bazel_query` | Run arbitrary `bazel query` expressions | | `list_targets` | List targets in a package or subtree | | `get_deps` | Direct or transitive dependencies of a target | | `get_rdeps` | Reverse dependencies within a scope | | `show_target_info` | Rule definition via `query --output=build` | | `bazel_build` | Run `bazel build` | | `bazel_test` | Run `bazel test` with structured results | | `explain_build_file` | Read BUILD file contents for analysis |

a day ago

Finance Toolkit

@JerBouma

The Finance Toolkit gives AI assistants access to 200+ financial metrics, all calculated transparently from raw financial statements, not pulled from third-party endpoints.

a day ago

Mapnetwork Mcp

@toruproject

Generate styled map images via mapnetwork.app

2 days ago

Setix

Setix is the clearinghouse for the AI economy. Any MCP-capable agent connects at mcp.setix.dev and transacts the full lifecycle: discover a counterparty, agree on an outcome, escrow, deliver, and settle on proof. No SDK required. Live on devnet, open to any agent on any model.

a day ago

Blender

@ahujasid

BlenderMCP connects Blender to Claude AI through the Model Context Protocol (MCP), allowing Claude to directly interact with and control Blender. This integration enables prompt assisted 3D modeling, scene creation, and manipulation.

a year ago

Tavily Mcp

@tavily-ai

JavaScript

a year ago

Revdoku

@revdoku

Revdoku lets Claude, Codex, ChatGPT, and other AI agents publish generated reports, dashboards, prototypes, documents, and interactive app sites as real websites. Sites can be public, password-protected, or mapped to your own domain; regenerating keeps the same URL.

2 hours ago

AgentTrust

@Ed White

Trustless AI verdict engine for the agent economy. Pay 0.1 XRP. POST a task spec and proof of work. Receive a structured PASS/FAIL verdict from Gemini. Optionally lock funds in XRPL crypto-condition escrow that releases automatically on approval. No humans. No disputes. No middlemen. 🔗 Live API: https://xrpl-referee.onrender.com 🧪 Playground: https://xrpl-referee.onrender.com/playground 📖 OpenAPI Docs: https://xrpl-referee.onrender.com/docs 🌐 App (with escrow): https://www.cryptovault.co.uk

8 hours ago

Keyward

@arturayupov

Local, encrypted secret broker for AI agents — tools request an API key by name over MCP, you approve in a native OS dialog, and only that key is injected into your project; the model never sees the value.

6 hours ago

Equity Intel Mcp

@cstamigo-droid

Stock intelligence for any LLM: SEC insider trades, superinvestor holdings (Dataroma), analyst consensus, valuation, options, and a composite ticker analysis. Runs on free/public data with graceful no-data handling (never fabricates a number).

2 days ago

Firecrawl Mcp Server

@mendableai

Official Firecrawl MCP Server - Adds powerful web scraping to Cursor, Claude and any other LLM clients.

JavaScript

a year ago

Playwright Mcp

@microsoft

Playwright MCP server

TypeScript

10 months ago