.sys{grid-template-columns:minmax(300px,2fr) minmax(0,3fr);gap:9px;padding:0 24px 40px;display:grid}.sys-steps{border:1px solid var(--linec);flex-direction:column;display:flex}.sys-step{border:0;border-top:1px solid var(--linec);text-align:left;color:var(--fg);cursor:pointer;font:inherit;opacity:.5;background:0 0;grid-template-columns:36px 44px 1fr;align-items:start;gap:14px;padding:24px 20px;transition:opacity .45s cubic-bezier(.16,1,.3,1),background .45s;display:grid;position:relative}.sys-step:first-child{border-top:none}.sys-step.on{opacity:1;background:#1b161109}.sys-step:focus-visible{outline:1px solid var(--good);outline-offset:-1px}.sys-step .material-icons-outlined{color:var(--dimc);font-size:28px;line-height:1}.sys-step.on .material-icons-outlined{color:var(--fg)}.sys-step .huge{text-transform:none;letter-spacing:-.01em;font-size:clamp(20px,1.9vw,26px);display:block}.sys-step .read{margin-top:6px;display:block}.sys-bar{background:var(--good);width:0;height:2px;position:absolute;bottom:-1px;left:0}.sys-step.on .sys-bar{animation:linear forwards sysbar}.sys.hold .sys-step.on .sys-bar{width:100%;animation:none}@keyframes sysbar{0%{width:0}to{width:100%}}@media (prefers-reduced-motion:reduce){.sys-step.on .sys-bar{width:100%;animation:none}}.sys-desc{display:none}.sys-foot{border-top:1px solid var(--linec);margin-top:auto;padding:20px}.sys-view{border:1px solid var(--linec);background:#060606;border-radius:10px;min-height:560px;display:grid;position:relative;overflow:hidden}.sys-panel{opacity:0;pointer-events:none;grid-area:1/1;transition:opacity .7s cubic-bezier(.16,1,.3,1);position:relative}.sys-panel.on{opacity:1;pointer-events:auto}.sys-panel img,.sys-panel iframe{object-fit:cover;background:#000;border:0;width:100%;height:100%;display:block;position:absolute;inset:0}.sys-video{pointer-events:none;position:absolute;inset:0;overflow:hidden}.sys-video iframe{aspect-ratio:16/9;width:auto;min-width:100%;height:100%;position:absolute;top:50%;left:50%;transform:translate(-50%,-50%)}.sys-cap{letter-spacing:.14em;color:#f2eee6;text-shadow:0 1px 8px #0c0a08b3;pointer-events:none;justify-content:space-between;align-items:baseline;gap:16px;display:flex;position:absolute;bottom:36px;left:16px;right:16px}.sys-cap>span:first-child{text-overflow:ellipsis;white-space:nowrap;min-width:0;overflow:hidden}.sys-cap .sys-go{pointer-events:auto;color:var(--good);flex:none;text-decoration:none}.sys-cap .sys-go .arw{transition:transform .3s cubic-bezier(.16,1,.3,1);display:inline-block}.sys-cap .sys-go:hover .arw{transform:translate(6px)}@media (max-width:900px){.sys{grid-template-columns:1fr}.sys-steps{grid-template-columns:repeat(4,1fr);display:grid}.sys-step{border-top:0;border-left:1px solid var(--linec);text-align:center;grid-template-columns:1fr;justify-items:center;gap:8px;padding:16px 8px 14px}.sys-step:first-child{border-left:0}.sys-step .tech{display:none}.sys-step .material-icons-outlined{font-size:24px}.sys-step .huge{font-size:clamp(14px,4vw,18px)}.sys-step .read{display:none}.sys-desc{border-top:1px solid var(--linec);grid-column:1/-1;min-height:calc(4.8em + 40px);padding:18px 20px 22px;display:block}.sys-bar{bottom:0}.sys-foot{display:none}.sys-view{min-height:min(78vw,520px)}}.sys.idle .sys-step.on .sys-bar{width:0;animation:none}