.sys{--row:78px;--rgap:12px;--leg:calc(var(--row) + var(--rgap));--stub:16px;padding:var(--space-4);background:var(--color-primary-deeper-darker);color:var(--color-bg);font-family:var(--font-body);gap:16px;min-height:100%;display:grid;position:relative}.sys__kpis{border-bottom:1px solid var(--color-on-dark-line);grid-template-columns:repeat(3,minmax(0,1fr));gap:14px;padding-bottom:12px;display:grid}.sys__kl{font-family:var(--font-mono);letter-spacing:.12em;text-transform:uppercase;color:var(--color-scene-ghost-text);font-size:10px;display:block}.sys__kv{font-family:var(--font-display);letter-spacing:-.02em;color:var(--color-bg);font-variant-numeric:tabular-nums;margin-top:4px;font-size:20px;font-weight:650;display:grid}.sys__kv i{grid-area:1/1;font-style:normal}.sys__kv .sys__new{color:var(--color-scene-turkuaz-bright)}.sys__chip{background:var(--color-scene-card);border:1.5px solid var(--color-scene-kobalt-bright);color:var(--color-scene-ink-strong);border-radius:999px;justify-self:start;align-items:center;gap:8px;margin:0;padding:7px 14px;font-size:12.5px;font-weight:600;display:inline-flex}.sys__dot{background:var(--color-scene-kobalt);border-radius:50%;width:7px;height:7px}.sys__dot--copper{background:var(--color-copper-500)}.sys__dot--amber{background:var(--color-scene-amber-bright)}.sys__map{grid-template-columns:minmax(0, 1fr) var(--stub) minmax(120px, 156px) var(--stub) minmax(0, 1fr);align-items:center;display:grid}.sys__col{gap:var(--rgap);margin:0;padding:0;list-style:none;display:grid}.sys__node{min-height:var(--row);border:1px solid var(--color-scene-ghost-line);background:var(--color-scene-ghost-fill);border-radius:8px;grid-template-columns:28px minmax(0,1fr);align-items:center;gap:10px;padding:10px 12px;display:grid;position:relative}.sys__node:before{content:"";background:var(--acc,var(--color-scene-kobalt-deep));border-radius:1px;width:2px;position:absolute;inset-block:10px}.sys__col--l .sys__node:before{left:-1px}.sys__col--r .sys__node:before{right:-1px}.sys__ic{border:1px solid var(--color-scene-ghost-line);width:28px;height:28px;color:var(--acc,var(--color-scene-kobalt-bright));border-radius:6px;justify-content:center;align-items:center;display:inline-flex}.sys__body{gap:1px;min-width:0;display:grid}.sys__title{color:var(--color-bg);font-size:13px;font-weight:650;line-height:1.2}.sys__text{color:var(--color-scene-ghost-text);font-size:11px;line-height:1.25}.sys__state{font-family:var(--font-mono);color:var(--color-scene-ghost-text);margin-top:3px;font-size:10.5px;line-height:1.3;display:grid}.sys__state i{grid-area:1/1;font-style:normal}.sys__state--hit{color:var(--color-scene-turkuaz-bright)}.sys__stub{width:var(--stub);background:var(--color-scene-ghost-line);height:1px;position:absolute;top:50%}.sys__col--l .sys__stub{right:calc(-1 * var(--stub))}.sys__col--r .sys__stub{left:calc(-1 * var(--stub))}.sys__stub:after{content:"";background:var(--color-scene-turkuaz-bright);opacity:0;border-radius:2px;width:9px;position:absolute;inset-block:-1px}.sys__col--l .sys__stub:after{left:0}.sys__col--r .sys__stub:after{--run:-9px;right:0}.sys__spine{width:1px;height:calc(2 * var(--leg));background:var(--color-scene-ghost-line);justify-self:center;position:relative}.sys__beam{background:var(--color-scene-turkuaz-bright);opacity:0;border-radius:2px;width:3px;height:14px;position:absolute;top:calc(50% - 7px);left:-1px}.sys__core{background:var(--color-scene-card);border:1px solid var(--color-scene-card-line);box-shadow:0 18px 40px -26px var(--color-shadow-ink);border-radius:8px;gap:2px;padding:12px 14px;display:grid;position:relative}.sys__core:before,.sys__core:after{content:"";width:var(--stub);background:var(--color-scene-ghost-line);height:1px;position:absolute;top:50%}.sys__core:before{left:calc(-1 * var(--stub))}.sys__core:after{right:calc(-1 * var(--stub))}.sys__brand{font-family:var(--font-display);letter-spacing:-.02em;color:var(--color-scene-ink-strong);font-size:15px;font-weight:700}.sys__corel{font-family:var(--font-mono);letter-spacing:.12em;text-transform:uppercase;color:var(--color-scene-ink-soft);font-size:9.5px}.sys__ev{font-family:var(--font-mono);color:var(--color-scene-kobalt);margin-top:4px;font-size:10.5px;line-height:1.3;display:grid}.sys__ev i{grid-area:1/1;font-style:normal}.sys__ev .sys__old{color:var(--color-scene-ink-soft)}.sys .sys__new{opacity:0}.sys .a{animation:sys-rise .52s var(--ease-out) var(--d,0s) both paused}.sys .sys__old{animation:sys-out .26s var(--ease-out) var(--d,0s) both paused}.sys .sys__new{animation:sys-in .34s var(--ease-out) calc(var(--d,0s) + 50ms) both paused}.sys .sys__col--l .sys__stub:after{animation:sys-run .42s var(--ease-in-out) var(--d,0s) both paused}.sys .sys__col--r .sys__stub:after{animation:sys-run .38s var(--ease-in-out) var(--d,0s) both paused}.sys .sys__beam{animation:var(--anim) .5s var(--ease-in-out) var(--d,0s) both paused}.t-scene.is-play .sys .a,.t-scene.is-play .sys .sys__old,.t-scene.is-play .sys .sys__new,.t-scene.is-play .sys .sys__beam,.t-scene.is-play .sys .sys__stub:after{animation-play-state:running}@keyframes sys-rise{0%{opacity:0;transform:translateY(10px)}to{opacity:1;transform:none}}@keyframes sys-in{0%{opacity:0;transform:translateY(5px)}to{opacity:1;transform:none}}@keyframes sys-out{0%{opacity:1}to{opacity:0}}@keyframes sys-run{0%{opacity:0;transform:translate(0)}15%{opacity:1}85%{opacity:1}to{opacity:0;transform:translateX(var(--run,9px))}}@keyframes sys-drop{0%{opacity:0;transform:translateY(calc(-1 * var(--leg)))}12%{opacity:1}88%{opacity:1}to{opacity:0;transform:translateY(0)}}@keyframes sys-lift{0%{opacity:0;transform:translateY(0)}12%{opacity:1}88%{opacity:1}to{opacity:0;transform:translateY(calc(-1 * var(--leg)))}}html:not(.js) .sys .sys__new{opacity:1}html:not(.js) .sys .sys__old{opacity:0}@media (prefers-reduced-motion:reduce){.sys :is(.a,.sys__old,.sys__new,.sys__beam),.sys .sys__col--l .sys__stub:after,.sys .sys__col--r .sys__stub:after{animation:none}.sys .sys__new{opacity:1}.sys .sys__old,.sys .sys__beam{opacity:0}}@media (width<=1080px){.sys{--row:74px;--stub:12px}.sys__map{grid-template-columns:minmax(0, 1fr) var(--stub) minmax(112px, 140px) var(--stub) minmax(0, 1fr)}}@media (width<=720px){.sys{--row:auto;gap:12px}.sys__kpis{grid-template-columns:1fr 1fr;gap:8px}.sys__kpis .sys__kpi:nth-child(3){grid-column:1/-1}.sys__kv{font-size:18px}.sys__map{grid-template-columns:1fr;gap:10px}.sys__spine,.sys__stub{display:none}.sys__core{order:-1}.sys__core:before,.sys__core:after{display:none}.sys__node{min-height:0}.sys__col{gap:8px}.sys__text{display:none}}@container sahne (width<=640px){.sys{--row:74px;--stub:12px}.sys__map{grid-template-columns:minmax(0, 1fr) var(--stub) minmax(112px, 140px) var(--stub) minmax(0, 1fr)}}@container sahne (width<=470px){.sys{--row:auto;gap:12px}.sys__kpis{grid-template-columns:1fr 1fr;gap:8px}.sys__kpis .sys__kpi:nth-child(3){grid-column:1/-1}.sys__kv{font-size:18px}.sys__map{grid-template-columns:1fr;gap:10px}.sys__spine,.sys__stub{display:none}.sys__core{order:-1}.sys__core:before,.sys__core:after{display:none}.sys__node{min-height:0}.sys__col{gap:8px}.sys__text{display:none}}
